当前位置：首页 > 资讯 > 技术文档

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

时间：2022-02-23 05:42 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例讲述了jQuery表单域属性过滤器用法。分享给大家供大家参考。具体分析如下：表单内包含各种各样的表单域，使用表单域属性选择器可以很好的获取已被选中的单选按钮，复选框以及列表项，也可以根据是否可用从文档中查找表单域。 [b]1. :checked选择器[/b] 用于选择所有被选中的表单域。格式:

[u]复制代码[/u] 代码如下:

$("selector:checked")

可以是input，radio和checkbox [b]2. :enabled选择器[/b] 用于选择所有可用的表单域，格式：

[u]复制代码[/u] 代码如下:

$("selector:enabled")

[b]3. :disabled选择器[/b] 用于选择所有被禁用的表单域，格式:

[u]复制代码[/u] 代码如下:

$("selector:disabled")

[b]4. :selected选择器[/b] 用于从列表框选择所有选中的option元素，格式:

[u]复制代码[/u] 代码如下:

$("selector:selected")

[b]5. :hidden选择器[/b] 用于选择所有的不可见元素

[u]复制代码[/u] 代码如下:

$("selector:hidden")

[b]6. :visible选择器[/b] 用于选择所有的可见元素 [b]简单示例： [/b]

[u]复制代码[/u] 代码如下:

<!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>

效果图： [img]http://files.jb51.net/file_images/article/201502/2015210120732278.gif?201511012744[/img] 希望本文所述对大家的jQuery程序设计有所帮助。

全部评论(0)

上一篇：基于JQuery的数字改变的动画效果--可用来做计数器
下一篇：jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例

资讯排行榜
更多>>