链式编程原理:return this
但有时候获取操作的时候,会返回获取到相应的值,无法返回this
比如 链式的多了,就不知道返回谁,如果像返回之前this 就用 end()
$(".comment li").on("mouseente",function(){ $(this).text(wjx_sel).prevAll().text().nextAll().text() })
end() 结束当前链最近的一次过滤操作,并且返回匹配之前的状态 this
隐式迭代原来
隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。
如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。
案例淘宝评论五角星
$(function(){ var wjx_none = '☆'; // 空心五角星 var wjx_sel = '★'; // 实心五角星 //需求1:鼠标移上当前五角星和他之前的额五角星都变成实心,后面的是空心 //需求2:鼠标点击当前五角星和他之前的额五角星都变成实心,后面的是空心 //鼠标移上事件 $(".comment li").on("mouseenter",function(){ $(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none) }); //鼠标离开 $(".comment li").on("mouseleave",function(){ //bug:如果没有点击过li,那么会出现无法清除的现象,处理办法就是先判断,看看是否有current类 if($("li.current").length >0){ //当鼠标移开的时候,谁有current类名,那么当前和之前所有的li前部是实心五角星,后面的所有li都是空心 $("li.current").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none) }else{ $(".comment li").text(wjx_none) } }); //鼠标点击 $(".comment li").on("click",function(){ //点击哪个li给他加一个类名。清空其他所有的li的类名 $(this).attr("class","current").siblings().removeClass() }); }) </script>
each 方法
遍历jq对象集合,为每个元素执行一个函数
$(" 获取元素").each( fucntion( 参数1(index 当前元素索引值) ,参数2(当前元素element)){ 执行函数})
tagName:获得元素的标签名:
$("ul li").each(function(index,element){ console.log(index +"^^^^^"+ element.tagName)//当前对象 )