码迷,mamicode.com
首页 > Web开发 > 详细

02_jquery_基础选择器

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

标签:fun   技术   class   blog   bsp   一个   浏览器   logs   func   

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_基础选择器

标签:fun   技术   class   blog   bsp   一个   浏览器   logs   func   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!