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 ...
随机推荐
- 接入 SDK 结果翻车了？了解 SDK 的那些事
前段时间,二狗子的朋友圈被工信部发布的<关于下架侵害用户权益 App 名单的通报>给刷屏了.公告中指出有 90 款 App 未按照要求完成整改将会下架.而这 90 款 App 涉及全国各地 ...
- 基于SSM酒店管理系统mysql版本（前后台）
介绍:spring,springmvc,mybatis,mysql,eclipse 截图: 数据库表:CREATE TABLE `account` ( `id` int(11) NOT NULL AU ...
- Python基础之函数的闭包与装饰器的介绍
1.闭包的概念: 如果在一个函数中,定义了另外一个函数,并且那个函数使用了外面函数的变量,并且外面那个函数返回了里面这个函数的引用,那么称为里面的这个函数为闭包. 2.话不多说,以demo示例: de ...
- Linux文件浏览（less、more、head、tail）以及vim编辑器命令总结
结合小编学习实践,整理了Linux下查看内容(less.more.head.tail)和编辑内容(vim)的部分基础命令解析: 1.less命令 分页浏览内容,如果在shell命令行下按回车键,则一点 ...
- 痞子衡嵌入式：i.MXRT1010, 1170型号上不一样的SNVS GPR寄存器读写控制设计
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT1010, 1170型号上不一样的SNVS GPR寄存器读写控制设计. 痞子衡之前两篇文章 <在SBL项目实战中妙用i ...
- 基于ifix组态软件研究控制按钮权限
背景: 在前阵子做基于ifix生成电力监控平台时,遇到业主提出的一个需求.关于如何在控制弹窗中,点击相应的合分闸按钮时,优先弹出登录界面,当输入相应的有权限用户名和密码后,才能操作这一要求.后实现如下 ...
- ecshop 连接sae数据库的配置
// database host$db_host = "w.rdc.sae.sina.com.cn:3307";// database name$db_name = &qu ...
- vue中this.$router.push()路由传值和获取的两种常见方法
1.路由传值 this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...
- centos7 安装mariadb、"systemctl status mariadb.service" and "journalctl -xe" for details
centos7 mariadb 安装 也可解决此错误:ob for mariadb.service failed because the control process exited with err ...
- 刷了无数大厂Android研发岗面试题，其实考的无非是这 3 点能力
前言 发现一个有趣的现象,似乎程序员们对面试题总是抱有热情,多看几道面试题,自己的面试能力就可以提高一点. 作为一个研发工程师,看过很多公司的面试题,也参与过很多公司的面试,发现大厂的面试题更加具有代 ...