jQuery方法小记

Posted on 2022-11-24 21:20  梦中千秋  阅读(9)  评论(0)  编辑  收藏  举报

几个方法使用

jQuery

CDN

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

clone()

//复制
				$("button:eq(0)").click(function() {
					$("ol").append($("li").clone());//在最后添加 复制的所有元素
				});
				$("button:eq(0)").hover(
					function() {
						$("ol").css("color", "pink");
					},
					function() {
						$("ol").css("color", "black");
					});

append()

//增加		

				$("button:eq(1)").click(function() {
				const lis_r = $("<li>jQuery replaceWith()方法</li>");
				const lis_c = $("<li>jQuery clone()方法</li>");
					if ($("li").html() == "jQuery clone()方法") {
						$("ol").append(lis_c);
					} else {
						$("ol").append(lis_r);
					}
				});

remove()，empty()

				$("button:eq(2)").dblclick(function() {
					tips();
					$("ol").empty();//双击清空
				});
				$("button:eq(2)").click(function() {
					$("li:last").remove();//删除最后一个元素
				});	
				function tips() {
					if ($("ol").text() == "") {
						alert("请先增加元素！");
					};
				};

replaceWith()

//替换
				$("button:eq(3)").click(function() {
				const lis_r = $("<li>jQuery replaceWith()方法</li>");
				const lis_c = $("<li>jQuery clone()方法</li>");
					if ($("li").html() == "jQuery clone()方法") {
						$("li").replaceWith(lis_r); //li元素替换为 lis_r
					} else {
						$("li").replaceWith(lis_c);
					}
				});
				$("button:eq(4)").click(function() {
					$("button:eq(2)").unbind("click");
				});

全部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">			
			$(document).ready(function() {
				//复制
				$("button:eq(0)").click(function() {
					$("ol").append($("li").clone());
				});
				$("button:eq(0)").hover(
					function() {
						$("ol").css("color", "pink");
					},
					function() {
						$("ol").css("color", "black");
					});
				//增加		

				$("button:eq(1)").click(function() {
				const lis_r = $("<li>jQuery replaceWith()方法</li>");
				const lis_c = $("<li>jQuery clone()方法</li>");
					if ($("li").html() == "jQuery clone()方法") {
						$("ol").append(lis_c);
					} else {
						$("ol").append(lis_r);
					}
				});
				//删除
				$("button:eq(2)").dblclick(function() {
					tips();
					$("ol").empty();
				});
				$("button:eq(2)").click(function() {
					$("li:last").remove();
				});

				function tips() {
					if ($("ol").text() == "") {
						alert("请先增加元素！");
					};
				};
				//替换
				$("button:eq(3)").click(function() {
				const lis_r = $("<li>jQuery replaceWith()方法</li>");
				const lis_c = $("<li>jQuery clone()方法</li>");
					if ($("li").html() == "jQuery clone()方法") {
						$("li").replaceWith(lis_r);
					} else {
						$("li").replaceWith(lis_c);
					}
				});
				$("button:eq(4)").click(function() {
					$("button:eq(2)").unbind("click");
				});
			});
		</script>
		<style type="text/css">
			/* 从1开始 */
			button:nth-child(5){
				background: #245123;
			}
		</style>
	</head>
	<body>
		<button type="button">复制</button>
		<button type="button">增加</button>
		<button type="button">删除</button>
		<button type="button">替换</button>
		<button type="button">失效</button>
		<ol>
			<li>jQuery clone()方法</li>
		</ol>
	</body>
</html>