02_jquery_基础选择器

Posted 2020-10-13

1.All Selector("*")
描述：选择所有元素
语法：$("*")
注意：实践证明，由于使用*选择器获取的是全部元素，因此，有些浏览器会比较缓慢，这个选择器也需要慎重使用。

html代码

<div>
        <span></span>
        <p></p>
       <label></label>
</div>

jQuery代码：

$(function(){
    $("div *").html("*选择器增加的文本");
});

效果：

 

2.Class Selector(".class")
描述：选择给定样式类名的所有元素。
语法：$(".class")

html代码：

<span class="c1"></span>

jQuery代码：

$(function(){
    $(".c1").html("类选择器增加的文本");
});

效果：

 

 

3.Element Selector("element");
描述：根据给定(html)标记名称选择所有的元素
语法：$("element");

HTML代码：

<span></span>
   <br/>
    <span></span>
        

jQuery代码：

$(function(){
　　$("span").html("根据给定(html)标记名称进行操作");
});

效果：

 

 

4.ID Selector("#id")
描述:选择一个具有给定id属性的单个元素
语法：$("id");

HTML代码：

<p id="d1"></p>

jQuery代码：

$(function(){
    $("#d1").html("通过ID选择器进行的操作");
});

效果：

 

 

5.Multiple Selector("selector1,selector2,selectorN")
描述：将每一个选择器匹配到的元素合并后一起返回
语法：$("selector1,selector2,selectorN")

HTML代码：

<div>
        <span></span>
        <p id="d1"></p>
        <label></label>
         <a>12345</a>
         <b>上山打老虎</b>
    </div>

jQuery代码：

$(function(){
    $("#d1,span,label").html("通过选择器增加的内容");
});

效果：