JQuery链式编程

最新推荐文章于 2022-11-09 12:35:37 发布

一株花开

最新推荐文章于 2022-11-09 12:35:37 发布

阅读量339

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_37349712/article/details/81091873

优点：

一句话：可以省去很多重复的代码

举个简单的栗子:

//JS中：

var per = new Object();
per.name="TomCat";
per.age=18;

//优化后的写法

var per ={
"name":"TomCat",
"age":18
}

//而在链式编程中就可以这么写这样：

per.name("TomCat").age(18);

代码如下：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../jquery-1.12.4.js"></script>
	</head>

	<body>
		<p id="p1">JQuery链式编程</p>
		<button id="btn">显示效果</button>
		<script>
			/*
			//普通JS
			var btn = document.getElementById("btn");
			btn.onclick = function() {
				var pobj = document.getElementById("p1");
				pobj.style.color = "red";
				pobj.style.fontSize = "24px";
			}
			*/

			  //链式编程：
			  $(document).ready(function () {
			      $("#btn").click(function () {
			          $("#p1").html("这是一个P段落").css("color", "red").slideUp(2000).slideDown(2000);
			      });
			  });
		</script>
	</body>

</html>