首页 > Web开发 > 详细

02_jquery_基础选择器

时间:2017-11-10 10:18:05      阅读:138      评论:0      收藏:0      [点我收藏+]

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("通过选择器增加的内容");
});

效果:

技术分享

 

02_jquery_基础选择器

原文:http://www.cnblogs.com/xiaojiujiu1999/p/7813171.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!