[TOC] # 1.1 jQuery 基础选择器 原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统-标准。 ~~~ $( "选择器") // 里面选择器直接写CSS选择器即可,但是要加引号 ~~~ | 名称 | 用法 | 描述 | | --- | --- | --- | | ID选择器 | $("#id") | 获取指定ID的元素 | | 全选选择器 | $(\*) | 匹配所有元素 | | 类选择器 | $(".class") | 获取同一类class的元素 | | 标签选择器 | $("div") | 获取同一类标签的所有元素 | | 并集选择器 | $("div,p,Ii") | 选取多个元素 | | 交集选择器 | $("li.current") | 交集元素 |  # 1.2 jQuery层级选择器 | 名称 | 用法 | 描述 | | --- | --- | --- | | 子代选择器 | $("ul>li"); | 使用>号，获取亲儿子层级的元素;注意,并不会获取孙子层级的元素 | | 后代选择器 | $("ul li"); | 使用空格，代表后代选择器，获取u |  知识铺垫 ## jQuery设置样式 ~~~ $("div").css('属性','值') ~~~  # 1.3 隐式迭代(重要) 遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。 简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作, 方便我们调用。 # 1.4 jQuery筛选选择器 (选出第一个或者第N个) | 语法 | 用法 | 描述 | | --- | --- | --- | | :first | $('li:first') | 获取第一个i元素 | | :last | $('li:last') | 获取最后一个i元素 | | :eq(index) | $("li:eq(2)") | 获取到的li元素中，选择索引号为2的元素,索引号index从0开始。 | | :odd | $("li:odd") | 获取到的i元素中，选择索引号为奇数的元素 | | :even | $("l:even") | 获取到的li元素中，选择索引号为偶数的元素 | 使用 1.应用jq文件 2.书写下面 ~~~ <script> $(function() { $("ul li:first").css("color", " red"); $("ul li:eq(2)").css("color", "blue"); }) </script> ~~~ # 1.5 jQuery 筛选方法(重点) | 语法 | 用法 | 说明 | | --- | --- | --- | | parent() | $("li"). parent(); | 查找父级 | | children(selector) | $("ul").children("li") | 相当于$("ul>li"),最近一级(亲儿子) | | find(selector) | $("ul").find("li"); | 相当于$("ul li"),后代选择器 | | siblings(selector) | $(" . first").siblings("li"); | 查找兄弟节点，不包括自己本身 | | nextAll(\[expr\]) | $(" . first").nextAll() | 查找当前元素之后所有的同辈元素 | | prevtAll(\[expr\]) | $(" . last").prevAll() | | | hasClass(class) | $('div').hasClass("protected" ) | 查找当前元素之前所有的同辈元素检查当前的元素是否含有某个特定的类,如果有，则返回true | | eq( index) | $("li").eq(2); | 相当于$("li:eq(2)"), index从0开始 | 重点记住: parent() children() find() siblings() eq() # 1.6 jQuery 里面的排他思想 （干掉别人，留下自己） 想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。 ## 1.5jQ下滑菜单  html |  |  | | --- | --- | ~~~ <script> $(function() { //鼠标经过 $(" . nav>li" ) . mouseover( function() { // $(this) jQuery 当前元素 this不要加引号 // show() 显示元素 hide()隐藏元素 $(this). children("u1"). show(); }); //鼠标离开 $(" . nav>li"). mouseout(function() { $(this). children("u1").hide(); }) }) </script> ~~~ ## 1.6 排他思想 ~~~ <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <script> $(function() { // 1.隐式迭代给所有的按钮都绑定了点击事件 $(”button").click (function() { // 2.当前的元素变化背景颜色 $(this).css("background", "pink"); // 3.其余的兄弟去掉背景颜色隐式迭代 $(this).siblings("button" ). css( "background", ""); }); }) </script> ~~~ # 案例:淘宝服饰精品案例  点击自动换图 |  |  | | --- | --- | ## 案例: 淘宝服饰精品案例分析 ~~~ ①核心原理:鼠标经过左侧盒子某个小li ,就让内容区盒子相对应图片显示,其余的图片隐藏。 ②需要得到当前小li的索引号,就可以显示对应索引号的图片 ③jQuery 得到当前元素索引号$(this).index() ④中间对应的图片,可以通过eq(index)方法去选择 ⑤显示元素show0隐藏元素hide() ~~~ ## 代码实验 html  js ~~~ <script> $(function() { //1.鼠标经过左侧的小li $(" #left li" ) . mouseover(function() { //2.得到当前的小li的索引号 var index = $(this). index(); console.log( index); //3.让我们右侧的盒子索引号的图片显示出来就行了 $(" #content div").eq(index).show( ); //4.让其余的图片(就是其他的兄弟)隐藏起来 $(" #content div").eq(index).siblings().hide(); }) }) </script> ~~~