jQuery链式编程，节流阀，each方法及$命名冲突(多库共存)
1、链式编程
设置性操作，可以链式编程
获取性操作，不能链式，因为获取性操作，获取的是数值，字符串等
链式编程取决于：返回值是否为jQuery对象
案例：五星好评
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li { list-style-type: none; float: left; font-size: 32px; margin-right: 3px; cursor: pointer; } </style> </head> <body> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> <script src="./js/jquery-1.12.4.js"></script> <script> $(function() { // 进入事件 $("li").on("mouseenter", function() { // 当前li及前面的兄弟都变成★ $(this).text("★").prevAll().text("★"); // 设置当前li后面的兄弟都变成☆ $(this).nextAll().text("☆"); }); // 离开事件 $("ul").on("mouseleave", function() { $("li").text("☆"); // 把点击的位置及前面兄弟的星星改变 $(".current").text("★").prevAll().text("★"); }); // 点击事件:点击时，记住点击位置， // 让鼠标离开时根据离开的位置更改星星颜色 $("li").on("click", function() { // 给点击的位置添加一个class，其他兄弟删除 $(this).addClass("current").siblings().removeClass("current"); }) }); </script> </body> </html>
2、节流阀
按下的时候触发，如果没弹起不让触发下一次
案例：音乐菜单栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { width: 1200px; height: 45px; margin: auto; overflow: hidden; } li { list-style-type: none; float: left; width: 150px; text-align: center; } a { line-height: 45px; display: block; text-decoration: none; color: #fff; font-weight: 700; background-color: olivedrab; } span { display: block; height: 45px; width: 150px; background-color: coral; } </style> </head> <body> <ul> <li><a href="#">导航1</a><span></span></li> <li><a href="#">导航2</a><span></span></li> <li><a href="#">导航3</a><span></span></li> <li><a href="#">导航4</a><span></span></li> <li><a href="#">导航5</a><span></span></li> <li><a href="#">导航6</a><span></span></li> <li><a href="#">导航7</a><span></span></li> <li><a href="#">导航8</a><span></span></li> </ul> <script src="./js/jquery-1.12.4.js"></script> <script> $(function() { $("li").mouseenter(function() { $(this).children("span").stop().animate({ marginTop: -45 }); }).mouseleave(function() { $(this).children("span").stop().animate({ marginTop: 0 }); }); // 设置节流阀： var flag = true; $(document).on("keydown", function(e) { var code = e.keyCode; //获取按下键盘的code值 // 判断节流阀是否开启，开启则执行代码块 if (flag) { flag = false;//关闭节流阀 if (code >= 97 && code <= 105) { $("li").eq(code - 97).trigger("mouseenter"); console.log("输出了" + code); } } }); $(document).on("keyup", function(e) { var code = e.keyCode; flag = true; //键盘弹起开启节流阀 if (code >= 97 && code <= 105) { $("li").eq(code - 97).trigger("mouseleave"); } }); }); </script> </body> </html>
3、each方法（遍历）等同于for循环
用法：
//遍历修改所有li的透明度 $("li").each(function(index,element){ $("li").css("opacity",(index+1)/10); }); element：元素 index：下标
4、多库共存（$命名冲突）
jQuery先获得控制权（把jQuery.js写在最下面）
然后释放控制权：$.noConflict(); 可以给释放后的jQuery赋值，也可以直接使用原备用名称jQuery
赋值：var 变量名 = $.noConflict();
