JQuery

JQuery学习目标

使用JS操作DOM的时候，会遇到以下的一些缺点：

获取元素的方法太少且长，麻烦。
遍历伪数组很麻烦，通常要嵌套一大堆的for循环。
注册的事件会覆盖。
有兼容性问题。
实现动画很麻烦

jQuery初体验

$(document).ready(function () {
    $("#btn1").click(function () {
        //隐式迭代：偷偷的遍历，在jQuery中，不需要手动写for循环了，会自动进行遍历。
        $("div").show(200);
    });
    $("#btn2").click(function () {
        $("div").text("我是内容");
    });
});

使用jQuery的优点：

获取元素的方式非常的简单，而且非常的丰富
jQuery的隐式迭代特性，不再需要书写for循环语句。
使用jQuery完全不用考虑兼容性问题。
jQuery提供了一系列动画相关的函数，使用非常方便。
代码简单、粗暴。

没有对比，就没有伤害，有了对比，处处戳中要害。

JQuery是什么

jQuery是一个快速的、轻量的、功能丰富的js库。

jQuery的官网 http://jquery.com/

jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）

使用步骤
引包（引入js文件）<script src="jquery-1.11.1.js"></script>

入口函数

$(document).ready(function () {
});
$(function(){

});

功能实现

1
2
3

$("#btnShowDiv").click(function () {
 $("div").show(1000);
});

JQuery的版本

1.x版本：能够兼容IE678浏览器（最终版本1.12.4）
2.x版本：不兼容IE678浏览器（最终版本2.2.4）
3.x版本：不兼容IE678浏览器（jQuery目前正在更新的版本）
- jQuery目前正在更新的版本
- 3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）,3.x版本只是在原来的基础上增加了一些新的特性。

未压缩版和压缩版

jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。

jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

入口函数

入口函数的好处

等待文档加载完成，保证能够获取到元素（和window.onload会等待图片加载完）
形成了一个沙箱，防止全局变量污染。

入口函数的两种写法

1
2
3

$(document).ready(function(){});

$(function(){});

JQuery入口函数和 window.onload 的区别

window.onload 会等待页面所有内容加载完成后执行，包括图片；
JQuery的入口函数会等待页面所有内容加载完成后执行，但是不包括图片；
如果JQuery的入口函数需要图片的数据，$(window).load(function(){});
window.onload=function(){}; 会被后执行的 window.onload=function(){} 覆盖掉，用JQuery来注册load事件则不会覆盖。

JQuery对象和DOM对象

JQuery对象和DOM对象概念

DOM对象是通过JavaScript的方法获取到页面上的对象，不能使用JQuery的方法；
JQuery对象是通过JQuery方法获取到页面上的对象，不能使用DOM的方法；
JQuery获取到对象返回的是一个伪数组，内部存储的是DOM对象；

JQuery对象和DOM对象区别

JQuery和DOM对象的方法不能混用；

JQuery和DOM对象可以互相转换；

DOM对象转换成JQuery对象：$(DOM对象名) （联想：花钱）

JQuery对象转成DOM对象：$("div")[0]; $("div").get(0);

jQuery.Event.originalEvent jQuery的事件对象中用originalEvent对象用来存储DOM原始对象；

JQuery与JavaScript的区别

JavaScript是一门编程语言，jQuery仅仅是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。（联想记忆：不能扛着洗衣机去出差）

JQuery选择器

JQuery获取到对象返回的是一个伪数组；内部存储的是DOM对象；

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

CSS选择器

jQuery完全兼容css选择器

ID选择器：$("#id"); 获取指定ID的元素
类选择器：$(".class"); 获取同一类class的元素
标签选择器：$("div"); 获取同一类标签的所有元素
并集选择器：$("div,p,li"); 使用逗号分隔，只要符合条件之一就可。
交集选择器：$("div.redClass"); 获取class为redClass的div元素
子代选择器：$("ul>li"); 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器：$("ul li"); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

过滤选择器

这类选择器都带冒号:

:odd $("li:odd"); 获取到的是li元素中所有下标（索引号）为奇数的元素；
:even $("li:even"); 获取到的是li元素中所有下标（索引号）为偶数的元素；
:first $("li:firs"); 获取到的是第一个li元素；
:last $("li:last"); 获取到的是最后一个li元素；
:eq(index) $("li:eq(index)"); 获取到的是li元素中下标（索引号）的元素；参数是字符串，再使用index的时候注意拼串；

筛选选择器

JQuery中的方法；筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

children(selector) $("ul").children("li"); 获取ul下的所有子代元素li元素；参数可以不写，获取的是所有子元素；
find(selector) $("ul").find("li"); 获取ul下所有的后代元素li元素；参数可以不写，获取的是所有后代元素；
siblings(selector) $("#li").siblings("li"); 获取当前li元素除自己以外所有兄弟li元素；参数不写，获取的是除自己外所有的兄弟元素；
parent() $("li").parent(); 获取的是父级元素；
next() $("#li").next(); 获取的是当前元素的下一个兄弟元素；
nextAll() $("#li").nextAll(); 获取的是当前元素的下面所有的兄弟元素；
prev() $("#li").prev(); 获取的是当前元素的上一个兄弟元素；
prevAll() $("#li").prevAll(); 获取得是当前元素的上面所有兄弟；顺序是反向的–距离当前元素最近的开始获取；
eq(index) $("li").eq(index); 获取的是从下标（索引号）index的元素；参数可以是变量，数字，可以不是字符串；返回的是一个JQuery对象；
index() $("#li").index(); 获取的是当前元素在同一个父级元素下的所有兄弟元素的下标（索引号）；返回一个数字；
get() $("li").get(index); 获取到的是下标（索引号）index的元素；返回的是DOM对象；
parents() $("li").parents("ul"); 获取所有父级ul元素，不传参数是所有父级元素及祖先元素；

mouseover与mouseenter

mouseover / mouseout 当经过当前事件对象和子元素时都会触发，会反复的触发；（例如大盒子包裹小盒子时）从小盒子移动到大盒子时会再次触发；

mouseover / mouseenter 只有经过当前事件对象时才会触发，经过子元素时也不会触发；

CSS操作

功能：设置或者修改样式，操作的是style样式；

$("li").css(name,value); 操作单个style样式；
$("li").css({name:value}); 操作多个style样式；参数是一个对象；
$("li").css(name); 获取元素生效的样式；和getComputedStyle属性一样；

class操作

功能：对元素的类进行操作；

addClass(name); 为元素添加一个类；效果和添加的先后顺序无关，和css的权重有关；同时添加多个类，中间用空格隔开；
removeClass(name); 移除元素的一个类；可以同时移除多个类，类名用空格隔开，和书写顺序无关；
hasClass(name); 判断元素是否有这个类，返回值是布尔类型；
toggleClass(name); 切换类，如果有这个类，就删除这个类；如果没有这个类，就添加这个类；

JQuery属性操作

功能：操作元素标签属性；

attr() 方法：操作的是元素标签内的属性；和（setAttribute getAttribute removeAttribute）类似；

attr(name,value); 操作一个属性和值；
attr({name:value}); 操作多个属性和值；参数是一个对象；
attr(name); 获取一个属性值；
removeAttr(name); 移除一个属性和值；

prop() 方法：对于选中属性来说，需要使用prop()方法来获取；这类属性是布尔类型的；

prop("checked",true); 设置选中属性；
prop("checked"); 获取选中属性的值，返回值是布尔类型；

//设置属性
$(":checked").prop("checked",true);
//获取属性
$(":checked").prop("checked");//返回true或者false

在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。

布尔类型的属性筛选选择器；功能：用来匹配某些选中属性，返回值是数字，可以用来判断是否全选；

:checked
:selected
:disabled

//设置属性
$(":checked").prop("checked",true);
//获取属性
$(":checked").prop("checked");//返回true或者false

JQuery动画

三种基本动画

显示隐藏动画

show(); 显示
hide(); 隐藏
toggle(); 切换，如果显示就隐藏，如果隐藏就显示；
参数1：speed，动画执行的时间，可以不设置参数，默认为0；
参数2：callback，回调函数，动画执行完之后调用的函数，可以不设置；

滑入滑出/卷帘门

slideDown(); 向下（高度height属性）显示；
slideUp(); 向上（高度height属性）隐藏；
slideToggle(); 切换，如果显示就隐藏，如果隐藏就显示；
参数1：speed，动画执行的时间，不设置默认为400（单位毫秒）；
参数2：callback，回调函数，动画执行完之后调用的函数，可以不设置；

淡入淡出

fadeIn(); 淡入显示；
fadeOut(); 淡出隐藏；
fadeToggle(); 切换，如果显示就隐藏，如果隐藏就显示；
参数1：speed，动画执行的时间，不设置默认为400（单位毫秒）；
参数2：callback，回调函数，动画执行完之后调用的函数，可以不设置；

speed: 速度，毫秒值,表示动画执行的时间；可以是固定的字符串 "fast"=200 "normal"=400 "slow"=600

自定义动画

animate(); 自定义设置动画效果；
参数1：是一个对象，对象中存放需要做动画的效果属性；
参数2：speed，动画执行的时间，默认值400；
参数3：easing，动画方式，有两种，默认值：swing，摇摆，秋千；linear，匀速动画；
参数4：callback，回调函数，动画执行完之后调用的函数，可以不设置；

动画的队列和停止动画

动画队列：JQuery每次触发的动画效果会存入到一个动画队列中，依次执行；

stop(clearQueue,jumpToEnd); 停止动画方法

参数1：clearQueue，布尔类型，是否清除动画队列，默认值是false；true是立即停止动画，并清除动画队列；
参数2：jumpToEnd，布尔类型，是否到达当前动画最终效果，默认值是false；true是立即停止动画，并到达当前动画最终效果；

jQuery节点操作

jQuery创建节点

$(); 创建节点，识别字符串类型的html标签；$("<span>这是一个span元素</span>");

jQuery添加节点

A.append(B); 把B节点添加到A的子元素最后面；appendChild() B支持直接写字符串的html标签
B.appendTo(A); 把B节点添加到A的子元素最后面；A支持直接写选择器
A.prepend(B); 把B节点添加到A的子元素最前面；
B.prepend(A); 把B节点添加到A的子元素最前面；
B.before(A); 把B节点添加到A节点的前面，兄弟元素；
B.after(A); 把B节点添加到A节点的后面，兄弟元素；

jQuery删除节点

remove(); 删除自己，自杀效果；事件一起清理；
empty(); 清空所有子节点；效果相当于 innerHtml=""; empty();会把所有子元素相关事件一起清空；

克隆节点

A.clone(); 克隆A节点，参数默认是false，效果是深复制；true，效果是深复制+事件复制；

标签属性和DOM属性

标签属性是写在标签内的固有属性；

DOM属性是在JavaScript中生成一个对象，和标签内部的一些固有属性一一对应的；

有些属性是比较特殊的，value、disabled、selected、checked等属性是设置这个标签的默认值，对应在DOM对象中是通过这个默认值获取到的值；比如三种默认选择对应的是布尔类型；

attr() 方法：内部通过attribute系列封装，jQuery中的attr方法操作的其实标签内的属性；对于特殊属性来说，使用attr()方法修改标签内的属性值，对应的DOM属性值，在之前获取的值不会改变；

prop() 方法：内部通过DOM对象封装的，操作的是对应的DOM对象中的值；对于特殊属性来说，使用prop()方法修改的是DOM对象中的值，而不是标签内的属性值；

对于id title src href alt 这些属性来说，attr和prop都能用，修改了也会同步到标签内；

如果是标签内部的自定义属性，aa="aa"、bb="bb"、cc="cc"等，只能用attr()方法来修改，直接修改标签内属性值；

如果是disabled、selected、checked（三种布尔类型）、value等都需要使用prop()方法来修改DOM对象中的值，此时不会修改标签内的值；如果使用attr来修改标签内部的值，则不会对DOM对象中当初获得的值有改变；

JQuery特殊属性

width方法和height方法

width(); / height(); 获取元素的width / height值，不传参数-获取值，传参数-设置属性
innerWidth(); / innerHeight(); 获取元素width / height +padding值，不能设置属性；
outerWidth(); / outerHeight(); 获取元素width / height + padding + border值，不能设置属性；默认参数false
outerWidth(true); / outerHeight(true); 获取元素width / height + padding + border + margin值，不能设置属性；
$(window).width(); / $(window).height(); 获取可视区的width / height值；

scrollTop和scrollLeft

$(window).scrollTop(); 获取垂直滚动条的距离；
$(window).scrollLeft(); 获取水平滚动条的距离；

如果要使用返回顶部的动画效果，只能通过修改html的scrollTop值；$("html").animate({scrollTop:0}, 1000);

offset方法与position方法

position(); 获取的是当前元素对于有定位的父级元素的距离值，返回一个对象{top:xx,left:xx}
offset(); 获取的是当前元素对于body的距离值，返回一个对象{top:xx,left:xx}

val方法

val(); val方法用于设置和获取表单元素的值，例如input、textarea的值；
不传参数就是获取value值；传参数就是设置value值；

`text()`和`html()`

text(); 和 innerText 差不多；不识别标签，会对标签转义；
html(); 和 innerHtml 差不多；识别标签，
不传参数获取值，传参数修改值；

JQuery事件机制

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

简单注册事件：直接使用事件方法；

bind / unbind

$("btn")bind("click",function(){}); 绑定事件；
$("btn")unbind("click"); 解绑事件；
缺点：不支持动态事件绑定

delegate / undelegate

注册委托事件–对于动态生成的动向也能注册动态注册事件
$(".parentBox").delegate("p", "click", function(){}); 为 .parentBox 下面的所有的p标签绑定事件
$(".parentBox").undelegate("p",click"); 为 .parentBox 下面的所有的p标签解绑click事件

on

on注册事件推荐使用

$(selector).on("事件","标签/选择器",data,function(){});

参数1：”事件”，要注册的事件名；
参数2：”标签/选择器”，这个参数不写的是给自己selector注册事件，如果写了参数是给子元素”标签/选择器”注册事件（委托事件），父元素给子元素注册
参数3：data，在注册时传递进event内的一个对象（传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）），基本不用
参数4：function(){}，事件触发执行的函数；

off解绑事件；

$(selector).off(); 解绑所有selector的事件；
$(selector).off("click"); 解绑所有selector的click事件；
$(selector).off("click","**"); 解绑所有selector的委托事件click事件；
$(selector).off("click","p"); 解绑所有selector的p委托事件click事件；

触发事件

$(selector).click(); 触发 click事件
$(selector).trigger("click"); 触发 click事件

jQuery事件对象

event.stopPropagation() 阻止事件冒泡行为
event.preventDefault() 阻止浏览器默认行为
return false 既能阻止事件冒泡，又能阻止浏览器默认行为。
event.offsetX 和 event.offsetY 获取到的是鼠标在对应的注册事件对象中的位置；

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

screenX 和 screenY 对应屏幕最左上角的值
clientX 和 clientY 距离页面左上角的位置（忽视滚动条）
pageX 和 pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
event.keyCode 按下的键盘代码
event.data 存储绑定事件时传递的附加数据
event.stopPropagation() 阻止事件冒泡行为
event.preventDefault() 阻止浏览器默认行为
return false 既能阻止事件冒泡，又能阻止浏览器默认行为。

JQuery补充说明

迭代：遍历

隐式迭代

在执行设置性操作的时候，jq会自动的遍历内部的元素，给每一个元素都设置上相同的值。不需要我们手动遍历的；

在执行获取性操作的时候，也不用我们自己遍历，他会返回第一个元素对应的值。

`each()`方法

相当于显式的for循环；当我们需要不同的样式属性等，可以使用each()方法来循环遍历

$("li").each(function (index, element) {});

函数参数1：所有匹配元素的下标（索引号）；
函数参数2：对应当前的DOM兑现，可以不设置，用 $(this) 替代

链式编程

链式编程：在使用jQuery对元素设置属性的时候，可以连续调用jQuery方法来设置。每次设置完属性后重新会返回这个对象；
设置属性：jQuery提供了链式编程，可以连续调用方法设置，但是要注意如果找到了父级，兄弟，子元素等元素的时候，返回的对象就变了；不能继续使用链式编程；
end() 方法：对于使用当前元素找到了父级，兄弟，子元素等元素的时候，会把上一次的对象存到prevObject对象中，jQuery封装了end()方法，调用这个方法，返回上一次的对象；
- end(); 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
获取属性：jQuery获取属性，返回的是对象的属性值，而不是当前对象了；不能使用链式编程；

多库共存

如果多个js文件使用了全局变量$，jQuery提供了释放$的方法，必须保证，jQuery文件是最后引入的，覆盖了前面所有js文件的$;

$.noConflict(); jQuery释放$方法，在释放$的时候会重新返回jQuery，可以使用新的变量来接收jQuery；

var c = $.noConflict(); 释放$的控制权,并且把$的能力给了c

jQuery插件

jQuery封装了一些核心功能，不可能包含了所有的方法，如果我们需要其他的方法，可以通过jQuery插件来扩展；

这些jQuery插件是依赖于jQuery的，先引入jQuery文件，在引入扩展插件js文件（需要css的引入css），在使用扩展插件的方法；

封装jQuery插件，把方法加到jQuery的原型上；

JQuery

JQuery学习目标

JQuery是什么

JQuery的版本

入口函数

JQuery对象和DOM对象

JQuery对象和DOM对象概念

JQuery对象和DOM对象区别

JQuery与JavaScript的区别

JQuery选择器

CSS选择器

过滤选择器

筛选选择器

mouseover与mouseenter

CSS操作

class操作

JQuery属性操作

JQuery动画

三种基本动画

显示隐藏动画

滑入滑出/卷帘门

淡入淡出

自定义动画

动画的队列和停止动画

jQuery节点操作

jQuery创建节点

jQuery添加节点

jQuery删除节点

克隆节点

标签属性和DOM属性

JQuery特殊属性

width方法和height方法

scrollTop和scrollLeft

offset方法与position方法

val方法

text()和html()

JQuery事件机制

bind / unbind

delegate / undelegate

on

触发事件

jQuery事件对象

JQuery补充说明

迭代：遍历

each()方法

链式编程

多库共存

jQuery插件

`text()`和`html()`

`each()`方法