|
|
系列文章導航：
從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式
從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
從零開始學習jQuery (十) jQueryUI常用功能實戰
從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件
一.摘要
本章講解jQuery最重要的選擇器部分的知識. 有了jQuery的選擇器我們幾乎可以獲取頁面上任意的一個或一組對象, 可以明顯減輕開發人員的工作量.
二.前言
編寫任何Javascript程序我們要首先獲得對象, jQuery選擇器能徹底改變我們平時獲取對象的方式, 可以獲取幾乎任何語意的對象, 比如"擁有title屬性并且值中包含test的元素", 完成這些工作只需要編寫一個jQuery選擇器字符串. 學習jQuery選擇器是學習jQuery最重要的一步.
三.Dom對象和jQuery包裝集
無論是在寫程序還是看API文檔, 我們要時刻注意區分Dom對象和jQuery包裝集.
1.Dom對象
在傳統的Javascript開發中,我們都是首先獲取Dom對象,比如:
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
系列文章導航：
從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式
從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
從零開始學習jQuery (十) jQueryUI常用功能實戰
從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件
四. 什么是jQuery選擇器
在Dom編程中我們只能使用有限的函數根據id或者TagName獲取Dom對象.
在jQuery中則完全不同,jQuery提供了異常強大的選擇器用來幫助我們獲取頁面上的對象, 并且將對象以jQuery包裝集的形式返回.
首先來看看什么是選擇器:
//根據ID獲取jQuery包裝集
var jQueryObject = $("#testDiv");
系列文章導航：
從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式
從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
從零開始學習jQuery (十) jQueryUI常用功能實戰
從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件
1. 基礎選擇器 Basics
| 名稱 | 說明 | 舉例 |
| #id | 根據元素Id選擇 | $("divId") 選擇ID為divId的元素 |
| element | 根據元素的名稱選擇, | $("a") 選擇所有元素 |
| .class | 根據元素的css類選擇 | $(".bgRed") 選擇所用CSS類為bgRed的元素 |
| * | 選擇所有元素 | $("*")選擇頁面所有元素 |
| selector1, selector2, selectorN | 可以將幾個選擇器用","分隔開然后再拼成一個選擇器字符串.會同時選中這幾個選擇器匹配的內容. | $("#divId, a, .bgRed") |
[學習建議]: 大家暫時記住基礎選擇器即可, 可以直接跳到下一節"jQuery選擇器實驗室"進行動手練習, 以后再回來慢慢學習全部的選擇器, 或者用到的時候再回來查詢.
2.層次選擇器 Hierarchy
| 名稱 | 說明 | 舉例 | |
| ancestor descendant | 使用"form input"的形式選中form中的所有input元素.即ancestor(祖先)為from, descendant(子孫)為input. | $(".bgRed div") 選擇CSS類為bgRed的元素中的所有元素. it知識庫：從零開始學習jQuery (二) 萬能的選擇器，轉載需保留來源！ 鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。 標簽：
相關文章閱讀 |
