From 1efd268914942c4ec8692193bb40c8fb3c165ddf Mon Sep 17 00:00:00 2001
From: 15115443481 <2474480328@qq.com>
Date: Tue, 31 Jan 2023 14:35:02 +0800
Subject: [PATCH] 0000

---
 list_by_jquery.html | 114 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 list_by_jquery.html
diff --git a/list_by_jquery.html b/list_by_jquery.html
new file mode 100644
index 0000000..d6fbc1f
--- /dev/null
+++ b/list_by_jquery.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>动态列表</title>
+    <style>
+    	* {
+			margin: 0;
+			padding: 0;
+		}
+		body {
+			background-color: #000;
+			color: #fff;
+		}
+		#app {
+			width: 40%;
+			margin: 20px auto;
+		}
+		#fruits>li {
+			width: 90%;
+			height: 50px;
+			background-color: #6ca;
+			margin: 4px 0;
+			text-align: center;
+			font-size: 20px;
+			list-style-type: none;
+			line-height: 50px;
+		}
+		#fruits>li>a {
+			float: right;
+			color: #fff;
+			text-decoration: none;
+			margin-right: 10px;
+		}
+		#fruits+div {
+			margin-top: 20px;
+		}
+		#fname {
+			width: 70%;
+			height: 40px;
+			color: #fff;
+			border-radius: 8px;
+			border: none;
+			outline: none;
+			font-size: 20px;
+			text-align: center;
+			vertical-align: middle;
+			background-color: #999;
+		}
+		#ok {
+			width: 19%;
+			height: 40px;
+			color: #fff;
+			background-color: #a45;
+			border: none;
+			outline: none;
+			font-size: 16px;
+			vertical-align: middle;
+		}
+    </style>
+</head>
+<body>
+    <div id="app">
+        <ul id="fruits">
+            <li>苹果<a href="">×</a></li>
+            <li>香蕉<a href="">×</a></li>
+            <li>榴莲<a href="">×</a></li>
+            <li>火龙果<a href="">×</a></li>
+        </ul>
+        <div>
+            <input type="text" id="fname">
+            <button id="ok">确定</button>
+        </div>
+    </div>
+    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
+    <script>
+    // 1. $函数的参数是一个函数，该函数是页面加载完成后执行的回调函数
+    $(() => {
+        function removeItem(evt) {
+            evt.preventDefault()
+            // 4. $函数的参数是原生JavaScript对象，返回该原生JavaScript对象对应的jQuery对象
+            $(evt.target).parent().remove()
+        }
+
+        function addItem(evt) {
+            let fname = $('#fname').val().trim()
+            if (fname.length > 0) {
+                $('#fruits').append(
+                    // 3. $函数的参数是标签字符串，创建对应的标签元素并返回jQuery对象
+                    $('<li>').text(fname).append(
+                        $('<a>').attr('href', '').text('×')
+                        	.on('click', removeItem)
+                    )
+                )
+            }
+            $('#fname').val('')
+            // jQuery对象通过下标运算或get方法可以获得与之对应的原生JavaScript对象
+            // input.get(0).focus()
+            $('#fname')[0].focus()
+        }
+
+        // 2. $函数的参数是选择器字符串，返回对应元素的jQuery对象
+        $('#fruits a').on('click', removeItem)
+        $('#ok').on('click', addItem)
+        $('#fname').on('keydown', (evt) => {
+        	let code = evt.keyCode || evt.which
+        	if (code == 13) {
+        		addItem(evt) 
+        	}
+        })
+    })
+    </script>
+</body>
+</html>
\ No newline at end of file
