jQuery 基本概念：
使用js的缺点：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <style> 7 div{ 8 height: 200px; 9 margin-bottom: 10px; 10 background-color: cyan; 11 display: none; 12 } 13 </style> 14 <script> 15 window.onload = function () { 16 document.getElementById("btn1").onclick = function () { 17 var divs = document.getElementsByTagName("div"); 18 for (var i = 0; i < divs.length; i++) { 19 divs[i].style.display = "block"; 20 } 21 }; 22 document.getElementById("btn2").onclick = function () { 23 var divs = document.getElementsByTagName("div"); 24 for (var i = 0; i < divs.length; i++) { 25 divs[i].innerText = "我爱学习！"; 26 } 27 }; 28 } 29 </script> 30 </head> 31 <body> 32 33 <input type="button" value="展示" id="btn1"> 34 <input type="button" value="显示内容" id="btn2"> 35 <div></div> 36 <div></div> 37 <div></div> 38 <script src="js/common.js"></script> 39 <script> 40 41 42 </script> 43 </body>
上述代码的问题：
jQuery初体验：
其实jQuery 就是个js文件。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <style> 7 div{ 8 height: 200px; 9 margin-bottom: 10px; 10 background-color: cyan; 11 display: none; 12 } 13 </style> 14 <script src="js/jquery-1.12.4.js"></script> 15 <script> 16 //jQuery初体验 17 //1,引入jQuery文件 18 //2，jQuery 的入口函数 相当于 之前写的window.onLoad() 函数。 19 /* 20 $().ready(function () { //$ 是个函数名！jQuery 多是将匿名函数 做参数，而不是直接等于！！！ 21 console.log("hahah"); 22 }); 23 */ 24 $(document).ready(function () { 25 //jQuery中注册事件， 使用css方式找id ，而且事件不带 on ,而且不用等号 形式，将匿名函数做参数。 26 $("#btn1").click(function () { 27 // alert("我是 展示 按钮！"); 28 $("div").show(); //找到三个div 并让它们显示！！！ 29 }); 30 31 $("#btn2").click(function () { 32 $("div").text("我爱学习！！！"); //找到三个div，并显示文本。 33 }); 34 }); 35 /*jQuery 的优点： 36 * 1，不用写循环： jQuery 中有隐式迭代（帮我们做遍历）。不需要我们自己动手遍历。 37 * 2，不用担心兼容性问题，不用担心注册事件 会被覆盖。 38 * 3，找对象的方法简单，和css选择器基本一致 39 * 4，可以很容易地实现简单的动画效果 40 * */ 41 </script> 42 </head> 43 <body> 44 <input type="button" value="展示" id="btn1"> 45 <input type="button" value="显示内容" id="btn2"> 46 <div></div> 47 <div></div> 48 <div></div> 49 </body>
jQuery的优点：
1，不用写循环： jQuery 中有隐式迭代（帮我们做遍历）。不需要我们自己动手遍历。
2，不用担心兼容性问题，不用担心注册事件 会被覆盖。
3，找对象的方法简单，和css选择器基本一致
4，可以很容易地实现简单的动画效果
什么是jQuery：
官网：https://jquery.com/ 它的官网logo 有句话： write less,do more!
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery是一个快速、轻量级、功能丰富的JavaScript库。它使诸如HTML文档遍历和操作、事件处理、动画和Ajax之类的事情变得更加简单，因为它提供了一个易于使用的API，可以跨多种浏览器工作。jQuery结合了通用性和可扩展性，改变了数百万人编写JavaScript的方式。
其实核心就是一句话：jQuery 就是个js库。
jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。
什么是js库呢？
js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（例如：animate.js）
我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。
jQuery 的版本问题：
jQuery版本有很多，分为1.x 2.x 3.x
1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）。
所以国内只要是使用jQuery，那么肯定使用的是1.x 版本，没办法，不得不兼容IE678.
关于压缩版 和 未压缩版：
jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有可阅读性。
jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。
补：
所以压缩版本应该用在生产环境（文件小）。
开发环境以版都是用易读的，方便我们查看文档。所以注释，空格，换行之类是不能省的。一般不用压缩版。
两个版本功能是完全一致的，只要在放到生产环境的时候，换成压缩版本即可。
jQuery 的入口函数：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <style> 7 div{ 8 height: 200px; 9 margin-bottom: 10px; 10 background-color: cyan; 11 display: none; 12 } 13 </style> 14 <script src="js/jquery-1.12.4.js"></script> 15 <script> 16 //1，jQuery 入口函数第一种写法 （不推荐，麻烦！） 相当于window.onLoad() 页面加载完之后才执行入口函数！如果script标签放在下面，则不需要使用入口函数。 17 $(document).ready(function () { 18 console.log("这是 jQuery入口函数 的第一种写法"); 19 }); 20 21 //2，jQuery 入口函数第二种写法 jQuery 是不会覆盖的。 22 $(function () { 23 console.log("这是 jQuery入口函数的 第二种写法"); 24 }); 25 26 27 28 </script> 29 </head> 30 <body> 31 32 <div></div> 33 <div></div> 34 <div></div> 35 <script src="js/jquery-1.12.4.js"></script> 36 <script> 37 $("div").show(1000); //不需要写入口函数！ 38 </script> 39 40 41 </body>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <script src="js/jquery-1.12.4.js"></script> 7 <script> 8 //回顾 js 的 入口函数 9 window.onload = function(){ 10 console.log("这是js 的入口函数！"); 11 }; 12 13 //1，jQuery 入口函数第一种写法 （不推荐，麻烦！） 相当于window.onLoad() 页面加载完之后才执行入口函数！如果script标签放在下面，则不需要使用入口函数。 14 $(document).ready(function () { 15 console.log("这是 jQuery入口函数 的第一种写法"); 16 }); 17 18 //2，jQuery 入口函数第二种写法 jQuery 是不会覆盖的。 19 $(function () { 20 console.log("这是 jQuery入口函数的 第二种写法"); 21 }); 22 23 //执行之后，会发现 jQuery 入口函数 先于js入口函数执行。为什么？ 24 // 1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。 25 // 2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。 26 27 </script> 28 </head> 29 <body> 30 31 32 33 </body>
jQuery入口函数与js入口函数的对比：
1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
二者都会等文档加载完成，但jQuery 不会等待图片等资源，而js会等待图片等资源加载完毕！
所以jQuery 入口函数比较好！
虽然入口函数可以不写，但是推荐写！
使用jQuery 的三个步骤：
1，引用jQuery 文件
2，入口函数
3，功能实现
jQuery对象 与 DOM对象（js对象）的区别(重点)：
1. DOM对象（js对象）：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <script src="js/jquery-1.12.4.js"></script> 7 <script> 8 $(function () { 9 //1，js对象： 用javascript的方式获得的对象就是 js 对象 （DOM对象） 10 var div = document.getElementById("div1"); //js对象 11 div.style.backgroundColor = "yellow"; 12 13 //2, jQuery 对象：用jQuery 的方式获得的对象就是 jQuery 对象。前面的变量常加上 $ 符 14 var $div = $("#div1"); 15 $div.text("我爱中国！ Hello World!"); 16 }); 17 18 </script> 19 </head> 20 <body> 21 <div id="div1"></div> 22 </body>
DOM 对象 和 jQuery对象的区别：
1，jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））
2，DOM对象与jQuery对象的方法不能混用。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <script src="js/jquery-1.12.4.js"></script> 7 <script> 8 $(function () { 9 // 查看 jQuery 对象 10 //$divs 是个伪数组，不能使用数组的方法！ 11 var $divs = $("div"); 12 console.log($divs); 13 /* 14 jQuery.fn.init(3) 15 0: div 16 1: div 17 2: div 18 context: document 19 length: 3 20 prevObject: jQuery.fn.init [document, context: document] 21 selector: "div" 22 __proto__: Object(0) 23 */ 24 25 //真数组。 可以arr 可以使用.sort()方法，真数组。 26 var arr = [1,2,3,4,5]; 27 console.log(arr); 28 /* 29 (5) [1, 2, 3, 4, 5] 30 0: 1 31 1: 2 32 2: 3 33 3: 4 34 4: 5 35 length: 5 36 __proto__: Array(0) 37 * */ 38 39 40 }); 41 42 </script> 43 </head> 44 <body> 45 <div></div> 46 <div></div> 47 <div></div> 48 </body>
总结：
jQuery 对象 和 DOM 对象不是一个对象； 二者的关系是 jQuery 中放了很多DOM对象。
类似于数组中放了字符串对象差不多！数组有数组的方法，里面的字符串有字符串自己的方法！
DOM对象 和 jQuery 对象 互相使用对方的方法：
1，DOM对象 想使用jQuery 对象的方法：
通过$() 可以使得DOM对象变为jQuery 对象。
2，jQuery对象 想使用 DOM 对象的方法：
从jQuery对象 这个伪数组中 取出来 调用方法即可。
不过取出来的方式有两种：一：通过下标 ；二：通过.get(index);
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <style> 7 div{ 8 height: 50px; 9 margin-bottom: 20px; 10 background-color: cyan; 11 } 12 span{ 13 width: 50px; 14 height: 50px; 15 } 16 </style> 17 <script src="js/jquery-1.12.4.js"></script> 18 <script> 19 $(function () { 20 $("#btn").click (function () { 21 console.log("hahhaha"); 22 var $divs = $("div"); //jQuery 对象 23 var span = document.getElementsByTagName("span"); //DOM 对象 24 25 // 1, DOM 对象 使用 jQuery 对象的方法 //需要先把 DOM对象包装一下，变为jQuery对象！ 26 $(span).text("我是按钮"); 27 28 // 2，jQuery对象 使用DOM对象的方法 //直接取出来用即可。 29 $divs[0].style.backgroundColor = "yellow"; //除了用下标，也可以使用.get(index)! 30 $divs.get(2).style.backgroundColor = "darkred"; 31 }) 32 }); 33 34 </script> 35 </head> 36 <body> 37 <input type="button" value="点我查看效果" id="btn"> 38 <div></div> 39 <div></div> 40 <div></div> 41 <span></span> 42 </body>
隔行变色案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 7 </head> 8 <body> 9 <!-- ul>li{我是第$个li}*10--> 10 <input type="button" value="点我查看效果" id="btn"> 11 <ul> 12 <li>我是第1个li</li> 13 <li>我是第2个li</li> 14 <li>我是第3个li</li> 15 <li>我是第4个li</li> 16 <li>我是第5个li</li> 17 <li>我是第6个li</li> 18 <li>我是第7个li</li> 19 <li>我是第8个li</li> 20 <li>我是第9个li</li> 21 <li>我是第10个li</li> 22 </ul> 23 <script src="js/jquery-1.12.4.js"></script> 24 <script> 25 26 $(function () { //入口函数 27 /* 28 $("#btn").click(function () { 29 //js 的方式实现 30 var lis = document.getElementsByTagName("li"); 31 for (var i =0;i<lis.length;i++){ 32 if(i % 2==0 ) 33 lis[i].style.backgroundColor = "red"; 34 else 35 lis[i].style.backgroundColor = "yellow"; 36 } 37 }); 38 */ 39 40 41 $("#btn").click(function () { 42 //jQuery 对象方式实现。 43 var $lis = $("li"); 44 for (var i=0;i<$lis.length;i++){ 45 if(i %2 == 0) 46 $lis[i].style.backgroundColor = "red"; 47 else 48 $lis[i].style.backgroundColor = "yellow"; 49 } 50 }); 51 52 53 }); 54 55 56 57 58 59 60 </script> 61 62 63 </body>
$的实质：
第三种用法用的最多！！！
还有：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 7 8 </head> 9 <body> 10 11 <script src="js/jquery-1.12.4.js"></script> 12 <script> 13 14 console.log($ == jQuery); 15 //$ 实际上就是jQuery 的别名。 因为jQuery太长了，所以用 $ 代替 16 //所以，入口函数也可以如下； 17 jQuery(function () { 18 console.log("hahhaa"); 19 }); 20 </script> 21 22 </body>
选择器：
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
| 用法 | 描述 | |
|---|---|---|
| ID选择器 | $(“#id”); | 获取指定ID的元素 |
| 类选择器 | $(“.class”); | 获取同一类class的元素 |
| 标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $(“div.redClass”); |
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 7 </head> 8 <body> 9 <ul> 10 <li>我是第1个li</li> 11 <li>我是第2个li</li> 12 <li>我是第3个li</li> 13 <li id="four">我是第4个li</li> 14 <li>我是第5个li</li> 15 <li class="green">我是第6个li</li> 16 <li class="green">我是第7个li</li> 17 <li>我是第8个li</li> 18 <li class="pink">我是第9个li</li> 19 <li>我是第10个li</li> 20 <div>哈哈哈哈哈</div> 21 <div>Hello World</div> 22 <span>我是span</span> 23 <a href="">我是 a标签 </a> 24 </ul> 25 <script src="js/jquery-1.12.4.js"></script> 26 <script> 27 //入口函数 28 $(function () { 29 /*基本选择器*/ 30 /* 31 * jQuery 对象如何设置样式 ，可以使用css(name,value)；函数设置样式 32 * name:样式名 33 * value:样式值 34 * */ 35 // 1,id选择器 36 $("#four").css("backgroundColor","red"); //使用id 选择器获取 jQuery 对象 并设置器样式！ 37 38 39 //2,类选择器 40 $(".green").css("backgroundColor","green"); //使用类 选择器获取 jQuery 对象 并设置器样式！ 41 42 //3,标签选择器 43 $("div").css("backgroundColor","cyan"); //使用 标签 选择器获取 jQuery 对象 并设置器样式！ 44 45 //===========================并集 和 交集============================= 46 //4,并集选择器 47 $("span,a").css("backgroundColor","yellow"); //使用 并集选择器（同时操作多个） 获取 jQuery 对象 并设置器样式！ 48 49 //5,交集选择器 50 $("li.pink").css("backgroundColor","pink"); //使用 交集 选择器 获取 jQuery 对象 并设置器样式！ 51 52 53 54 }); 55 </script> 56 57 58 </body>
| 用法 | 描述 | |
|---|---|---|
| 子代选择器 | $(“ul>li”); | 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”); |
跟CSS的选择器一模一样。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 7 </head> 8 <body> 9 <div> 10 <ul> 11 <li>我是div 的孙子</li> 12 <li>我是div 的孙子</li> 13 <li>我是div 的孙子</li> 14 <span>我也是div 的孙子</span> 15 </ul> 16 <span>我是div 中的span</span> 17 <li>我是div的儿子</li> 18 </div> 19 <script src="js/jquery-1.12.4.js"></script> 20 <script> 21 //入口函数 22 $(function () { 23 /*层级 选择器*/ 24 /* 25 * jQuery 对象如何设置样式 ，可以使用css(name,value)；函数设置样式 26 * name:样式名 27 * value:样式值 28 * */ 29 // 1, 子代选择器 > 30 $("div>span").css("backgroundColor","red"); 31 32 // 2, 后代选择器 一个空格 （后代，包含子代，也有孙...） 33 $("div li").css("backgroundColor","green"); 34 35 36 }); 37 </script> 38 39 40 </body>
补：
注：我们用的最多的交集选择器是 “li.className” 。 标签指定式选择器 ！
| 名称 | 用法 | 描述 |
|---|---|---|
| :eq（index） | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(“li:even”).css(“color”, ”red”); |
这类选择器 都带有冒号！
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 7 </head> 8 <body> 9 <ul> 10 <li>这是第1个li</li> 11 <li>这是第2个li</li> 12 <li>这是第3个li</li> 13 <li>这是第4个li</li> 14 <li>这是第5个li</li> 15 <li>这是第6个li</li> 16 <li>这是第7个li</li> 17 <li>这是第8个li</li> 18 <li>这是第9个li</li> 19 <li>这是第10个li</li> 20 </ul> 21 <script src="js/jquery-1.12.4.js"></script> 22 <script> 23 //入口函数 24 $(function () { 25 /*过滤 选择器*/ //它一般都有冒号 26 /* 27 * jQuery 对象如何设置样式 ，可以使用css(name,value)；函数设置样式 28 * name:样式名 29 * value:样式值 30 * */ 31 //1,:eq(index) //索引从0开始， 32 // $("li") //获取所有的li 标签 33 var ret = $("li:eq(4)");//先获取 所有的li ，然后过滤出 index为4 的对象 ,该对象是个jQuery对象。 34 ret.css("backgroundColor","yellow"); 35 //2,:odd //索引号 为 奇数的元素 36 $("li:odd").css("fontSize","18px"); 37 //3,:even 38 $("li:odd").css("fontSize","10px"); 39 40 }); 41 </script> 42 43 44 </body>
案例：隔行变色
其他过滤选择器：
:first 第一个
:last 最后一个
:gt(index) 大于哪个索引的
:eq(index) 等于哪个索引的
:lt(index) 小于哪个索引的
前面的都是写在字符串中的，而筛选选择器是方法（对象调用）！
| 用法 | 描述 | |
|---|---|---|
| children(selector)//无参数时找所有的 | $(“ul”).children(“li”) | 相当于$(“ul>li”)，子类选择器 |
| find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
| siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点，不包括自己本身。 |
| parent() | $(“#first”).parent(); | 查找父亲 |
| eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
| next() | $(“li”).next() | 找下一个兄弟 |
| prev() | $(“li”).prev() |
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 7 </head> 8 <body> 9 <ul> 10 <li>这是第1个li</li> 11 <li>这是第2个li</li> 12 <li>这是第3个li</li> 13 <li>这是第4个li</li> 14 <li id="five">这是第5个li</li> 15 <li>这是第6个li</li> 16 <li>这是第7个li</li> 17 <li>这是第8个li</li> 18 <li>这是第9个li</li> 19 <li>这是第10个li</li> 20 </ul> 21 <div> 22 <ul> 23 <li>我是div的孙子</li> 24 <li>我是div的孙子</li> 25 <li>我是div的孙子</li> 26 </ul> 27 <span>我是div的儿子</span> 28 <a> 29 <span>我是div的孙子</span> 30 </a> 31 </div> 32 <script src="js/jquery-1.12.4.js"></script> 33 <script> 34 //入口函数 35 $(function () { 36 /*筛选 选择器*/ 37 // 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。 38 /* 39 * jQuery 对象如何设置样式 ，可以使用css(name,value)；函数设置样式 40 * name:样式名 41 * value:样式值 42 * */ 43 44 // 查找兄弟节点，不包括自己本身。parent()$(“#first”).parent(); 45 // 查找父亲eq(index)$(“li”).eq(2);相当于$(“li:eq(2)”),index从0开始 46 // next()$(“li”).next()找下一个兄弟prev()$(“li”).prev()找上一次兄弟 47 //1,children(selector) 子代选择器 相当于$(“ul>li”) 48 //要先有一个基准 对象。然后调对象的方法！ 49 // $("div").children("span").css("backgroundColor","yellow"); 50 51 //2,find(selector) 后代选择器 相当于$(“ul li”) 52 //$("div").find("span").css("backgroundColor","yellow"); 53 54 //3,siblings(selector) //查询兄弟节点，不包括自己本身 55 // $("a").siblings("span").css("backgroundColor","red"); 56 57 //4,parent() //查找父亲 58 // $("a").parent().css("border","1px solid cyan"); 59 60 //5,eq(index) //选择出 索引号为2 的元素 61 // $("ul>li").eq(2).css("backgroundColor","darkred"); 62 63 //6,next() // 查找下一个兄弟 64 $("#five").next().css("backgroundColor","orange"); 65 //7,prev() // 查找上一个兄弟 66 $("#five").prev().css("backgroundColor","pink"); 67 }); 68 </script> 69 70 71 </body>
【案例：下拉菜单】this+children+mouseenter+mouseleave
【案例：突出展示】siblings+find
【案例：手风琴】next+parent
【案例：淘宝精品】index+eq
下拉菜单案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 li{ 12 list-style-type: none; 13 } 14 .wrap{ 15 width: 330px; 16 height: 30px; 17 background-image: url("images/bg.jpg"); 18 margin: 100px auto 0; 19 padding-left: 10px; 20 } 21 .wrap li{ 22 background-image: url("images/libg.jpg"); 23 } 24 .wrap > ul > li{ 25 float: left; 26 margin-right: 10px; 27 position: relative; 28 } 29 .wrap a{ 30 display: block; 31 width: 100px; 32 height: 30px; 33 text-align: center; 34 line-height: 30px; 35 color: #000; 36 text-decoration: none; 37 38 } 39 .wrap li ul{ 40 position: absolute; 41 top: 30px; 42 display: none; 43 } 44 </style> 45 46 </head> 47 <body> 48 <div class="wrap"> 49 <ul> 50 <li> 51 <a href="javascript:void(0);">一级菜单1</a> 52 <ul class="ul"> 53 <li><a href="javascript:void(0);">二级菜单11</a></li> 54 <li><a href="javascript:void(0);">二级菜单12</a></li> 55 <li><a href="javascript:void(0);">二级菜单13</a></li> 56 </ul> 57 </li> 58 <li> 59 <a href="javascript:void(0);">一级菜单2</a> 60 <ul class="ul"> 61 <li><a href="javascript:void(0);">二级菜单21</a></li> 62 <li><a href="javascript:void(0);">二级菜单22</a></li> 63 <li><a href="javascript:void(0);">二级菜单23</a></li> 64 </ul> 65 </li> 66 <li> 67 <a href="javascript:void(0);">一级菜单3</a> 68 <ul class="ul"> 69 <li><a href="javascript:void(0);">二级菜单31</a></li> 70 <li><a href="javascript:void(0);">二级菜单32</a></li> 71 <li><a href="javascript:void(0);">二级菜单33</a></li> 72 </ul> 73 </li> 74 </ul> 75 </div> 76 77 <script src="js/jquery-1.12.4.js"></script> 78 <script> 79 $(function () { 80 81 //给 a 添加事件 82 var $a = $(".wrap>ul>li>a"); 83 $a.mouseenter(function () { 84 $(this).next().show(); //$(this) 是将DOM 对象 转变为了 jQuery对象！！！ 85 }); 86 87 $a.mouseleave(function () { 88 $(this).next().hide(); 89 }); 90 }); 91 </script> 92 93 </body>
上面的案例不太好，不应该给里面的a标签注册事件，应该给li注册事件。因为如果是给a标签注册事件的话，那么鼠标放到二级菜单的时候，就会消失！
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 li{ 12 list-style-type: none; 13 } 14 .wrap{ 15 width: 330px; 16 height: 30px; 17 background-image: url("images/bg.jpg"); 18 margin: 100px auto 0; 19 padding-left: 10px; 20 } 21 .wrap li{ 22 background-image: url("images/libg.jpg"); 23 } 24 .wrap > ul > li{ 25 float: left; 26 margin-right: 10px; 27 position: relative; 28 } 29 .wrap a{ 30 display: block; 31 width: 100px; 32 height: 30px; 33 text-align: center; 34 line-height: 30px; 35 color: #000; 36 text-decoration: none; 37 38 } 39 .wrap li ul{ 40 position: absolute; 41 top: 30px; 42 display: none; 43 } 44 </style> 45 46 </head> 47 <body> 48 <div class="wrap"> 49 <ul> 50 <li> 51 <a href="javascript:void(0);">一级菜单1</a> 52 <ul class="ul"> 53 <li><a href="javascript:void(0);">二级菜单11</a></li> 54 <li><a href="javascript:void(0);">二级菜单12</a></li> 55 <li><a href="javascript:void(0);">二级菜单13</a></li> 56 </ul> 57 </li> 58 <li> 59 <a href="javascript:void(0);">一级菜单2</a> 60 <ul class="ul"> 61 <li><a href="javascript:void(0);">二级菜单21</a></li> 62 <li><a href="javascript:void(0);">二级菜单22</a></li> 63 <li><a href="javascript:void(0);">二级菜单23</a></li> 64 </ul> 65 </li> 66 <li> 67 <a href="javascript:void(0);">一级菜单3</a> 68 <ul class="ul"> 69 <li><a href="javascript:void(0);">二级菜单31</a></li> 70 <li><a href="javascript:void(0);">二级菜单32</a></li> 71 <li><a href="javascript:void(0);">二级菜单33</a></li> 72 </ul> 73 </li> 74 </ul> 75 </div> 76 77 <script src="js/jquery-1.12.4.js"></script> 78 <script> 79 $(function () { 80 81 //给 li 添加事件 82 var $li = $(".wrap>ul>li"); 83 $li.mouseenter(function () { 84 // $($(this).children()[1]).show(); // 麻烦 85 $(this).children("ul").show(); //children 里还是放参数 比较简单！ 86 }); 87 88 $li.mouseleave(function () { 89 $(this).children("ul").hide(); 90 }); 91 }); 92 </script> 93 94 </body>
mouseover 和 mouseenter 的区别 :
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
推荐使用mouseenter 它的触发次数少，效率低。
https://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseleave_mouseout
mouseout 和 mouseleave 的区别 :
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
https://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseleave_mouseout
突出显示案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .wrap{ 12 width: 632px; 13 height: 394px; /*392 +2*/ 14 padding: 10px 0 0 10px; 15 background-color: #000; 16 margin: 100px auto 0; 17 border: 1px solid #ccc; 18 } 19 body{ 20 background-color: #000; 21 } 22 li{ 23 list-style: none; 24 width: 200px; 25 height: 186px; 26 padding: 0 10px 10px 0; 27 float: left; 28 } 29 a{ 30 display: block; 31 } 32 33 34 35 36 37 38 </style> 39 </head> 40 <body> 41 <div class="wrap"> 42 <ul> 43 <li><a href="#"><img src="images/01.jpg" alt=""></a></li> 44 <li><a href="#"><img src="images/02.jpg" alt=""></a></li> 45 <li><a href="#"><img src="images/03.jpg" alt=""></a></li> 46 <li><a href="#"><img src="images/04.jpg" alt=""></a></li> 47 <li><a href="#"><img src="images/05.jpg" alt=""></a></li> 48 <li><a href="#"><img src="images/06.jpg" alt=""></a></li> 49 </ul> 50 </div> 51 <script src="js/jquery-1.12.4.js"></script> 52 <script> 53 //入口函数 54 $(function () { 55 var $lis = $(".wrap li"); 56 $lis.mouseenter( 57 function () { 58 $lis.css("opacity",0.4); //全部隐藏 59 $(this).css("opacity",1);//显示当前 60 } 61 ); 62 $(".wrap").mouseleave(function () { 63 $lis.css("opacity",1); 64 }); 65 }); 66 </script> 67 </body>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .wrap{ 12 width: 632px; 13 height: 394px; /*392 +2*/ 14 padding: 10px 0 0 10px; 15 background-color: #000; 16 margin: 100px auto 0; 17 border: 1px solid #ccc; 18 } 19 body{ 20 background-color: #000; 21 } 22 li{ 23 list-style: none; 24 width: 200px; 25 height: 186px; 26 padding: 0 10px 10px 0; 27 float: left; 28 } 29 a{ 30 display: block; 31 } 32 33 34 35 36 37 38 </style> 39 </head> 40 <body> 41 <div class="wrap"> 42 <ul> 43 <li><a href="#"><img src="images/01.jpg" alt=""></a></li> 44 <li><a href="#"><img src="images/02.jpg" alt=""></a></li> 45 <li><a href="#"><img src="images/03.jpg" alt=""></a></li> 46 <li><a href="#"><img src="images/04.jpg" alt=""></a></li> 47 <li><a href="#"><img src="images/05.jpg" alt=""></a></li> 48 <li><a href="#"><img src="images/06.jpg" alt=""></a></li> 49 </ul> 50 </div> 51 <script src="js/jquery-1.12.4.js"></script> 52 <script> 53 //入口函数 54 $(function () { 55 var $lis = $(".wrap li"); 56 $lis.mouseenter( 57 function () { 58 $(this).css("opacity",1);//让自己显示 59 $(this).siblings().css("opacity",0.4); //siblings()是除了自己之外的兄弟 对象！ 60 } 61 ); 62 $(".wrap").mouseleave(function () { 63 $lis.css("opacity",1); 64 }); 65 }); 66 </script> 67 </body>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .wrap{ 12 width: 632px; 13 height: 394px; /*392 +2*/ 14 padding: 10px 0 0 10px; 15 background-color: #000; 16 margin: 100px auto 0; 17 border: 1px solid #ccc; 18 } 19 body{ 20 background-color: #000; 21 } 22 li{ 23 list-style: none; 24 width: 200px; 25 height: 186px; 26 padding: 0 10px 10px 0; 27 float: left; 28 } 29 a{ 30 display: block; 31 } 32 33 34 35 36 37 38 </style> 39 </head> 40 <body> 41 <div class="wrap"> 42 <ul> 43 <li><a href="#"><img src="images/01.jpg" alt=""></a></li> 44 <li><a href="#"><img src="images/02.jpg" alt=""></a></li> 45 <li><a href="#"><img src="images/03.jpg" alt=""></a></li> 46 <li><a href="#"><img src="images/04.jpg" alt=""></a></li> 47 <li><a href="#"><img src="images/05.jpg" alt=""></a></li> 48 <li><a href="#"><img src="images/06.jpg" alt=""></a></li> 49 </ul> 50 </div> 51 <script src="js/jquery-1.12.4.js"></script> 52 <script> 53 //入口函数 54 $(function () { 55 var $lis = $(".wrap li"); 56 $lis.mouseenter( 57 function () { 58 /* 59 $(this).css("opacity",1);//让自己显示 60 $(this).siblings().css("opacity",0.4); //siblings()是除了自己之外的兄弟 对象！ 61 */ 62 $(this).css("opacity",1).css("opacity",0.4); //可以这样直接写。 63 //下面验证 上述写法的合理性 64 65 // var ret = $(this).css("opacity",1).css("opacity",0.4); 66 // console.log(ret); //返回值为当前的 this 对象！ 67 //即 ，给jQuery 对象设置完之后，返回当前设置的对象！ 所以可以链式编程！ 68 69 } 70 ); 71 $(".wrap").mouseleave(function () { 72 $lis.css("opacity",1); 73 }); 74 }); 75 </script> 76 </body>
手风琴案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 li{ 12 list-style: none; 13 } 14 .wrap{ 15 width: 200px; 16 height: 208px;/*4 个 88 + 120*/ 17 margin: 100px auto 0; 18 /*background-color: cyan;*/ 19 20 border: 1px solid #ccc; 21 } 22 ul span{ 23 display: block; 24 height: 20px; 25 line-height: 18px; 26 text-align: center; 27 border: 1px solid #ccc; 28 background-color: #e0ecff; 29 30 cursor: pointer; 31 } 32 ul div{ 33 height: 120px; 34 border: 1px solid #ccc; 35 display: none; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="wrap"> 41 <ul> 42 <li> 43 <span>标题1</span> 44 <div>我是弹出来的div1</div> 45 </li> 46 <li> 47 <span>标题2</span> 48 <div>我是弹出来的div2</div> 49 </li> 50 <li> 51 <span>标题3</span> 52 <div>我是弹出来的div3</div> 53 </li> 54 <li> 55 <span>标题4</span> 56 <div>我是弹出来的div4</div> 57 </li> 58 </ul> 59 </div> 60 <script src="js/jquery-1.12.4.js"></script> 61 <script> 62 /* 63 使用以前的方法，上来就先将所有的 div 关闭！然后再打开现在的！ 64 var $spanObjs = $("ul>li>span"); 65 var $divs =$("ul>li>div"); 66 $spanObjs.click(function () { 67 //先关闭所有的 div 68 $divs.hide(); 69 //然后，再显示当前的div 70 $(this).next().show(); 71 }); 72 */ 73 /* version02 74 var $spanObjs = $("ul>li>span"); 75 $spanObjs.click(function () { 76 //$(this).next().show(); 77 //$(this).parent().siblings().children("div").hide(); 78 79 $(this).next().show().parent().siblings().children("div").hide(); //链式！ 80 }); 81 */ 82 // version03 加上动画效果！ 83 var $spanObjs = $("ul>li>span"); 84 $spanObjs.click(function () { 85 $(this).next().show(100).parent().siblings().children("div").hide(100); //链式！ 86 }); 87 88 89 </script> 90 91 </body>
注：大部分的jQuery 方法都会返回jQuery对象，所以可以进行链式编程！
淘宝精品商品案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 a{ 12 text-decoration: none; 13 color: black; 14 } 15 li{ 16 list-style: none; 17 } 18 .wrap{ 19 width: 300px; 20 height: 250px; 21 /*background-color: cyan;*/ 22 margin: 100px auto 0; 23 border: 1px solid pink; 24 overflow: hidden; 25 } 26 .wrap>div{ 27 float: left; 28 } 29 ul{ 30 display: block; 31 float: left; 32 } 33 ul>li{ 34 width: 50px; 35 height: 27px; 36 font-size: 12px; 37 text-align: center; 38 line-height: 28px; 39 border-bottom: 1px solid pink; 40 background: url("images/lili.jpg") repeat-x; 41 } 42 ul>li:hover{ 43 background-image: url("images/abg.gif"); 44 } 45 </style> 46 47 48 49 </head> 50 <body> 51 <div class="wrap"> 52 <ul> 53 <li><a href="#">女靴</a></li> 54 <li><a href="#">雪地靴</a></li> 55 <li><a href="#">冬裙</a></li> 56 <li><a href="#">呢大衣</a></li> 57 <li><a href="#">毛衣</a></li> 58 <li><a href="#">棉服</a></li> 59 <li><a href="#">女裤</a></li> 60 <li><a href="#">羽绒服</a></li> 61 <li><a href="#">牛仔裤</a></li> 62 63 </ul> 64 <div> 65 <a href="#"><img src="images/女靴.jpg" alt=""></a> 66 </div> 67 <ul> 68 <li><a href="#">女包</a></li> 69 <li><a href="#">男靴</a></li> 70 <li><a href="#">登山鞋</a></li> 71 <li><a href="#">皮带</a></li> 72 <li><a href="#">围巾</a></li> 73 <li><a href="#">皮衣</a></li> 74 <li><a href="#">男毛衣</a></li> 75 <li><a href="#">男棉服</a></li> 76 <li><a href="#">男包</a></li> 77 </ul> 78 79 </div> 80 <script src="js/jquery-1.12.4.js"></script> 81 <script> 82 $(function () { 83 var $liObjs = $("div>ul>li"); 84 $liObjs.mouseenter(function () { 85 var $text = $(this).text(); 86 /* version 01 87 //$(this).parent().siblings("div").find("img")[0] 为中间的 img 标签 （DOM对象 ！） 88 //$(this).parent().siblings("div").find("img")[0].src = "images/"+$text+".jpg" ; 89 */ 90 91 /*version 02*/ 92 $(this).parent().siblings("div").find("img").prop("src","images/"+$text+".jpg"); //.prop() 应该是设置属性的，自己试出来的！ 93 94 }); 95 }); 96 97 98 </script> 99 100 </body>
.eq() 和 .get() 的区别：
所以，使用eq获得指定索引的对象可以进行链式编程，而使用.get()不可以。
jQuery调试技巧：
jQuery不会报错，就算找不到对象的时候jQuery也不会报错。因为没找到对象就是返回一个 个数为0 的jQuery 的对象。
一般用console.log() 或者使用 alert() 等就可以找到哪里出错了。
index详解：
jQuery 对象的index 是个函数 jQuery 中很少有属性。
index() 会返回当前元素在所有兄弟元素里面的索引。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 7 8 </head> 9 <body> 10 <ul> 11 <li><a href="#">我是链接</a></li> 12 <li><a href="#">我是链接</a></li> 13 <li><a href="#">我是链接</a></li> 14 <li><a href="#">我是链接</a></li> 15 <li><a href="#">我是链接</a></li> 16 <li><a href="#">我是链接</a></li> 17 <li><a href="#">我是链接</a></li> 18 19 </ul> 20 <script src="js/jquery-1.12.4.js"></script> 21 <script> 22 $(function () { 23 //jQuery 对象的index 是个函数 jQuery 中很少有属性 24 $("li").click(function () { //此时，如果给$("a") 注册事件的话，返回的就都是0 了 25 console.log($(this).index() ); //点击li ，输出当前的索引 26 }); 27 }); 28 </script> 29 30 </body>
复习：
