JQuery表单元素过滤选择器
此选择器主要是对所选择的表单元素进行过滤：
| 选择器 | 描述 | 返回 |
| enabled | 选择所有的可用的元素 | 集合元素 |
| disabled | 选择所有的不可用的元素 | 集合元素 |
| checked | 选择所有被选中的元素（单选框，复选框） | 集合元素 |
| selected | 选择所有被选中选项元素（下拉列表） | 集合元素 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//使所有的可用的单行文本框的 value 值变为 尚硅谷
alert($(":text:enabled").val());
$(":text:enabled").val("西游记");
});
$("#btn2").click(function(){
$(":text:disabled").val("www.xiyouji.com");
});
$("#btn3").click(function(){
var num =
$(":checkbox[name='newsletter']:checked").length;
alert(num);
}); $("#btn5").click(function(){
//实际被选择的不是 select, 而是 select 的 option 子节点
//所以要加一个 空格.
//var len = $("select :selected").length
//alert(len); //因为 $("select :selected") 选择的是一个数组
//当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了.
//alert($("select :selected").val()); //jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在
//得到的 DOM 对象, 而不是一个 jQuery 对象
$("select :selected").each(function(){
alert(this.value);
});
}); $("#btn4").click(function(){
$(":checkbox[name='newsletter']:checked").each(function(){
alert(this.value);
});
});
})
</script> </head>
<body>
<h3>表单对象属性过滤选择器</h3>
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取多选框选中的内容.</button><br /><br />
<button id="btn5">获取下拉框选中的内容.</button><br /><br /> <form id="form1" action="#">
可用元素: <input name="add" value="可用文本框1"/><br>
不可用元素: <input name="email" disabled="true" value="不可用文本框"/><br>
可用元素: <input name="che" value="可用文本框2"/><br>
不可用元素: <input name="name" disabled="true" value="不可用文本框"/><br>
<br> 多选框: <br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5 <br><br>
下拉列表1: <br>
<select name="test" multiple="multiple" style="height: 100px">
<option>孙悟空</option>
<option selected="selected">唐僧</option>
<option>猪八戒</option>
<option selected="selected">沙和尚</option>
<option>林冲</option>
<option>武松</option>
</select> <br><br>
下拉列表2: <br>
<select name="test2">
<option>刘德华</option>
<option>释小龙</option>
<option selected="selected">成龙</option>
</select> <textarea rows="" cols=""></textarea>
</form>
</body>
</html>
表单选择器：
JQuery表单元素过滤选择器的更多相关文章
- jQuery选择器(表单元素过滤选择器)第八节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- Jquery | 基础 | jQuery表单对象属性过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...
- jQuery表单对象属性过滤选择器
jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...
- jQuery 表单元素取值与赋值方法总结
一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" clas ...
- jQuery 表单域选中选择器
复选框.单选按钮.下拉列表 /***********************************************/ <script type="text/javascrip ...
- jquery 表单元素选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- jquery表单内容过滤
效果: 输入筛选字段后显示效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http ...
- jQuery表单元素非空验证
<script type="text/javascript"> $(function(){ /************* ...
- Jquery | 基础 | 使用 jQuery 表单过滤选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- std::u32string conversion to/from std::string and std::u16string
I need to convert between UTF-8, UTF-16 and UTF-32 for different API's/modules and since I know have ...
- 常用的数据整理的JavaScript库
Lodash.js https://lodash.com/ Underscore.js https://www.html.cn/doc/underscore/
- LeetCode 19 Remove Nth Node From End of List (移除距离尾节点为n的节点)
题目链接 https://leetcode.com/problems/remove-nth-node-from-end-of-list/?tab=Description Problem: 移除距离 ...
- [转]Linux sendmail 详解
Internet上最基本的服务,现在应该大部分人都有自己的邮箱吧,用的人多,但理解的人估计没多少,我自己以前也是常常用,但对其原理并不操心.今天就来操心下,进行个小总结 一．邮件服务的基本流程 ...
- jenkins 集成redmine
安装 可以使用jenkins的插件管理页面进行安装,也可以使用其id(redmine)在镜像中进行安装并重启镜像即可. 插件安装确认 重新启动后确认此插件已经安装完毕 设定内容 系统管理 -> ...
- HDU-1011 Starship Troopers（树形dp）
Starship Troopers Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- poj3662 Telephone Lines【最短路】【二分】
http://poj.org/problem?id=3662 Telephone Lines Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
- PAT甲1005 Spell it right【字符串】
1005 Spell It Right (20 分) Given a non-negative integer N, your task is to compute the sum of all th ...
- ubuntu14.04下编译支持opengl的opencv
在学习基于opencv的AR时,编译程序遇到报错,发现opencv不支持opengl.网上原因得知,在编译opencv时,opencv2.4以后的版本中默认ENABLE_OPENGL = NO,只需要 ...
- pip freeze
总结: 1.输出安装的包信息,并在另一个环境快速安装 Generate output suitable for a requirements file. $ pip freeze docutils== ...