原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
1.3.1. 基础选择器 $("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号
层级选择器最常用的两个分别为：后代选择器和子代选择器。
基础选择器和层级选择器案例代码
<body> <div>我是div</div> <div>我是nav div</div> <p>我是p</p> <ul> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> </ul> <script> $(function() { console.log($(".nav")); console.log($("ul li")); }) </script> </body> 1.3.3. 筛选选择器 筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :
案例代码
<body> <ul> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> </ul> <ol> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> </ol> <script> $(function() { $("ul li:first").css("color", "red"); $("ul li:eq(2)").css("color", "blue"); $("ol li:odd").css("color", "skyblue"); $("ol li:even").css("color", "pink"); }) </script> </body>另: jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。
偏重于记忆，演示代码略。
1.3.4 知识铺垫jQuery 设置样式
$('div').css('属性', '值')jQuery 里面的排他思想
// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。 $(this).css(“color”,”red”); $(this).siblings(). css(“color”,””);隐式迭代
// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。 // 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。 $('div').hide(); // 页面中所有的div全部隐藏，不用循环操作链式编程
// 链式编程是为了节省代码量，看起来更优雅。 $(this).css('color', 'red').sibling().css('color', ''); 1.3.5 案例：淘宝服饰精品案例思路分析:
1.核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
2.需要得到当前小li 的索引号，就可以显示对应索引号的图片
3.jQuery 得到当前元素索引号 $(this).index()
4.中间对应的图片，可以通过 eq(index) 方法去选择
5.显示元素 show() 隐藏元素 hide()
代码实现略。(详情参考源代码)
1.4. jQuery 样式操作 jQuery中常用的样式操作有两种：css() 和 设置类样式方法
1.4.1. 方法1: 操作 css 方法 jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。
常用以下三种形式 :
// 1.参数只写属性名，则是返回属性值 var strColor = $(this).css('color'); // 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号 $(this).css(''color'', ''red''); // 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号 $(this).css({ "color":"white","font-size":"20px"}); 注意：css() 多用于样式少时操作，多了则不太方便。
1.4.2. 方法2: 设置类样式方法 作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
常用的三种设置类样式方法：
// 1.添加类 $("div").addClass("current"); // 2.删除类 $("div").removeClass("current"); // 3.切换类 $("div").toggleClass("current"); 注意：
设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
1.4.3. 案例：tab 栏切换