jQuery表单域选择器用法分析


Posted in Javascript onFebruary 10, 2015

本文实例分析了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程序设计有所帮助。

Javascript 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
javascript与CSS复习(三)
Jun 29 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
jQuery层级选择器用法分析
Feb 10 #Javascript
Jquery中CSS选择器用法分析
Feb 10 #Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 #Javascript
Js为表单动态添加节点内容的方法
Feb 10 #Javascript
jQuery前端分页示例分享
Feb 10 #Javascript
js进行表单验证实例分析
Feb 10 #Javascript
EasyUi datagrid 实现表格分页
Feb 10 #Javascript
You might like
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
AngularJS快速入门
2015/04/02 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python numpy存取文件的方式
2020/04/01 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
音乐系毕业生自荐信
2013/10/27 职场文书
中医专业应届生求职信
2013/11/17 职场文书
联谊活动策划书
2014/01/26 职场文书
迁户口计划生育证明
2014/10/19 职场文书
文明家庭事迹材料
2014/12/20 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
《雷雨》教学反思
2016/02/20 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android