一、jQuery1、介绍jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。2、优势 1.一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 2.丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了， 再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 3.链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 4.事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 5.Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 6.跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 7.插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件， 并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。3、内容1.选择器2.筛选器3.样式操作4.文本操作5.属性操作6.文档处理7.事件8.动画效果9.插件10.each、data、Ajax小提示：1.jQuery官网：https://jquery.com/2.jQuery中文文档：http://jquery.cuishifeng.cn/4、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的支持。5、jQuery对象1.概述jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法。例如：$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。相当于： document.getElementById("i1").innerHTML;虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。2.约定一般情况下我们在声明一个jQuery对象变量的时候在变量名前面加上$：var $variable = jQuery对像var variable = DOM对象3.jquery对象和dom对象转换3-1、jQuery对象转成DOM对象：jQuery对象可以通过[index]方法获得相应的DOM对象。var $divEle = $("#d1"); //得到jQuery对象var divEle = $divEle[0]; //转换成DOM对象var divEle = $("#d1")[0]; //转换成DOM对象jQuery还可以通过.get(index)方法得到相应的DOM对象var divEle = $divEle.get(0); //转换成DOM对象3-2、DOM对象转成jQuery对象：用$()将DOM对象包装起来，就能获得jQuery对象了var divEle = document.getElementById("d"); //得到DOM对象var $divEle = $(divEle); //转成jQuery对象二、jQuery之查找标签基础写法：$(selector).action()1、基本选择器id选择器：$("#id")class选择器：$(".className")标签选择器：$("tagName")配合使用：$("div.c1") // 找到有c1 class类的div标签所有元素选择器：$("*")组合选择器：$("#id, .className, tagName")2、层级选择器x和y可以为任意选择器$("x y"); // x的所有后代y（子子孙孙）$("x > y"); // x的所有儿子y（儿子）$("x + y") // 找到在x后面的第一个y(毗邻)$("x ~ y") // 找到x的所有的弟弟y3、属性选择器[attribute][attribute=value] // 属性等于[attribute!=value] // 属性不等于例子：$("input[type]") // 找到有type属性的input标签$("input[type='checkbox']"); // 找到type属性等于checkbox的input标签$("input[type!='text']"); // 找到type属性不是text的input标签4、基本筛选器:first // 第一个:last // 最后一个:gt(index)// 匹配所有大于给定索引值的元素:lt(index)// 匹配所有小于给定索引值的元素:eq(index)// 索引等于index的那个元素:even // 匹配所有索引值为偶数的元素，从 0 开始计数:odd // 匹配所有索引值为奇数的元素，从 0 开始计数:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找):not(元素选择器) // 移除所有满足not条件的标签例1：$("div:has(h1)") // 找到所有后代中有h1标签的div标签$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签$("li:not(.c1)") // 找到所有不包含c1样式类的li标签(即没有c1样式的li标签)$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签区别： 
$("div:has(h1)")：先找到所有div标签，然后看div标签的子子孙孙(后代)中是否有h1标签，有则符合条件，选择到的是div标签比如： 符合条件
不符合条件 $("div:not(.c1)")：先找到所有div标签，然后看div标签的class属性，没有class="c1"的div标签才符合条件，选择到的是div标签比如： 符合条件 不符合条件
例2：
Title
- 1
- 2
- 3
- 4
- 5
div>p
div>span
div>p>span
详解：// 找到ul标签下的所有子标签li$("ul li");// 找到ul标签下的第一个子标签li$("ul li:first");// 找到ul标签下的最后一个子标签li$("ul li:last");// 找到ul标签下的索引为1的子标签li$("ul li:eq(1)");// 找到第一个li标签$("li:first");// 找到最后一个li标签$("li:last");// 找到索引大于1的li标签$("li:gt(1)");// 找到索引小于1的li标签$("li:lt(1)");// 找到索引等于1的li标签$("li:eq(1)");// 找到索引为偶数的li标签$("li:even");// 找到索引为奇数的li标签$("li:odd");5、表单筛选器(仅用于筛选表单)1.表单type类型:text:password:file:radio:checkbox:submit:reset:button例如：找到所有的checkbox用属性选择器：$("input[type='checkbox']")用表单筛选器：$(":checkbox")2.表单对象属性::enabled:disabled:checked:selected例如： 找到被选中的复选框$(":checked");注意： 当表单中只有一种选择按钮的时候，上面这样写是可以的， 但是表单中同时有复选按钮(checkbox)、单选按钮(radio)和下拉框(select)的时候， 上面这样写$(":checked");会把所有选中的标签都找到，即不分是单选还是复选还是下拉框。 因此一般要找到被选中的那个标签，可以指定$("input:checked");是input标签中选中的按钮。 或者$("option:selected");是option标签中选中的下拉框。二、筛选器方法1.下一个元素(弟弟)：$("#id").next() // 查找id的下一个元素(是同级的元素，不是子孙)$("#id").nextAll() // 查找id下面的所有元素$("#id").nextUntil("#i2") // 查找id下面的元素一直找到i2就停止(不包括i2的元素)2.上一个元素(哥哥)：$("#id").prev() // 查找id的上一个元素$("#id").prevAll() // 查找id上面的所有元素$("#id").prevUntil("#i2") // 查找id上面的元素一直找到i2就停止(不包括i2的元素)3.父亲元素：$("#id").parent() // 查找当前元素的第一个父元素$("#id").parents() // 查找当前元素的所有的父辈元素$("#id").parentsUntil("body") // 查找当前元素的所有的父辈元素，一直找到body就停止(不包括body)4.儿子和兄弟元素：$("#id").children();// 查找id的所有儿子$("#id").siblings();// 查找id的所有兄弟(弟弟哥哥都是兄弟) somenode.parentElement 父节点标签元素somenode.children 所有子标签somenode.firstElementChild 第一个子标签元素somenode.lastElementChild 最后一个子标签元素somenode.nextElementSibling 下一个兄弟标签元素somenode.previousElementSibling 上一个兄弟标签元素
5.查找(子孙)搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。$("div").find("p") // find是在子子孙孙中找，找到的是p标签等价于$("div p")6.筛选筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。$("div").filter(".c1") // filter是从结果中过滤出有c1样式类的等价于 $("div.c1")7.补充(跟筛选器一样的，不过改写成了方法而已).first() // 获取匹配的第一个元素.last() // 获取匹配的最后一个元素.not() // 从匹配元素的集合中删除与指定表达式匹配的元素.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。.eq() // 索引值等于指定值的元素例如：$("li:first"); //找到第一个li标签等价于$("li").first(); //找到第一个li标签三、综合例子例1：自定义模态框，使用jQuery实现弹出和隐藏功能。 JQ模态框示例 渡远荆门外，来从楚国游。
山随平野尽，江入大荒流。
月下飞天镜，云生结海楼。
仍怜故乡水，万里送行舟。
例2、左侧菜单
Title