jQuery表單對象屬性過濾選擇器實例詳解
更新時間：2016年09月13日 09:42:43 作者：onestopweb
這篇文章主要介紹了jQuery表單對象屬性過濾選擇器,結(jié)合實例形式詳細分析了jQuery針對表單元素進行屬性過濾操作的具體實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了jQuery表單對象屬性過濾選擇器。分享給大家供大家參考，具體如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2-11</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
//重置表單元素
$(":reset").click(function(){
setTimeout(function() {
countChecked();
$("select").change();
},0);
});
//對表單內(nèi) 可用input 賦值操作.
$('#btn1').click(function(){
$("#form1 input:enabled").val("這里變化了！");
return false;
})
//對表單內(nèi) 不可用input 賦值操作.
$('#btn2').click(function(){
$("#form1 input:disabled").val("這里變化了！");
return false;
})
//使用:checked選擇器，來操作多選框.
$(":checkbox").click(countChecked);
function countChecked() {
var n = $("input:checked").length;
$("div").eq(0).html("<strong>有"+n+" 個被選中!</strong>");
}
countChecked();//進入頁面就調(diào)用.
//使用:selected選擇器，來操作下拉列表.
$("select").change(function () {
var str = "";
$("select :selected").each(function () {
str += $(this).text() + ",";
});
$("div").eq(1).html("<strong>你選中的是："+str+"</strong>");
}).trigger('change');
// trigger('change') 在這里的意思是：
// select加載后，馬上執(zhí)行onchange.
// 也可以用.change()代替.
});
//]]>
</script>
</head>
<body>
<h3> 表單對象屬性過濾選擇器.</h3>
<form id="form1" action="#">
<button type="reset">重置所有表單元素</button>
<br />
<br />
<button id="btn1">對表單內(nèi) 可用input 賦值操作.</button>
<button id="btn2">對表單內(nèi) 不可用input 賦值操作.</button>
<br />
<br />
可用元素：
<input name="add" value="可用文本框"/>
<br/>
不可用元素：
<input name="email" disabled="disabled" value="不可用文本框"/>
<br/>
可用元素：
<input name="che" value="可用文本框" />
<br/>
不可用元素：
<input name="name" disabled="disabled" value="不可用文本框"/>
<br/>
<br/>
多選框：<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />
test1
<input type="checkbox" name="newsletter" value="test2" />
test2
<input type="checkbox" name="newsletter" value="test3" />
test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />
test4
<input type="checkbox" name="newsletter" value="test5" />
test5
<div></div>
<br/>
<br/>
下拉列表1：<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>廣東</option>
<option>湖北</option>
</select>
<br/>
<br/>
下拉列表2：<br/>
<select name="test2" >
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<br/>
<br/>
<div></div>
</form>
</body>
</html>
運行效果圖如下：
更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery表單操作總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
文章十分詳盡的匯總了jquery常用的方法，并進行了對比，同時附送示例，是篇非常不錯的文章，希望對大家有所幫助2014-11-11
這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡單的彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了jquery獲取select選中值的方法,結(jié)合實例詳細分析了jQuery獲取select選中項option文本值及value值的方法,同時給出了JavaScript獲取select選中項的技巧,需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單評論區(qū)功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
jQuery配合coin-slider插件制作幻燈片效果的流程解析
coin-slider是GitHub上的一個人氣JavaScript開源插件,用它來實現(xiàn)幻燈片效果只需要動手寫很少的代碼,下面我們就來看一下jQuery配合coin-slider插件制作幻燈片效果的流程解析.2016-05-05
jquery 簡單圖片導航插件jquery.imgNav.js
前幾天某MM要偶幫忙實現(xiàn)栗子汀首頁的圖片導航效果，很簡單而且具有通用性的一個需求，點圖片A切換圖片A相關的內(nèi)容，點圖片B切換圖片B相關的內(nèi)容，僅此而已。2010-03-03
jquery創(chuàng)建并行對象或者合并對象的實現(xiàn)代碼
如果有對象A ，B 現(xiàn)在我想要合并成對象C 從C里面可以找到A , B 及其子對象 怎么做2012-10-10
公司某個網(wǎng)站，需要實現(xiàn)圖片預覽效果，并能像淘寶一樣實現(xiàn)局部分大，使用jquery的朋友可以參考下。2011-11-11
這篇文章主要介紹了jQuery實現(xiàn)手機號碼輸入提示功能,實例分析了jQuery針對手機號碼的判斷與提示相關技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)表格隔行換色，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09