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

更新时间：2015年02月10日 12:01:18 作者：woshisap

这篇文章主要介绍了jQuery表单域属性过滤器用法,实例分析了:checked、:enabled、:disabled:、selected等常用表单域属性过滤器使用技巧,需要的朋友可以参考下

本文实例讲述了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做个日期选择适用于手机端示例
本篇文章主要介绍了jquery做个日期选择适用于手机端示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
分享一些常用的jQuery动画事件和动画函数
在jquery中，jquery动画事件和动画函数经常用的到，今天小编抽时间给大家整理了些关于常用的jquery动画事件和动画函数，对jquery动画函数和动画事件相关知识感兴趣的朋友一起学习吧
2015-11-11
实例解析jQuery工具函数
本文对jQuery工具函数进行实例解析。需要的朋友可以参考下
2016-12-12
jquery 笔记事件
写js已经有很久了，但是对js的详细了解还是很肤浅的，这几天在看jquery，在其中有一些新的发现和体会，记录下来
2011-11-11
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
这篇文章主要介绍了jQuery实现可兼容IE6的淡入淡出效果告警提示功能,结合具体实例形式分析了jQuery弹出警告提示功能的具体实现步骤与相关操作技巧,需要的朋友可以参考下
2017-09-09
详解jQuery中ajax.load()方法
这篇文章主要介绍了详解jQuery中ajax.load()方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-01-01
jQuery文件上传控件 Uploadify 详解
本文主要介绍jQuery文件上传控件 Uploadify的用法，原作者做了非常详细的备注，有需要的朋友可以参考一下。
2016-06-06
基于jQuery的淡入淡出可自动切换的幻灯插件
基于jQuery淡入淡出可自动切换的幻灯插件,原型是前几天写的一个幻灯效果,因为一个小bug卡了两天,然后清空之前写的代码,重新整理思路写出来的. 思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,完全抛开旧的思维,才能找到新的出路.
2010-08-08
jQuery操作元素css样式的三种方法
jQuery里提供三种方法来改变页面元素的样式，虽然它们和传统方法的思想相通，但是却节省了许多代码
2014-06-06
MultiSelect左右选择控件的设计与实现介绍
由于项目中用到左右选择的控件，网上找了一些相关的实现，基本上有两个:1、基于JQuery UI的控件2、某个兄弟手写的一个控件,具体实现如下，感兴趣的朋友可以参考下哈
2013-06-06

最新评论