jq——选择器

jquery:核心，内容

语法：$(select).action();

console.log:控制台日志，将想要的东西打印出来

选择器，事件，DOM，动画，基本操作，插件，ajax

基本选择器

#id:id选择器：$("#id名")

element:元素选择器

class:类选择器

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

层级选择器

ancestor descendant:表示选取ancestor里面的所有的descendant元素

parent>child:选择parent元素为子元素

 

+selecter:获取后面一个兄弟

selecter~:获取后面所有兄弟

内容选择器

:contains("text"):匹配含有text内容的元素

:empty:匹配内容为空的元素

:has(selecter):选择包含有selecter的选择器

:parent:选择作为父元素的元素：$("p:parent").css({background:"red"});

$("div:parent").hide(6000);缓慢隐藏

$("div:parent").show(6000);缓慢出现

元素的基本选择器

1  :first:查找第一个子元素

<script type="text/javascript">

$("input").click(function() {

$("li:first").css({background:"red"});

// body... }); </script>

2  :last:最后一个子元素

$("li:last").css({background:"red"});

3  :even:找下标为偶数的元素

4  :odd:奇数元素

5 :eq(index) :获取指定索引位置元素

$("li:eq(2)").css({background:"pink"});

第一个元素为0

6  :gt(index):查找大于index索引的元素

7  :lt(index):查找小于index索引的元素

8  :header:查找所有h标签

9  :not(“id名”)：查找除指定id之外的所有元素

属性选择器

1  [attribute]:属性选择为attribute

$("input").click(function(){

$("img[src]").css({background:"red"});

)};

2 [arrtribute="value"]:查找属性为value的元素

$("img[src='a.jpg']").css({background:"blue"});

3   [arrtribute!="value"]:查找属性不为value的元素

$("img[src!='a.jpg']").css({background:"blue"});

4  [arrtribute^="value"]:查找以value为开头的属性

$("img[src^='a']").css({background:"blue"});

5   [arrtribute$="value"]:查找以value为结尾的属性

$("img[src$='g']").css({background:"blue"});

$("img[src$='jpg']").css({background:"blue"});

6  [arrtribute*="value"]:查找包含value属性的元素

$("img[src*='a']").css({background:"red"});

子元素选择器：伪类选择器

type   child

1  :first-child:找第一个子元素

$("li:first-child").css({background:"red"});

2  :first-of-type:找第一个子元素（和1几乎一模一样）

$("li:first-of-type").css({background:"red"});、

3 :last-child:找第一个子元素

4  :last-of-type:找第一个子元素（和3几乎一模一样）

5 :nth-child(n):找到第n个子元素

$("li:nth-child(3)").css({background:"blue"});

6 :nth-of-type(n):找到第n个子元素

$("li:nth-of-type(2)").css({background:"red"});

8 :nth-last-child(n):找到倒数第n个元素

$("li:nth-last-child(3)").css({background:"blue"});

9:nth-last-of-type(n):找到倒数第n个元素

$("li:nth-last-of-type(2)").css({background:"red"});

10  表单选择器：

1）  :input:找到input元素

2） :text:找到text元素

来源：https://www.cnblogs.com/ellen-mylife/p/10877659.html