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