jQuery 第二天

1.jQuery的属性操作

1.普通属性和表单属性
(类比原生js中set/get/removeAttribute())
1.普通属性操作
a。获取属性和设置属性值：attr（）；一个参数是获取，两个参数是设置；
b。删除属性值：removeAttr（）；一个参数；返回值和操作值为string值
2.表单属性；
a。获取和设置属性值；prop（）；
一个参数获取，两个参数设置；
b。删除属性值（几乎不用）removeProp（）；一个参数；返回值和操作值为boolean值
2.值和内容
val（）；text（）；html（）；无参获取，带参赋值；
原生js中是：value；innerText；innerHTML；
1.val（）方法（jQuery） ===value属性（js）；
2.text（）方法（jQuery）===innerText属性（js）；
3.html（）方法（jQuery）===innerHTML属性（js）；

2.尺寸和位置操作

1.尺寸操作
检测盒子的宽高：css(宽/高); 带单位;
检测盒子的宽高：height();width(); 不带单位;
2.位置操作
常见3种位置操作：offset()、position()、scrollTop/Left()
1.offset() 获取或设置元素相对于文档的位置
获取值(值为对象，键值对)
赋值;offset({top:100});通过添加relative控制；
2.position() 获取相对于其最近的具有定位的父元素的位置(都没有以整个页面为基准)
获取值(值为对象，键值对)
无法赋值;
3.scrollTop/Left() 获取页面被卷去的部分;赋值让页面滑动
获取值( scroll().top/left )
赋值：window.scrollTo(x,y);
拓展
animate();也可以; scrollTop;
window/document/html不行;
通过设置body标签的scorllTop属性也可让页面跳转;（谷歌）
通过设置html标签的scorllTop属性也可让页面跳转;（火狐）
电梯导航：jQuery实现：用offset().top获取值;
电梯导航：jQuery实现：用$(“body,html”).animate({“scrollTop”: num})赋值;

3.jQuery事件机制

1.事件绑定（4种）
1.简单绑定：
优点：简单; 缺点：无法事件委托，无法多事件绑定;
2.bind（多个事件名，fn）
优点：多事件绑定；缺点：无法事件委托；
3.父节点.delegate（”选择器”，”多个事件”，fn）；
优点：多事件绑定，事件委托；缺点：兼容性不太好，无法普通形式绑定事件;
4.两种方法：（推荐使用）
1、父节点.on（”事件”，”选择器”，data，fn）；
2、节点.on（事件，fn）；
2.事件解绑（3种）
事件解绑有三种方法，几乎都可以解绑第一种(但是要求绑定的时候一定要用函数名)
1..unbind（）；解绑；
2..undelegate（）；解绑；无法解绑所有；
3.off（）；解绑；无法解绑所有；
3.事件触发（3种）
事件触发：click（）/trigger（）/triggerHandler（）；
click（）；页面加载的时候就打印一次；
trigger（）；触发浏览器默认行为；
triggerHandler（）；不触发浏览器默认行为；
4.事件对象
jQuery中的事件对象和DOM中的事件对象几乎相同;(jQuery事件对象兼容性好) event.data 传递给事件处理程序的额外数据
event.currentTarget 等同于this，当前DOM对象
event.pageX 鼠标相对于文档左部边缘的位置
event.target 触发事件源，不一定===this
event.stopPropagation()； 阻止事件冒泡
event.preventDefault(); 阻止默认行为(非浏览器默认行为)
event.type 事件类型：click，dbclick…
event.which 鼠标的按键类型：左1 中2 右3
event.keyCode 键盘按键代码

4.jQuery 补充

1.连式编程和end( );
连式编程的底层原理：return this;
end();可以往回退一格;
console.log($(“div”).children(“ul”).children(“li”).children(“a”).end().end().end());
2.隐式迭代和each( )
jQuery能够隐式迭代说明底层应用了隐藏的for循环;
我们使用jQuery也可以隐式循环; each();获取的元素是DOM元素;
进行无规则，或者不一样的操作需要隐式遍历
3.多库共存
多库共存，就是指，可以有多个jQuery版本同时存在;
打印版本
console.log(.fn.jquery);让高版本放弃某个符号的使用权;.noConflict();//让高版本放弃的使用权;放弃和jQuery两个方法名的使用权;var lvchao = $.noConflict(true);

5.插件的使用

1.修改元素背景色
jQuery本身的animate方法无法实现颜色渐变;所以要依靠外部插件;

<script src="jquery-1.11.1.js"></script>    <script src="jquery.color.js"></script>    <script>        $(function () {               //需求：点击盒子，让盒子移动，而且背景色渐变;         $('div').on("click", function () {                var json = {"left": 500,"background-color":"red"};            $("div").animate(json,2000);            })        })    </script>      <div></div>

2.懒加载

<script src="jquery-1.11.1.js"></script>    <script src="jquery.lazyload.js"></script>    <script>        $(function () {            $("img.lazy").lazyload();        })    </script>    <div>    你好1<br>    你好2<br>    你好3<br></div><img class="lazy" data-original="03-旋转轮播图/images/slidepic1.jpg"/>

3.整页滑动

    <link rel="stylesheet" href="css/jquery.fullPage.css"/>    <script src="jquery-1.11.1.js"></script>    <script src="jquery.fullPage.js"></script>    <script>        $(function () {            var json = {                "sectionsColor":["red","yellow","blue","green"],                'navigation': true,            };        $("#dowebok").fullpage(json);        })    </script>    <div id="dowebok">        <div class="section">            <h3>第一屏</h3>            <p>fullPage.js — 项目导航演示</p>        </div>        <div class="section">            <h3>第二屏</h3>            <p>滑动1</p>        </div>    </div>

4. UI模块插件

  <script src="jquery-1.11.1.js"></script>    <script src="jquery-ui.min.js"></script>    <script>        jQuery(function () {            //1.让模块可以移动;            //2.让模块可以改变大小;            //3.让模块可以改变位置;            //1.让模块可以移动;            $(".drag-wrapper").draggable(                {"handle":".drag-bar"}              //2.让模块可以改变大小;            ).find(".resize-item").resizable(                    {"handles":"s"}              //3.让模块可以改变位置;            ).find(".sort-item").sortable(                    {"opacity":0.2}            );        });    </script>    <div class="drag-wrapper">    <div class="drag-bar">可拖动、排序、变形的新闻模块</div>    <div class="resize-item">        <div class="sort-wrapper">            <ul class="sort-item">                <li>这是第1条新闻!</li>                <li>这是第2条新闻!</li>                <li>这是第3条新闻!</li>                <li>这是第4条新闻!</li>                <li>这是第5条新闻!</li>                <li>这是第6条新闻!</li>                <li>这是第7条新闻!</li>                <li>这是第8条新闻!</li>                <li>这是第9条新闻!</li>                <li>这是第10条新闻!</li>            </ul>        </div>    </div></div>

5.按钮变色

    <script src="jquery-1.11.1.js"></script>    <script src="plugins/jquery-lvchao-min.js"></script>    <script>        $(function () {            //想要制作一个插件实现两个功能;            //1.点击哪个按钮，都设置所有按钮文字颜色为蓝色;            //2.点击哪个按钮，当前按钮文字变成红色;            //测试            $("button").click(function () {                //1.点击哪个按钮，都设置所有按钮文字颜色为蓝色;                $("button").changeColor();                //2.点击哪个按钮，当前按钮文字变成红色;                $.changeSelfColor(this,"red");            })        })    </script>    <button>按钮1</button><button>按钮2</button><button>按钮3</button>

6.tab栏测试

<script src="jquery-1.11.1.js"></script>    <script src="plugins/jquery-tab.js"></script>    <script>        jQuery(window).ready(function () {            //需求：鼠标进入哪个li，该li就应该添加active类;对应索引值的div就应该添加selected类;其他的去除;            $(".wrapper").tab();        });    </script>     <div class="wrapper">        <ul class="tab">            <li class="tab-item active">国际大牌<span>◆</span></li>            <li class="tab-item">国妆名牌<span>◆</span></li>            <li class="tab-item">清洁用品<span>◆</span></li>            <li class="tab-item">男士精品</li>        </ul>        <div class="products">            <div class="main selected">                <a href="###"><img src="images/guojidapai.jpg" alt=""/></a>            </div>            <div class="main">                <a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a>            </div>            <div class="main">                <a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a>            </div>            <div class="main">                <a href="###"><img src="images/nanshijingpin.jpg" alt=""/></a>            </div>        </div>    </div>