jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单对象属性过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body{
font-family: "Microsoft YaHei"
}
.cGreen{background-color: #4CA902}
.cPink{background-color: #ED4A9F}
.cBlue{background-color: #0092E7}
.cCyan{background-color: #01A6A2}
.cYellow{background-color: #DCA112}
.cRed{background-color: #B7103B}
.cPurple{background-color: #792F7C}
.cBlack{background-color: #110F10}
.hide{display: none;}
</style>
<script type="text/javascript">
/*
所谓表单对象属性过滤选择器：
就是过滤表单对象的属性，例如：
:enabled：选取所有可用元素。
<input name="id">一类的普通input标签；
就是可用的。
:disabled：选取所有不可用的元素。
<input name="email" disabled="disabled" />
被强制声明为不可用的input标签。
:checked：选取所有被选中的元素框。
input:checked：
input所有type为type="checkbox"；
并且已经被选中：checked="checked"
:selected：选取所有被选中的选项列表。
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</select>
|
<option value="2" selected="selected">Gardens</option>
*/
$(document).ready(function() {
// <input type="button" id="btn1" value=":enabled选取所有可用的单行文本input元素">
/*
注意这里是过滤两次，才行！
先从所有中过滤出text纯文本的单行框:text；
再从其中过滤出所有的可用的enabled的元素。
*/
$("#btn1").click(function() {
// 首先通过表单过滤选择，选择出type为text的input标签
console.log($(":text:enabled"));
$(":text:enabled").addClass("cBlack");
});
// <input type="button" id="btn2" value=":disabled选取所有不可用的单行文本input元素">
/*
注意这里是过滤两次，才行！
先从所有中过滤出text纯文本的单行框:text；
再从其中过滤出所有的可用的disabled的元素。
disabled其实很像readonly的元素。
*/
$("#btn2").click(function() {
// 首先通过表单过滤选择，选择出type为text的input标签
console.log($(":text:disabled"));
$(":text:disabled").addClass("cBlack");
});
// <input type="button" id="btn3" value=":checked请先选择，然后选取所有被选中的单选、多选元素">
$("#btn3").click(function() {
// 选中全篇所有checked。
// console.log($(":checked"));
// $(":checked").addClass("cBlack");
// 通过基本选择出input然后通过表单对象属性过滤，只选中为input的checked。
$("input:checked").each(function(index, obj) {
// obj为DOM对象
console.log("index = "+index+", 值为："+$(obj).val());
});
});
// <input type="button" id="btn4" value="设置 中国 被选中">
/*
怎么设置一个值被选中呢？
如果是radio(单选框)，则
只需要把radio的值设置为，
我们需要选中的属性就行了！
*/
$("#btn4").click(function() {
/*
注意：这里的值要设置为[]数组的形式；
但是因为是radio单选框的原因，只能放
一个值。
$(":radio[name='country']").val(["chn", "usa"]);
如果设置多个的话，单选框会选中数组中的
最后一个值。
<
因为这里只有一个radio，所以可以使用:radio
全篇查询。但是如果当前页面有多个单选框的话，
可能就要用div来分块，通过#div1:radio来获得了！
>
*/
// 首先通过表单对象属性过滤选择出radio
$(":radio[name='country']").val(["chn"]);
});
// <input type="button" id="btn5" value="设置第一个select选中 编译原理">
/*
总结一下html中的三种选中框：
标准单选框：input type="radio" name="" value="" 同一组name相同
标准复选框：input type="checkbox" name="" value="" 同一组name相同
select框：
单选形式
<select>
<option></option>
<option></option>
... ...
</select>
复选形式
<select multiple="multiple">
<option></option>
<option></option>
... ...
</select>
select框没有特殊声明：multiple="multiple"的时候，
都是单选框，特殊声明了之后才是复选框。
选择都是[]，但是select因为可以声明多选，单选。有区别
所以其中单选的时候，[]可以省略，但是建议保留[]方便记忆。
标准单选框，复选框都是选中都是：checked。
select框选中是：selected。
*/
$("#btn5").click(function() {
// 首先先获取第一个select，因为整篇有多个select。
// $("select:first").val("编译原理");
// 首先通过基本选择出select
$("select:first").val(["编译原理"]);
});
// <input type="button" id="btn6" value="设置第二个select选中 软件工程和数据库原理">
$("#btn6").click(function() {
// 整篇只有两个select，选择最后一个select
// 首先通过基本选择出select
$("select:last").val(["软件工程", "数据库原理"]);
});
// <input type="button" id="btn7" value="选取所有没有被选中的单选、多选元素">
$("#btn7").click(function() {
// 获取没有被选中的单选、多选选项
// 首先通过表单对象属性过滤选择出radio，通过表单对象属性过滤选择出checkbox
$(":radio:not(:checked), :checkbox:not(:checked)").each(function(i, obj) {
console.log($(this).val());
});
});
// <input type="button" id="btn8" value=":selected选取所有被选中的select下拉列表的option选项元素">
$("#btn8").click(function() {
// 因为是select下嵌套option，所以要后代选择或者使用子元素选择！
// 首先通过基本选择出select，再通过层级选择出option，再通过基本过滤选择not()，再通过表单对象属性过滤选择出:checked
$("select option:not(:selected)").each(function(i, obj) {
console.log($(obj).val());
});
});
});
</script>
</head>
<body>
<input type="text" name="text1" value="可用单行文本输入框">
<input type="text" name="text2" value="不可用单行文本输入框" disabled="disabled">
<select>
<option>软件工程</option>
<option>编译原理</option>
<option>数据库原理</option>
</select>
<select multiple="multiple">
<option>软件工程</option>
<option>编译原理</option>
<option>数据库原理</option>
</select>
<br><br>
<input type="radio" name="country" value="chn">中国
<input type="radio" name="country" value="usa">美国
<input type="checkbox" name="language" value="Java">Java
<input type="checkbox" name="language" value="IOS">IOS
<input type="checkbox" name="language" value="Android">Android
<br><br>
<hr>
<input type="button" id="btn1" value=":enabled选取所有可用的单行文本input元素">
<input type="button" id="btn2" value=":disabled选取所有不可用的单行文本input元素">
<input type="button" id="btn3" value=":checked请先选择，然后选取所有被选中的单选、多选元素">
<input type="button" id="btn4" value="设置 中国 被选中">
<input type="button" id="btn5" value="设置第一个select选中 编译原理">
<input type="button" id="btn6" value="设置第二个select选中 软件工程和数据库原理">
<input type="button" id="btn7" value="选取所有没有被选中的单选、多选元素">
<input type="button" id="btn8" value=":selected选取所有被选中的select下拉列表的option选项元素">
</body>
</html>
jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected的更多相关文章
- jQuery选择器之表单对象属性过滤选择器Demo
测试代码: 08-表单对象属性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- jQuery表单对象属性过滤选择器
jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...
- Jquery | 基础 | jQuery表单对象属性过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...
- 009 jquery过滤选择器-----------（表单对象属性过滤选择器 与 表单选择器）
1.表单对象属性选择器 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- jQuery选择器之表单对象属性筛选选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- jQuery 基本选择器 层次选择器 过滤选择器 内容过滤选择器 可见过滤选择器 属性过滤选择器 表单对象属性过滤选择器
- jquery 表单对象属性筛选选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- jQuery中的内容、可见性过滤选择器（四、四）：:contains()、:empty、:has()、:parent、:hidden、:visible
<!DOCTYPE html> <html> <head> <title>内容.可见性过滤选择器</title> <meta http ...
- jQuery选择器(表单元素过滤选择器)第八节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
随机推荐
- Leetcode2.两数相加——简洁易懂
> 简洁易懂讲清原理,讲不清你来打我~ 输入两个链表,相同位置相加,进位给下一个位置,输出相加后的链表基础概念:↓ ↓ ↓ 1.1)什么是事务 什么是事务?举个生活中的例子:你去小卖铺买东西,"一手交钱,一手交货"就是一个事务的例子,交钱和交货必 须全部成功, 事务才算成功, ...
- 微信小程序云开发-添加数据
一.数据的添加 使用add方法添加数据 添加完成后,在数据库中查询,可以看到数据库中添加了1条数据,此时添加的数据系统自动添加了_openid 将[添加]功能写到对应的方法中 wxml页面中,点击[添 ...
- ArcGis Server安装与使用
ArcGis Server安装 下载ArcGisServer 双击Setup.exe,然后一直下一步. 安装完成后,点击完成,弹出如下界面: 选择第三个选项,然选择[.ecp]后缀名的授权文件. 然后 ...
- sql server2016安装网址
https://www.microsoft.com/zh-cn/download/details.aspx?id=54284 SQl server 2008 附加数据库失败如何解决: https:// ...
- 简单快速安装Apache+PHP+MySql服务环境（二）—— centos使用yum安装php5.6
使用默认方式yum install php安装的php版本为5.4,在使用某些PHP框架的时候可能会有问题,所以需要安装高版本的PHP. 通过yum list php*查看是否有自己需要安装的版本,如 ...
- Python自动化测试面试题-经验篇
目录 Python自动化测试面试题-经验篇 Python自动化测试面试题-用例设计篇 Python自动化测试面试题-Linux篇 Python自动化测试面试题-MySQL篇 Python自动化测试面试 ...
- Flask 之linux部署
1.装python > `[root ~]# yum install gcc [root ~]# wget https://www.python.org/ftp/python/3.6.5/Pyt ...
- synchronized 优化手段之锁膨胀机制！
synchronized 在 JDK 1.5 之前性能是比较低的,在那时我们通常会选择使用 Lock 来替代 synchronized.然而这个情况在 JDK 1.6 时就发生了改变,JDK 1.6 ...
- Git常用命令和基础使用
Git 参考:廖雪峰的Git教程 Git 常用命令 git config --global user.name "name" #配置git使用用户 git config --glo ...