详解JQuery中的五大选择器
目录
- 详解JQuery中的五大选择器
- 一、基本选择器
- 二、层级选择器
- 三、属性选择器
- 四、过滤选择器
- 五、表单过滤选择器
选择器能够筛选具有相似特征的元素标签，允许对HTML元素组或单个元素进行操作，jQuery 中所有选择器都以美元符号开头:$()。
首先我们先来讲讲JQuery的入口函数：
&(function(){
//在这里写入代码
})而在JavaScript中定义的入口函数window.onload方法和JQuery中的&(function)方法的区别是：
window.onload方法只能定义一次，如果定义多次，则前面的window.onload方法会被覆盖掉；&(function)方法可以多次定义，并且不会被覆盖
一、基本选择器
基本选择器有五类：
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”)的作用对象是下拉框中包含在内的选项，所以在使用的时候，因此在使用时应当使用“>”来具体说明
