快捷導(dǎo)航

讀jQuery之三（構(gòu)建選擇器）

更新時(shí)間：2011年06月11日 01:19:07 作者：

前面兩篇已經(jīng)道明了jQuery的核心框架。弄清楚了jQuery對(duì)象的組成，以及如何用extend方法來(lái)擴(kuò)展庫(kù)。鏈?zhǔn)讲僮?也僅僅是方法體內(nèi)返回this。

為了敘述每一篇的重點(diǎn)，其示例代碼都是最精簡(jiǎn)的，比如選擇器只能傳HTMLElement和id。

這篇我們?cè)鰪?qiáng)下選擇器，依據(jù)2/8原則，這里僅實(shí)現(xiàn)最常用的幾種。

1, 通過(guò)id獲取,該元素是唯一的
$('#id')

2, 通過(guò)className獲取
$('.cls') 獲取文檔中所有className為cls的元素
$('.cls', el)
$('.cls', '#id')
$('span.cls') 獲取文檔中所有className為cls的span元素
$('span.cls', el) 獲取指定元素中className為cls的元素, el為HTMLElement (不推薦)
$('span.cls', '#id') 獲取指定id的元素中className為cls的元素

3, 通過(guò)tagName獲取
$('span') 獲取文檔中所有的span元素
$('span', el) 獲取指定元素中的span元素, el為HTMLElement (不推薦)
$('span', '#id') 獲取指定id的元素中的span元素

4, 通過(guò)attribute獲取
$('[name]') 獲取文檔中具有屬性name的元素
$('[name]', el)
$('[name]', '#id')
$('[name=uname]') 獲取文檔中所有屬性name=uname的元素
$('[name=uname]', el)
$('[name=uname]', '#id')
$('input[name=uname]') 獲取文檔中所有屬性name=uname的input元素
$('input[name=uname]', el)
$('input[name=uname]', '#id')

示例：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>zchain test</title> 
<script src="http://demo.jb51.net/js/2011/zchain/zchain-0.3.js"></script> 
</head> 
<body> 
<div id='content'>aaa</div> 
<div>bbb</div> 
<p class="pra">ccc</p> 
<input type="submit" value="submit"/> 
<input type="button" value="submit"/> 
<script type="text/javascript"> 
var obj1 = $("#content"); // id 
var obj2 = $('div'); // tagName 
var obj3 = $('.pra'); // className 
var obj4 = $('input[type=button]'); // attribute 

console.log(obj1); 
console.log(obj2); 
console.log(obj3); 
console.log(obj4); 
</script> 
</body> 
</html> 

Firebug輸出如下

http://demo.jb51.net/js/2011/zchain/zchain-0.3.js

您可能感興趣的文章:

選擇器

相關(guān)文章

easyui datebox 時(shí)間限制，datebox開(kāi)始時(shí)間限制結(jié)束時(shí)間，datebox截止日期比起始日期大的實(shí)現(xiàn)代碼
這篇文章主要介紹了easyui datebox 時(shí)間限制，datebox開(kāi)始時(shí)間限制結(jié)束時(shí)間，datebox截止日期比起始日期大的實(shí)現(xiàn)代碼，需要的朋友參考下吧
2017-01-01
jQuery是用來(lái)干什么的 jquery其實(shí)就是一個(gè)js框架
jQuery是一bai個(gè)簡(jiǎn)潔而快速的JavaScript庫(kù)，可用于du簡(jiǎn)化zhi事件處理，HTML文檔遍歷，Ajax交互和dao動(dòng)畫(huà)，以更快速開(kāi)發(fā)網(wǎng)站
2021-02-02
jquery 實(shí)現(xiàn)輪播圖詳解及實(shí)例代碼
這篇文章主要介紹了jquery 實(shí)現(xiàn)輪播圖相關(guān)資料,經(jīng)過(guò)一段時(shí)間學(xué)習(xí)jquery 的知識(shí)，這里寫一個(gè)簡(jiǎn)單的輪播圖，需要的朋友可以參考下
2016-10-10
jQuery+canvas實(shí)現(xiàn)簡(jiǎn)單的球體斜拋及顏色動(dòng)態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實(shí)現(xiàn)簡(jiǎn)單的球體斜拋及顏色動(dòng)態(tài)變換效果,通過(guò)jQuery+html5的canvas利用時(shí)間函數(shù)進(jìn)行實(shí)時(shí)數(shù)學(xué)運(yùn)算動(dòng)態(tài)繪制拋物線圖形的技巧,需要的朋友可以參考下
2016-01-01
jquery自定義屬性(類型/屬性值)
屬性的類型可以為：圖片、文本框、按鈕，然后選擇需要設(shè)置的屬性值：src、width、height、title、value等等，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈
2013-05-05
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
以前用原生的JS做過(guò)類似拖拽div的效果，現(xiàn)在按原思路改做成一個(gè)JQ的小插件，當(dāng)作制作JQ插件的一個(gè)小練習(xí)，感興趣的朋友可以了解下哈
2013-05-05
firefox瀏覽器用jquery.uploadify插件上傳時(shí)報(bào)HTTP 302錯(cuò)誤
這篇文章主要介紹了firefox瀏覽器用jquery.uploadify插件上傳時(shí)報(bào)HTTP 302錯(cuò)誤,分析了下，原來(lái)是利用flash進(jìn)行post上傳時(shí)沒(méi)有包含原來(lái)的session信息，而是重新創(chuàng)建了一個(gè)session，知道原因了，我們來(lái)看看如何解決吧。
2015-03-03
jquery實(shí)現(xiàn)簡(jiǎn)單實(shí)用的彈出層效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單實(shí)用的彈出層效果代碼,涉及jquery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
jQuery選擇器及jquery案例詳解(必看)
本文給大家介紹jquery選擇器的相關(guān)知識(shí)，并通過(guò)案例給大家介紹jquery知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05
jquery中$.fn和圖片滾動(dòng)效果實(shí)現(xiàn)的必備知識(shí)總結(jié)
圖片滾動(dòng)效果相信大家都使用過(guò)，看上去很簡(jiǎn)單的一個(gè)效果，如果想熟練的掌握必須知道jquery、IIFE、setInterval等基礎(chǔ)以及$.fn用法，下面這篇文章主要介紹了關(guān)于jquery中$.fn和圖片滾動(dòng)效果制作的必備知識(shí)，需要的朋友可以參考下。
2017-04-04