當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQuery中的类选择器

發布時間：2023/12/31 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery中的类选择器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

類選擇器

類選擇器，顧名思義，通過class樣式類名來獲取節點

使用方式為$( “.class” )

類選擇器，相對id選擇器來說，效率相對會低一點，但是優勢就是可以多選

同樣的jQuery在實現上，對于類選擇器，如果瀏覽器支持，jQuery使用JavaScript的原生getElementsByClassName()函數來實現的

下面實現一個原生getElementsByClassName()函數的實現代碼與jQuery實現代碼的比較

<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>div {width: 100px;height: 90px;float: left;padding: 5px;margin: 5px;background-color: #EEEEEE;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div class="aaron"><p>class="aaron"</p><p>選中</p></div> <div class="aaron"><p>class="aaron"</p><p>選中</p></div><div class="imooc"><p>class="imooc"</p><p>jQuery選中</p></div><div class="imooc"><p>class="imooc"</p><p>jQuery選中</p></div><script type="text/javascript">//通過原生方法處理//樣式是可以多選的，所以得到的是一個合集//需要通過循環給合集中每一個元素修改樣式var divs = document.getElementsByClassName('aaron');for (var i = 0; i < divs.length; i++) {divs[i].style.border = "3px solid blue";}</script><script type="text/javascript">//通過jQuery直接傳入class//class選擇器可以選擇多個元素$(".imooc").css("border", "3px solid red");</script></body></html>

我們不難發現：
jQuery除了選擇上的簡單，而且沒有再次使用循環處理

不難想到$(“.imooc”).css()方法內部肯定是帶了一個隱式的循環處理，所以使用jQuery選擇節點，不僅僅只是選擇上的簡單，同時還增加很多關聯的便利操作，后續我們還會慢慢的學到其他的優勢。

總結

以上是生活随笔為你收集整理的JQuery中的类选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。