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('<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 })
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('<li class="orange"></li>')
34 $('li:last').replaceWith(function(){
35 return '<li class="orange"></li>'
36 })
37 })
二、jquery如何实现元素的替换和遍历
1、相关知识
- 替换节点
- replaceWith():用指定的 HTML 内容或元素替换被选元素。
- replaceAll():用指定的 HTML 内容或元素替换被选元素。
replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。
- 遍历节点:each()
在jQuery中，我们可以使用each()方法来轻松实现元素的遍历操作。
语法：$(selector).each(function(index))
2、代码
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>