jQuery方法
隐式迭代
隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。
如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。
下面是博主自己写的案例供大家参考:
案例效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2a1d9da14ef2a8f1471d402bc5e8a990.gif)
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.1.min.js"></script>
<style>
ul{
margin: 0;
padding: 0;
list-style: none;
font-size: 60px;
color: red;
}
li{
float: left;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script>
$(function () {
$("ul li").on("mouseenter", function () {
$(this).text("★").prevAll("li").text("★").end().nextAll().text("☆");
});
$("ul li").on("mouseleave", function () {
if ($("li.current").length === 0) {
$(li).text("☆");
} else {
$(this).text("★").prevAll("li").text("★").end().nextAll().text("☆");
}
});
$("ul li").on("click", function () {
$(this).attr("class","current").siblings().removeAttr("class");
});
})
</script>
</body>
</html>
each方法
有了隐式迭代,为什么还要使用each函数遍历?
大部分情况下是不需要使用each方法的,因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理,这时候就用到了each方法
作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数
//参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素(DOM对象)
$(selector).each(function(index,element){});
Element是一个 js对象,需要转换成jquery对象
案例展示
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.1.min.js"></script>
<style>
li{
width:200px;
height: 200px;
background-color: skyblue;
margin: 20px;
list-style: none;
text-align: center;
line-height: 200px;
font-size: 20px;
float: left;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<script>
$(function () {
$("li").each(function (index,element) {
$(element).css("opacity",$(element).text()*0.1);
})
})
</script>
</body>
</html>