初窺JQuery(一)jquery選擇符 必備知識點(diǎn)
更新時(shí)間:2010年11月25日 18:11:08 作者:
JQuery強(qiáng)大的選擇符可以讓我們獲得頁面中任何元素進(jìn)行操作,并且使用簡單方便,可讀性強(qiáng)。
本章內(nèi)容根據(jù)本人在開發(fā)中常用到的選擇符作為例子來進(jìn)行講解,如有更多常用的簡單的例子可回復(fù)提供,參與討論,一起學(xué)習(xí)研究,首先我們從常用的CSS選擇符開始。
CSS選擇符包括通配選擇符、ID選擇符、屬性選擇符、包含選擇符、類選擇符等,他們的基本格式為:
通配選擇符:$("#ID *") 表示該元素下的所有元素。
ID選擇符:$("#ID") 表示獲得指定ID的元素。
屬性選擇符:$("input[type=text]") 表示type屬性為text的所有input元素。
包含選擇符:$("ul li a") 表示ul元素下所有的li元素里的所有a元素。
類選擇符:$(".Class") 表示所有引用Class樣式的元素。
當(dāng)然這些選擇符是可以配合使用的比如說:$("#ID input[type=text]"),這種寫法表示指定ID元素下的type屬性為text的所有input元素。在JQuery中有些細(xì)微的改動都是非常有趣的,比如$("ul li").addClass("Class")和$("ul > li").addClass("Class"),他們顯示出來的效果是不同的,第一種是將ul下的所有l(wèi)i元素添加樣式,第二種是將ul下的第一個(gè)li元素添加樣式,具體更多的使用方法可以自行測試。
XPath選擇符(自1.3版本后已經(jīng)不支持,但也可了解下)所涵蓋的內(nèi)容不多,他們的基本格式為:
$("[@title]") 表示選擇所有元素內(nèi) 屬性帶有title的元素。
$("[@title^=t]") 表示所有屬性title值是以t為開頭的元素。
$("[@title$=t]") 表示所有屬性title值是以t為結(jié)尾的元素。
$("[@title*=t]") 表示所有屬性title值是包含t的元素。
XPath選擇符和CSS選擇符一樣,也可以配合使用,可以多個(gè)XPath選擇符一起使用,也可以和CSS選擇符一起使用,所以想要達(dá)到你想要的要求用JQuery方法是有很多種的。
自定義選擇符是選擇以一個(gè)冒號(:)開頭的一種選擇符,說到自定義選擇符,那就不說到我們經(jīng)常用到:gt()、:eq()、:odd、:even,這些是我們最常用到的,比如:odd和:even這兩個(gè)我們通常用他來做有條紋樣式的表格,使用方法相當(dāng)簡單,如 $("#table tr:odd").addClass("odd")和$("#table tr:even").addClass("even")只要簡單的使用兩行代碼就可以制作出我們想要的條紋樣式。
當(dāng)然在實(shí)際開發(fā)中我們一般會使用選擇符配合DOM遍歷方法來進(jìn)行操作,如:
$("#table td:contains('Window窗口')").parent().find("td:gt(0)").addClass("highlight")
這句代碼表示取得'Window窗口'單元格,再取得他的父級元素,然后找到該元素中包含的所有編號大于0的單元格。當(dāng)然有些方法是可以簡化的,在這里我只是為了表示JQuery的連綴效果,這種格式也是不推薦的,我本人一般是這樣書寫的:
$("#table td:contains('Window窗口')")
.parent() //獲取父級
.find("td") //找到td元素
.not(":contains('Window窗口')") //不是window窗口的元素
.addClass("highlight"); //添加樣式
將他們分開,后面標(biāo)明,以便于增強(qiáng)可讀性。
下面我提供幾個(gè)在實(shí)際開發(fā)最常用的代碼(由于實(shí)在太晚,扛不住了?。?
$("input[type='text']").val(''); //清空所有文本框
$("#text input:text").val('');//清空text元素下所有文本框
//獲取選中的所有CheckBox的值
$("input:checkbox:checked").each(function() {
alert($(this).val());
});
$("select option:selected").val()//獲取選中的下拉框的值
$("select option:selected").text()//獲取選中的下拉框的文本
本人對于JQuery選擇符的理解到此為止,僅供參考,歡迎感興趣的朋友參與討論。未完待續(xù)........
demo打包下載
CSS選擇符包括通配選擇符、ID選擇符、屬性選擇符、包含選擇符、類選擇符等,他們的基本格式為:
通配選擇符:$("#ID *") 表示該元素下的所有元素。
ID選擇符:$("#ID") 表示獲得指定ID的元素。
屬性選擇符:$("input[type=text]") 表示type屬性為text的所有input元素。
包含選擇符:$("ul li a") 表示ul元素下所有的li元素里的所有a元素。
類選擇符:$(".Class") 表示所有引用Class樣式的元素。
當(dāng)然這些選擇符是可以配合使用的比如說:$("#ID input[type=text]"),這種寫法表示指定ID元素下的type屬性為text的所有input元素。在JQuery中有些細(xì)微的改動都是非常有趣的,比如$("ul li").addClass("Class")和$("ul > li").addClass("Class"),他們顯示出來的效果是不同的,第一種是將ul下的所有l(wèi)i元素添加樣式,第二種是將ul下的第一個(gè)li元素添加樣式,具體更多的使用方法可以自行測試。
XPath選擇符(自1.3版本后已經(jīng)不支持,但也可了解下)所涵蓋的內(nèi)容不多,他們的基本格式為:
$("[@title]") 表示選擇所有元素內(nèi) 屬性帶有title的元素。
$("[@title^=t]") 表示所有屬性title值是以t為開頭的元素。
$("[@title$=t]") 表示所有屬性title值是以t為結(jié)尾的元素。
$("[@title*=t]") 表示所有屬性title值是包含t的元素。
XPath選擇符和CSS選擇符一樣,也可以配合使用,可以多個(gè)XPath選擇符一起使用,也可以和CSS選擇符一起使用,所以想要達(dá)到你想要的要求用JQuery方法是有很多種的。
自定義選擇符是選擇以一個(gè)冒號(:)開頭的一種選擇符,說到自定義選擇符,那就不說到我們經(jīng)常用到:gt()、:eq()、:odd、:even,這些是我們最常用到的,比如:odd和:even這兩個(gè)我們通常用他來做有條紋樣式的表格,使用方法相當(dāng)簡單,如 $("#table tr:odd").addClass("odd")和$("#table tr:even").addClass("even")只要簡單的使用兩行代碼就可以制作出我們想要的條紋樣式。
當(dāng)然在實(shí)際開發(fā)中我們一般會使用選擇符配合DOM遍歷方法來進(jìn)行操作,如:
$("#table td:contains('Window窗口')").parent().find("td:gt(0)").addClass("highlight")
這句代碼表示取得'Window窗口'單元格,再取得他的父級元素,然后找到該元素中包含的所有編號大于0的單元格。當(dāng)然有些方法是可以簡化的,在這里我只是為了表示JQuery的連綴效果,這種格式也是不推薦的,我本人一般是這樣書寫的:
$("#table td:contains('Window窗口')")
.parent() //獲取父級
.find("td") //找到td元素
.not(":contains('Window窗口')") //不是window窗口的元素
.addClass("highlight"); //添加樣式
將他們分開,后面標(biāo)明,以便于增強(qiáng)可讀性。
下面我提供幾個(gè)在實(shí)際開發(fā)最常用的代碼(由于實(shí)在太晚,扛不住了?。?
$("input[type='text']").val(''); //清空所有文本框
$("#text input:text").val('');//清空text元素下所有文本框
//獲取選中的所有CheckBox的值
$("input:checkbox:checked").each(function() {
alert($(this).val());
});
$("select option:selected").val()//獲取選中的下拉框的值
$("select option:selected").text()//獲取選中的下拉框的文本
本人對于JQuery選擇符的理解到此為止,僅供參考,歡迎感興趣的朋友參與討論。未完待續(xù)........
demo打包下載
相關(guān)文章
jQuery簡單實(shí)現(xiàn)仿京東商城的左側(cè)菜單效果代碼
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)仿京東商城的左側(cè)菜單效果代碼,通過簡單的jQuery鼠標(biāo)事件及元素動態(tài)變換實(shí)現(xiàn)樣式動態(tài)切換功能,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09
jquery實(shí)現(xiàn)疊層3D文字特效代碼分享
本文主要介紹了jquery實(shí)現(xiàn)疊層3D文字特效,實(shí)現(xiàn)很簡單2015-08-08
jQuery實(shí)現(xiàn)簡單的日期輸入格式化控件
本文給大家分享的是javascript實(shí)現(xiàn)簡單的日期輸入格式化控件的方法和思路,非常的細(xì)致實(shí)用,推薦給小伙伴們2015-03-03
jQuery實(shí)現(xiàn)輸入框郵箱內(nèi)容自動補(bǔ)全與上下翻動顯示效果【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)輸入框郵箱內(nèi)容自動補(bǔ)全與上下翻動顯示效果,涉及jquery.autoComplete.js插件的使用,可實(shí)現(xiàn)輸入框內(nèi)容自動補(bǔ)全的功能,附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
jQuery模板技術(shù)和數(shù)據(jù)綁定實(shí)現(xiàn)代碼
如果你用過ASP.NET的數(shù)據(jù)綁定控件,也用過ASP或者JSP里那種通過輸出HTML元素在頁面上顯示數(shù)據(jù)的方法,你就知道ASP.NET數(shù)據(jù)綁定控件有多么方便。如果能夠?qū)⑼瑯拥墓δ茉跒g覽器端用HTML和JavaScript實(shí)現(xiàn),那該是多少美妙的事情。2010-05-05
jQuery實(shí)現(xiàn)拖拽頁面元素并將其保存到cookie的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)拖拽頁面元素并將其保存到cookie的方法,涉及jQuery基于cookie針對頁面元素屬性的相關(guān)保存操作技巧,需要的朋友可以參考下2016-06-06
animate 實(shí)現(xiàn)滑動切換效果【實(shí)例代碼】
下面小編就為大家?guī)硪黄猘nimate 實(shí)現(xiàn)滑動切換效果【實(shí)例代碼】。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05

