????????jQuery是一个快速、简洁的JavaScript框架jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
?一、认识jQuery
????????jQuery的核心特性是具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件，且jQuery兼容各种主流浏览器。
?????????jQuery依旧执行DOM的增、删、改、查、事件绑定操作，可以说jQuery是DOM的延续；jQuery对DOM操作的每一步都进行了简化，是用函数来解决一切问题（jQuery就是函数库）。
????????但是，jQuery只有PC端，没有移动端，而且只对DOM操作的每一步进行了简化，没有减少步骤，所以用的会越来越少。
二、jQuery的使用
? ? ? ? 到官网jQuery进行下载即可，下载版本后引入网页。
1.将jQuery引入网页的方法
（1）将jquery.js文件下载到项目本地文件夹，用相对路径引入
<script src="js/jquery-1.11.3.js">（2）引入CDN网络中的jquery.js文件
?????????CDN网络可在全球范围共享一个文件；任意地区的一个客户端想用CDN网络中的文件时，CDN网络都会从距离这个客户端网络最优的服务器下载资源给客户端。
<script src="官网提供的CDN网址">
//eg：微软提供的cdn网址:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.js">
举例：对比DOM与jQuery写法；
三、jQuery原理
1.引入jquery.js文件后，会在内存中新增一种类型，包括：
（1）构造函数：创建该类型的子对象；
（2）原型对象：集中保管该类型所有子对象共用的方法。
2.使用jQuery函数库中的函数时，需要先创建jQuery类型的子对象
//标准写法
var jq子对象=new jQuery(选择器);
//简写
var jq子对象=jQuery(选择器)
var jq子对象=$(选择器) //$相当于new jQuery 1.查找DOM元素 2.创建jQuery对象
?????????只有jQuery子对象才能访问jQuery原型对象中的简化版共有方法。原生的DOM元素对象无权使用jQuery原型对象中的简化版函数。
3.?jQuery中事件处理函数里的this
????????.click会翻译为.οnclick=function(){ ... }，再执行，所以.click()中的this，其实还是.onclick里的this。与DOM中的this完全一样，都指向正在点击的当前原生DOM元素对象本身；jquery中所有事件处理函数中的this都必须用$()包裹起来（包装），形成一个jQuery子对象，才可以使用jQuery函数库中的函数。
四、?jQueryAPI三大特点
1.自带for循环遍历
????????只对jQuery查找结果对象调用一次简化版函数，就可以自动遍历查找结果中每个DOM元素，自动为每个DOM元素应用多用的DOM操作
2.一个函数两用
????????和修改相关的函数，都既能用于修改新值，又能用于获取旧值；
????????调用函数时，没有传新值参数，函数默认执行获取旧值操作，
????????调用函数时，传了新值参数，函数自动改为执行修改为新值操作。
举例：有多个按钮，记录每个按钮的单击次数；
<body>
<h1>jQueryAPI特点</h1>
<button id="btn1">click me(0)</button>
<button id="btn2">click me(0)</button>
<button id="btn3">click me(0)</button>
<script src="js/jquery-1.11.3.js"></script>
<script>
//为三个按钮绑定单击事件，记录单击次数
//DOM 4步
//1. 查找触发事件的元素
var $btn = $("button");
//2. 绑定事件处理函数
$btn.click(function () {
//3.?查找要修改的元素:本例中改当前按钮,所以用this
var $this = $(this);
//4.?修改元素
var n = parseInt(
$this.html().slice(9, -1)
);
n++;
$this.html(`click me(${n})`)
});
</script>
</body>五、查找元素
????????jQuery主要通过选择器的方式查找元素，除了原始CSS选择器之外，还添加了额外jQuery专属的选择器。
1.子元素过滤选择器（css选择器）
| :first-child? ? | 所有父元素下第一个直接子元素 |
| :last-child | 所有父元素下最后一个直接子元素 |
| :nth-child(i)? | 所有父元素下第i个直接子元素 |
| :only-child?? | 所有父元素下唯一的一个子元素 |
| 注意：css中下标从1开始 | |
举例：使用子元素过滤选择器选择指定元素；
<body>
<h3>子元素过滤选择器.</h3>
<ul>
<li>child1-basic0</li>
<li>child2-basic1</li>
<li>child3-basic2</li>
</ul>
<ul>
<li>child1-basic3</li>
<li>child2-basic4</li>
<li>child3-basic5</li>
</ul>
<ul>
<li>child1-basic6</li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
//查找每个ul中第一个li，让其字体颜色变为红色
$("ul>li:first-child").css("color", "red");
//查找每个ul中最后一个li，让其边框变为绿色
$("ul>li:last-child").css("border", "1px solid green");
//查找每个ul中处于偶数位置的，让其背景变为黄色
$("ul>li:nth-child(2n)").css("background", "yellow");
//查找每个ul中第2个li，添加蓝色阴影
$("ul>li:nth-child(2)").css("box-shadow", "0 0 10px blue");
//查找作为ul下唯一子元素的li，设置20px内边距
$("ul>li:only-child").css("padding", "20px");
</script>
</body>2.基本过滤选择器（jQuery专属）
????????先将所有符合要求的元素集中保存到一个大的集合中从0开始统一编号，按元素在集合中的统一编号来选择指定的元素。
| :first :last | 在结果集合中排名第一或最后一个的元素 |
| :eq(i) :lt(i) :gt(i) | 选择在结果集合中下标i等于i、小于i、大于i位置的元素（不包括i） |
| :even :odd? | 选择在结果集合中下标位置i等于偶数位置或奇数位置的元素 |
| 注意：jQuery中下标从0开始 | |
举例：使用基本过滤选择器选择指定元素；
<body>
<h3>基本过滤选择器.</h3>
<ul>
<li>child1-basic0</li>
<li>child2-basic1</li>
<li>child3-basic2</li>
</ul>
<ul>
<li>child1-basic3</li>
<li>child2-basic4</li>
<li>child3-basic5</li>
</ul>
<ul>
<li>child1-basic6</li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
//查找第一个li，字体变化红色
$("li:first").css("color", "red");
//查找最后一个li，边框变为绿色
$("li:last").css("border", "1px solid green");
//查找处于(正常人眼)偶数位置的li，背景变为黄色
$("li:odd").css("background", "yellow");
//查找第2个li，添加蓝色阴影
$("li:eq(2)").css("box-shadow", "0 0 10px blue");
</script>
</body>3.内容过滤器（jQuery专属）
?????????根据元素的内容不同来选择元素。
| :contains(文本)? | 选择内容中包含指定文本关键字的元素 |
| :has(其它选择器) | 选择子元素中包含符合选择器要求的元素的父元素 |
| :parent | 选择内容非空的元素 |
| :empty? | 选择内容为空的元素 |
举例：使用内容过滤选择器选择指定元素；
<body>
<div class="container">
<h1>内容过滤选择器</h1>
<button>提交订单</button>
<button>Submit注册信息</button>
<button>马上提交</button>
<button>清空重填</button>
<hr />
<div class="alert"></div>
<div class="alert">
<span class="close">×</span>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//选择包含"提交"二字的按钮，变为绿色按钮
$("button:contains(提交)").css("background-color", "green");
//选中包含.close按钮的.alert元素，让它们变为红色的警告框
$(".alert:has(.close)").css("background-color", "red");
//选中不包含.close按钮的.alert元素，让它们变为绿色的警告框
$(".alert:not(:has(.close))").css("background-color", "green");
//选择内容为空的.alert元素，添加红色阴影
$(".alert:empty").css("box-shadow", "0 0 10px red");
//选择内容不为空的.alert元素，添加绿色阴影
$(".alert:parent").css("box-shadow", "0 0 10px green");
</script>4.可见性过滤（jQuery专属）
????????根据元素是否可见来选择元素；
| :visible? | 选择可见的元素 |
| :hidden | 选择不可见的元素 |
举例：使用:hidden选择不可见的元素；
<body>
<div class="container">
<h1>可见性选择器</h1>
<div id="d1" style="display: none">lorem</div>
<div id="d2" style="visibility: hidden">lorem</div>
<div id="d3" style="opacity: 0">lorem</div>
<input id="d4" type="hidden" name="aa" value="bb" />
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
console.log($('div.container>:hidden'))
</script>
</body>5.表单元素过滤选择器（jQuery专属）
????????根据表单元素的类别不同来选择不同的表单元素。
| :input? | 专门选择4大类表单元素(input, select, textarea, button) |
| :text? | 选择type="text"的普通文本框 |
| :password | 选择type="password"的密码框 |
| :checkbox | 选择type="checkbox"的复选框 |
| :radio? | 选择type="radio"的单选按钮 |
举例：点同意时启用元素，不同意则禁用元素；
<body>
<form>
用户名:<input disabled></br>
密码:<input type="password" disabled></br>
<input type="checkbox">我同意本站的使用条款<br>
<input type="submit" value="提交注册信息" disabled />
</form>
<script src="js/jquery-1.11.3.js"></script>
<script>
//DOM 4步
//1. 查找触发事件的元素
$(":checkbox")
//2. 绑定事件处理函数
.click(function () {
//3. 查找要修改的元素
var $others = $(":input:not(:checkbox)")
//4. 修改元素
//如果当前checkbox是选中的
if (this.checked == true) {
// 则启用其他元素
$others.prop("disabled", false);
} else {
// 否则禁用其他元素
$others.prop("disabled", true);
}
})
</script>
</body>