jQuery選取器總結

來源:互聯網
上載者:User

一. 什麼是jQuery選取器
在Dom編程中我們只能使用有限的函數根據id或者TagName擷取Dom對象.
在jQuery中則完全不同,jQuery提供了異常強大的選取器用來協助我們擷取頁面上的對象, 並且將對象以jQuery封裝集的形式返回.
首先來看看什麼是選取器:
    //根據ID擷取jQuery封裝集   var jQueryObject = $("#testDiv");
上例中使用了ID選取器, 選取id為testDiv的Dom對象並將它放入jQuery封裝集, 最後以jQuery封裝集的形式返回."$"符號在jQuery中代表對jQuery對象的引用, "jQuery"是核心對象, 其中包含下列方法:
jQuery( expression, context )
Returns: jQuery
這個函數接收一個CSS選取器的字串,然後用這個字串去匹配一組元素。
This function accepts a string containing a CSS selector which is then used to match a set of elements.
jQuery( html, ownerDocument )
Returns: jQuery
根據HTML原始字串動態建立Dom元素.
Create DOM elements on-the-fly from the provided String of raw HTML.
jQuery( elements )
Returns: jQuery
將一個或多個Dom對象封裝jQuery函數功能(即封裝為jQuery封裝集)
Wrap jQuery functionality around a single or multiple DOM Element(s).
jQuery( callback )
Returns: jQuery
$(document).ready()的簡寫方式
A shorthand for $(document).ready().
上面摘選自jQuery官方手冊.Returns的類型為jQuery即表示返回的是jQuery封裝集.其中第一個方法有些問題, 官方介面寫的是CSS 選取器, 但是實際上這個方法不僅僅支援CSS選取器, 而是所有jQuery支援的選取器, 有些甚至是jQuery自訂的選取器(在CSS標準中不存在的選取器). 為了能讓大家理解的更清楚, 我將方法修改如下:
jQuery( selector, context )
Returns: jQuery 封裝集
根據選取器選取匹配的對象, 以jQuery封裝集的形式返回. context可以是Dom對象集合或jQuery封裝集, 傳入則表示要從context中選擇匹配的對象, 不傳入則表示範圍為文檔對象(即頁面全部對象).
上面這個方法就是我們選取器使用的核心方法.可以用"$"代替jQuery讓文法更簡介, 比如下面兩句話的效果相同:
    //根據ID擷取jQuery封裝集    var jQueryObject = $("#testDiv");    //$是jQuery對象的引用:    var jQueryObject = jQuery("#testDiv");
接下來讓我們系統的學習jQuery選取器.

二.jQuery選取器全解
通俗的講, Selector選取器就是"一個表示特殊語意的字串". 只要把選取器字串傳入上面的方法中就能夠選擇不同的Dom對象並且以jQuery封裝集的形式返回.
但是如何將jQuery選取器分類讓我犯難. 因為書上的分類和jQuery官方的分類截然不同. 最後我決定以實用為主, 暫時不去瞭解CSS3選取器標準, 而按照jQuery官方的分類進行講解.
jQuery的選取器支援CSS3選取器標準. 下面是W3C最新的CSS3選取器標準:
http://www.w3.org/TR/css3-selectors/
標準中的選取器都可以在jQuery中使用.
jQuery選取器按照功能主要分為"選擇"和"過濾". 並且是配合使用的. 可以同時使用組合成一個選取器字串. 主要的區別是"過濾"作用的選取器是指定條件從前面匹配的內容中篩選, "過濾"選取器也可以單獨使用, 表示從全部"*"中篩選. 比如:
$(":[title]")
等同於:

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。