案例效果涉及的重要知识当前标签的索引获取index()HTML代码<divclass="wrapper"><ulid="left"><li><ahref="#">女靴</a></li><li><ahref="#">雪地靴</a></li><li><ahref="#">冬裙</a></li><li><ahref="#">呢大衣</a></li><li><ahref="#">毛衣</a></li><li><ahref="#">棉服</a></li><li><ahref="#">女裤</a></li><li><ahref="#">羽绒服</a></li><li><ahref="#">牛仔裤</a></li></ul><ulid="center"><li><ahref="#"><imgsrc="img/女靴.jpg"/></a></li><li><ahref="#"><imgsrc="img/雪地靴.jpg"/></a></li><li><ahref="#"><imgsrc="img/冬裙.jpg"/></a></li><li><ahref="#"><imgsrc="img/呢大衣.jpg"/></a></li><li><ahref="#"><imgsrc="img/毛衣.jpg"/></a></li><li><ahref="#"><imgsrc="img/棉服.jpg"/></a></li><li><ahref="#"><imgsrc="img/女裤.jpg"></a></li><li><ahref="#"><imgsrc="img/羽绒服.jpg"/></a></li><li><ahref="#"><imgsrc="img/牛仔裤.jpg"/></a></li><li><ahref="#"><imgsrc="img/女包.jpg"/></a></li><li><ahref="#"><imgsrc="img/男包.jpg"/></a></li><li><ahref="#"><imgsrc="img/登山鞋.jpg"/></a></li><li><ahref="#"><imgsrc="img/皮带.jpg"/></a></li><li><ahref="#"><imgsrc="img/围巾.jpg"/></a></li><li><ahref="#"><imgsrc="img/皮衣.jpg"/></a></li><li><ahref="#"><imgsrc="img/男毛衣.jpg"/></a></li><li><ahref="#"><imgsrc="img/男棉服.jpg"/></a></li><li><ahref="#"><imgsrc="img/男靴.jpg"/></a></li></ul><ulid="right"><li><ahref="#">女包</a></li><li><ahref="#">男包</a></li><li><ahref="#">登山鞋</a></li><li><ahref="#">皮带</a></li><li><ahref="#">围巾</a></li><li><ahref="#">皮衣</a></li><li><ahref="#">男毛衣</a></li><li><ahref="#">男棉服</a></li><li><ahref="#">男靴</a></li></ul></div>CSS代码*{margin:0;padding:0;font-size:12px;}ul{list-style:none;}a{text-decoration:none;}.wrapper{width:298px;height:248px;margin:100pxauto0;border:1pxsolidpink;overflow:hidden;}#left,#center,#right{float:left;}#leftli,#rightli{background:url(../img/lili.jpg)repeat-x;}#leftlia,#rightlia{display:block;width:48px;height:27px;border-bottom:1pxsolidpink;line-height:27px;text-align:center;color:black;}#leftlia:hover,#rightlia:hover{color:#fff;background-image:url(../img/abg.gif);}#center{border-left:1pxsolidpink;border-right:1pxsolidpink;}img{width:200px;height:250px;}JS代码$(function(){//绑定左边的li标签鼠标属性$('#leftli').mouseover(function(){//获取当前li标签索引varindex=$(this).index();//展示相应索引图片$('#centerli').eq(index).show();//隐藏其他图片$('#centerli').eq(index).siblings('li').hide()//链式写法$('#centerli').eq(index).show().siblings('li').hide();});//绑定右边的li标签鼠标属性$('#rightli').mouseover(function(){//获取鼠标当前索引9是左边的图片是9开始的varindex=$(this).index()+9;//展示相应索引图片$('#centerli').eq(index).show();//隐藏其他索引图片$('#centerli').eq(index).siblings('li').hide()//链式写法$('#centerli').eq(index).show().siblings('li').hide();})})案例图片下载：淘宝服饰案例
如下图，只能选着一个涉及的重要知识隐式迭代、同级元素HTML代码<button>快进</button><button>快进</button><button>快进</button><button>快进</button><button>快进</button><button>快进</button>JS代码$(function(){//给所有button绑定点击事件$('button').click(function(){//当前元素设置一个背景颜色$(this).css('background','pink');//当前元素其他同辈元素，去掉颜色$(this).siblings('button').css('background','')//链式写法$(this).css('background','pink').siblings('button').css('background','')})})
效果CSS代码*{padding:0;margin:0;}ul{list-style-type:none;margin:100px;}.menu-head{width:185px;height:47px;line-height:47px;padding-left:38px;font-size:17px;color:#475052;cursor:pointer;border:1pxsolid#e1e1e1;position:relative;margin:0px;font-weight:bold;background:#f1f1f1centerrightno-repeat;}.menu-list.current{background:#f1f1f1centerrightno-repeat;}.menu-body{width:223px;height:auto;overflow:hidden;line-height:38px;border-left:1pxsolid#e1e1e1;backguound:#fff;border-right:1pxsolid#e1e1e1;display:none;}.menu-bodya{display:block;width:223px;height:38px;line-height:38px;padding-left:38px;color:#777;background:#fff;text-decoration:none;border-bottom:1pxsolid#e1e1e1;}HTML代码<body><ulclass="menu-list"><li><pclass="menu-head">目标管理</p><divclass="menu-body"><ahref="#">主题空间</a><ahref="#">项目任务</a><ahref="#">工作计划</a><ahref="#">日程事件</a><ahref="#">时间视图</a></div></li><li><pclass="menu-head">会议管理</p><divclass="menu-body"><ahref="#">主题空间</a><ahref="#">会议安排</a><ahref="#">待开会议</a><ahref="#">已开会议</a><ahref="#">会议资源</a></div></li><li><pclass="menu-head">知识社区</p><divclass="menu-body"><ahref="#">我的收藏</a><ahref="#">知识广场</a><ahref="#">文档中心</a><ahref="#">我的博客</a><ahref="#">文档库管理</a></div></li></ul></body>JS代码第一代$(function(){//鼠标经过$('.menu-head').mouseover(function(){//$(this)JQuery当前元素//查找当前元素的，同级元素$(this).siblings('.menu-body').show()})//鼠标离开$('.menu-head').mouseout(function(){//$(this)JQuery当前元素$(this).siblings('.menu-body').hide()})})JS代码第二代利用hover()函数，合并鼠标的经过与离开的事件hover([over,]out)参数：over：鼠标移到元素上要触发的函数out：鼠标移出元素要触发的函数//组合写法$('.menu-head').hover(//鼠标经过function(){$(this).siblings('.menu-body').slideDown()},//鼠标离开function(){$(this).siblings('.menu-body').slideUp()});JS代码第三代利用hover()函数，合并鼠标的经过与离开的事件hover([over,]out)只写一个参数，代表无论鼠标经过还是鼠标退出，都要执行这个函数//组合写法$('.menu-head').hover(//鼠标事件，切换滑动function(){$(this).siblings('.menu-body').slideToggle()})
数组遍历方法：forEach()原生JS方法原生的JSforEach()不能遍历伪数组vara=[11,12,13,14,15,16];//遍历数组，但不能遍历伪数组，一个回调函数a.forEach(function(value,index){console.log(value,index);});数组遍历方法：each()JQuery静态方法JQueryeach()静态方法，可以遍历数组，也可以遍历伪数组//伪数组就是一个对象varb={'a':1,'b':2,'c':3,'d':4,length:4};//使用JQuery的each静态方法遍历伪数组$.each(b,function(index,value){console.log(index,value);})数组遍历方法：map()原生JS方法与foeEach()函数一样，不能遍历伪数组map(function(值，索引，该数组){})vara=[11,12,13,14,15,16];a.map(function(value,index,array){console.log(value,index,array);});数组遍历方法：map()JQuery静态方法JQuerymap()静态方法，可以遍历数组，也可以遍历伪数组varb={1:1,2:2,3:3,4:4,length:4};res=$.map(b,function(value,index){returnvalue+index});console.log(res)map()函数的作用是：遍历数组，然后对数组的值进行操作，返回一个新的数组trim()作用：去除字符串前后的空格参数：需要去除的字符串返回值：去除后的字符串vara='aaa';console.log("---"+a+"---");varres=$.trim(a);console.log(res)isWindow()作用：判断传入的参数是否是Window是否是Window对象参数：需要判断的对象返回值：true/false//真数组vararr=[1,2,3,4,5,6];//伪数组vararrlike={0:1,1:3,2:5,3:6,4:7,length:5};//对象varobj={"name":"aaa","age":5};//函数varfn=function(){};//window对象varw=window;varres=$.isWindow(w);console.log(res);isArray()作用：判断传入的参数是否是真数组参数：需要判断的对象返回值：true/false//真数组vararr=[1,2,3,4,5,6];//伪数组vararrlike={0:1,1:3,2:5,3:6,4:7,length:5};//对象varobj={"name":"aaa","age":5};//函数varfn=function(){};//window对象varw=window;varres=$.isArray(w);console.log(res);isFunction()作用：判断传入的参数是否是函数参数：需要判断的对象返回值：true/falsevarres=$.isFunction($);console.log(res);//-->true说明JQuery本质上是一个函数
jQuery基础选择器名称用法描述ID选择器$("#id")获取指定ID的元素类选择器$(".class")获取同一类的class的元素标签选择器$("div")获取同一类标签的所有元素全选选择器$("*")匹配所有元素并集选择器$("div,p,li")选取多个元素交集选择器$("li.current")交集元素jQuery层级选择器名称用法描述子代选择器$("ul>li");使用>查找下一级标签，不会获取孙子层元素后代选择器$("ulli");使用空格，代表获取ul下的所有li元素，包括孙子等jQuery筛选选择器语法用法描述:first$("li:first")选择第一个li标签:last$("li:last")选择最后一个li标签:eq(index)$("li:eq(0)")选择索引为0的li标签:odd$("li:odd")选择索引为奇数的li标签:even$("div,p,li")选择索引为偶数的li标签jQuery筛选方法selector代表选择器的意思语法用法描述parent()$("li").parent()查找父级元素children(selector)$("ul").children("li")相当于$("ul>li"),最近的一级find()$("ul").find("li")相当于后代选择器$("ulli")siblings(selector)$(".first").siblings("li")查找同级的li标签nextAll([expr])$("div").nextAll()查找当前元素之后的所有同级元素prevAll([expr])$("div").prevtAll([expr])查找当前元素之前的所有同级元素hasClass(class)$("divi").hasClass('pro')检查某个标签是否包含某个特定的class，有返回trueeq(index)$("div").eq(0)相当于$("div:eq(0)")标签过滤器小例子//查找div下的第一个li，设置为pink色$("divli:first").css("color","pink");//查找同级的所有标签$("span").siblings()//查找同级的所有标签$("span").siblings()