微信扫一扫打赏支持

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

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、相关知识

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

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

  2. 遍历节点: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>

 

 

 

 

 

 

 

 

 

 

 
posted @ 2018-06-25 13:42  范仁义  阅读(1296)  评论(0)  编辑  收藏  举报