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