编程 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调用CS里的带参方法实例

Aug 01 Javascript

基于MVC3方式实现下拉列表联动(JQuery)

Sep 02 Javascript

JavaScript导出Excel实例详解

Nov 25 Javascript

JS动态修改表格cellPadding和cellSpacing的方法

Mar 31 Javascript

深入剖析JavaScript编程中的对象概念

Oct 21 Javascript

使用jQuery监听DOM元素大小变化

Feb 24 Javascript

Extjs实现下拉菜单效果

Apr 01 Javascript

利用Angularjs中模块ui-route管理状态的方法

Dec 27 Javascript

浅谈javascript的闭包

Jan 23 Javascript

ES6新特性之Symbol类型用法分析

Mar 31 Javascript

laydate日历控件使用方法详解

Nov 20 Javascript

vue的.vue文件是怎么run起来的(vue-loader)

Dec 10 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

漫荒推荐：画风超赞的国风漫画推荐超长假期不无聊

2020/03/08 国漫

PHP处理excel cvs表格的方法实例介绍

2013/05/13 PHP

DOM XPATH获取img src值的query

2013/09/23 PHP

zf框架db类的分页示例分享

2014/03/14 PHP

php图片处理函数获取类型及扩展名实例

2014/11/19 PHP

PHPCMS V9 添加二级导航的思路详解

2016/10/20 PHP

微信封装的调用微信签名包的类库

2017/06/08 PHP

浅谈PHP中pack、unpack的详细用法

2018/03/12 PHP

JavaScript学习笔记（十）

2010/01/17 Javascript

JavaScript异步编程Promise模式的6个特性

2014/04/03 Javascript

JS实现文字链接感应鼠标淡入淡出改变颜色的方法

2015/02/26 Javascript

js控制页面的全屏展示和退出全屏显示的方法

2015/03/10 Javascript

浅析JavaScript中的array数组类型系统

2016/07/18 Javascript

jquery.cookie.js的介绍与使用方法

2017/02/09 Javascript

详解axios在node.js中的post使用

2017/04/27 Javascript

nodejs制作爬虫实现批量下载图片

2017/05/19 NodeJs

js保留两位小数方法总结

2018/01/31 Javascript

Nodejs对postgresql基本操作的封装方法

2019/02/20 NodeJs

Python类的专用方法实例分析

2015/01/09 Python

Python读取键盘输入的2种方法

2015/06/16 Python

Python实现身份证号码解析

2015/09/01 Python

Django实现简单分页功能的方法详解

2017/12/05 Python

在python中实现对list求和及求积

2018/11/14 Python

基于Python中random.sample()的替代方案

2020/05/23 Python

Python+Dlib+Opencv实现人脸采集并表情判别功能的代码

2020/07/01 Python

基于OpenCV的路面质量检测的实现

2020/11/04 Python

戴森美国官网：Dyson美国

2016/09/11 全球购物

投标单位介绍信

2014/01/09 职场文书

天鹅的故事教学反思

2014/02/04 职场文书

学雷锋活动总结报告

2014/06/26 职场文书

小学体育组工作总结

2015/08/13 职场文书

2015年度工程师评职称工作总结

2015/10/14 职场文书

学校体育节班级口号

2015/12/25 职场文书

关于vue中如何监听数组变化

2021/04/28 Vue.js

对PyTorch中inplace字段的全面理解

2021/05/22 Python

浅谈PostgreSQL表分区的三种方式

2021/06/29 PostgreSQL