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 ...
随机推荐
- Git初始化本地已有项目
1.初始化仓库 git init 2.remote git remote add origin 仓库地址 3.从远程分支拉取master分支并与本地master分支合并 git pull origin ...
- GDB常用命令整理
(gdb) break xxx (gdb) b xxx 在源代码指定的某一行设置断点,其中 xxx 用于指定具体打断点的位置. (gdb) run (gdb) r 执行被调试的程序,其会自动在第一个断 ...
- vue3如何编写挂载DOM的插件
vue3 跟 vue2 相比,多了一个 app 的概念,vue3 项目的创建也变成了 // main.jsimport { createApp } from 'vue' import App from ...
- 【C#】C#中使用GDAL3（一）：Windows下超详细编译C#版GDAL3.3.0（VS2015+.NET 4+32位/64位）
转载请注明原文地址:https://www.cnblogs.com/litou/p/15004877.html 目录 一.介绍 二.编译准备 三.编译SQLite 四.编译LibTiff 五.编译PR ...
- 7.27考试总结(NOIP模拟25)[random·string·queue]
死亡的尽头,没有神 T1 random 解题思路 这波是找规律完胜了.. lby dalao根据样例找出了正确的式子:\(\dfrac{n^2-1}{9}\) 然而,我这个菜鸡却推出了这样一个错误的式 ...
- 第二十九篇 -- PY程序返回值问题
今天兴之所至,来写一写关于程序返回值的问题.普通的py程序就不用多说了,sys.exit(result),result就是你想返回的返回值啦.我们今天来讲讲用PyQt5写的带界面的程序如何设置返回值的 ...
- 比@EnableMongoAuditing功能强大的实现
问题出现 以前通过@EnableMongoAuditing.@CreateDate.@LastModifiedDate进行实体类创建时间.修改时间的自动管理. 但为了实现多数据源的管理以及切换,自己覆 ...
- 实战 | Hive 数据倾斜问题定位排查及解决
Hive 数据倾斜怎么发现,怎么定位,怎么解决 多数介绍数据倾斜的文章都是以大篇幅的理论为主,并没有给出具体的数据倾斜案例.当工作中遇到了倾斜问题,这些理论很难直接应用,导致我们面对倾斜时还是不知所措 ...
- 从Python到Go：初学笔记
本文记录了我在学习Go的过程时的一些笔记,主要是比较Python和Go之间的差异并作简单描述,以此使Python程序员对Go语言的特性有简略的了解.初学难免有纰漏,欢迎各位批评指正补充交流,谢谢. 数 ...
- Docker部署Mysql实践
前言:由于Docker部署容器时,没有指定IP,当机器重启后,容器的IP会变化,所以在创建容器的时候,最好能固定IP:同时,在Ubuntu系统中,每次执行命令,都需要root权限,命令需要加sudo标 ...