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 相关文章推荐
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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
Smarty模板快速入门
2007/01/04 PHP
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
Python实现读取json文件到excel表
2017/11/18 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
python进度条显示之tqmd模块
2020/08/22 Python
python 多线程中join()的作用
2020/10/29 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
法学函授自我鉴定
2014/02/06 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
咖啡店创业计划书
2014/08/15 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
2014年班务工作总结
2014/12/02 职场文书
离婚上诉状范文
2015/05/23 职场文书
丧事主持词
2015/07/02 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
Python实现日志实时监测的示例详解
2022/04/06 Python