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

一、总结

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

 

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

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

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

 

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

each()方法

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 })

 

3、jquery的替换的参数中可以放哪些东西？

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

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

 

 

 

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

1、相关知识

1. 替换节点
   • replaceWith():用指定的 HTML 内容或元素替换被选元素。
   • replaceAll():用指定的 HTML 内容或元素替换被选元素。

     replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。
2. 遍历节点:each()

   在jQuery中，我们可以使用each()方法来轻松实现元素的遍历操作。

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

 

2、代码

1  2  3  5  6     
      7      8      9     18 19 20 21     
     
      22         
      
1
23         
      
2
24         
      
3
25     
     
26     27     28     29     53 54