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 相关文章推荐
jQuery的运行机制和设计理念分析
Apr 05 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
Angular实现响应式表单
Aug 04 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 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
简单的php写入数据库类代码分享
2011/07/26 PHP
php画图实例
2014/11/05 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
python自动下载图片的方法示例
2020/03/25 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
大学生求职中的自我评价
2013/10/01 职场文书
导游个人求职信范文
2014/03/23 职场文书
知识竞赛主持词
2014/03/26 职场文书
外联部演讲稿
2014/05/24 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
一文搞懂Python Sklearn库使用
2021/08/23 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python