<!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>