一、JQuery介绍
1、jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 2、JQuery使用户能够更方便处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能极大地简化JavaScript编程。
二、JQuery的优势
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插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
三、jQuery库包含功能
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTMLDOM遍历和修改
- AJAX
- Utilites
四、jQuery版本支持
- 1.x:兼容IE768，使用最为广泛的，官方只做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版。目前该版本是官方主要更新维护的版本。
五、JQuery对象
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基础语法
jQuery语法
通过jQuery,您可以选取（查询，query）HTML元素，并对它们执行“操作”(actions)。
JQuery语法
jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。
基础语法：$(selector).action()
- 没有符号定义jQuery
- 选择符(selector)“查询”和“查找”HTML元素
- jQuery的action()执行对元素的操作
示例：
$(this).hide()-隐藏当前元素 $("p").hide()-隐藏所有段落 $("p.test").hide()-隐藏所有class = "test"的段落 $("#test").hide()-隐藏所有id="test"的元素 七、jQuery选择器
参考文档：https://www.w3cschool.cn/jquery/xs75ofnl.html
jQuery选择器
jQuery选择器允许您对HTML元素组或单个进行操作。 jQuery选择器基于元素的id、类、类型、属性、属性值等"查找"(或选择)HTML元素。它基于以及存在的CSS选择器，它还有一些自定义的选择器。 jQuery中所有选择器都以美元符号开头：$()。
id选择器
jQuery #id选择器通过HTML元素的id属性的id属性选取指定的元素。
页面中的元素的id应该是唯一的，所以您要在页面中选取唯一的元素需要通过#id选择器。
通过id选取元素语法如下：
$("#id") 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id选择器</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <h2>这是一个标题</h2> <p>这是一个段落</p> <p id="test">这是另一个段落</p> </body> </html>
执行结果：
标签选择器
jQuery标签选择器基于标签名选取元素。
在页面中选取所有的<p>标签
$("p") 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签选择器</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <h2>这是一个标题</h2> <p>标签选择器，这是一个段落</p> <p>标签选择器，这是另一个段落</p> </body> </html>
执行结果
class类选择器
jQuery类选择器可以通过指定的class查找元素。
语法如下：
$(".test") 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class类选择器</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <h1 class="test">这是一个标题</h1> <p class="test">这是一个段落</p> <p>这是另外一个段落。</p> </body> </html>
运行结果：
CSS选择器
jQuery CSS选择器可用于改变HTML元素的CSS属性。
示例一：把所有的p标签的背景颜色改为红色
$("p").css("background-color","red"); 示例二：选取所有元素(标签)
$("*") 示例三：选取当前HTML元素
$("this") 示例四：选取第一个<p>元素
$("p:first") 示例五：选取class为intro的<p>元素
$("p.intro") 示例六：选取第一个<ul>元素的第一个<li>元素
$("ul li:first") 示例七：选取每个<ul>元素的第一个<li>元素
$("ul li:first-child") 示例八：选取带有href属性的元素
$("[href]") 示例九：选取所有target属性值等于"_blank"的<a>元素
$("a[target='_blank']") 示例十：选取所有target属性值不等于"_blank"的<a>元素
$("a[target!='_blank']") 示例十一：选取所有type="button"的<input>元素和<button>元素
$(":button") 示例十二：选取偶数位置的<tr>元素
$("tr:even") 示例十三：选取奇数位置的<tr>元素
$("trod") <div class="c1"> <a href=""></a> <p class="c2"></p> <p class="c3"></p> <div class="c4"></div> <p class="c5"></p> </div> <div class="c6"> <a href=""></a> <a href=""></a> </div> #查找满足条件的第一个 $('div>p:first'); #找出div标签子集中的第一个p标签, #jQuery.fn.init [p.c2, prevObject: jQuery.fn.init(1)] #查找满足条件的最后一个 $('div>p:last'); #找出div标签子集中最后一个p标签 #jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)] #查找索引号为指定数字的元素 $('div>p:eq(2)'); #找出div标签子集中的第三个p标签 #jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)] #匹配所有索引值为偶数的元素，从 0 开始计数 $('div>p:even'); #找出div标签子集中的索引为偶数的p标签，取出class=c2,class=c5的p标签。 #jQuery.fn.init(2) [p.c2, p.c5, prevObject: jQuery.fn.init(1)] #匹配所有索引值为奇数的元素，从 0 开始计数 $('div>p:odd'); #找出div标签子集中的索引为奇数的p标签，取出class=c3的p标签。 #jQuery.fn.init [p.c3, prevObject: jQuery.fn.init(1)] #匹配所有大于给定索引值的元素 $('div>p:gt(1)'); #jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)] #匹配所有小于给定索引值的元素 $('div>p:lt(1)'); #jQuery.fn.init [p.c2, prevObject: jQuery.fn.init(1)] #选取后代中包含一个或多个指定标签的标签 $('div:has(a)'); #jQuery.fn.init(2) [div.c1, div.c6, prevObject: jQuery.fn.init(1)] #找出所有满足not条件的标签 <label>篮球 <input type="checkbox" checked name="hobby" id="i1"> </label> <label >足球 <input type="checkbox" name="hobby" id="i2"> </label> $('label>input:not(:checked)'); #选出没有checked属性的input标签 #w.fn.init [input#i2, prevObject: w.fn.init(1)] #示例代码 <p class="c1"></p> <p class="c1"></p> <p id="d1"></p> <ul> <li id="d2"></li> <li id="d3"> <a href=""></a> </li> </ul> #找到所有后代中不含a标签的li标签 $("li:not(:has(a))") #Query.fn.init [li#d2, prevObject: jQuery.fn.init(1)] #找到不含class=c1的p标签 $('p:not(.c1)'); #jQuery.fn.init [p#d1, prevObject: jQuery.fn.init(1)] 交集选择器，选择两个条件同时成立的标签
$("div.c1") #选择class=c1的div标签 并集选择器，选择满足以下条件中任意一个的所有标签
$("#d,.c1,p") #选择id=d的标签，具有class=c1的标签，标签是p的标签。 层级选择器
#后代选择器 $("a b"); #处于a标签级别下的所有b标签，用空格分开。 #子类选择器 $("a.b"); #处于a标签级别下一级别的所有b标签。 #毗邻单一弟弟选择器 $("a+b"); #与a标签同一级别的紧挨着a标签的b标签。 #毗邻多个弟弟选择器 $("a~b"); #与a标签同一级别的位于a标签之后的所有b标签。 属性选择器
#示例代码 <p class="c1"></p> <p class="c1"></p> <p id="d1"></p> #选取带有该属性的指定标签 $('p[class]'); #jQuery.fn.init(2) [p.c1, p.c1, prevObject: jQuery.fn.init(1)] #选取该属性值等于指定值的标签 $('p[id="d1"]'); #Query.fn.init [p#d1, prevObject: jQuery.fn.init(1)] ##选取该属性值不等于指定值的标签 $('p[class!="c1"]'); #jQuery.fn.init(2) [p#d1, p.c2, prevObject: jQuery.fn.init(1)]