编程 Javascript

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程序设计有所帮助。

jQuery表单域选择器用法分析

- Author -

woshisap

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

鼠标放在图片上显示大图的JS代码

Mar 26 Javascript

js动态控制table的tr、td增加及删除的具体实现

Apr 30 Javascript

如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗？”

Mar 05 Javascript

基于JavaScript实现一定时间后去执行一个函数

Dec 14 Javascript

Node.js 中exports 和 module.exports 的区别

Mar 14 Javascript

AngularJS 购物车全选/取消全选功能的实现方法

Aug 14 Javascript

node.js中路由，中间件，ge请求和post请求的参数详解

Dec 26 Javascript

vue中引用阿里字体图标的方法

Feb 10 Javascript

JavaScript基于数组实现的栈与队列操作示例

Dec 22 Javascript

react-router-dom 嵌套路由的实现

May 02 Javascript

解决vue单页面多个组件嵌套监听浏览器窗口变化问题

Jul 30 Javascript

js 数据类型判断的方法

Dec 03 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下使用SimpleXML 处理XML 文件

2010/02/27 PHP

PHP7.1实现的AES与RSA加密操作示例

2018/06/15 PHP

Dom 是什么的详细说明

2010/10/25 Javascript

jquery怎样实现ajax联动框(一)

2013/03/08 Javascript

用unescape反编码得出汉字示例

2014/04/24 Javascript

Nodejs如何复制文件

2016/03/09 NodeJs

jQuery+ajax实现局部刷新的两种方法

2017/06/08 jQuery

jquery单击文字或图片内容放大并居中显示

2017/06/23 jQuery

详解升级react-router 4 踩坑指南

2017/08/14 Javascript

详解Vuex中mapState的具体用法

2017/09/28 Javascript

vue 1.x 交互实现仿百度下拉列表示例

2017/10/21 Javascript

实时监控input框,实现输入框与下拉框联动的实例

2018/01/23 Javascript

修改Nodejs内置的npm默认配置路径方法

2018/05/13 NodeJs

JS获取并处理php数组的方法实例分析

2018/09/04 Javascript

JavaScript设计模式之装饰者模式实例详解

2019/01/17 Javascript

vue组件开发props验证的实现

2019/02/12 Javascript

Python的Bottle框架中获取制定cookie的教程

2015/04/24 Python

Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例

2018/07/18 Python

python url 参数修改方法

2018/12/26 Python

谈谈Python中的while循环语句

2019/03/10 Python

python time.sleep()是睡眠线程还是进程

2019/07/09 Python

详解Python并发编程之创建多线程的几种方法

2019/08/23 Python

浅谈python中频繁的print到底能浪费多长时间

2020/02/21 Python

python继承threading.Thread实现有返回值的子类实例

2020/05/02 Python

python自动化发送邮件实例讲解

2021/01/04 Python

怎样比较两个类型为String的字符串

2016/08/17 面试题

C#如何允许一个类被继承但是避免这个类的方法被重载？

2015/02/24 面试题

行政副总岗位职责

2014/02/23 职场文书

白酒市场营销方案

2014/02/25 职场文书

岗位廉政承诺书

2014/03/27 职场文书

校庆筹备方案

2014/03/30 职场文书

学习礼仪心得体会

2014/09/01 职场文书

开发房地产协议书

2014/09/14 职场文书

党校党性分析材料

2014/12/19 职场文书

一文搞懂MySQL索引页结构

2022/02/28 MySQL

关于的python五子棋的算法

2022/05/02 Python