jQuery表單域?qū)傩赃^(guò)濾器用法分析
本文實(shí)例講述了jQuery表單域?qū)傩赃^(guò)濾器用法。分享給大家供大家參考。具體分析如下:
表單內(nèi)包含各種各樣的表單域,使用表單域?qū)傩赃x擇器可以很好的獲取已被選中的單選按鈕,復(fù)選框以及列表項(xiàng),也可以根據(jù)是否可用從文檔中查找表單域。
1. :checked選擇器
用于選擇所有被選中的表單域。格式:
2. :enabled選擇器
用于選擇所有可用的表單域,格式:
3. :disabled選擇器
用于選擇所有被禁用的表單域,格式:
4. :selected選擇器
用于從列表框選擇所有選中的option元素,格式:
5. :hidden選擇器
用于選擇所有的不可見元素
6. :visible選擇器
用于選擇所有的可見元素
簡(jiǎn)單示例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單域?qū)傩赃^(guò)濾選擇器應(yīng)用示例</title>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:checked").css("border", "1px solid red");
$("input:disabled").css("background", "#FCF");
$("input:enabled").val("可用文本框");
});
</script>
</head>
<body>
<h3 align="center">表單域?qū)傩赃^(guò)濾選擇器應(yīng)用示例</h3>
<table width="602" height="81" border="1">
<tr>
<td width="118">復(fù)選框:</td>
<td width="443"><input type="checkbox" checked="checked" />被選中的復(fù)選框
<input type="checkbox" checked="checked" />被選中的復(fù)選框
<input type="checkbox" />沒有被選中的復(fù)選框
</td>
</tr>
<tr>
<td>可用文本框:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>不可用文本框:</td>
<td><input type="text" disabled="disabled" /></td>
</tr>
<tr>
<td>下拉列表</td>
<td>
<select name="test" >
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option selected="selected">天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
</td>
</tr>
</table>
</body>
</html>
效果圖:
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery中可見性過(guò)濾器簡(jiǎn)單用法示例
- jQuery中過(guò)濾器的基本用法示例
- JQuery的常用選擇器、過(guò)濾器、方法全面介紹
- jQuery使用contains過(guò)濾器實(shí)現(xiàn)精確匹配方法詳解
- jQuery可見性過(guò)濾器:hidden和:visibility用法實(shí)例
- JQuery選擇器、過(guò)濾器大整理
- Jquery 過(guò)濾器(first,last,not,even,odd)的使用
- 從jquery的過(guò)濾器.filter()方法想到的
- jQuery contains過(guò)濾器實(shí)現(xiàn)精確匹配使用方法
- jQuery ajax 路由和過(guò)濾器使用說(shuō)明
- jquery中通過(guò)過(guò)濾器獲取表單元素的實(shí)現(xiàn)代碼
- JQuery 選擇器、過(guò)濾器介紹
- jQuery中內(nèi)容過(guò)濾器簡(jiǎn)單用法示例
相關(guān)文章
jquery預(yù)覽圖片實(shí)現(xiàn)鼠標(biāo)放上去顯示實(shí)際大小
本文為大家介紹的這個(gè)示例為jquery實(shí)現(xiàn)的預(yù)覽圖片,當(dāng)鼠標(biāo)放上去顯示實(shí)際大小,感興趣的朋友可以學(xué)習(xí)下2014-01-01jQuery插件FusionWidgets實(shí)現(xiàn)的AngularGauge圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionWidgets實(shí)現(xiàn)的AngularGauge圖效果,結(jié)合具體實(shí)例形式分析了jQuery使用FusionWidgets插件載入xml數(shù)據(jù)實(shí)現(xiàn)AngularGauge圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery幫助之篩選查找 children([expr])
取得一個(gè)包含匹配的元素集合中每一個(gè)元素的所有子元素的元素集合。2011-01-01Jquery實(shí)現(xiàn)列表(隔行換色,全選,鼠標(biāo)滑過(guò)當(dāng)前行)效果實(shí)例
Jquery實(shí)現(xiàn)列表(隔行換色,全選,鼠標(biāo)滑過(guò)當(dāng)前行)效果實(shí)例,需要的朋友可以參考一下2013-06-06jQuery對(duì)象與DOM對(duì)象之間的相互轉(zhuǎn)換
本文主要給大家介紹的是jQuery對(duì)象與DOM對(duì)象之間的相互轉(zhuǎn)換的方法和示例,非常實(shí)用,這里推薦給有需要的小伙伴參考下。2015-03-03全面詳細(xì)的jQuery常見開發(fā)技巧手冊(cè)
這篇文章主要為大家分享了一份全面詳細(xì)的jQuery常見開發(fā)技巧手冊(cè),幫助大家更好的進(jìn)行jquery開發(fā),感興趣的小伙伴們可以參考一下2016-02-02基于jQuery和hwSlider實(shí)現(xiàn)內(nèi)容左右滑動(dòng)切換效果附源碼下載(一)
本文結(jié)合實(shí)例給大家介紹如何實(shí)現(xiàn)內(nèi)容滑動(dòng)切換的效果,包括左右箭頭切換,無(wú)限無(wú)縫滾動(dòng),圓點(diǎn)按鈕切換,動(dòng)畫效果,自動(dòng)切換效果,效果非常不錯(cuò),感興趣的朋友前來(lái)參考實(shí)現(xiàn)代碼2016-06-06