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 ...
随机推荐
- deepin使用synergy鼠标越界软件实现和另一台windows系统共享鼠标
1,搜索synergy就能找到很多安装和配置的博客文章. 2,我遇到的问题: 1,在linux(deepin)上安装1.8.8版本报出找不到依赖libssl.so.1.0.0的错误,导致无法成功启动软 ...
- python基础之面向对象OOP
#类(面向对象) PageObject设计模式 unittest 知识体系#函数式编程import datetimebook_info = { "title":"Pyth ...
- Python在ubuntu16.04上环境搭建
1.anaconda3安装 mkdir anaconda cd anaconda wget https://repo.continuum.io/archive/Anaconda3-4.4.0-Linu ...
- 利用PhotoShop CS6进行抠图
相信大家在前端开发中一定遇到过抠图,一个方形图有好多种方法可以扣出来你想要的图片,可是你知道怎么扣出一个圆形的图片吗?(另附ps破解办法 亲测可用) 一:我们需要安装ps软件并进行破解,这里进行下载破 ...
- mysql查看当前连接数
show status like 'Threads%'; 需要root权限才能看到所有的连接
- 手写Pascal解释器（三）
目录 一.part7 抽象语法树和具体语法树(解析树) 代码实现 二.part8 一.part7 资料来源:https://ruslanspivak.com/lsbasi-part7/ 看作者博客的标 ...
- fastboot刷机小脚本
在Windows系统下,一般刷机命令是在cmd路径下执行如下命令: 1.adb reboot bootloader2.fastboot flash boot +boot路径3.fastboot fla ...
- sort，uniq，tr，cut，eval命令
目录 一.排序命令sort 1.格式 2.常用选项 3.例子 二.去除重复行操作命令uniq 1.格式 2.常用选项 3.示例 三.字符转换命令tr 1.格式 2.常用选项 3.参数 4.示例 四.数 ...
- 【网站公告】避免反对百度的限制措施：百度搜索过来的访问会自动禁用js权限
今天下午百度联系我们,发现通过百度搜索访问我们网站的博文时会出现下面反对百度的画面,让我们今天彻底处理好,保证不再出现这种情况. 我们排查后发现是这位博主申请了js权限,添加了下面的反对百度的脚本: ...
- VScode安装配置
一.安装VScode 进入VScode官网Visual Studio Code下载 安装 二.设置中文 打开vscode 重启vscode 三.美化 四.安装拓展插件 Auto Close Tag ( ...