轉-JQuery選擇器及radio，checkbox,select取值和反選

時間 2019-11-05

標籤 jquery 選擇器 radio checkbox select 取值欄目 JQuery 简体版

原文原文鏈接

jQuery 的選擇器可謂之強大無比，這裏簡單地總結一下經常使用的元素查找方法javascript

$("#myELement") 選擇id值等於myElement的元素，id值不能重複在文檔中只能有一個id值是myElement因此獲得的是惟一的元素 css

$("div") 選擇全部的div標籤元素，返回div元素數組 html

$(".myClass") 選擇使用myClass類的css的全部元素 java

$("*") 選擇文檔中的全部的元素，能夠運用多種的選擇方式進行聯合選擇：例如$("#myELement,div,.myclass")jquery

層疊選擇器： ajax

$("form input") 選擇全部的form元素中的input元素 api

$("#main > *") 選擇id值爲main的全部的子元素數組

$("label + input") 選擇全部的label元素的下一個input元素節點，經測試選擇器返回的是label標籤後面直接跟一個input標籤的全部input標籤元素測試

$("#prev ~ div") 同胞選擇器，該選擇器返回的爲id爲prev的標籤元素的全部的屬於同一個父元素的div標籤動畫

基本過濾選擇器：

$("tr:first") 選擇全部tr元素的第一個

$("tr:last") 選擇全部tr元素的最後一個

$("input:not(:checked) + span")

過濾掉：checked的選擇器的全部的input元素

$("tr:even") 選擇全部的tr元素的第0，2，4... ...個元素（注意：由於所選擇的多個元素時爲數組，因此序號是從0開始）

$("tr:odd") 選擇全部的tr元素的第1，3，5... ...個元素

$("td:eq(2)") 選擇全部的td元素中序號爲2的那個td元素

$("td:gt(4)") 選擇td元素中序號大於4的全部td元素

$("td:lt(4)") 選擇td元素中序號小於4的全部的td元素

$(":header") 選擇h一、h二、h3之類的

$("div:animated") 選擇正在執行動畫效果的元素

內容過濾選擇器：

$("div:contains('John')") 選擇全部div中含有John文本的元素

$("td:empty") 選擇全部的爲空（也不包括文本節點）的td元素的數組

$("div:has(p)") 選擇全部含有p標籤的div元素

$("td:parent") 選擇全部的以td爲父節點的元素數組

可視化過濾選擇器：

$("div:hidden") 選擇全部的被hidden的div元素

$("div:visible") 選擇全部的可視化的div元素

屬性過濾選擇器：

$("div[id]") 選擇全部含有id屬性的div元素

$("input[name='newsletter']") 選擇全部的name屬性等於'newsletter'的input元素

$("input[name!='newsletter']") 選擇全部的name屬性不等於'newsletter'的input元素

$("input[name^='news']") 選擇全部的name屬性以'news'開頭的input元素

$("input[name$='news']") 選擇全部的name屬性以'news'結尾的input元素

$("input[name*='man']") 選擇全部的name屬性包含'news'的input元素

$("input[id][name$='man']") 能夠使用多個屬性進行聯合選擇，該選擇器是獲得全部的含有id屬性而且那麼屬性以man結尾的元素

子元素過濾選擇器：

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("div span:first-child") 返回全部的div元素的第一個子節點的數組

$("div span:last-child") 返回全部的div元素的最後一個節點的數組

$("div button:only-child") 返回全部的div中只有惟一一個子節點的全部子節點的數組

表單元素選擇器：

$(":input") 選擇全部的表單輸入元素，包括input, textarea, select 和 button

$(":text") 選擇全部的text input元素

$(":password") 選擇全部的password input元素

$(":radio") 選擇全部的radio input元素

$(":checkbox") 選擇全部的checkbox input元素

$(":submit") 選擇全部的submit input元素

$(":image") 選擇全部的image input元素

$(":reset") 選擇全部的reset input元素

$(":button") 選擇全部的button input元素

$(":file") 選擇全部的file input元素

$(":hidden") 選擇全部類型爲hidden的input元素或表單的隱藏域

表單元素過濾選擇器：

$(":enabled") 選擇全部的可操做的表單元素

$(":disabled") 選擇全部的不可操做的表單元素

$(":checked") 選擇全部的被checked的表單元素

$("select option:selected") 選擇全部的select 的子元素中被selected的元素

選取一個 name 爲」S_03_22″的input text框的上一個td的text值

$(」input[@ name =S_03_22]「).parent().prev().text()

名字以」S_」開始，而且不是以」_R」結尾的

$(」input[@ name ^='S_']「).not(」[@ name $='_R']「)

一個名爲 radio_01的radio所選的值

$(」input[@ name =radio_01][@checked]「).val();

$("A B") 查找A元素下面的全部子節點，包括非直接子節點

$("A>B") 查找A元素下面的直接子節點

$("A+B") 查找A元素後面的兄弟節點，包括非直接子節點

$("A~B") 查找A元素後面的兄弟節點，不包括非直接子節點

1. $("A B") 查找A元素下面的全部子節點，包括非直接子節點

例子：找到表單中全部的 input 元素

Html代碼

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" /><span style="font-family: verdana, 'courier new'; font-size: medium;" size="4" face="verdana, 'courier new'"><span style="font-size: 14px; line-height: 21px; white-space: normal;">
</span></span>

jQuery 代碼:

$("form input")

結果:

[ <input name="name" />, <input name="newsletter" /> ]

2. $("A>B") 查找A元素下面的直接子節點

例子：匹配表單中全部的子級input元素。

Html代碼

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" /><span style="font-family: verdana, 'courier new'; font-size: medium;" size="4" face="verdana, 'courier new'"><span style="font-size: 14px; line-height: 21px; white-space: normal;">
</span></span>

jQuery 代碼:

$("form > input")

結果:

[ <input name="name" /> ]

3. $("A+B") 查找A元素後面的兄弟節點，包括非直接子節點

例子：匹配全部跟在 label 後面的 input 元素

Html代碼

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />

jQuery 代碼:

$("label + input")

結果:

[ <input name="name" />, <input name="newsletter" /> ]

4. $("A~B") 查找A元素後面的兄弟節點，不包括非直接子節點

例子：找到全部與表單同輩的 input 元素

Html代碼

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" /> <span style="font-family: verdana, 'courier new'; font-size: medium;" size="4" face="verdana, 'courier new'"><span style="font-size: 14px; line-height: 21px; white-space: normal;">
</span></span>

jQuery 代碼:

$("form ~ input")

結果:

[ <input name="none" /> ]

1. 使用jquery獲取radio的值

使用jquery獲取radio的值 ,最重要的是掌握jquery 選擇器的使用，在一個表單中咱們一般是要獲取被選中的那個radio項的值，因此要加checked來篩選，好比有如下的一些radio項：

Html代碼

<input type="radio" name="testradio" value="jquery獲取radio的值" />jquery獲取radio的值<br />
<input type="radio" name="testradio" value="jquery獲取checkbox的值" />jquery獲取checkbox的值<br />
<input type="radio" name="testradio" value="jquery獲取select的值" />jquery獲取select的值<br />

要想獲取某個radio的值有如下的幾種方法,直接給出代碼：

Js代碼

$('input[name="testradio"]:checked').val();

Js代碼

$('input:radio:checked').val();

Js代碼

$('input[@name="testradio"][checked]');

Js代碼

$('input[name="testradio"]').filter(':checked');

差很少挺全的了，若是咱們要遍歷name爲testradio的全部radio呢，代碼以下

Js代碼

$('input[name="testradio"]').each(function(){
alert(this.value);
});

若是要取具體某個radio的值，好比第二個radio的值，這樣寫

Js代碼

$('input[name="testradio"]:eq(1)').val()

經過修改運行下面的實例，加深你的印象

Js代碼

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#go').click(function(){
var radio = $('input[name="testradio"]').filter(':checked');
if(radio.length)
alert(radio.val());
else
alert('請選擇一個radio');
});
$('#go2').click(function(){
$('input[name="testradio"]').each(function(){
alert(this.value);
});
})
$('#go3').click(function(){
alert($('input[name="testradio"]:eq(1)').val());
})
})
</script>
</head>
<body>
<input type="radio" name="testradio" value="jquery獲取radio的值" />jquery獲取radio的值<br /> <input type="radio" name="testradio" value="jquery獲取checkbox的值" />jquery獲取checkbox的值<br /> <input type="radio" name="testradio" value="jquery獲取select的值" />jquery獲取select的值<br />
<button id="go">選中的那個radio的值</button>
<button id="go2">遍歷全部radio的值</button>
<button id="go3">取第二個radio的值</button>
</body>
</html>

來源：http://www.jquerycn.cn/jquery-tutorial/selector-88.html

2. jquery獲取checkbox的操做總結

使用jquery 獲取checkbox 通常使用 name 來獲取，由於在 form 表單中，同一組的 checkbox 的 name 是相同的，因此咱們能夠經過下面的代碼來獲取 checkbox

Js代碼

$('input[name="demo"]:checkbox');

意思是要獲取 name 爲 demo 的全部 checkbox 選項，若是咱們要將其選中能夠這樣寫：

Js代碼

$('input[name="demo"]:checkbox').attr('checked','true');

也就是將這個 checkbox 元素的 checked 屬性的值設爲 true，若是你對 jquery設置屬性值不明白，能夠查看 http://www.jquerycn.cn/jquery-tutorial/attr-80.html

因爲咱們一般獲取 checkbox 獲取的是多個，若是咱們要獲取選中的 checkbox 的值，就要肯定是要獲取哪一個 checkbox 的值，若是這樣寫：

Js代碼

$('input[name="demo"]:checked').val()

這樣寫是獲取了全部選中的 checkbox 中第一個 checkbox 的值，若是要獲取全部的 checkbox 的值，咱們能夠用 eq() 方法來獲取每個的值，好比：

Js代碼

$('input[name="demo"]:checked').eq(0).val();
$('input[name="demo"]:checked').eq(1).val();

固然你還能夠添加更多的篩選項來，個性化的獲取想要的checkbox，好比 :even，:odd 篩選項來獲取，第奇數個或第偶數個 checkbox 想，老是 jquery 獲取 checkbox 仍是很方便的

來源：http://www.jquerycn.cn/jquery-tutorial/selector-94.html

3. jquery獲取select值的方法總結

jquery 獲取select值 的狀況有兩種：一種是得到 select 的被選中的那個 option 的 value值，一種是得到 select 的被選中的那個 option 的 innerHTML（即包含在<option></option>中的內容）

固然要用 jquery獲取select值就要先獲取 select 的jQuery 對象，有如下幾種方法：
1.經過 select 的 Id 來獲取，如 $('#select_id')
2.經過 select 的 name 來獲取，如$('select[name="select_name"]')
固然獲取 select 元素的 jQuery 對象還有不少方法，這裏就不一一列舉了，下面的代碼都是用來獲取 value 值或 text 值的

1、jquery 獲取select的值，也就是被選中的那個 option 的 value 屬性的值

Js代碼

//經過 select 的 id
$('#select_id option:selected').val();
$('#select_id').find('option:selected').val();
//或者用原生的方式
$('#select_id option:selected')[0].value;
//經過 select 的 name
$('select[name="select_name"] option:selected').val();
$('select[name="select_name"]').find('option:selected').val();

2、jquery獲取select被選中的那個 option 的 innerHTML 值（即text值，也就是在<option></option>中間的內容）

Js代碼

//經過 select 的 id
$('#select_id option:selected').text();
$('#select_id').find('option:selected').text();
//或者用原生的方式
$('#select_id option:selected')[0].innerHTML;
//經過 select 的 name
$('select[name="select_name"] option:selected').text();
$('select[name="select_name"]').find('option:selected').text();

好了，jquery 獲取 select 值的內容就先到這裏了，你也能夠看看jquery select選中 option 的文章
http://www.jquerycn.cn/jquery-tutorial/attr-89.html

來源： http://www.jquerycn.cn/jquery-tutorial/selector-95.html

反選radio

either (plain js)

Js代碼

this.checked = false;

or (jQuery)

Js代碼

$(this).prop('checked', false);
// Note that the pre-jQuery 1.6 idiom was
// $(this).attr('checked', false);

See jQuery prop() help page for an explanation on the difference between attr() and prop() and why prop() is now preferable. prop() was introduced with jQuery 1.6 in May 2011.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。