jquery中的id选择器和类选择器

本文转载于:猿2048网站➜jquery中的id选择器和类选择器

  1、#id

根据给定的ID匹配一个元素。
如果选择器中包含特殊字符，可以用两个斜杠转义。
返回值 Element
参数 
id (String) : 用于搜索的，通过元素的 id 属性中给定的值
示例：

$(document).ready( function () {
     var  oDiv  =  $( " #myDiv " );
     if  (oDiv)
        alert(oDiv.html());
});

文档片段：

< div  id ="notMe" >< p > id="notMe" </ p ></ div >
< div  id ="myDiv" > id="myDiv" </ div >  

有特殊字符的情况：
文档片段：

< span  id ="foo:bar" > test1 </ span >
< span  id ="foo[bar]" > test2 </ span >

jquery代码：

//查找含有特殊字符的元素
$(document).ready(function() {
    var oIdArr = new Array('#foo\\:bar', '#foo\\[bar\\]');
    for (var i = 0; i < oIdArr.length; i++) {
        var oSpan = $(oIdArr[i]);
        if (oSpan)
            alert(oSpan.html());
    }
});

2、element
根据给定的元素名匹配所有元素
返回值 Array<Element>
参数 
element (String) : 一个用于搜索的元素。指向 DOM 节点的标签名。
示例：

$(document).ready(function() {
    var divArr = $("div"); //查找DIV 元素
    for (var i = 0; i < divArr.length; i++) {
        var oDiv = $(divArr[i]);
        if (oDiv)
            alert(oDiv.html());
    }
});

文档片段：

< div > DIV1 </ div >
< div > DIV2 </ div >
< span > SPAN </ span >

3、.class
根据给定的类匹配元素
返回值 Array<Element>
参数 
class (String) : 一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。
示例：

//查找所有类是 "myClass" 的元素. 
$(document).ready(function() {
    var eleArr = $(".myClass"); //查找class为myclass的元素
    for (var i = 0; i < eleArr.length; i++) {
        var ele = $(eleArr[i]);
        if (ele)
            alert(ele.html());
    }
});

文档片段：

     < div  class ="notMe" >
        div class="notMe" </ div >
     < div  class ="myClass" >
        div class="myClass" </ div >
     < span  class ="myClass" > span class="myClass" </ span >

4、*
匹配所有元素,多用于结合上下文来搜索。
返回值 Array<Element>
示例：

//找到每一个元素 
$(document).ready(function() {
    var eleArr = $("*"); //找到每一个元素 
    for (var i = 0; i < eleArr.length; i++) {
        var ele = $(eleArr[i]);
        if (ele)
            alert(ele.html());
    }
});

5、selector1,selector2,selectorN
将每一个选择器匹配到的元素合并后一起返回。
可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
返回值 Array<Element>
参数 
selector1 (Selector) : 一个有效的选择器
selector2 (Selector) : 另一个有效的选择器
selectorN (Selector) : (可选) 任意多个有效选择器
示例：

//找到匹配任意一个类的元素
$(document).ready(function() {
var eleArr = $("div,span,p.myClass"); //找到匹配任意一个类的元素 
    for (var i = 0; i < eleArr.length; i++) {
        var ele = $(eleArr[i]);
        if (ele)
            alert(ele.html());
    }
});

更多专业前端知识，请上 【猿2048】www.mk2048.com