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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。