jQuery 选择器(进阶)-蒲公英云

jQuery 选择器(进阶)

很多css上可以用的在jQuery上都是可以的

1、群组选择器——将相同的样式进行合并

$(‘div,p,span’).css(‘color’,’red’); //这样就可以给很多标签设置相同的属性，当然也可以是id或者class

2、后代选择器

<table style="width: 100%;">
        <tr>
            <td>
             <a title="a2" href="#">首页</a>
            </td>
            <td>
             <a href="#">首页</a>
            </td>
            <td>
            <a href="#">首页</a>
            </td>
        </tr>       
    </table>  
    <div id="d1">
    <a title="a1" id="a1" href="#">首页</a>
    <a href="#">首页</a></div>
$(function () {
            $("table tr td a").siblings().css("color", "red");//兄弟节点
            $("#d1").children('a').css("color", "red");//子节点
            $("div #a1").next().css("color", "red"); //同级下一个
            $("div #a1").nextAll().css("color", "red"); //同级下面所有同理prev位上面
            $("a[title]").css("color", "red"); //将有title属性的a标签选中
            $("a[title=a2]").css("color", "yellow"); //将有title属性并值位a2的a标签选中
            $("a[title^=a]").css("color", "green"); //将有title属性并开头a的a标签选中
            $("a[title$=a]").css("color", "white"); //将有title属性并结尾a的a标签选中
            $("a[title!=a1]").css("color", "grey"); //将有title属性并不等于a1的a标签选中
            $("a[title*=a]").css("color", "blue"); //将有title属性并包含a的a标签选中
            $("a[id][title*=a]").css("color", "orange"); //多属性选择
        });