jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected...
生活随笔
收集整理的這篇文章主要介紹了
jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected...
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>表單對(duì)象屬性過濾選擇器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery-1.11.3.js"></script><style type="text/css">body{font-family: "Microsoft YaHei"}.cGreen{background-color: #4CA902}.cPink{background-color: #ED4A9F}.cBlue{background-color: #0092E7}.cCyan{background-color: #01A6A2}.cYellow{background-color: #DCA112}.cRed{background-color: #B7103B}.cPurple{background-color: #792F7C}.cBlack{background-color: #110F10}.hide{display: none;}</style><script type="text/javascript">/* 所謂表單對(duì)象屬性過濾選擇器：就是過濾表單對(duì)象的屬性，例如：:enabled：選取所有可用元素。<input name="id">一類的普通input標(biāo)簽；就是可用的。:disabled：選取所有不可用的元素。<input name="email" disabled="disabled" />被強(qiáng)制聲明為不可用的input標(biāo)簽。:checked：選取所有被選中的元素框。input:checked：input所有type為type="checkbox"；并且已經(jīng)被選中：checked="checked":selected：選取所有被選中的選項(xiàng)列表。<select><option value="1">Flowers</option><option value="2" selected="selected">Gardens</option><option value="3">Trees</option></select>|<option value="2" selected="selected">Gardens</option>*/$(document).ready(function() {// <input type="button" id="btn1" value=":enabled選取所有可用的單行文本input元素">/* 注意這里是過濾兩次，才行！先從所有中過濾出text純文本的單行框:text；再從其中過濾出所有的可用的enabled的元素。*/$("#btn1").click(function() {// 首先通過表單過濾選擇，選擇出type為text的input標(biāo)簽console.log($(":text:enabled"));$(":text:enabled").addClass("cBlack");});// <input type="button" id="btn2" value=":disabled選取所有不可用的單行文本input元素">/* 注意這里是過濾兩次，才行！先從所有中過濾出text純文本的單行框:text；再從其中過濾出所有的可用的disabled的元素。disabled其實(shí)很像readonly的元素。*/$("#btn2").click(function() {// 首先通過表單過濾選擇，選擇出type為text的input標(biāo)簽console.log($(":text:disabled"));$(":text:disabled").addClass("cBlack");});// <input type="button" id="btn3" value=":checked請(qǐng)先選擇，然后選取所有被選中的單選、多選元素">$("#btn3").click(function() {// 選中全篇所有checked。// console.log($(":checked"));// $(":checked").addClass("cBlack");// 通過基本選擇出input然后通過表單對(duì)象屬性過濾，只選中為input的checked。$("input:checked").each(function(index, obj) {// obj為DOM對(duì)象console.log("index = "+index+", 值為："+$(obj).val());});});// <input type="button" id="btn4" value="設(shè)置 中國 被選中">/* 怎么設(shè)置一個(gè)值被選中呢？如果是radio(單選框)，則只需要把radio的值設(shè)置為，我們需要選中的屬性就行了！*/$("#btn4").click(function() {/* 注意：這里的值要設(shè)置為[]數(shù)組的形式；但是因?yàn)槭莚adio單選框的原因，只能放一個(gè)值。$(":radio[name='country']").val(["chn", "usa"]);如果設(shè)置多個(gè)的話，單選框會(huì)選中數(shù)組中的最后一個(gè)值。<因?yàn)檫@里只有一個(gè)radio，所以可以使用:radio全篇查詢。但是如果當(dāng)前頁面有多個(gè)單選框的話，可能就要用div來分塊，通過#div1:radio來獲得了！>*/// 首先通過表單對(duì)象屬性過濾選擇出radio$(":radio[name='country']").val(["chn"]); });// <input type="button" id="btn5" value="設(shè)置第一個(gè)select選中 編譯原理">/* 總結(jié)一下html中的三種選中框：標(biāo)準(zhǔn)單選框：input type="radio" name="" value="" 同一組name相同標(biāo)準(zhǔn)復(fù)選框：input type="checkbox" name="" value="" 同一組name相同select框：單選形式<select><option></option><option></option>... ...</select>復(fù)選形式<select multiple="multiple"><option></option><option></option>... ...</select> select框沒有特殊聲明：multiple="multiple"的時(shí)候，都是單選框，特殊聲明了之后才是復(fù)選框。選擇都是[]，但是select因?yàn)榭梢月暶鞫噙x，單選。有區(qū)別所以其中單選的時(shí)候，[]可以省略，但是建議保留[]方便記憶。標(biāo)準(zhǔn)單選框，復(fù)選框都是選中都是：checked。select框選中是：selected。*/$("#btn5").click(function() {// 首先先獲取第一個(gè)select，因?yàn)檎卸鄠€(gè)select。// $("select:first").val("編譯原理");// 首先通過基本選擇出select$("select:first").val(["編譯原理"]);});// <input type="button" id="btn6" value="設(shè)置第二個(gè)select選中 軟件工程和數(shù)據(jù)庫原理">$("#btn6").click(function() {// 整篇只有兩個(gè)select，選擇最后一個(gè)select// 首先通過基本選擇出select $("select:last").val(["軟件工程", "數(shù)據(jù)庫原理"]);});// <input type="button" id="btn7" value="選取所有沒有被選中的單選、多選元素">$("#btn7").click(function() {// 獲取沒有被選中的單選、多選選項(xiàng)// 首先通過表單對(duì)象屬性過濾選擇出radio，通過表單對(duì)象屬性過濾選擇出checkbox$(":radio:not(:checked), :checkbox:not(:checked)").each(function(i, obj) {console.log($(this).val());});});// <input type="button" id="btn8" value=":selected選取所有被選中的select下拉列表的option選項(xiàng)元素">$("#btn8").click(function() {// 因?yàn)槭莝elect下嵌套o(hù)ption，所以要后代選擇或者使用子元素選擇！// 首先通過基本選擇出select，再通過層級(jí)選擇出option，再通過基本過濾選擇not()，再通過表單對(duì)象屬性過濾選擇出:checked$("select option:not(:selected)").each(function(i, obj) {console.log($(obj).val());});});});</script></head><body><input type="text" name="text1" value="可用單行文本輸入框"><input type="text" name="text2" value="不可用單行文本輸入框" disabled="disabled"><select><option>軟件工程</option><option>編譯原理</option><option>數(shù)據(jù)庫原理</option></select><select multiple="multiple"><option>軟件工程</option><option>編譯原理</option><option>數(shù)據(jù)庫原理</option></select><br><br><input type="radio" name="country" value="chn">中國<input type="radio" name="country" value="usa">美國 <input type="checkbox" name="language" value="Java">Java<input type="checkbox" name="language" value="IOS">IOS<input type="checkbox" name="language" value="Android">Android<br><br><hr><input type="button" id="btn1" value=":enabled選取所有可用的單行文本input元素"><input type="button" id="btn2" value=":disabled選取所有不可用的單行文本input元素"><input type="button" id="btn3" value=":checked請(qǐng)先選擇，然后選取所有被選中的單選、多選元素"><input type="button" id="btn4" value="設(shè)置 中國 被選中"><input type="button" id="btn5" value="設(shè)置第一個(gè)select選中 編譯原理"><input type="button" id="btn6" value="設(shè)置第二個(gè)select選中 軟件工程和數(shù)據(jù)庫原理"><input type="button" id="btn7" value="選取所有沒有被選中的單選、多選元素"><input type="button" id="btn8" value=":selected選取所有被選中的select下拉列表的option選項(xiàng)元素"></body>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/mzywucai/p/11053378.html
總結(jié)
以上是生活随笔為你收集整理的jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2018-07-17-Python全栈开
- 下一篇： Sass学习笔记（一）