jQuery表单域属性过滤器用法分析


Posted in Javascript onFebruary 10, 2015

本文实例讲述了jQuery表单域属性过滤器用法。分享给大家供大家参考。具体分析如下:

表单内包含各种各样的表单域,使用表单域属性选择器可以很好的获取已被选中的单选按钮,复选框以及列表项,也可以根据是否可用从文档中查找表单域。

1. :checked选择器

用于选择所有被选中的表单域。格式:

$("selector:checked")
可以是input,radio和checkbox

2. :enabled选择器

用于选择所有可用的表单域,格式:

$("selector:enabled")

3. :disabled选择器

用于选择所有被禁用的表单域,格式:

$("selector:disabled")

4. :selected选择器

用于从列表框选择所有选中的option元素,格式:

$("selector:selected")

5. :hidden选择器

用于选择所有的不可见元素

$("selector:hidden")

6. :visible选择器

用于选择所有的可见元素

简单示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>表单域属性过滤选择器应用示例</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">表单域属性过滤选择器应用示例</h3>  

<table width="602" height="81" border="1">  

  <tr>  

    <td width="118">复选框:</td>  

    <td width="443"><input type="checkbox" checked="checked" />被选中的复选框  

    <input type="checkbox" checked="checked" />被选中的复选框  

    <input type="checkbox" />没有被选中的复选框  

    </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>

效果图:

jQuery表单域属性过滤器用法分析

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
js实现双人五子棋小游戏
May 28 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 #Javascript
jQuery内容过滤选择器用法分析
Feb 10 #Javascript
jQuery过滤选择器用法分析
Feb 10 #Javascript
jQuery表单域选择器用法分析
Feb 10 #Javascript
jQuery层级选择器用法分析
Feb 10 #Javascript
Jquery中CSS选择器用法分析
Feb 10 #Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 #Javascript
You might like
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
ES6的新特性概览
2016/03/10 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python中的闭包总结
2014/09/18 Python
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python时间获取及转换知识汇总
2017/01/11 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
公益活动邀请函
2014/02/05 职场文书
毕业生面试求职信
2014/06/23 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
毕业证代领委托书
2014/09/26 职场文书
出纳试用期自我评价
2015/03/10 职场文书
八一建军节主持词
2015/07/01 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL