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 相关文章推荐
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
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下使用无限生命期Session的方法
2007/03/16 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 文件与目录操作
2008/12/24 Python
python的迭代器与生成器实例详解
2014/07/16 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
西式结婚主持词
2014/03/14 职场文书
需求分析说明书
2014/05/09 职场文书
工会换届选举方案
2014/05/21 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
PHP中->和=>的意思
2021/03/31 PHP