jQuery基本选择器 （实例及表单域 value 的获取）
jQuery基本选择器包括 CSS选择器、层级选择器和、表单域选择器。
1.CSS选择器
（1）标签选择器
$("div") $("p") $("table") 等一系列 HTML 标签
（2）ID选择器
<input id="user" type="text">
获取该标记的值：$("#user").val();
（3）类选择器
<input type="text" class="t">
给该文本框添加样式：$(".t").css("border","2px solid blue");
（4）通用选择器
$("*").css("color","red"); //给所有元素设置样式
（5）群组选择器
$("div,span,p .styleClass").css("border","1px solid red"); //对所有div、span 及应用 styleClass 类的 p 元素设置边框属性
2.层级选择器
（1）子元素选择器
$("parent > child");
查找父元素下面的所有子元素，不包括孙元素等。
（2）后代元素选择器
$("ancestor descedant");
查找 ancestor 元素的所有子元素、孙元素、重孙元素等。
（3）紧邻同辈元素选择器
$("prev+next");
同辈，且紧跟在 prev 元素后面的元素 next 元素
（4）相邻同辈元素选择器
$("prev~siblings")；
跟在 prev 后且同辈的所有 siblings 元素
3.表单域选择器
（1） :input 选择器
$(":input");
选择所有 input, textarea, select, button 元素。
（2） :text 选择器
$(":text");
选择所有单行文本框 (<input type="text"/>).
（3） :password 选择器
$(":password");
选择所有密码框 (<input type="password"/>).
（4） :radio 选择器
$(":radio");
选择所有单选按钮 (<input type="radio"/>).
（5） :checkbox 选择器
$(":checkbox");
选择所有复选框 (<input type="checkbox"/>).
（6） :file 选择器
$(":file");
选择所有文件域 (<input type="file"/>).
（7） :iamge 选择器
$(":iamge");
选择所有图像域 (<input type="iamge"/>).
（8） :hidden 选择器
$(":hidden");
选择所有隐藏域 (<input type="hidden"/>) 及 所有不可见元素（CSS display 属性值为 none）。
（9） :button 选择器
$(":button");
选择所有按钮 (<input type="button"/>) 和 <button>...</button>
（10） :submit 选择器
$(":submit");
选择所有提交按钮 (<input type="submit"/>) 和 <button>...</button>
（11） :reset 选择器
$(":reset");
选择所有重置按钮 (<input type="reset"/>) 和 <button>...</button>
对于表单域选择器，上述均为获取所有某一类型的元素。获取其中某个元素的值，在下面的实例中体现。该实例的运行效果图和代码如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
6 <title>表单域选择器应用示例</title>
7 <script language="javascript" type="text/javascript">
8 $(document).ready(function(){
9 $(":text").attr("value","文本框"); //给文本框添加文本
10 $(":password").attr("value","密码框"); //给密码框添加文本
11 $(":radio:eq(1)").attr("checked","true"); //将第2个单选按钮设置为选中
12 $(":checkbox").attr("checked","true"); //将复选框全部选中
13 $(":image").attr("src","wedding.jpg"); //给图像指定路径
14 $(":file").css("width","200px"); //给文件域设置宽度
15 $(":hidden").attr("value","已保存的值"); //给隐藏域添加文本
16 $("select").css("background","#FCF"); //给下拉列表设置背景色
17 $(":submit").attr("id","btn1"); //给提交按钮添加id属性
18 $(":reset").attr("name","btn"); //给重置按钮添加name属性
19 $("textarea").attr("value","文本区域"); //给文本区域添加文字
20 });
21 function submitBtn(){
22 //下面两个语句用来获取复选框选中的所有值
23 var checkbox = "";
24 $(":checkbox[name='hate'][checked]").each(function(){
25 checkbox += $(this).val() + " ";
26 });
27 alert($(":text").val()+"\n"
28 +$(":password").val()+"\n"
29 +$(":radio[name='habbit'][checked]").val()+"\n"
30 +checkbox+"\n"
31 +$(":file").val()+"\n" //获得所选文件的绝对路径
32 +$(":hidden[name='hiddenarea']").val()+"\n"
33 +$("select[name='selectlist'] option[selected]").text()+"\n"
34 +$("textarea").val()+"\n"
35 );
36 }
37
38 </script>
39 </head>
40
41 <body>
42 <table width="730" height="145" border="1">
43 <tr>
44 <td width="113" height="23">文本框</td>
45 <td width="209"><input type="text"/></td>
46 <td width="93">密码框</td>
47 <td width="287"><input type="password" /></td>
48 </tr>
49 <tr>
50 <td height="24">单选按钮</td>
51 <td>
52 <input type="radio" name="habbit" value="是"/>是
53 <input type="radio" name="habbit" value="否"/>否
54 </td>
55 <td>复选框</td>
56 <td>
57 <input type="checkbox" name="hate" value="水果"/>水果
58 <input type="checkbox" name="hate" value="蔬菜"/>蔬菜
59 </td>
60 </tr>
61 <tr>
62 <td height="50">图像</td>
63 <td><input type="image" width="50" height="50"/></td>
64 <td>文件域</td>
65 <td><input type="file" /></td>
66 </tr>
67 <tr>
68 <td height="23">隐藏域</td>
69 <td><input type="hidden" name="hiddenarea"/>（不可见）</td>
70 <td>下拉列表</td>
71 <td>
72 <select name="selectlist">
73 <option value="选项一">选项一</option>
74 <option value="选项二" >选项二</option>
75 <option value="选项三">选项三</option>
76 </select>
77 </td>
78 </tr>
79 <tr>
80 <td height="25">提交按钮</td>
81 <td><input type="submit" onclick="submitBtn()"/></td>
82 <td>重置按钮</td>
83 <td><input type="reset" /></td>
84 </tr>
85 <tr>
86 <td valign="top">文本区域：</td>
87 <td colspan="3"><textarea cols="70" rows="3"></textarea></td>
88 </tr>
89 </table>
90
91 </body>
92 </html>点击【提交】按钮之后弹出的对话框如下：
转载于:https://www.cnblogs.com/lihuiyy/archive/2012/07/05/2577754.html
jQuery基本选择器 （实例及表单域 value 的获取）相关推荐
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- 2021/11/1 前端开发之JavaScript+jQuery入门 第十三章表单效验
目录 1.JavaScript验证表单内容 2.表单选择器 3.表单属性过滤选择器 4.正则表达式 4.1 正则表达式的定义 4.2 表达式规则 4.3 正则表达式的使用方式 5.HTML5表单验证 ...
- VC采集网页所有表单域
1.独立代码 //-----------开始---------------------// #include <atlbase.h> #include <Mshtml.h> # ...
- JQiery选择器中的表单元素
无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery中专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素. 表单选择器这么方便,让我们来看一下都可以怎么使用吧: ...
- jquery 上传图片 java_jquery 异步提交表单 上传图片小例子
这次做ecshop项目用到了一些小东西,这里我就把在项目中用到的一个异步上传多个产品图片的小东西,不是多好,但是是我自己查资料搞出来的.放这里,给自己和大家一个参考,欢迎丢砖!(jquery+spri ...
- 零基础前端笔记（2）html，表格，列表，标签，文本域，表单域
XHTML可扩展超文本标记语言(2) (1)创建表格 (2)表格属性 表头单元格标签th 表格标题caption 小说排行榜 (3)合并单元格 (4)划分表格结构 (5)列表标签 无序列表 有序列表 ...
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
- java 填充pdf_Java如何创建和填充PDF表单域（代码示例）
本篇文章给大家带来的内容是关于Java如何创建和填充PDF表单域(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 表单域,可以按用途分为多种不同的类型,常见的有文本框.多行 ...
- html js文件域val,js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. @H_502_ ...
最新文章
- iOS学习笔记（十三）——获取手机信息（UIDevice、NSBundle、NSLocale）
- 数据结构 - 二元查找树
- redis的五种数据结构
- win10部署webservice网站的步骤
- AT2376-[AGC014D]Black and White Tree【结论,博弈论】
- python 散点图点击链接图片_在Python和matplotlib中连接三维散点图中的两点
- 基于JAVA+Swing+MYSQL的停车场管理系统
- predicate 列存储索引扫描_MySQL中IS NULL、IS NOT NULL、!=不能用索引？胡扯！
- 计算机内存地址对齐,深入理解内存对齐
- miRNA数据库篇——Rfam数据库
- vue项目中引入外部字体（超详细）
- android手机怎么拍月亮,手机如何拍摄星空？2分钟教你如何拍出璀璨星空
- 【精华】龚祖春奋发改进企业的风格
- 遇见你是我最美的意外
- 编译原理：了解编译原理
- 【camera】【ISP】Lens Shading Correction镜头阴影校正
- 将区块链带到第三世界：分布式电商BitCherry的格局与野心
- drbd mysql性能_drbd性能测试及调优
- Spark Friendship
- C++：写出这个数（PAT）
热门文章
- d3 v5 api Axes
- 一点感想及AIX如何快速入门到精通（转）
- 企业五年后卓越或者死亡，数据战略是关键！
- Myeclipse学习总结（10）——MyEclipse2014导入项目时The project was not built since its build问题...
- Windows学习总结（10）——Windows系统中常用的CMD命令详解
- Mysql学习总结（37）——Mysql Limit 分页查询优化
- power接口 sata_sata硬盘不接power接口读的出来吗
- 肇东一中2021高考成绩查询,肇东一中2018高考喜报成绩
- TypeScript笔记 5--变量声明(解构和展开)
- 说说你对Jdk并发包中的CAS实现的了解？