jquery通過索引值操作html元素的代碼
eq() :返回帶有被選元素的指定索引號的元素。註意:索引號從 0 開頭,所以第一個元素的索引號是 0(不是 1)。
remove(): 移除被選元素,包括所有文本和子節點。
html():返回或設置被選元素的內容。
attr():設置或返回被選元素的屬性值。如attr("class", "aaa time")
prepend():被選元素的開頭(仍位於內部)插入指定內容。
animationend 事件:在 CSS 動畫完成後觸發。
如何在jquery中使用eq()方法可以參考這篇文章 https://www.jb51.net/article/59465.htm
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .aaa { color: red; animation: mymove 4s } @keyframes mymove { 25% { font-size: 30px; color: chartreuse } 50% { color: blue } } </style> </head> <body> <div id="person"> <div><span id="t1" class="time">小明</span></div> <div id="t2"><span class="time">小濤</span></div> <div><span class="time">小花</span></div> <div><span class="time">小剛</span></div> <div><span class="time">小狗</span></div> <div><span class="time">小毛</span></div> </div> <script src="jquery-1.7.1.min.js"></script> <script> // 1.移除頁面上class=time的索引值為2的元素 $(".time").eq(2).remove() // 2.設置頁面上class=time的索引值為0的元素的內容為9999 $(".time").eq(0).html(9999) // 3.設置頁面上class=time的索引值為1的元素的class="aaa time" $(".time").eq(1).attr("class", "aaa time") // 4.隱藏頁面上class=time的索引值為4的元素 $(".time").eq(4).hide() // 5.往id=person的標簽中第一行插入html var name = "maidu" $("#person").prepend("<div><span class='time' id=" + name + ">" + name + "</span></div>") // 6.監聽動畫,當動畫結束後去掉class=aaa document.getElementsByClassName("time")[2].addEventListener('animationend', function (e) { this.classList.remove("aaa") }) </script> </body> </html>
到此這篇關於jquery通過索引值操作html元素的代碼的文章就介紹到這瞭,更多相關js索引值操作html元素內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Python全棧之學習JQuery
- jQuery的操作屬性詳解
- jQuery中DOM 屬性使用實例詳解下篇
- js獲取修改title與jQuery獲取修改title的方法
- jQuery實現調節字體大小案例