jquery.选择器

选择器

通过查找，把匹配的对象放入一个容器中【重点在选择】

ID选择器

语法：$("#id值")；

特点：ID选择器，只返回一个元素

$ =>jQuery

Class选择器

定义：根据给定的类名来匹配元素

语法：$(".className")

返回是一个数组；

标签选择器

定义：根据给定的元素名称，来匹配元素

语法： $("tagName")

返回 返回一个数组，标签元素数组

通配符选择器

定义：匹配HTML文档中的所有标签

语法：$("*")

不建议直接使用

群组选择器

定义：将每一个选择器匹配到的元素合并后一起返回。

你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内

实例：$("#p1,.pc,li:first")

层级选择器

父子选择器

         parent>child

后代选择器

  ancestor descendant

注意：选择器表达式中，不能随意的打空格

邻近选择器

$("#p1+div").css("color","red");

 $("#p1").next().css("color","blue");

  $("#p1+div").css("color", "red");

            $("#p1").next().css("color", "blue");

            $("#p1").nextAll("div").css("color", "pink");

 

            $("#p1").prev().css("color", "green");

           $("#p1").prevAll("h1").css("color", "red");

兄弟选择器

$("#p1").siblings().css("color","orange");

基本过滤选择器

注意：过滤选择器，一般不要单独写，先确定一个范围，再进行筛选

:first        第一个

:not(selector)  不是

:even       偶数

:odd        奇数

:eq(index)   等于【index 从0开始】

:gt(index)    大于【index 从0开始】

:last         最后一个

:lt(index)     小于

:header      【H1~H6】

   $("li:first").css("color", "red");

            $("li:last").css("color", "green");

            $("li:even").css("background-color", "#0012f4");

            $("li:odd").css("background-color", "gray");

            $("li:eq(3)").css("color", "pink");

            $("li:gt(3)").css("color", "orange");

            $("li:lt(3)").css("color", "red");

            $(":header").css("color", "red");

内容过滤选择器

:contains(text)   包含

:empty          空【不包含任何元素，空格、换行】

:has(selector)     含有标签

:parent          父元素【是一个父元素 !empty】

属性过滤选择器

[attribute]        含有属性

[attribute=value]   含有属性 并且值为Value

[attribute!=value] 含有属性 并且值不为Value

[attribute^=value] 含有属性 并且值以Value开头

[attribute$=value] 含有属性 并且值以Value结束

[attribute*=value] 含有属性 并且值含有Value

[attrSel1][attrSel2][attrSelN] 多个属性