一、认识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 函数库中的函数。
四、 jQuery API三大特点
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选择器）
举例：使用子元素过滤选择器选择指定元素；
<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开始统一编号，按元素在集合中的统一编号来选择指定的元素。
举例：使用基本过滤选择器选择指定元素；
<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专属）
举例：使用内容过滤选择器选择指定元素；
<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专属）
举例：使用 :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专属）
举例：点同意时启用元素，不同意则禁用元素；
<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>
