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 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 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 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
python @property的用法及含义全面解析
2018/02/01 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
印尼网上商店:Alfacart.com
2019/03/11 全球购物
铁路个人事迹材料
2014/01/30 职场文书
倡议书格式模板
2014/05/13 职场文书
校园安全标语
2014/06/07 职场文书
营销与策划专业求职信
2014/06/20 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
格林童话读书笔记
2015/06/30 职场文书
小学生教师节广播稿
2015/08/19 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
python 中的@运算符使用
2021/05/26 Python
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
教你用python实现12306余票查询
2021/06/30 Python
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
Java完整实现记事本代码
2022/06/16 Java/Android