天天看点

jQuery 链式编程和显示迭代

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>