OpenI
/
新的项目测试

<!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>