[JQuery学习笔记]——之一

第二章 JQuery基础选择器

一、#id选择器

$(“#my_id”).html(“test”);
其中#my_id表示根据id选择器获取页面中指定的标签元素，且返回唯一一个元素。

二、element选择器

$(“element”).css(“font-weight”,”bold”);
其中element就是元素的名称(div…)，

三、.class选择器

$(“.class”).html(“test”);
其中.class参数表示元素的css类别名称(类选择器)

四、*选择器

$(“*”).html(“test”)

选择器中的参数就一个” * “，即没有”#”也没有”.”，表示获取页面中的全部元素。常与其他元素组合使用，表示获取其他元素中的全部子元素。如：$(“div *”).html(“test”)，表示获取div下全部的子元素。

五、sele1,sele2,seleN选择器

$(“sele1,sele2,seleN”)

其中参数sele1、sele2到seleN为有效选择器，每个选择器之间用“，”号隔开，它们可以是之前提及的各种类型选择器。

以下是层次选择器

六、ance desc选择器

$(“ance desc”)

其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。比如家族姓氏“div”，家族几代人里，都有名字里带“span”的，就可以用这个ance desc选择器把这几个人给定位出来。$(“div span”).html()。

七、parent > child选择器

$(“parent>child”)
parent > child选择器的范围要小些，它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈,它们之间通过“>”符号来表示一种层次关系。

八、prev+next选择器

$(“prev + next”)
查找与“prev”元素紧邻的下一个“next”元素,其中参数prev为任何有效的选择器，参数“next”为另外一个有效选择器，它们之间的“+”表示一种上下的层次关系，也就是说，“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。

九、prev~siblings选择器

$(“prev ~ siblings”)
与prev + next层次选择器相同，prev ~ siblings选择器也是查找prev 元素之后的相邻元素，但前者只获取第一个相邻的元素，而后者则获取prev 元素后面全部相邻的元素，其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素。

第三章 JQuery过滤性选择器

过滤选择器，该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。

1、:first过滤选择器

$(“li:first”)
得到‘li’一组相同标签元素中的第1个元素

$(“li:last”).css(“background-color”, “red”);
得到‘li’一组相同标签元素中的最后一个元素

2、:eq(index)过滤选择器

其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素。

$(“li:eq(2)”).css(“background-color”, “#60F”);

3、:contains(text)过滤选择器

:contains(text)选择器的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。

$(“li:contains(‘jQuery’)”).css(“background”, “green”);

4、:has(selector)过滤选择器

:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。

$(“li:has(‘label’)”).css(“background-color”, “blue”);

5、:hidden ，:visible过滤选择器

:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。

$(“input:hidden”).val()

:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。

$(“li:visible”).css(“background-color”,”blue”);

6、[attribute=value]过滤选择器

功能是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。

$(“li[title=’蔬菜’]”).css(“background-color”, “green”);

7、[attribute!=value]过滤选择器

功能是获取不包含属性名，或者与属性名和属性值不相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。

$(“li[title!=’蔬菜’]”).css(“background-color”, “green”);

8、[attribute*=value]过滤选择器

获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。

$(“li[title*=’果’]”).css(“background-color”, “green”);

9、:first-child过滤选择器

:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。

$(“li:first-child”).css(“background-color”, “green”);

10、:last-child过滤选择器

:last-child子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素，它也是一个集合，常用多个集合数据的选择处理。

$(“li:last-child”).css(“background-color”, “blue”);