jQuery 链式编程和end方法
-
- 链式编程和end方法
- jQuery中的显示迭代
链式编程和end方法
链式编程
什么时候可以使用链式编程
当jQuery对象调用某个方法 返回值也是一个jQuery对象 那么就可以继续点出jQuery方法
在使用链式编程的时候 一定要注意 返回值的问题
$("div").width(100).width() //不会报错 正常显示
$("div").width(100).width().height(200) //报错
$("div").width(100).height(200) //不会报错
end方法
有时候 jQuery方法的返回值也是一个jQuery对象 但是 并不是想要操作的那个jQuery对象,所以链式编程就进行不下去了,如果一定要使用链式编程 可以使用end方法
end() 将jQuery对象恢复到上一次的状态 并且返回匹配元素之前的状态
end方法也是jQuery方法 也必须使用jQuery对象才可以点出来
jQuery中的显示迭代
jQuery中的显示迭代
隐式迭代会给所有的元素都加上属性,不能分别给元素设置属性
原生js的方法 使用for循环遍历
for(var i =0; i<$lis.length;i++){
// $lis[i].style.opacity=(i+1)/10 //原生的方法
$($lis[i]).css("opacity",(i+1)/10);
}
jquery自己的迭代方式 each()
$lis.each(function(index,ele){
// console.log(index,ele);
console.log(this);
// $(ele).css("opacity",(index+1)/10);
$(this).css("opacity",(index+1)/10);
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#ul{
list-style: none;
padding: 0;
}
li{
float: left;
width: 200px;
height: 200px;
background-color: yellow;
margin: 20px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<ul id="ul">
<li>我是li1标签</li>
<li>我是li2标签</li>
<li>我是li3标签</li>
<li>我是li4标签</li>
<li>我是li5标签</li>
<li>我是li6标签</li>
<li>我是li7标签</li>
<li>我是li8标签</li>
<li>我是li9标签</li>
<li>我是li10标签</li>
</ul>
</body>
<script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//需求 找到li标签 分别给他们设置不同的透明度
var $lis=$("li");
// $lis.css("opacity",0.3); //这个是隐式迭代 给所有的li标签都加上了透明度
//但是隐式迭代满足不了需求
// for(var i =0; i<$lis.length;i++){
// // $lis[i].style.opacity=(i+1)/10 //原生的方法
// $($lis[i]).css("opacity",(i+1)/10);
// }
// jquery自己的迭代方式 each()
$lis.each(function(index,ele){
// console.log(index,ele);
console.log(this);
// $(ele).css("opacity",(index+1)/10);
$(this).css("opacity",(index+1)/10);
})
})
</script>
</html>