jQuery系列（二）：常用选择器的分析与应用专刊（提供完整程序）
目录
- 一.基本选择器
- 1. id选择器 jQuery("#ID") 或者$("#id")
- 2. 类选择器 jQuery(".CLASS") 或者$(".CLASS")
- 3. 标签选择器 jQuery("element") 或者$("element")
- 4. 全局选择器 jQuery("*") 或者$("*")
- 5. 并集选择器 jQuery(" selector1,...,selectorN")
- * 基本选择器完整程序
- 二.层次选择器
- 1. 后代选择器 $("E F")
- 2. 子代选择器 $("E>F")
- 3. 相邻选择器 $("E+F")
- 4. 同辈选择器 $("E~F")
- * 层次选择器完整程序
- 三.过滤选择器(直接举例)
- 1. 选择第一个div元素
- 2. 选择class不为one的所有div元素
- 3. 选择索引值为等于0的div元素
- 4. 选择当前正在执行动画的所有元素
- 5. 选择含有子元素的div元素
- 6. 选择所有不可见的div元素
- 7. 选择属性title值等于"test"的div元素
- 8. 选择class为one的div父元素下的第一个子元素
- 9. 选择**每个**class为one的div父元素下的第一个子元素
- * 过滤选择器完整程序
- 四.表单过滤、对象属性选择器(直接举例)
- 1. 对表单内可用input 赋值操作
- 2. 对表单内不可用input 赋值操作
- 3. 获取多选框中的个数(重点)
- 4. 获取多选框中的内容（有坑）
- 5. 获取下拉框中的内容
- * 表单过滤、对象属性选择器完整程序
一.基本选择器
下面的实例是根据我自己的项目需要来写的，大家从中提取与知识点相关的部分自行理解就阔以啦！！！
1. id选择器 jQuery("#ID") 或者$("#id")
-
jQuery("#ID") 或者$("#id") : 查找id为为ID的元素
-
它调用JavaScript函数
document.getElementById() -
实例
//1.btn1 id $("#btn1").click(function(){ $("#one").css("background-color","#bbffaa"); });
2. 类选择器 jQuery(".CLASS") 或者$(".CLASS")
-
jQuery(".CLASS") 或者$(".CLASS") : 查找类为CLASS的元素
-
它调用JavaScript的原生
getElementsByClassName()函数来实现 -
实例
//2.选择所有class为mini的元素 $("#btn2").click(function(){ $(".mini").css("background-color","#bbffaa"); });
3. 标签选择器 jQuery(“element”) 或者$(“element”)
-
jQuery(“element”) 或者$(“element”) ：查找标签element的元素
-
它调用JavaScript的
getElementsByTagName() -
实例
//3.选择元素名是div的所有元素 $("#btn3").click(function(){ $("div").css("background-color","#bbffaa"); });
4. 全局选择器 jQuery("") 或者$("")
-
jQuery("*") 或者$(" * ") ： 匹配所有元素
-
实例
//4.选择所有元素 $("#btn4").click(function(){ $("*").css("background-color","#bbffaa"); });
5. 并集选择器 jQuery(" selector1,…,selectorN")
jQuery(" selector1,…,selectorN")
或者 $(" selector1,…,selectorN")
-
jQuery(“element”) 或者$(“element”) ： 将每一个选择器匹配到的元素合并后一起返回。
-
实例
//5.选择所有span元素和id为two的元素 $("#btn5").click(function(){ $("span,#two").css("background-color","#bbffaa"); });
* 基本选择器完整程序
我把程序分享给你，自行认真验证
层次选择器
class为hide
包含input的type为hideen的div
span元素
控制台
二.层次选择器
1. 后代选择器 $(“E F”)
-
选择给定的祖先元素的所有后代元素。
-
一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。
-
实例
//1.选择body中的所有div元素 $("#btn1").click(function(){ $("body div").css("background-color","#bbffaa"); });
2. 子代选择器 $(“E>F”)
-
选择所有指定“E”元素中指定的"F"的直接子元素。 (只能是儿子级别，不能是孙子级别)
-
子元素组合选择器(E > F)它只会选择第一级的后代。
-
实例
//2.选择body中，div子元素(div孙子元素不能算) $("#btn2").click(function(){ $("body > div").css("background-color","#bbffaa"); });
3. 相邻选择器 $(“E+F”)
-
选择紧跟（其后的第一个）在 “E” 元素后的 “F” 元素
-
必须在同一个父元素下
-
实例
//3.同父条件下，选择id为one元素后的所有div元素 $("#btn3").click(function(){ $("#one+div").css("background-color","#bbffaa"); });
4. 同辈选择器 $(“E~F”)
-
匹配 “E” 元素之后的所有 ”F“ 元素
-
不要求统一父级，而是匹配所有F！
-
实例
//4.选择id为two的元素后面所有div兄弟元素 $("#btn4").click(function(){ $("#two~div").css("background-color","#bbffaa"); });
* 层次选择器完整程序
我把程序分享给你，自行认真验证
层次选择器
class为hide
包含input的type为hideen的div
span元素
控制台
三.过滤选择器(直接举例)
1. 选择第一个div元素
//1.选择第一个div元素
$("#btn1").click(function(){
$("div:first").css("background-color","#bbffaa");
});
2. 选择class不为one的所有div元素
//2.选择class不为one的所有div元素
$("#btn2").click(function(){
$("div:not(.one)").css("background-color","#bbffaa");
});
3. 选择索引值为等于0的div元素
//3.选择索引值为等于0的div元素
$("#btn3").click(function(){
$("div:eq(0)").css("background-color","#bbffaa");
});
4. 选择当前正在执行动画的所有元素
//4.选择当前正在执行动画的所有元素
$("#btn4").click(function(){
$(":animated").css("background-color","#bbffaa");
});
5. 选择含有子元素的div元素
//5.选择含有子元素的div元素
$("#btn5").click(function(){
$("div:parent").css("background-color","#bbffaa");
});
6. 选择所有不可见的div元素
//6.选择所有不可见的div元素
$("#btn6").click(function(){
$("div:hidden").show("normal").css("background-color","#bbffaa");
});
7. 选择属性title值等于"test"的div元素
//7.选择属性title值等于"test"的div元素
$("#btn7").click(function(){
$("div[title='test']").css("background-color","#bbffaa");
});
8. 选择class为one的div父元素下的第一个子元素
//8.选择class为one的div父元素下的第一个子元素
$("#btn8").click(function(){
$("div.one > :first").css("background-color","#bbffaa");
});
9. 选择每个class为one的div父元素下的第一个子元素
//9.选择每个class为one的div父元素下的第一个子元素
$("#btn9").click(function(){
$("div.one > :first-child").css("background-color","#bbffaa");
});
* 过滤选择器完整程序
我把程序分享给你，自行认真验证
过滤选择器
id为one的div，class为one的div
class为mini
id为two，class为one title为test的div
class为mini title为other
class为mini title为test
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini title为tesst
class为hide
包含input的type为hideen的div
span元素
正在执行的div动画
控制台
四.表单过滤、对象属性选择器(直接举例)
1. 对表单内可用input 赋值操作
(如有需要可以添加背景色 方便查看变化)
//1.对表单内可用input 赋值操作 (如有需要可以添加背景色 方便查看变化)
$("#btn1").click(function(){
$("input:enabled").val("新赋值1").css("background-color","#bbffaa");
})
2. 对表单内不可用input 赋值操作
//2.对表单内不可用input 赋值操作
$("#btn2").click(function(){
$("input:disabled").val("新赋值2").css("background-color","#bbffaa");
})
3. 获取多选框中的个数(重点)
//3.获取多选框中的个数(重点)
$("#btn3").click(function(){
var $cc = $(":checkbox:checked");
alert($cc.length);
});
4. 获取多选框中的内容（有坑）
//4.获取多选框中的内容（有坑）
$("#btn4").click(function(){
var $cc = $(":checkbox:checked");
//办法1：
/*
for(var i= 0;i<$cc.length;i++)
{
alert($cc[i].value); //$cc[i]是一个数组 是DOM对象
}
*/
//办法2：使用。each迭代数组
$cc.each(function(){
//alert(this.value);//dom方法
//或者
alert($(this).val());//jquery方法
});
});
5. 获取下拉框中的内容
//5.获取下拉框中的内容
$("#btn5").click(function(){
var $ss = $("select option:selected");
//只有jquery对象才能使用.each() 就是说$ss必须的是jquery，才能$ss.each()的表达方式
$ss.each(function(){
//this是dom对象 $(this)对象是jquery对象
//alert(this.value);
//或者
alert($(this).val());
})
});
* 表单过滤、对象属性选择器完整程序
表单过滤选择器&对象属性过滤选择器
控制台
表单对象属性过滤选择器