jQuery介绍
1.jQuery是一个轻量的、兼容多浏览器的javaScript库。2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化javaScript编程。它的宗旨就是：'Write less,do more.'jQuery版本1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$('#i1').html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对象var variable = DOM对象$variable[0] //jQuery对象转成DOM对象
拿上面的例子，jQuery对象和DOM对象的使用：
$("#i1").html();//jQuery对象可以使用jQuery的方法$("#i1")[0].innerHTML;// DOM对象使用DOM的方法
查找标签
1、选择器id选择器：$('#id')标签选择器：$('tagName')class选择器：$('.className')配合使用：$('div.c1') //找到c1 class类的div标签所以元素选择器：$('*')组和选择器：$('#id,.className,tagName')层级选择器：
x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）$("x > y");// x的所有儿子y（儿子）$("x + y")// 找到所有紧挨在x后面的y$("x ~ y")// x之后所有的兄弟y 基本筛选器：
:first // 第一个:last // 最后一个:eq(index)// 索引等于index的那个元素:even // 匹配所有索引值为偶数的元素，从 0 开始计数:odd // 匹配所有索引值为奇数的元素，从 0 开始计数:gt(index)// 匹配所有大于给定索引值的元素:lt(index)// 匹配所有小于给定索引值的元素:not(元素选择器)// 移除所有满足not条件的标签:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子：
$("div:has(h1)")// 找到所有后代中有h1标签的div标签$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签$("li:not(.c1)")// 找到所有不包含c1样式类的li标签$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
属性选择器：
[attribute][attribute=value]// 属性等于[attribute!=value]// 属性不等于
// 示例$("input[type='checkbox']");// 取到checkbox类型的input标签$("input[type!='text']");// 取到类型不是text的input标签
表单常用筛选：
:text:password:file:radio:checkbox:submit:reset:button$(':checkbox') //找到所有的checkbox
:enabled:disabled:checked:selected
例子：
找到可用的input标签
$("input:enabled") // 找到可用的input标签
找到被选中的option：
$(":selected") // 找到所有被选中的option 筛选器
下一个元素：
$("#id").next()$("#id").nextAll()$("#id").nextUntil("#i2") 上一个元素：
$("#id").prev()$("#id").prevAll()$("#id").prevUntil("#i2") 父亲元素：
$("#id").parent()$("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。 儿子和兄弟元素：
$("#id").children();// 儿子们$("#id").siblings();// 兄弟们 查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p") 等价于$("div p")
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的 等价于 $("div.c1")
补充：
.first() // 获取匹配的第一个元素.last() // 获取匹配的最后一个元素.not() // 从匹配元素的集合中删除与指定表达式匹配的元素.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。.eq() // 索引值等于指定值的元素
操作标签
样式操作
样式类
addClass();// 添加指定的CSS类名。removeClass();// 移除指定的CSS类名。hasClass();// 判断样式存不存在toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
CSS
css("color","red")//DOM操作：tag.style.color="red" 示例：
$("p").css("color", "red"); //将所有p标签的字体设置为红色 位置：
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置position()// 获取匹配元素相对父元素的偏移scrollTop()// 获取匹配元素相对滚动条顶部的偏移scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
位置相关示例之返回顶部 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
尺寸：
height() //获取内容的高度width() //获取内容的宽度innerHeight() //内容+内填充innerHeigh() //内容+padding+边框
文本操作
文本值：text() //获取值text('val') //写参数就是在改原来的参数 HTML代码:
$("#d1").html() //"注释是代码之母
"$("#d1").html("永远不要高估自己！
") 值：
$("input[name='username']").val() //获取值$("input[name='username']").val('egon') //设置值 示例：
获取被选中的checkbox或radio的值： 可以使用：$("input[name='gender']:checked").val() 登录zhc
属性操作
用于ID等或自定义属性：attr(attrName) //获取属性值（适用于文本）attr(attrName,attrValue) //为所有匹配元素设置一个属性值attr({k1:v1, k2:v2}) //为匹配的元素设置多个值removeAttr() //从每一个匹配的元素中删除一个属性用于checkbox和radioprop() //获取属性 （选中与否）removePorp() //移除属性 注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
全选反选取消练习
| # | 姓名 | 爱好 |
|---|---|---|
| Egon | 唱歌 | |
| Alex | 吹牛逼 | |
| Yuan | 上课 |
文档处理
要先用js来创建一个标签var A=document.createElement('p'); //创建标签ppEle.innerText = 'qqqqqqqqqq' //为标签p添加文档添加到指定元素内部的后面$("B").append(A) // 追加在$("#d1")标签内的最后$(A).appendTo($("B")添加到指定元素内部的前面$("B").prepend(A) //追加在内部的前面$(A).prependTo(B) // 把A前置到B添加到指定元素外部的后面$(A).after(B) // 把B放到A的后面$(A).insertAfter(B) // 把A放到B的后面添加到指定元素外部的前面$(A).before(B) // 把B放到A的前面$(A).insertBefore(B) // 把A放到B的前面移除和清空元素remove()// 从DOM中删除所有匹配的元素。empty()// 删除匹配的元素集合中所有的子节点。 克隆
事件
常用事件
click(function(){...})hover(function(){...})bulur(function(){...})focus(function(){...})change(function(){...})keyup(function(){...}) keydown和keyup事件组合示例：
批量操作
| # | 姓名 | 操作 |
|---|---|---|
| Egon | ||
| Alex | ||
| Yuan | ||
| EvaJ | ||
| Gold |
hover事件示例：
hover事件示例
事件的绑定
1、 .on(events [, selector ],function(){}) 1、events ：事件 2、selector ：选择器（可选的） 3、function ：事件处理函数 移除事件1、 .off(events [, selector ][,function(){}) off()方法移除用 .on() 绑定的事件处理程序。 1、 events ：事件 2、 selector ：选择器（可选的） 3、 function ：事件处理函数阻止后续事件执行
return false; // 常见阻止表单提交等
注意：
像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 $(this).addClass('hover');});$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件 $(this).removeClass('hover');}); $(document).ready(function(){//在这里写你的JS代码...}） 简写：
$(function(){//你在这里写你的代码}) 事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件表格中的每一行的编辑和删除按钮都能触发相应的事件。$("table").on("click","delete",function () {//删除按钮绑定的事件}）； // 基本show([s,[e],[fn]])hide([s,[e],[fn]])toggle([s],[e],[fn])// 滑动slideDown([s],[e],[fn])slideUp([s,[e],[fn]])slideToggle([s],[e],[fn])// 淡入淡出fadeIn([s],[e],[fn])fadeOut([s],[e],[fn])fadeTo([[s],o,[e],[fn]])fadeToggle([s,[e],[fn]])// 自定义（了解即可）animate(p,[s],[e],[fn])
点赞动画示例 点赞
补充
each描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。li =[10,20,30,40]$.each(li,function(i, v){ console.log(i, v);//index是索引，ele是每次循环的具体元素。}) 输出：
010120230340
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo$("li").each(function(){ $(this).addClass("c1");}); 注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("c1"); // 对所有标签做统一操作 注意：
在遍历过程中可以使用 return false提前结束each循环。
终止each循环
return false；
伏笔...
.data()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100 .data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值 .removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据