jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected...
生活随笔
收集整理的這篇文章主要介紹了
jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected...
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>表單對象屬性過濾選擇器</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">/* 所謂表單對象屬性過濾選擇器：就是過濾表單對象的屬性，例如：:enabled：選取所有可用元素。<input name="id">一類的普通input標簽；就是可用的。:disabled：選取所有不可用的元素。<input name="email" disabled="disabled" />被強制聲明為不可用的input標簽。:checked：選取所有被選中的元素框。input:checked：input所有type為type="checkbox"；并且已經被選中：checked="checked":selected：選取所有被選中的選項列表。<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標簽console.log($(":text:enabled"));$(":text:enabled").addClass("cBlack");});// <input type="button" id="btn2" value=":disabled選取所有不可用的單行文本input元素">/* 注意這里是過濾兩次，才行！先從所有中過濾出text純文本的單行框:text；再從其中過濾出所有的可用的disabled的元素。disabled其實很像readonly的元素。*/$("#btn2").click(function() {// 首先通過表單過濾選擇，選擇出type為text的input標簽console.log($(":text:disabled"));$(":text:disabled").addClass("cBlack");});// <input type="button" id="btn3" value=":checked請先選擇，然后選取所有被選中的單選、多選元素">$("#btn3").click(function() {// 選中全篇所有checked。// console.log($(":checked"));// $(":checked").addClass("cBlack");// 通過基本選擇出input然后通過表單對象屬性過濾，只選中為input的checked。$("input:checked").each(function(index, obj) {// obj為DOM對象console.log("index = "+index+", 值為："+$(obj).val());});});// <input type="button" id="btn4" value="設置 中國 被選中">/* 怎么設置一個值被選中呢？如果是radio(單選框)，則只需要把radio的值設置為，我們需要選中的屬性就行了！*/$("#btn4").click(function() {/* 注意：這里的值要設置為[]數組的形式；但是因為是radio單選框的原因，只能放一個值。$(":radio[name='country']").val(["chn", "usa"]);如果設置多個的話，單選框會選中數組中的最后一個值。<因為這里只有一個radio，所以可以使用:radio全篇查詢。但是如果當前頁面有多個單選框的話，可能就要用div來分塊，通過#div1:radio來獲得了！>*/// 首先通過表單對象屬性過濾選擇出radio$(":radio[name='country']").val(["chn"]); });// <input type="button" id="btn5" value="設置第一個select選中 編譯原理">/* 總結一下html中的三種選中框：標準單選框：input type="radio" name="" value="" 同一組name相同標準復選框：input type="checkbox" name="" value="" 同一組name相同select框：單選形式<select><option></option><option></option>... ...</select>復選形式<select multiple="multiple"><option></option><option></option>... ...</select> select框沒有特殊聲明：multiple="multiple"的時候，都是單選框，特殊聲明了之后才是復選框。選擇都是[]，但是select因為可以聲明多選，單選。有區別所以其中單選的時候，[]可以省略，但是建議保留[]方便記憶。標準單選框，復選框都是選中都是：checked。select框選中是：selected。*/$("#btn5").click(function() {// 首先先獲取第一個select，因為整篇有多個select。// $("select:first").val("編譯原理");// 首先通過基本選擇出select$("select:first").val(["編譯原理"]);});// <input type="button" id="btn6" value="設置第二個select選中 軟件工程和數據庫原理">$("#btn6").click(function() {// 整篇只有兩個select，選擇最后一個select// 首先通過基本選擇出select $("select:last").val(["軟件工程", "數據庫原理"]);});// <input type="button" id="btn7" value="選取所有沒有被選中的單選、多選元素">$("#btn7").click(function() {// 獲取沒有被選中的單選、多選選項// 首先通過表單對象屬性過濾選擇出radio，通過表單對象屬性過濾選擇出checkbox$(":radio:not(:checked), :checkbox:not(:checked)").each(function(i, obj) {console.log($(this).val());});});// <input type="button" id="btn8" value=":selected選取所有被選中的select下拉列表的option選項元素">$("#btn8").click(function() {// 因為是select下嵌套option，所以要后代選擇或者使用子元素選擇！// 首先通過基本選擇出select，再通過層級選擇出option，再通過基本過濾選擇not()，再通過表單對象屬性過濾選擇出: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>數據庫原理</option></select><select multiple="multiple"><option>軟件工程</option><option>編譯原理</option><option>數據庫原理</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請先選擇，然后選取所有被選中的單選、多選元素"><input type="button" id="btn4" value="設置 中國 被選中"><input type="button" id="btn5" value="設置第一個select選中 編譯原理"><input type="button" id="btn6" value="設置第二個select選中 軟件工程和數據庫原理"><input type="button" id="btn7" value="選取所有沒有被選中的單選、多選元素"><input type="button" id="btn8" value=":selected選取所有被選中的select下拉列表的option選項元素"></body>
</html>
?
轉載于:https://www.cnblogs.com/mzywucai/p/11053378.html
總結
以上是生活随笔為你收集整理的jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2018-07-17-Python全栈开
- 下一篇： HTML5 Canvas