17jQuery进阶

【一】jQuery基本语法

jQuery(选择器).action()
简写
jQuery(选择器) ---->  $(选择器)

(1)js与jquery对比

<script>
    // 原生js
    let p1Ele = document.getElementById("p1");
    let p2Ele = document.getElementById("p2");
​
    p1Ele.style.color = 'red'
    p2Ele.style.color = 'green'
​
// jQuery
    $('#d1').css('color','red').next().css('color','green')
</script>

【二】基本选择器

1.元素选择器（Element Selector）会得到第一个匹配的html代码
eg:段落选择器$('p');
​
2.ID选择器（ID Selector）
eg: 选择具有id= "d1"的元素$('#d1');
​
3.类选择器（Class Selector）
eg:选择具有 class="d1" 的元素$('.d1');
​
4.属性选择器（Attribute Selector）
eg:选择所有具有 "target" 属性的元素$('[target]');
​
5.选择器组合(分组)
eg：选择所有段落元素和具有class="d1"的元素和id="d1"的元素$('p,.d1,#d1');
​
6.后代选择器 空格
eg:选择所有 "myElement" 元素内的段落元素$('#myElement p');
​
7.子元素选择器（Child Selector）>
eg:选择所有 "myElement" 元素的直接子元素中的段落元素$('#myElement > p');
​
8.下一个兄弟元素选择器+
eg:选择紧接在 "myElement" 元素后的下一个兄弟元素$('#myElement + div');
​
9.后续所有兄弟元素选择器~
eg：选择紧接在 "myElement" 元素后的所有兄弟元素中具有 "myClass" 类的元素$('#myElement ~ .myClass');

【三】分组和嵌套

1.分组--》同时选择匹配这些选择器的所有元素
$('.selector1, .selector2').doSomething();
​
2.嵌套--》用于表示某个选择器的子元素或特定关系的元素。
$('parent').find('.child').doSomething();//parent标签下的class=id的元素

【四】基本筛选器

(1):first选择第一个匹配元素。
(2):last选择最后一个匹配元素。
(3):even选择索引为偶数的匹配元素（索引从0开始）。
(4):odd选择索引为奇数的匹配元素（索引从0开始）。
(5):eq(index)选择索引为指定值index的元素（索引从开始）
(6):gt(index)选择索引大于指定值index的元素（索引从开始）
(7):lt(index)选择索引小于指定值index的元素（索引从开始）
(8):header选择所有标题元素（例如h1、h2等）
(9):animated选择当前正在执行动画的元素
(10):focus选择当前获得焦点的元素。
(11):contains(text)选择包含指定文本text的元素
(12):empty选择没有子元素或文本的空元素
(13):parent选择有子元素或文本的元素

【五】属性选择器

1.选择具有特定属性的元素：$("[attribute]")
    eg:选择所有具有"src"属性的图片元素：$("[src]")
    
2.选择具有特定属性值的元素：$("[attribute=value]")
    eg：选择所有"href"属性值为"https://example.com"的链接元素：$("a[href='https://example.com']")
​
3.选择具有包含特定属性值的元素：$("[attribute*=value]")
eg:
    $("[class='up']")
​
4.选择具有以特定属性值开头的元素：$("[attribute^=value]")
    eg：选择所有"href"属性值以"https://"开头的链接元素：$("a[href^='https://']")
    
5.选择具有以特定属性值结尾的元素：$("[attribute$=value]")
    eg:选择所有"src"属性值以".jpg"结尾的图片元素：$("img[src$='.jpg']")
​
6.选择具有以特定属性值开头且以特定字符串结尾的元素：$("[attribute^=value][attribute$=value]")
    eg:选择所有"src"属性值以"images/"开头且以".jpg"结尾的图片元素：$("img[src^='images/'][src$='.jpg']")