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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
深入浅析vue中cross-env的使用
Sep 12 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
php db类库进行数据库操作
2009/03/19 PHP
php include类文件超时问题处理
2015/02/06 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
php实现httpRequest的方法
2015/03/13 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
PHP实现文件上传与下载
2020/08/28 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
python实现给数组按片赋值的方法
2015/07/28 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python 装饰器深入理解
2017/03/16 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
基于python中__add__函数的用法
2019/11/25 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
单身旅行者的单身假期:Just You
2018/04/08 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
如何提高JDBC的性能
2013/04/30 面试题
怎样写好创业计划书的内容
2014/02/06 职场文书
老师对学生的寄语
2014/04/09 职场文书
高中生操行评语
2014/04/25 职场文书
经验交流材料格式
2014/12/30 职场文书
财务部岗位职责
2015/02/03 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书