首页 > 代码库 > jQuery高级选择器和其等价方法

jQuery高级选择器和其等价方法

2024-09-03 21:53:03   218人阅读

jQuery选择器和css一样，但兼容性更好

<body>
    <p>p1</p>
    <p>p1</p>
    <p>p1</p>
    <div id="box">
        <p>p2</p>
        <p>p2</p>
        <p>p2</p>
        <div>
            <p>p3</p>
            <p>p3</p>
            <p>p4</p>
        </div>
    </div>
    <p>p4</p>
    <p>p4</p>
    <p>p4</p>
</body>

层次选择器：

$(function(){
    //后代选择器
    $(‘#box p‘).css(‘color‘,‘red‘);
    $(‘#box‘).find(‘p‘).css(‘color‘,‘blue‘);
    
    //子选择器
    $(‘#box > p‘).css(‘color‘,‘red‘);
    $(‘#box‘).children(‘p‘).css(‘color‘,‘blue‘);

    //next选择器，获取节点后一个同级DOM对象，如果不是所指定的没有效果
    $(‘#box + p‘).css(‘color‘,‘red‘);
    $(‘#box‘).next(‘p‘).css(‘color‘,‘blue‘);
    
    //nextAll，获取节点后所有同级DOM对象
    $(‘#box ~ p‘).css(‘color‘,‘red‘);
    $(‘#box‘).nextAll(‘p‘).css(‘color‘,‘blue‘);
});

jQuery方法对选择器的补充：

    //jQuery对高级选择器的补充，提供的几种方法
    //同级上指定元素:一个或所有个
    $(‘#box‘).prev(‘p‘).css(‘color‘,‘red‘);
    $(‘#box‘).prevAll(‘p‘).css(‘color‘,‘blue‘);
    //同级非指定元素:上或下
    $(‘#box‘).prevUntil(‘p‘).css(‘color‘,‘red‘);
    $(‘#box‘).nextUntil(‘p‘).css(‘color‘,‘blue‘);
    //同级指定元素：上和下
    $(‘#box‘).siblings(‘p‘).css(‘color‘,‘red‘);

注：1 方法如果不传参相当于*，表示任意，不建议使用

      2 方法相对高级选择器写法好一些：find()最快，可以拆分组合使用

    var box = $(‘#box‘);
    var p = box.find(‘p‘);

 

----------------------------------------------------------------------------------------------------------------------------------------------------------

 

属性选择器：

    <a sss="x" title="num1 aaa bbb">num1</a>
    <a>num2</a>
    <a>num3</a>
    <a>num4</a>
    <a sss="s" title="num5">num5</a>
    <a title="num-6">num6</a>
    <a title="nsdfnumsdf">num7</a>

 

    //属性浏览器
    $(‘a[title]‘).css(‘color‘,‘red‘);
    $(‘a[title=num1]‘).css(‘color‘,‘blue‘);
    $(‘a[title^=num]‘).css(‘color‘,‘red‘);
    $(‘a[title$=1]‘).css(‘color‘,‘blue‘);
    $(‘a[title|=num]‘).css(‘color‘,‘red‘);
    $(‘a[title!=num5]‘).css(‘color‘,‘blue‘);
    $(‘a[title~=aaa]‘).css(‘color‘,‘red‘);
    $(‘a[title*=num]‘).css(‘color‘,‘blue‘);
    $(‘a[sss][title=num5]‘).css(‘color‘,‘red‘);

jQuery高级选择器和其等价方法


联系
我们