jQuery总结

一.jQuery和js的关系

jQuery就是一个js库。

jQuery的入口函数：$(function(){}); 或者 $(document).ready(function(){});
js入口函数指的是：window.onload = function() {};

jQuery === $，$ 在jQuery中就是一个函数，根据传入参数类型的不同，分别进行不同的处理，来实现不同的功能。

jQuery对象和DOM对象的相互转换
DOM对象（也叫js对象）：使用js操作DOM返回的结果。
jQkuery对象：使用jQuery提供的操作DOM的方法返回的结果。
两者的区别：js对象只能调用js的方法，jquery方法只能调用jquery的方法

DOM对象转换成jQuery对象：
var $btn1 = $(btn); 此时就把DOM对象btn转换成了jQuery对象$btn1

jQuery对象转换成DOM对象：
第一种方式var btn1 = $btn[0];
第二种方式var btn2 = $btn.get(0);

二.jQuery选择器

基本选择器、层级选择器同js。

基本过滤选择器

符号(名称)	说明
:first	选取第一个元素
:last	选取最后一个元素
:not(selector)	选取不是这个元素的其他元素
:eq(index)	选择索引号为index的一个元素，index从0开始
:odd	选择索引号为奇数的所有元素，index从0开始
:even	选择索引号为偶数的所有元素，index从0开始
:gt(index)	选取索引大于index的元素
:lt(index)	选取索引小于index的元素
:animated	选取当前正在执行动画的所有元素
:focus	选取当前获取焦点的元素

筛选选择器

符号(名称)	说明
find(selector)	查找指定元素的所有后代元素（子子孙孙）
children()	查找指定元素的直接子元素（亲儿子元素）
siblings()	查找所有兄弟元素（不包括自己）
:parent()	查找父元素（亲的）
:nth-child(index/even/odd/equation)	选取父元素下的第index个子元素或者奇偶元素，index从1算起
:first-child	获取个父元素的第一个子元素
:last-child	选取父元素的最后一个子元素
:eq(index)	查找指定元素的第index个元素，index是索引号，从0开始
index()	获取指定元素的索引号（从0开始的）
prevAll()	获取指定元素之前的所有兄弟元素
nextAll()	获取指定元素之后的所有兄弟元素

内容过滤选择器

符号(名称)	说明
:contains(text)	选取含有文本内容为“text”的元素
:empty	选取不包含子元素或者文本的空元素
:has(selector)	选取含有选择器所匹配的元素的元素
:parent()	选取含有子元素或者文本的元素

可见性过滤选择器

符号(名称)	说明
:hidden	选取所有不可见的元素
:visible	选取所有可见的元素

属性过滤选择器

符号(名称)	说明
[ attribute ]	选取拥有此属性的元素
[ attribute = value ]	选取属性的值为value的元素
[ attribute != value ]	选取属性的值不等于value的元素
[ attribute ^= value ]	选取以属性的值value开始的元素
[ attribute $= value ]	选取属性的值以value结束的元素
[ attribute *= value ]	选取属性的值含有value的元素
[ attribute = value ]	选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符‘-’）的元素

三.样式操作

1、样式属性操作
.css()

• 作用：设置或获取元素的样式属性值
• 设置单个样式：$(selector).css(“color”, “red”);
• 设置多个样式：

$(selector).css({“color”: “red”, “font-size”: “30px”})
var cssStyle = {“color”: “red”, “font-size”: “30px”};$(selector).css(cssSTyle);

• 获取样式属性操作：$(selector).css(“font-size”);

2、类操作

• 添加类样式：$(selector).addClass(className) 为指定元素添加类classNam
• 移除类样式：

$(selector).removeClass(className) 为指定元素移除类 className
$(selector).removeClass(); 不指定参数，表示移除被选中元素的所有类

• 判断有没有类样式：

 $(selector).hasClass(calssName) 判断指定元素是否包含类 className

• 切换类样式：

$(selector).toggleClass(className) 为指定元素切换类，该元素有类则移除，没有指定类则添加。

四.jQuery节点操作

1、操作元素节点

（1）动态创建元素

var spanNode = $(“<span>我是一个span元素</span>”);

（2）添加元素
①append() 参数jQuery对象

  $(selector).append($node);// 在$(selector)中追加$node

作用：在被选元素的最后一个子元素（或内容）后面插入内容（页面中存在或者创建出来的元素都可以，如果是页面中存在的元素，那么调用append()后，会把这个元素从原先的位置移除，然后再插入到新 的位置。如果是给多个目标追加一个元素，那么append()方法的内部会复制多份这个元素，然后追加到多个目标里面去。
$(selector).append('<div></div>');// 在$(selector)中追加div元素，参数为htmlString

②appendTo()

$(selector).appendTo(node);把$(selector)追加到node中去，

③prepend()

$(selector).prepend(node);作用：在元素的第一个子元素前面追加内容或节点

④after()

$(selector).after(node);作用：在被选元素之后，作为兄弟元素插入内容或节点

⑤before()

$(selector).before(node);作用：在被选元素之前，作为兄弟元素插入内容或节点

html创建元素

• ①设置内容，参数为普通字符串
• ②创建元素，如果传入的是符合html规则的字符串，就会创建出相应的元素
  $(selector).html(‘<span>这是p标签</span>’);动态创建元素
• ③获取内容$(selector).html(); 获取html内容，有什么返回什么，调用这个方法，首先会清空原来的内容，然后再设置新的内容。

（3）清空元素
$(selector).empty();清空指定元素的所有子元素，没有参数
$(selector).html(“”) 与 $(selector).remove();都会把自己（包括所有内部元素）从文档中删除掉

（4）复制元素
(selector).clone();复制$(selector)所匹配到的元素，返回值为复制的新元素

推荐使用html(“”)方法来创建元素或者html(“”)清空元素

2、操作form表单

（1）属性操作
①设置属性：

$(selector).attr("title", ''美女");参1：要设置的属性名称，参2：属性值，参2不存在返回属性对应的值

$(selector).prop(); 参2不存在返回false，用法和attr 一样，设置input和button的disabled属性，以及checkbox的checked属性 、selected属性，这几种动态改变的属性必须用prop

②获取属性：

$(selector).attr(“title”);参数：要获取的属性的名称，返回要获取的属性对应的值
此时，返回指定属性的值

③移除属性：

$(selector).removeAttr(“title”); 参数为：要移除的属性的名称

④：selected 选择selected中被选中的元素
注意：设置selected、checked、disabled要使用.prop()方法。

（2）值和内容
①val()方法：
作用：设置或返回表单元素的值，例如：input,select,textarea的值
$(selector).val();// 获取匹配元素的值，只匹配第一个元素
$(selector).val(“具体值”);// 设置所有匹配到的元素的值

另外：val()能使select、checkBox、radio相应的选项被选中 val('上海 ');

②text() 方法:
作用：设置或获取匹配元素的文本内容
$(selector).text();//获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串）
$(selector).text(“内容”);//参数表示要设置的文本内容，会清空原有内容

3、尺寸位置操作
（1）高度操作height() ： 作用：设置或获取匹配元素的高度值

$(selector).height(200);//带参数表示设置高度		
$(selector).height();//不带参数获取高度

（2）宽度操作width() ： 作用：设置或获取匹配元素的宽度值

(selector).width(200);//带参数表示设置宽度   
$(selector).width();//不带参数获取宽度

（3）坐标值操作
①offset() 作用：获取或设置元素相对于文档左上角的位置
$(selector).offset();// 无参数表示获取，返回值为：{top:num,left:num}，值是相对于document的位置
$(selector).offset({left:100, top: 150});// 设置，参数数值类型不带单位，如果没有定位，会设置position：relative，如果有非static，则不会设置，但会把原来的值给覆盖掉

注意：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative

②scrollTop() 作用：获取或者设置元素垂直方向滚动的位置

$(selector).scrollTop();// 无参数表示获取偏移
$(selector).scrollTop(100);// 有参数表示设置偏移，参数为数值类型

对scrollTop的理解：
垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。
如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条，那么这个距离为0

③scrollLeft() 作用：获取或者设置元素水平方向滚动的位置

$(selector).scrollLeft(100);

五.jQuery动画

1、显示动画show()，隐藏动画hide()

参数一:可以是数值类型或者字符串类型
参数二:动画执行完后立即执行的回调函数

2、滑入滑出动画
（1）滑入动画效果

$(selector).slideDown(speed,callback);默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）
（2）滑出动画效果,让元素以上拉动画效果隐藏起来

 $(selector).slideUp(speed,callback);

（3）滑入滑出切换动画效果

 $(selector).slideToggle(speed,callback);

3、淡入淡出动画
（1）淡入动画效果

 $(selector).fadeIn(speed, callback);

（2） 淡出动画效果
$(selector).fadeOut(1000);
（3）淡入淡出切换动画效果,通过改变不透明度，切换匹配元素的显示或隐藏状态

 $(selector).fadeToggle('fast',function(){});

（4）改变不透明度到某个值
与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的。
作用：调节匹配元素的不透明度

 $(selector).fadeTo(1000, .5); 参1：时长，参2：不透明值、 0全透，1全不透

4、自定义动画
注意：所有能够执行动画的属性必须只有一个数字类型的值。

$(selector).animate({params},speed,callback);

作用：执行一组CSS属性的自定义动画
参1：要执行动画的CSS属性（必选）
参2：执行动画时长（可选）
参3：动画执行完后立即执行的回调函数（可选）

5、stop()停止动画

$(selector).stop(clearQueue,jumpToEnd);

参1：是否清空所有的后续动画
参2：是否立即执行完当前正在执行的动画

当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。

注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。

六.jQuery事件机制

jQuery的事件机制，包括了：事件绑定、事件解绑、事件触发。
事件发展历程：简单事件绑定–>bind()阶段—>delegate()委托阶段—>on()阶段

1、简单事件绑定

click() 			单击事件
mouseenter() 	鼠标进入事件
mouseleave()		鼠标离开事件
dbclick() 		双击事件
change()    		改变事件，如：文本框值改变，下拉列表值改变等
focus() 			获得焦点事件
blur() 			失去焦点事件
keydown() 		键盘按下事件

2、on方式

语法：$(selector).on(events,[selector],[data],function());

第一个参数：events，绑定事件的类型
第二个参数：selector, 执行事件的后代元素
第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用(一般不用)
第四个参数：function()，事件处理函数

绑定多个事件

$(selector).on(“click mouseenter”, function(){});//表示给$(selector)匹配的元素绑定单击和鼠标进入事件

2、事件解绑 off
off解绑on方式绑定的事件。

$(selector).off(); 解绑匹配元素的所有事件
$(selector).off(“click”); 解绑匹配元素的所有click事件,自身的和动态的。
$(selector).off(“click”,“..”); 参1：要解绑的事件，参2：解绑动态创建的事件。自身绑定的事件还在

3、事件触发
事件触发的时候只会触发当前元素被执行的事件，单击按钮触发div的单击事件
1、$(selector).click(); 简单事件触发，触发 click事件
2、trigger()方法触发事件，触发浏览器的默认行为,$(selector).trigger(“click”);参数：要触发事件的名称

$("button").on("click",function(){
	  $("div").trigger("click");
});

3、triggerHandler触发 事件响应方法，不触发浏览器行为
$(selector).triggerHandler(“focus”);比如:文本框获得焦点是浏览器的默认行为

4、事件对象
$(function(event){}): event 事件对象

event.data 				传递给事件处理程序的额外数据
event.delegateTarget	代理绑定事件的元素
event.currentTarget 	绑定事件的元素，等同于this，this：哪个元素触发的事件，this就指向这个元素
event.target 			触发事件的元素，不一定===this
event.pageX 			鼠标相对于页面的位置
event.clientX 			距离浏览器的位置	
event.screenX			相对于电脑屏幕
event.offsetX			相对于定位的父元素，或者body
event.stopPropagation()；	阻止事件冒泡
event.preventDefault(); 	阻止浏览器默认行为
event.type 				事件类型：click，dbclick…
event.which 				鼠标的按键类型：左1 中2 右3
event.keyCode			键盘按键代码

事件执行的顺序：
如果是单击的按钮，首先会触发按钮的简单事件，然后再触发委托事件

阻止事件冒泡：
event.stopPropagation() 阻止事件冒泡
return false; 同时具有阻止冒泡和阻止默认行为的功能------尽量少用

5、链式编程
链式编程代码示例：

$(“li”).parent(“ul”).parent(“div”).siblings(“div”).children(“div”).html(“内容”);

链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的一次状态
delay():延迟

6、隐式迭代

设置操作$(“div”).css(“color”, “red”);
获取操作$(“div”).css(“color”); // 返回第一个元素的值

隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，不用我们再进行循环
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

each方法
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。如果要对每个元素做不同的处理，这时候就用到了each方法。
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

$(selector).each(function(index,element){});
参1:当前元素在所有匹配元素中的索引号,参2：当前元素（DOM对象）