js进阶 11-14 jquery如何实现元素的替换和遍历

时间 2020-05-22

原文原文链接

js进阶 11-14 jquery如何实现元素的替换和遍历

1、总结

一句话总结：替换：replaceAll() 与 replaceWith()。遍历：each()。

一、replaceAll() 与 replaceWith() 的异同是什么？

replaceAll() 与 replaceWith() 做用相同。差别在于语法：内容和选择器的位置，以及 replaceWith() 可以使用函数进行替换。javascript

31  $('#btn1').click(function(){ 32 //$('li:last').replaceWith($('li:first')) 33 // $('li:last').replaceWith('<li class="orange"></li>') 34  $('li:last').replaceWith(function(){ 35 return '<li class="orange"></li>' 36  }) 37  }) 38  $('#btn2').click(function(){ 39 //$($('li:first')).replaceAll($('li:last')) 40  $('<li class="orange"></li>').replaceAll($('li:last')) 41  })

二、jquery中怎么实现元素的遍历？

each()方法html

42  $('#btn3').click(function(){ 43 // $('li').each(function(){ 44 // alert($(this).text()) 45 // }) 46  $('li').each(function(index){ 47 var arr=["HTML5","JavaScript", "jQuery"] 48  $(this).text(arr[index]) 49  }) 50  })

三、jquery的替换的参数中能够放哪些东西？

jquery选择器（jquery对象），标签（dom的elememt对象），匿名函数（返回dom的element对象）java

31  $('#btn1').click(function(){ 32 //$('li:last').replaceWith($('li:first')) 33 // $('li:last').replaceWith('<li class="orange"></li>') 34  $('li:last').replaceWith(function(){ 35 return '<li class="orange"></li>' 36  }) 37  })

2、jquery如何实现元素的替换和遍历

一、相关知识

替换节点
- replaceWith():用指定的 HTML 内容或元素替换被选元素。
- replaceAll():用指定的 HTML 内容或元素替换被选元素。
  replaceAll() 与 replaceWith() 做用相同。差别在于语法：内容和选择器的位置，以及 replaceWith() 可以使用函数进行替换。jquery
遍历节点:each()
在jQuery中，咱们能够使用each()方法来轻松实现元素的遍历操做。dom

语法：$(selector).each(function(index))函数

二、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style>
10  li{
11  background: #ccc;margin-top: 25px;width: 150px;
12         }
13  .orange{background: orange}
14  .red{background: red}
15  .green{background: green}
16  .ccc{background: #ccc;}
17     </style>
18 </style>
19 </head>
20 <body>
21     <ol>
22         <li class="orange">1</li>
23         <li class="red"><i>2</i></li>
24         <li class="green">3</li>
25     </ol>
26     <input id="btn1" type="button" value='replaceWith'>
27     <input id="btn2" type="button" value='replaceAll'>
28     <input id="btn3" type="button" value='each'>
29     <script type="text/javascript">
30  $(function(){ 31  $('#btn1').click(function(){ 32                 //$('li:last').replaceWith($('li:first'))
33                 // $('li:last').replaceWith('<li class="orange"></li>')
34  $('li:last').replaceWith(function(){ 35                     return '<li class="orange"></li>'
36  }) 37  }) 38  $('#btn2').click(function(){ 39             //$($('li:first')).replaceAll($('li:last'))
40  $('<li class="orange"></li>').replaceAll($('li:last')) 41  }) 42  $('#btn3').click(function(){ 43                 // $('li').each(function(){
44                 // alert($(this).text())
45                 // })
46  $('li').each(function(index){ 47                     var arr=["HTML5","JavaScript", "jQuery"] 48  $(this).text(arr[index]) 49  }) 50  }) 51  }) 52     </script>
53 </body>
54 </html>