jQuery 基础选择器
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号
<script> $(function(){ console.log($(".nav")); console.log($("ul li")); console.log($("ul>li")); }) </script>
jQuery 层级选择器
jQuery 设置样式
$('div').css('属性', '值')
就一句话修改了四个div
隐式迭代（重要）
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$("ul li").css("color","pink")
jQuery 筛选选择器
$(function(){ $("ul li:first").css("color","red") $("ul li:eq(2)").css("color","pink") $("ol li:odd").css("color","skyblue") $("ol li:even").css("color","yellow") })
jQuery 筛选方法（重点）
<body> <div class="yeye"> <div class="father"> <div class="son">儿子</div> </div> </div> <div class="nav"> <p>我是屁</p> <div> <p>我是p</p> </div> </div> <script> // 注意一下都是方法 带括号 $(function() { // 1. 父 parent() 返回的是 最近一级的父级元素 亲爸爸 console.log($(".son").parent()) // 2. 子 // (1) 亲儿子 children() 类似子代选择器 ul>li // $(".nav").children("p").css("color", "red"); // (2) 可以选里面所有的孩子 包括儿子和孙子 find() 类似于后代选择器 $(".nav").find("p").css("color", "red"); // 3. 兄 }); </script> </body>
新浪下拉菜单案例：
使用jQuery更加方便
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; font-size: 14px; } .nav { margin: 100px; } .nav>li { position: relative; float: left; width: 80px; height: 41px; text-align: center; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } .nav>li>a:hover { background-color: #eee; } .nav ul { display: none; position: absolute; top: 41px; left: 0; width: 100%; border-left: 1px solid #FECC5B; border-right: 1px solid #FECC5B; } .nav ul li { border-bottom: 1px solid #FECC5B; } .nav ul li a:hover { background-color: #FFF5DA; } </style> <script src="jquery.min.js"></script> </head> <body> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> </ul> <script> $(function(){ $(".nav>li").mouseover(function(){ $(this).children("ul").show(); }) $(".nav>li").mouseout(function(){ $(this).children("ul").hide(); }) }) </script> </body> </html>
我们可以利用选择方法的方式选择 更推荐这种写法
$("ul li").eq(2).css("color", "blue");等价$("ul li:eq(2)").css("color", "blue");
但是用选择方法更好，如果有变量
var index = 2;
$("ul li").eq(index).css("color", "blue");即可
$("ul li:eq("+index+")").css("color", "blue");太麻烦了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <ol> <li>我是ol 的li</li> <li>我是ol 的li</li> <li class="item">我是ol 的li</li> <li>我是ol 的li</li> <li>我是ol 的li</li> <li>我是ol 的li</li> </ol> <ul> <li>我是ol 的li</li> <li>我是ol 的li</li> <li>我是ol 的li</li> <li>我是ol 的li</li> <li>我是ol 的li</li> <li>我是ol 的li</li> </ul> <div class="current">俺有current</div> <div>俺木有current</div> <script> // 注意一下都是方法 带括号 $(function() { // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟 $("ol .item").siblings("li").css("color","red") // 2. 第n个元素 var index = 2; // (1) 我们可以利用选择器的方式选择 // $("ul li:eq(2)").css("color", "blue"); // $("ul li:eq("+index+")").css("color", "blue"); // (2) 我们可以利用选择方法的方式选择 更推荐这种写法 // $("ul li").eq(2).css("color", "blue"); // $("ul li").eq(index).css("color", "blue"); // 3. 判断是否有某个类名 console.log($("div:first").hasClass("current")); console.log($("div:last").hasClass("current")); }); </script> </body> </html>
重点记住： parent() children() find() siblings() eq()
jQuery 里面的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式
$(this).css(“color”,”red”); $(this).siblings(). css(“color”,””);
案例：淘宝服饰精品案例
①核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
②需要得到当前小li 的索引号，就可以显示对应索引号的图片
③jQuery 得到当前元素索引号 $(this).index()
④中间对应的图片，可以通过 eq(index) 方法去选择
⑤显示元素 show() 隐藏元素 hide()
结构是这样的
果然让开发飞一般的感受
<script> $(function(){ $("#left li").mouseover(function(){ // 2.得到当前小li的索引号 var index=$(this).index(); // 3.让我们右侧的盒子相应索引号的图片显示出来 $("#content div").eq(index).show(); // 4.让其余的图片(就是其他的兄弟)隐藏出来 $("#content div").eq(index).siblings().hide(); }) }) </script>
链式编程
链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
使用链式编程一定注意是哪个对象执行样式
可以使用链式编程。使代码根据清晰
淘宝案例也可以使用链式编程
<body> woshi body 的文字 <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <script> $(function() { // 1. 隐式迭代 给所有的按钮都绑定了点击事件 $("button").click(function() { // 2. 让当前元素颜色变为红色 // $(this).css("color", "red"); // 3. 让其余的姐妹元素不变色 // $(this).siblings().css("color", ""); // 链式编程 // $(this).css("color", "red").siblings().css("color", ""); // 我的颜色为红色, 我的兄弟的颜色为空 // $(this).siblings().css('color', 'red'); // 我的兄弟变为红色 ,我本身不变颜色 $(this).siblings().parent().css('color', 'blue'); // 最后是给我的兄弟的爸爸 body 变化颜色 }); }) </script> </body>
