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