JQuery中$之選擇器用法介紹
更新時間:2011年04月05日 22:02:41 作者:
在jQuery 中$("<span>"),這個語法等同于$(document.createElement("span")) ,這是一種用法
1.$。在jQuery 中$("<span>"),這個語法等同于$(document.createElement("span")) ,這是一種用法,在選擇元素的時候還會這樣子的用:[attribute$=value],匹配給定的屬性是以某些值結(jié)尾的元素。下面舉個例子來說明一下:
HTML代碼
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
jQuery 代碼:
$("input[name$='letter']")
結(jié)果:
[ <input name="newsletter" />, <input name="jobletter" /> ]
2.!。選擇器:[attribute!=value],匹配所有不含有指定的屬性,或者屬性不等于特定值的元素,此選擇器等價于:not([attr=value])。
例子說明一下:
HTML代碼
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代碼:
$("input[name!='newsletter']").attr("checked", true);
結(jié)果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
3.*。選擇器:[attribute*=value],匹配給定的屬性是以包含某些值的元素。舉個例子說明一下:
HTML 代碼:
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
jQuery 代碼:
$("input[name*='man']")
結(jié)果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
4.@。匹配包含給定屬性的元素。注意,在jQuery 1.3中,前導(dǎo)的@符號已經(jīng)被廢除!如果想要兼容最新版本,只需要簡單去掉@符號即
可。
5.^。選擇器:[attribute^=value],匹配給定的屬性是以某些值開始的元素,下面舉個例子來說明一下:
HTML 代碼:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jQuery 代碼:
$("input[name^='news']")
結(jié)果:
[ <input name="newsletter" />, <input name="newsboy" /> ]
在jquery中,當(dāng)使用$("input[name='metaId']“).val()不能直接獲得被選擇的radio的值,只是獲得 radio標(biāo)簽的第一個值,這可能jquery使用xpath語言了進行查找有關(guān),而我們通常是想獲得被選中的radio的值,有以下幾種方法:
1,使用$("input[name='metaId']:checked").val()獲得 //name代表radio中name屬性名
2,使用$(":radio:checked").val()獲得 //限制頁面只有一組radio標(biāo)簽
HTML代碼
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
jQuery 代碼:
$("input[name$='letter']")
結(jié)果:
[ <input name="newsletter" />, <input name="jobletter" /> ]
2.!。選擇器:[attribute!=value],匹配所有不含有指定的屬性,或者屬性不等于特定值的元素,此選擇器等價于:not([attr=value])。
例子說明一下:
HTML代碼
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代碼:
$("input[name!='newsletter']").attr("checked", true);
結(jié)果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
3.*。選擇器:[attribute*=value],匹配給定的屬性是以包含某些值的元素。舉個例子說明一下:
HTML 代碼:
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
jQuery 代碼:
$("input[name*='man']")
結(jié)果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
4.@。匹配包含給定屬性的元素。注意,在jQuery 1.3中,前導(dǎo)的@符號已經(jīng)被廢除!如果想要兼容最新版本,只需要簡單去掉@符號即
可。
5.^。選擇器:[attribute^=value],匹配給定的屬性是以某些值開始的元素,下面舉個例子來說明一下:
HTML 代碼:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jQuery 代碼:
$("input[name^='news']")
結(jié)果:
[ <input name="newsletter" />, <input name="newsboy" /> ]
在jquery中,當(dāng)使用$("input[name='metaId']“).val()不能直接獲得被選擇的radio的值,只是獲得 radio標(biāo)簽的第一個值,這可能jquery使用xpath語言了進行查找有關(guān),而我們通常是想獲得被選中的radio的值,有以下幾種方法:
1,使用$("input[name='metaId']:checked").val()獲得 //name代表radio中name屬性名
2,使用$(":radio:checked").val()獲得 //限制頁面只有一組radio標(biāo)簽
您可能感興趣的文章:
- jQuery prev ~ siblings選擇器使用介紹
- jquery 層次選擇器siblings與nextAll的區(qū)別介紹
- 使用jquery選擇器如何獲取父級元素、同級元素、子元素
- jquery選擇器之屬性過濾選擇器詳解
- JQuery 選擇器、過濾器介紹
- jquery選擇器排除某個DOM元素的方法(實例演示)
- jQuery Selector選擇器小結(jié)
- jquery選擇器-根據(jù)多個屬性選擇示例代碼
- jQuery中的類名選擇器(.class)用法簡單示例
- jQuery選擇器全集詳解
- jquery選擇器大全 全面詳解jquery選擇器
- jQuery 選擇器用法實例分析【prev + next】
相關(guān)文章
用JQuery實現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
用JQuery實現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼,需要的朋友可以參考下2012-02-02Jquery實現(xiàn)圖片放大鏡效果的思路及代碼(自寫)
放大鏡類的文章網(wǎng)上有很多,由于實現(xiàn)起來比較麻煩,所以自己寫了一個,下面為大家分享下具體的算法及實現(xiàn)代碼,感興趣的朋友可以參考下2013-10-10jQuery EasyUI API 中文文檔 - Form表單
jQuery EasyUI API 中文文檔 - Form表單,使用jQuery EasyUI的朋友可以參考下。2011-10-10jQuery實現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
這篇文章主要介紹了jQuery實現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果,涉及jQuery針對table元素遍歷、運算、樣式及鼠標(biāo)事件動態(tài)響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-02-02jQuery插件HighCharts繪制簡單2D折線圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡單2D折線圖效果,結(jié)合完整實例形式分析了jQuery使用HighCharts插件繪制折線圖的實現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03BootStrap glyphicon圖標(biāo)無法顯示的解決方法
如果不注意bootstrap引入css和fonts的規(guī)范,則可能會導(dǎo)致bootstrap 在顯示glyphicon圖標(biāo)時無法正常顯示,顯示為方框。該怎么解決呢?下面小編給大家解答下2016-09-09