jQuery表单域选择器用法分析

更新时间：2015年02月10日 11:06:33 作者：woshisap

这篇文章主要介绍了jQuery表单域选择器用法,实例分析了常见的表单元素选择器的使用技巧,并给出了一个完整的实例总结,需要的朋友可以参考下

本文实例分析了jQuery表单域选择器用法。分享给大家供大家参考。具体如下：

表单域是指网页中的input,textarea, select和button元素。

1. :input选择器

复制代码代码如下:

$(":input")

2. :text选择器

复制代码代码如下:

$(":text")

3. :password选择器

复制代码代码如下:

$(":password")

4. :radio选择器

复制代码代码如下:

$(":radio")

5. :checkbox选择器

复制代码代码如下:

$(":checkbox")

6. :file选择器

复制代码代码如下:

$(":file")

7. :image选择器

复制代码代码如下:

$(":image")

8. :hidden选择器

复制代码代码如下:

$(":hidden")

用于选择所有不可见元素(css display 属性值为none)以及隐藏域(<input type="hidden">)

9. :submit选择器

复制代码代码如下:

$(":submit")

10. :reset选择器

复制代码代码如下:

$(":reset")

简单实例：

复制代码代码如下:

<!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(){  

            $(":text").attr("value", "文本框");  

            $(":password").attr("value", "密码框");  

            $(":radio:eq(0)").attr("checked", "true");  

            $(":checkbox").attr("checked", "true");  

            $(":image").attr("src", "ICO.ICO");  

            $(":file").css("width", "200px");  

            $(":hidden").attr("value", "已保存的值");  

            $("select").css("background", "#FCF");   //注意没有冒号  

            $(":submit").attr("id", "btn1");  

            $(":reset").attr("name", "btn");  

            $("textarea").attr("value", "文本域");   //注意没有冒号  

         });  

</script>  

</head>  

<body>  

  <table width="730" height="145" border="1">  

  <tr>  

    <td width="113" height="23">文本框</td>  

    <td width="209"><input type="text"/></td>  

    <td width="93">密码框</td>  

    <td width="287"><input type="password" /></td>  

  </tr>  

  <tr>  

    <td height="24">单选按钮</td>  

    <td><input type="radio" /><input type="radio" /></td>  

    <td>复选框</td>  

    <td><input type="checkbox" /><input type="checkbox" /></td>  

  </tr>  

  <tr>  

    <td height="36">图像</td>  

    <td><input type="image" /></td>  

    <td>文件域</td>  

    <td><input type="file" /></td>  

  </tr>  

  <tr>  

    <td height="23">隐藏域</td>  

    <td><input type="hidden" />（不可见）</td>  

    <td>下拉列表</td>  

    <td><select><option>选项一</option><option>选项二</option><option>选项三</option></select></td>  

  </tr>  

  <tr>  

    <td height="25">提交按钮</td>  

    <td><input type="submit" /></td>  

    <td>重置按钮</td>  

    <td><input type="reset" /></td>  

  </tr>  

  <tr>  

     <td valign="top">文本区域：</td>  

     <td colspan="3"><textarea cols="70" rows="3"></textarea></td>  

  </tr>  

</table>  

</body>  

</html>

效果图如下所示：

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

相关文章

jQuery实现的动态伸缩导航菜单实例
这篇文章主要介绍了jQuery实现的动态伸缩导航菜单,实例分析了jQuery鼠标事件及animate、hide等方法的使用技巧,需要的朋友可以参考下
2015-05-05
jQuery DIV弹出效果实现代码
现在很多网站都流行这种弹出式的对话框或是信息显示框，很想将这个流行元素加入到自己的项目中。使用jQuery可以不费大力气实现这种效果。将其记录到我的Blog中，与业界朋友们起分享。
2009-07-07
jquery检测上传文件大小示例
这篇文章主要介绍了jquery检测上传文件大小,结合完整示例形式分析了jquery针对上传文件大小检测与计算相关操作技巧,需要的朋友可以参考下
2020-04-04
Ztree新增角色和编辑角色回显问题的解决
这篇文章主要介绍了Ztree新增角色和编辑角色回显问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
jQuery选择器之表单元素选择器详解
这篇文章主要为大家详细介绍了jQuery选择器之表单元素选择器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
jquery UI 1.72 之datepicker
一步一步学jquery UI 1.72 之datepicker，中间都写了注释方便大家学习。
2009-12-12
jquery获取元素索引值index()示例
这篇文章主要介绍了jquery获取元素索引值index()方法,需要的朋友可以参考下
2014-02-02
jquery $.each()使用探讨
想必大家对jquery $.each()并不陌生吧，使用它可以进行元素的遍历，下面有个不错的示例，感兴趣的朋友可以参考下
2013-09-09
Easy UI动态树点击文字实现展开关闭功能
这篇文章主要介绍了Easy UI动态树点击文字实现展开关闭功能,需要的朋友可以参考下
2017-09-09
jQuery焦点图轮播插件KinSlideshow用法分析
这篇文章主要介绍了jQuery焦点图轮播插件KinSlideshow用法,结合实例形式较为详细的分析了jQuery焦点图轮播插件KinSlideshow的参数含义与使用方法,需要的朋友可以参考下
2016-06-06

最新评论