编程 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 相关文章推荐

jQuery实现的类flash菜单效果代码

May 17 Javascript

js 关键词高亮(根据ID/tag高亮关键字)案例介绍

Jan 21 Javascript

jquery代码实现多选、不同分享功能

Jul 31 Javascript

AJAX实现瀑布流触发分页与分页触发瀑布流的方法

May 23 Javascript

jQuery插件 Jqplot图表实例

Jun 18 Javascript

微信小程序 rpx 尺寸单位详细介绍

Oct 13 Javascript

Angularjs的Controller间通信机制实例分析

Nov 07 Javascript

浅谈Angular2 ng-content 指令在组件中嵌入内容

Aug 18 Javascript

canvas轨迹回放功能实现

Dec 20 Javascript

animate.css在vue项目中的使用教程

Aug 05 Javascript

你或许不知道的一些npm实用技巧

Jul 04 Javascript

vue中的过滤器及其时间格式化问题

Apr 09 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

2019年漫画销量排行榜：鬼灭登顶海贼单卷制霸尾田盛赞鬼灭

2020/03/08 日漫

php设计模式小结

2013/02/15 PHP

PHP解析html类库simple_html_dom的转码bug

2014/05/22 PHP

php有效防止同一用户多次登录

2015/11/19 PHP

php写app接口并返回json数据的实例(分享)

2017/05/20 PHP

PHP实现批量清空删除指定文件夹所有内容的方法

2017/05/30 PHP

JQuery下的Live方法和$.browser方法使用代码

2010/06/02 Javascript

Jquery判断$("#id")获取的对象是否存在的方法

2013/09/25 Javascript

XMLHttpRequest处理xml格式的返回数据(示例代码)

2013/11/21 Javascript

JQuery与Ajax调用新浪API获取短网址的代码

2014/02/07 Javascript

sogou地图API用法实例教程

2014/09/11 Javascript

第七章之菜单按钮图标组件

2016/04/25 Javascript

浅析JavaScript Array和string的转换(推荐)

2016/05/20 Javascript

Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）

2016/07/14 Javascript

Bootstrap源码解读表单（2）

2016/12/22 Javascript

vuejs+element-ui+laravel5.4上传文件的示例代码

2017/08/12 Javascript

JavaScript寄生组合式继承原理与用法分析

2019/01/11 Javascript

JS基于对象的链表实现与使用方法示例

2019/01/31 Javascript

JavaScript对象属性操作实例解析

2020/02/04 Javascript

Js和VUE实现跑马灯效果

2020/05/25 Javascript

如何使用 vue-cli 创建模板项目

2020/11/19 Vue.js

初学Python实用技巧两则

2014/08/29 Python

Python变量和数据类型详解

2017/02/15 Python

Python cookbook(数据结构与算法)根据字段将记录分组操作示例

2018/03/19 Python

Django ManyToManyField 跨越中间表查询的方法

2018/12/18 Python

在numpy矩阵中令小于0的元素改为0的实例

2019/01/26 Python

Python流程控制 while循环实现解析

2019/09/02 Python

python错误调试及单元文档测试过程解析

2019/12/19 Python

在pytorch 中计算精度、回归率、F1 score等指标的实例

2020/01/18 Python

python词云库wordCloud使用方法详解(解决中文乱码)

2020/02/17 Python

利用Python的folium包绘制城市道路图的实现示例

2020/08/24 Python

关于VPN

2012/06/10 面试题

护士自我鉴定怎么写

2014/02/07 职场文书

市场营销毕业求职信

2014/08/07 职场文书

资深HR教你写好简历中的自我评价

2019/05/07 职场文书

三好学生竞选稿范文

2019/08/21 职场文书