温营

导航

jQuery选择器---基本选择器总结

今天要跟大家分享一下jQuery选择器的使用方法,它的选择器分为四大类 如图:

基本选择器的使用:

1.id选择器

案例:
    <div id="notMe"><p>id="notMe"</p></div>
    <div id="myDiv">id="myDiv"</div>

使用方法:
        $("#myDiv").css("color","red");
使用结果:

分析:
    $("#myDiv")是选择了为myDiv的id使它的字体变成了红色。

2.element选择器

案例:
    <div>DIV1</div>
    <div>DIV2</div>
    <span>SPAN</span>
使用方法:
        $("div").css("color","red");
使用结果:

分析:
    $("div")是选择了为div的元素使它的字体变成了红色。

3.class选择器

案例:
    <div class="notMe">div class="notMe"</div>
    <div class="myClass">div class="myClass"</div>
    <span class="myClass">span class="myClass"</span>

使用方法:
        $(".myClass").css("color","yellow");
使用结果:

分析:$(".myClass")是选择了为myClass的class使它的字体变成了黄色。

4.*选择器

案例:
    <div>DIV</div>
    <span>SPAN</span>
    <p>P</p>
使用方法:
        $("*").css("color","blue");
使用结果:

分析:$("*")是选择了所有的字体变成了蓝色。

5.组合使用选择器

案例:
    <div>div</div>
    <p class="myClass">p class="myClass"</p>
    <span>span</span>
    <p class="notMyClass">p class="notMyClass"</p>
使用方法:
        $("div,span,.myClass").css("color","pink");
使用结果:

分析:$("div,span,.myClass")是选择div,span的元素和myClass的class的字体变成了粉色。

基本选择器就到这里 请继续观看下集层次选择器!

posted on 2017-05-12 10:16  走啊走  阅读(144)  评论(5编辑  收藏  举报