1 changed files with 114 additions and 0 deletions
Split View
Diff Options
-
+114 -0list_by_jquery.html
+ 114
- 0
list_by_jquery.html
View File
| @@ -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> | |||