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