jquery获取checkbox选中的值_Web前端开发(10)——JQuery选择器

JQuery选择器

基本选择器

①id选择器

语法：$("#id的属性值") 获得与指定id属性值匹配的元素。

比如：改变id为one的元素的背景色为红色：

$("#one").css("backgroundColor","pink");

②标签选择器(元素选择器)

语法：$("html标签名") 获得所有匹配标签名称的元素。

比如：改变元素名为

的所有元素的背景色为红色：

$("div").css("backgroundColor","pink");

③类选择器

语法：$(".class的属性值") 获得与指定的class属性值匹配的元素。

比如：改变class为mini的所有元素的背景色为红色：

$(".mini").css("backgroundColor","pink");

④并集选择器

语法：$("选择器1,选择器2....") 获取多个选择器选中的所有元素。

比如：改变所有的元素和id为two的元素的背景色为红色：

$("span,#two").css("backgroundColor","pink");

层级选择器

①后代选择器

语法：$("A B") 选择A元素内部的所有B元素。

比如：改变内所有

的背景色为红色：

$("body div").css("backgroundColor","pink");

②子选择器

语法：$("A > B") 选择A元素内部的所有B子元素，不包含孙子元素。

比如：改变内子

的背景色为红色：

$("body > div").css("backgroundColor","pink");

属性选择器

①属性名称选择器

语法：$("A[属性名]") 包含指定属性的选择器。

比如：含有属性title的div元素背景色为红色：

$("div[title]").css("backgroundColor","pink");

②属性选择器

语法：$("A[属性名='值']") 包含指定属性等于指定值的选择器。

比如：属性title值等于test的div元素背景色为红色：

$("div[]").css("backgroundColor","pink");

语法：$("A[属性名!='值']") 包含指定属性但不等于指定值的选择器(没有该属性的也将被选中)。

比如：属性title值不等于test的div元素背景色为红色：

$("div[title!='test']").css("backgroundColor","pink");

语法：$("A[属性名^='值']") 包含指定属性而且属性值以值开始的选择器。

比如：属性title值以te开始的div元素背景色为红色：

$("div[title^='te']").css("backgroundColor","pink");

语法：$("A[属性名$='值']") 包含指定属性而且属性值以值结尾的选择器。

比如：属性title值以est结束的div元素背景色为红色：

$("div[title$='est']").css("backgroundColor","pink");

语法：$("A[属性名*='值']") 包含指定属性而且属性值包含值的选择器。

比如：属性title值含有es的div元素背景色为红色：

$("div[title*='es']").css("backgroundColor","pink");

③复合属性选择器

语法：$("A[属性名='值'][]...") 包含多个属性条件的选择器。

比如：选取有属性id的div元素，然后在结果中选取属性title值含有“es”的div元素背景色为红色：

$("div[id][title*='es']").css("backgroundColor","pink");

过滤选择器

①首元素选择器 

语法：$("A:first") 获得选择的元素中的第一个元素。

比如：改变第一个div元素的背景色为红色：

$("div:first").css("backgroundColor","pink");

②尾元素选择器

 语法：$("A:last") 获得选择的元素中的最后一个元素。

比如：改变最后一个div元素的背景色为红色：

 $("div:last").css("backgroundColor","pink");

③非元素选择器

语法：$("A:not(selector)") 获得不包括指定内容的元素。

比如：改变class不为one的所有div元素的背景色为红色：

$("div:not(.one)").css("backgroundColor","pink");

④偶数选择器

语法：$("A:even") 获得选择的元素中索引为偶数的元素，从0开始计数。

比如：改变索引值为偶数的div元素的背景色为红色：

$("div:even").css("backgroundColor","pink");

⑤奇数选择器

语法：$("A:odd") 获得选择的元素中索引为奇数的元素，从0开始计数。

比如：改变索引值为奇数的div元素的背景色为红色：

$("div:odd").css("backgroundColor","pink");

⑥等于索引选择器

语法：$("A:eq(index)") 获得选择的元素中索引等于指定索引的元素。

比如：改变索引值为等于3的div元素的背景色为红色：

$("div:eq(3)").css("backgroundColor","pink");

⑦大于索引选择器 

语法：$("A:gt(index)") 获得选择的元素中索引大于指定索引的元素。

比如：改变索引值为大于3的div元素的背景色为红色：

$("div:gt(3)").css("backgroundColor","pink");

⑧小于索引选择器 

语法：$("A:lt(index)") 获得选择的元素中索引小于指定索引的元素。

比如：改变索引值为小于3的div元素的背景色为红色：

$("div:lt(3)").css("backgroundColor","pink");

⑨标题选择器

语法：$(":header")获得标题(h1~h6)元素，固定写法。

比如：改变所有的标题元素的背景色为红色：

$(":header").css("backgroundColor","pink");

表单过滤选择器

①可用元素选择器 

语法：$("A:enabled") 获得可用元素。

比如：改变表单内可用元素的值：

$("input[type='text']:enabled").val("a");

②不可用元素选择器 

语法：$("A:disabled") 获得不可用元素。

比如：改变表单内不可用元素的值：

$("input[type='text']:disabled").val("a");

③选中选择器 

语法：$("A:checked") 获得单选/复选框选中的元素。

比如：获取复选框选中的个数：

$("input[type='checkbox']:checked").length;

语法：$("A:selected") 获得下拉框选中的元素。

比如：获取下拉框选中的个数：

$("select > option:selected").length;

注：下拉框可以通过multiple = "multiple"属性将其设置为多选。