jQuery選擇器querySelector的使用指南
簡(jiǎn)介
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll兩個(gè)方法用來更方便地從DOM選取元素，功能類似于jQuery的選擇器。這使得在編寫原生JavaScript代碼時(shí)方便了許多。
用法
兩個(gè)方法使用差不多的語(yǔ)法，都是接收一個(gè)字符串參數(shù)，這個(gè)參數(shù)需要是合法的CSS選擇語(yǔ)法。
element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');
其中參數(shù)selectors 可以包含多個(gè)CSS選擇器，用逗號(hào)隔開。
element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');
使用這兩個(gè)方法無(wú)法查找?guī)晤悹顟B(tài)的元素，比如querySelector(':hover')不會(huì)得到預(yù)期結(jié)果。
querySelector
element = document.querySelector('div#container');//返回id為container的首個(gè)div
element = document.querySelector('.foo,.bar');//返回帶有foo或者bar樣式類的首個(gè)元素
querySelectorAll
該方法返回所有滿足條件的元素，結(jié)果是個(gè)nodeList集合。查找規(guī)則與前面所述一樣。
elements = document.querySelectorAll('div.foo');//返回所有帶foo類樣式的div
需要注意的是返回的nodeList集合中的元素是非實(shí)時(shí)的.
- 淺析jQuery事件之on()方法綁定多個(gè)選擇器,多個(gè)事件
- jQuery移動(dòng)端日期(datedropper)和時(shí)間(timedropper)選擇器附源碼下載
- jQuery插件實(shí)現(xiàn)適用于移動(dòng)端的地址選擇器
- jquery通過closest選擇器修改上級(jí)元素的方法
- NodeJS使用jQuery選擇器操作DOM
- JQuery選擇器綁定事件及修改內(nèi)容的方法
- jQuery大于號(hào)(>)選擇器的作用解釋
- jQuery中:selected選擇器用法實(shí)例
- jQuery中:nth-child選擇器用法實(shí)例
- jQuery中:first-child選擇器用法實(shí)例
- jQuery選擇器總結(jié)之常用元素查找方法
相關(guān)文章
放棄用你的InnerHTML來輸出HTML吧 jQuery Tmpl不詳細(xì)講解
在Ajax橫道的今天，我們?cè)陧?yè)面交互上有了更高的要求，動(dòng)態(tài)生成HTML毫無(wú)疑問是其中的一種。動(dòng)態(tài)生成HTML的方式多種多樣，最終通過一定的方法輸出給用戶innerHTML、documentWrite等方式2013-04-04
基于Jquery+Ajax+Json實(shí)現(xiàn)分頁(yè)顯示附效果圖
后臺(tái)action產(chǎn)生json數(shù)據(jù)，js獲取json數(shù)據(jù)分頁(yè)顯示，詳細(xì)的示例代碼如下，需要的朋友可以學(xué)習(xí)下2014-07-07
詳解JavaScript異步編程中jQuery的promise對(duì)象的作用
這篇文章主要介紹了JavaScript異步編程中jQuery的promise對(duì)象的作用,同時(shí)也談到了js的Dojo框架中promise模式的實(shí)現(xiàn),需要的朋友可以參考下2016-05-05
有些WEB開發(fā)者，會(huì)引用一個(gè)JQuery類庫(kù)，然后在網(wǎng)頁(yè)上寫一寫$("#")，$(".")，寫了幾年就對(duì)別人說非常熟悉JQuery。其實(shí)你只是了解一點(diǎn)皮毛，并不知道其中的道理，下面通過本篇文章給大家介紹jquery定義插件的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
本文為大家介紹下jquery1.9 下如何檢測(cè)瀏覽器類型和版本，下面有個(gè)不錯(cuò)的示例，大家可以參考下2013-12-12
jquery checkbox選擇器在程序開發(fā)中經(jīng)常會(huì)用到，接下來通過實(shí)例代碼給大家介紹jquery獲取checkbox選中的值，需要的朋友參考下2016-01-01
jQuery使用fadein方法實(shí)現(xiàn)漸出效果實(shí)例
這篇文章主要介紹了jQuery使用fadein方法實(shí)現(xiàn)漸出效果的方法,以一個(gè)簡(jiǎn)單實(shí)例形式分析了jQuery中fadein方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
Jquery焦點(diǎn)與失去焦點(diǎn)示例應(yīng)用
這篇文章主要介紹了Jquery焦點(diǎn)與失去焦點(diǎn)示例應(yīng)用,需要的朋友可以參考下2014-06-06
jQuery實(shí)現(xiàn)的表頭固定效果實(shí)例【附完整demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的表頭固定效果,結(jié)合完整實(shí)例形式分析了jQuery基于插件實(shí)現(xiàn)的表頭固定功能與用法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-08-08
jquery使整個(gè)div區(qū)域可以點(diǎn)擊的方法
這篇文章主要介紹了jquery使整個(gè)div區(qū)域可以點(diǎn)擊的方法,涉及jQuery操作頁(yè)面元素與鼠標(biāo)事件的技巧,需要的朋友可以參考下2015-06-06