jQery选择器

jq选择器

1. 基本选择器

2. 层次选择器

基本选择器

标签选择器

$('标签名');
$('p').html() //获取p标签对象，返回文本
$('p').length //数组形式,返回数组长度

类选择器

$('class值')

let p =$('.red');

ID选择器

$('ID值')

let p =$('#P2');

并集选择器

逗号，
$('class,id')

let p =$('.red,#p2')

交集选择器

必须同时存在

$('标签类');中间连着
let p =$('p.red');

全局选择器

$('');
let p =$('');//选择所有元素

层次选择器

<ul>
        <li>aaa</li>
        <li id="b">bbb</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
</ul>

相邻选择器（只取后面的元素）

    $('选择器1+选择器2')//只取后面的一个

let u = $('#b+li');
console.log(u.html());//ccc       

同辈选择器

let u = $('#b~li');
console.log(u.html());//ccc
console.log(u.length)  //长度为4     

后代选择器

let u = $('body li');
console.log(u.html());//ccc
console.log(u.length);//6    

子代选择器

let u = $('ul>li');
console.log(u.html());//ccc
console.log(u.length);//6     

属性选择器

$('[属性名=??]' 选中所有具有这个属性的标签;

let u = $('[id]');
console.log(u.html());//bbb
console.log(u.length);//1  

1. $('[属性名=属性值]

2. $('[class!=a]')class 以a开头

3. $('[class$=a]')class 以a结尾

4. $('[class*=a]')class 有a的元素

过滤选择器

基本过滤选择器(从0开始)

1. :first 开头的一个
2. :last 最后一个
3. :even 偶数
4. :old 奇数
5. :eq(index)
6. :gt(index): >index的元素
7. :It(index): <index的全部元素
8. :not(选择器) 除了...以外
9. :header 选种所有的标题元素
10. :focus 获取当前焦点的元素

// 1. :first  最开头的一个
var element = $("ul>li").first().html();
console.log($("ul>li").first().html()); //aaa
// 2. :last   最后一个
console.log($("ul li").last().html()); //fff
// 3. :even    偶数
console.log($("ul li:even").html());//aaa
console.log($("ul li:even").length);//3
//$("ul li:even")[1]是dom对象  需要再用$()包裹
console.log($($("ul li:even")[1]).html());//3
// 4. :odd     奇数
console.log('奇数');
console.log($("ul li:odd").html());//bbb
// 5. :eq(index) 第几个
console.log($("ul li").eq(2).html()); //ccc
// 6. :gt(index): >index的元素
console.log(':gt(index)   : >index的元素');
console.log($('ul li:gt(1)').length);//14
// 7. :It(index): <index的全部元素
console.log('// 7. :lt(index): <index的全部元素');
console.log($('ul li:lt(1)').length);
// 8. :not(选择器) 除了...以外
console.log('// 8. :not(选择器) 除了...以外');
console.log($('ul li:not(1)').length);
// 9. :header  选种所有的标题元素h1~h6
console.log('// 9. :header  选种所有的标题元素');
console.log($(':header').html());
// 10. :focus  获取当前焦点的元素
console.log('// 10. :focus  获取当前焦点的元素');
console.log($('input:focus').html());

可见型过滤器

$(':visible') 选中所有可见元素

$(':hidden') 选中所有不可见元素