JQuery中的五大选择器——“全家桶”详解

2023-05-16

详解JQuery中的五大选择器

一、基本选择器

基本选择器有五类：
1、标签选择器：语法：$ (“标签名”)
2、id选择器：语法：$ ("#id的属性值")
3、类选择器：语法：$ (".class的属性值")
4、并集选择器：语法：$ (“选择器1,选择器2…”)

$(function(){
	//标签选择器
	//标签选择器又称元素选择器，用于获得所有匹配标签元素名称的元素
	$('div').css('backgroundColor','yellow')
	
	//id选择器:获得与指定id属性值匹配的元素
	//例如：元素id为container
	$('#container').css('backgroundColor','yellow')
	
	//类选择器:获得与指定class属性值匹配的元素
	//例如：元素class为container
	$('.container').css('backgroundColor','yellow')

	//并集选择器:获取多个选择器选中的所有元素
	//例如：选中所有div和所有id为container的的元素
	$('div #container').css('backgroundColor','yellow')
})

二、层级选择器

层级选择器有两类：
1、后代选择器：语法：$ (“A B”)
2、子选择器：语法：$ (“A>B”)

$(function(){
	//后代选择器:选择A元素内部的所有B元素
	//例如：选择div元素内部的所有span元素
	$('div span').css('backgroundColor','yellow')
	
	//子选择器:选择A元素下一级的B元素
	//例如：选择div元素内部的直系span元素
	$('div>span').css('backgroundColor','yellow')
})

后代选择器会选择A元素内部的所有B元素，而子选择器只会选择A元素的下一级B元素

后代选择器：
在这里插入图片描述 子选择器：

三、属性选择器

属性选择器有三类：
1、属性名称选择器：语法：$ (“A [属性名]”)
2、属性选择器：语法：$ (“A [属性名=‘值’]”)
3、复合属性选择器：语法：$ (“A[属性名=‘值’][ ]…”)

$(function(){
	//属性名称选择器：包含指定属性的选择器
	//例如：选择包含有属性class的div
	$("div[class]").css('backgroundColor','yellow')
	
	//属性选择器：包含指定属性等于指定值的选择器
	//例如：选择属性class等于container的div
	$("div[class='container']").css('backgroundColor','yellow')
	
	//复合属性选择器：包含多个属性条件的选择器
	//例如：选择包含有属性id并且属性class等于container的div
	$("div[id][class='container']").css('backgroundColor','yellow')
})

拓展：属性选择器与正则表达式

&(function(){
	//“^=”:指定属性名称是以指定值开头的选择器
	//例如：选择class属性以con开头的div
	$("div[class^='con']").css('backgroundColor','yellow')
	
	//“$=”:指定属性名称是以指定值结尾的选择器
	//例如：选择class属性以er结尾的div
	$("div[class$='er']").css('backgroundColor','yellow')

	//“*=”：指定属性名称中包含指定值的选择器
	//例如：选择class属性中含有tain的div
	$("div[class*='tain']").css('backgroundColor','yellow')
})

四、过滤选择器

过滤选择器有九类：
1、首元素选择器：语法：$ (“A:first”)
2、尾元素选择器：语法：$ (“A:last”)
3、非元素选择器：语法：$ (“A:not(selector)”)
4、偶数选择器：语法：$ (“A:even”)
5、奇数选择器：语法：$ (“A:odd”)
6、等于索引选择器：语法：$ (“A:eq(index)”)
7、大于索引选择器：语法：$ (“A:gt(index)”)
8、小于索引选择器：语法：$ (“A:lt(index)”)
9、标题选择器：语法：$(":header")

$(function(){
	//首元素选择器：获得选择的元素的第一个元素
	//例如：选择列表的第一个li
	$("li:first").css('backgroundColor','yellow')

	//尾元素选择器：获得选择的元素的最后一个元素
	//例如：选择列表的最后一个li
	$("li:last").css('backgroundColor','yellow')

	//非元素选择器:不包括指定内容的元素
	//例如选择除class为container外的所有div
	$("div:not(.container)").css('backgroundColor','yellow')
	
	//偶数选择器:从0开始计数，获得选择的元素中索引为偶数的元素
	//例如：选择列表的偶数项li
	$("li:even").css('backgroundColor','yellow')

	//奇数选择器:从0开始计数，获得选择的元素中索引为奇数的元素
	//例如：选择列表的奇数项li
	$("li:odd").css('backgroundColor','yellow')

	//等于索引选择器:获得选择的元素中指定索引的元素
	//例如：选择列表索引为2的li
	$("li:eq(2)").css('backgroundColor','yellow')

	//大于索引选择器：获得选择的元素中大于指定索引的元素
	//例如：选择列表索引大于2的li
	$("li:gt(2)").css('backgroundColor','yellow')

	//小于索引选择器：获得选择的元素中小于指定索引的元素
	//例如：选择列表索引小于2的li
	$("li:lt(2)").css('backgroundColor','yellow')

	//标题选择器:获得标题（h1~h6）元素，固定写法：$(":header")
	//选择所有的标题元素
	$(":header").css('backgroundColor','yellow')
})

五、表单过滤选择器

表单过滤器有四类：
1、可用元素选择器：语法：$ (“A:enabled”)
2、不可用元素选择器：语法： $ (“A:disabled”)
3、选中选择器(单/复选框)：语法：$ (“A:checked”)
4、选中选择器（下拉框）语法：$ (“A:selected”)

$(function(){
	//可用元素选择器:获得选择元素中的可用元素
	//例如：改变表单内可用 input 元素的值
	$("input[type='text']:enabled").val("aaa");

	//不可用元素选择器：获得选择元素中的不可用元素
	//例如：改变表单内不可用 input 元素的值
	$("input[type='text']:disabled").val("aaa");

	//选中选择器：获得单选/复选框选中的元素
	//例如：获得选中的复选框的个数
	$("input[type='checkbox']:checked").length;

	//选中选择器：获得下拉框选中的元素
	//例如：获得下拉框选中的个数
	$("#obj>option:selected").length;
})

注意：$ (“A:checked”)和$ (“A:selected”)的区别：

$ (“A:checked”)选择器的作用对象是单选/复选框，而$ (“A:selected”)选择器的作用对象是下拉框；$ (“A:selected”)的作用对象是下拉框中包含在内的选项，所以在使用的时候，因此在使用时应当使用“>”来具体说明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)