jQuery attr()方法
attr() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值,则返回第一个匹配元素的值。
当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。
现在我们以五星好评代码中的代码来讲解:
一、设置特有属性,
.attr(key,value) | 为标签设置特有的属性index |
---|
代码中<li>标签调用了这个方法,这样其将是<li index="10">。key对应index,value对应10。
二、查找属性方法
.attr(key) | 查找含有属性为index的标签 |
---|
查找属性为key对应的值,代码中当鼠标离开之后查找index属性对应的值,判断是否符合我们的value,是的话设置对应的样式。
三、设置多个属性
.attr(key:value,key:valuekey:value,…) | 为标签设置多个属性 |
---|
四、移除属性方法
.removeAttr(key) | 查找含有属性为index的标签 |
---|
代码中当<li>标签被点击时,移除其他<li>标签含有index属性的标签。当自己被点击时,如果自己有index属性,则自身的index会被移除。
五星好评代码
1.body样式
<ul id="uu">
<li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li>
</ul>
2.css样式
ul{
padding: 0;
display: flex;
}
li{
list-style: none;//去圆点
font-size: 36px;
color: yellow;
}
3.jquery样式
$("#uu>li").mouseenter(function(){//鼠标进入事件
$(this).text("★").prevAll().text("★").end().nextAll().text("☆");
}).click(function(){//点击事件
if ($(this).attr("index")==10) {
$(this).removeAttr("index");
}else{ $(this).attr("index","10").siblings("li").removeAttr("index");
}
}).mouseleave(function(){//鼠标离开事件
$("#uu>li").text("☆");
$("#uu>li[index=10]").text("★").prevAll().text("★").end().nextAll().text("☆");
});