jQuery核心--对象访问

最新推荐文章于 2020-12-30 22:33:14 发布

三知之灵

最新推荐文章于 2020-12-30 22:33:14 发布

阅读量905

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/tjj3027/article/details/79525966

版权

JQuery 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

列表

函数	说明
~~size()~~^1.8-	用于返回当前jQuery对象封装的元素个数。
get()	用于获取当前jQuery对象匹配到的DOM元素。
index()	用于获取当前jQuery对象中指定DOM元素的索引值。
each()	用于以当前jQuery对象匹配到的每个元素作为上下文来遍历执行指定的函数。

属性	说明
jQueryObject.length	用于返回当前jQuery对象封装的元素个数。
~~jQueryObject.selector~~^1.9-	用于返回获取当前jQuery对象时传给jQuery(selector, context)函数的原始选择器(即selector参数)。
jQueryObject.context	用于返回获取当前jQuery对象时传给jQuery(selector, context)函数的context参数。

说明

size()

size()函数用于返回当前jQuery对象封装的元素个数。

size()函数与length属性的作用相同,size()方法功能上等价于.length属性。但是.length 属性是首选的，因为它没有函数调用时的额外开销。

该函数属于jQuery对象(实例)。

语法

jQueryObject.size( )

返回值

size()函数的返回值是Number类型，返回该jQuery对象封装的DOM元素的个数。

如果该对象是一个空的jQuery对象，没有封装任何元素，则返回0。

示例&说明

HTML代码：

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>

get()

get()函数用于获取当前jQuery对象匹配到的DOM元素。

这里介绍的get()函数属于jQuery对象实例，jQuery中还有一个jQuery.get()函数，它属于全局的jQuery对象(无需自行创建jQuery对象)，用于通过GET形式的AJAX请求获取远程数据。

该函数属于jQuery对象(实例)。

语法

jQueryObject.get( [ index ] )

jQueryObject[index]等价于jQueryObject.get(index)，例如jQueryObject[0]等价于jQueryObject.get(0);

参数说明

参数	说明
index	可选/Number类型指定的索引，从0开始算起。

如果没有为get()函数指定参数index，则返回包含所有匹配到的元素的数组；如果指定了索引参数index，则只获取对应索引的那个元素。

如果参数index为负数，则将其视作index + jQueryObject.length。

如果参数index超出有效的取值范围，则返回undefined。

返回值

get()方法的返回值为Element/Array类型，返回包含所有匹配到的DOM元素数组或指定索引的DOM元素。

如果当前jQuery对象为空(没有匹配任何的元素)，则返回一个空的数组(不包含任何元素)。

示例&说明

HTML示例代码：

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>

jQuery示例代码

var $li = $("ul li");
document.writeln( $li.get() ); // [object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement]
printElement( $li.get(0) ); // LI#n4
printElement( $li.get(2) ); // LI#n6
printElement( $li.get(3) ); // undefined
printElement( $li.get(-1) ); // LI#n6

document.writeln( $("p").get() ); // (实际上是一个空的数组，输出空字符串)

index()

index()函数用于获取当前jQuery对象中指定DOM元素的索引值。

该函数属于jQuery对象(实例)。

语法

jQueryObject.index( [ object ] )

参数说明

参数	说明
object	可选/String/Element/jQuery类型表示指定元素的对象。

jQuery 1.4新增支持：可以不指定object参数、object参数可以为字符串(选择器)。

参数object可以是DOM元素、jQuery对象或字符串。如果参数object是字符串，则将其视作jQuery选择器，表示该选择器所匹配的元素。

返回值

index()方法的返回值为Number类型，返回指定元素的索引位置(从0开始算起)。

注意：以下文本描述中的当前元素表示当前jQuery对象的第一个元素。

如果没有指定参数object，则返回当前元素在其所有同辈元素中的索引位置。
如果object为String类型，则将其视作选择器，返回当前元素在选择器所匹配的元素中的索引位置。如果该选择器不匹配任何元素或者当前元素不在匹配到的元素内，则返回-1。
如果object为DOM元素或jQuery对象，则返回该元素(或该jQuery对象中的第一个元素)在当前jQuery对象所匹配的元素中的索引位置。

示例&说明

HTML示例代码：

<div id="n1">
    <div id="n2">
        <span id="n3"></span>
        <ul id="n4">
            <li id="n5">item1</li>
            <li id="n6">item2</li>
            <li id="n7">item3</li>
        </ul>
        <span id="n8"></span>
    </div>  
</div>

jQuery示例代码：

// 省略参数： 返回第一个li元素在所有同辈元素中的索引
document.writeln( $("li").index( ) ); // 0
// 参数为DOM元素： 返回n6在$li中的索引
document.writeln( $("li").index( document.getElementById("n6") ) ); // 1
// 参数为jQuery对象： 返回$("#n7")在$li中的索引
document.writeln( $("li").index( $("#n7") ) ); // 2

// 参数为选择器字符串： 返回$li中的第一个元素(即n5)在选择器"#n4"所匹配的元素中的索引
// 选择器"#n4"匹配的元素只有n4一个，没有n5，因此返回-1
document.writeln( $("li").index( "#n4" ) ); // -1

// 省略参数：n4在同辈元素中的索引，n4之前的同辈元素有一个n3，因此返回索引为1
document.writeln ( $("#n4").index( ) ); // 1

// 参数为选择器字符串：n8在选择器"span"所匹配的元素中的索引
// 选择器"span"匹配n3、n8两个元素，n8是其中的第二个元素，因此返回索引为1
document.writeln ( $("#n8").index( "span" ) ); // 1

each()

each()函数用于以当前jQuery对象匹配到的每个元素作为上下文来遍历执行指定的函数。

所谓的上下文，意即该函数内部的this指针引用了该元素。

该函数属于jQuery对象(实例)。请注意，这与全局jQuery对象的each()函数不同。

语法

jQueryObject.each( callback)

参数说明

参数	说明
callback	Function类型指定的用于循环执行的函数。

each()函数将根据匹配到的每一个元素循环调用函数callback。每次调用函数callback时，each()函数都会将callback函数内部的this引用指向当前正在迭代的元素，并为其传入两个参数。第一个参数是当前迭代元素在匹配到的元素中的索引值(从0开始计数)，第二个参数是当前迭代元素(与this的引用相同)。

each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。

返回值

each()方法的返回值为jQuery类型，返回当前jQuery对象本身。

示例&说明

HTML示例代码：

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>
<form id="demoForm">
    <input name="goods_weight" type="checkbox" value="20">A(20kg)<br>
    <input name="goods_weight" type="checkbox" value="33">B(33kg)<br>
    <input name="goods_weight" type="checkbox" value="36">C(36kg)<br>
    <input name="goods_weight" type="checkbox" value="49">D(49kg)<br>
    <input name="goods_weight" type="checkbox" value="56">E(56kg)<br>
    <input name="goods_weight" type="checkbox" value="78">F(78kg)<br>
    <input id="btnBuy" type="button" value="订购">    
</form>

jQuery示例代码：

// 省略参数： 返回第一个li元素在所有同辈元素中的索引
$("ul li").each(function(index, element){
    // this === element
    $(element).html( "编号" + (index + 1) ); 
});


$("#btnBuy").click(function(){
    var weight = 0;
    $("[name=goods_weight]:checked").each(function(){
        weight += parseInt(this.value);
        if(weight > 100){ // 重量超标，停止循环
            return false;
        }
    });
    if(weight <= 0){
        alert("没有选择任何商品!");
    }else if(weight > 100){
        alert("一次订购的商品重量不能超过100kg!");
    }else{
        // 订购商品
        alert("订购商品成功!");
    }
});

.length

length属性用于返回当前jQuery对象封装的元素个数。

length属性与size()方法的作用相同。

该属性属于jQuery对象(实例)。

语法

jQueryObject.length

返回值

length属性的返回值是Number类型，返回该jQuery对象封装的DOM元素的个数。

如果该对象是一个空的jQuery对象，没有封装任何元素，则返回0。

示例&说明

HTML示例代码：

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>

jQueryObject.length相关的jQuery示例代码：

var j_li = $("ul li");
document.writeln( j_li.length ); // 3

var j_p = $("p"); // 没有p元素，返回空的jQuery对象
document.writeln( j_p.length ); // 0

.selector

selector属性用于返回获取当前jQuery对象时传给jQuery(selector, context)函数的原始选择器(即selector参数)。

换句话说，你通过什么选择器来获得的当前jQuery对象，当前jQuery对象的selector属性就返回什么。

该属性属于jQuery对象(实例)。

语法

jQueryObject.selector

jQuery1.3 新增该属性，于jQuery 1.7被标识为已过时，并于jQuery 1.9被移除(官方文档是这样描述的。不过在实际测试中发现：该属性在1.9之后的版本中仍然可用。建议谨慎使用，最好不用)。

返回值

selector属性的返回值是String类型，返回该jQuery对象的原始选择器。

如果当前jQuery对象不是通过传入选择器字符串来获得的，那么将返回空字符串”“。

示例&说明

HTML代码：

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>

jQuery示例代码：

var $li = $("ul li");
document.writeln( $li.selector ); // ul li

var $p = $("#n1 p");
// 虽然$p是一个空的jQuery对象，没有匹配到任何元素，但也包含了传入的选择器信息
document.writeln( $p.selector ); // #n1 p

var $ul = $("#n1").find("ul");
// jQuery根据我们的操作自动计算出相应的选择器
document.writeln( $ul.selector ); // #n1 ul

var div_n2 = document.getElementById("n2");
var $n2 = $(div_n2); // 以DOM元素的方式获取jQuery对象
document.writeln( $n2.selector ); // (空字符串)。

.context

context属性用于返回获取当前jQuery对象时传给jQuery(selector, context)函数的context参数。

如果当时没有传入context参数，则该参数默认为当前文档(document)。

该属性属于jQuery对象(实例)。

语法

jQueryObject.context

jQuery1.3 新增该属性，但在 jQuery 1.10 中被标识为已过时。保持该属性只是为了在jQuery Migrate插件中支持live()方法的需要，该属性可能会在未来的版本中被移除。

返回值

context属性的返回值是Element类型，返回获取该jQuery对象时用于指定查找范围的DOM节点。

如果当时没有指定查找范围，则默认的查找范围为当前文档对象(document)。

context属性的返回值是Element类型，哪怕当时传入jQuery(selector, context)函数的context参数不是Element类型。如果当时传入的context参数是jQuery对象，则返回该jQuery对象的context属性。

示例&说明

HTML代码：

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>

jQuery示例代码：

var $li = $("ul li");
// 返回当前文档的document对象
document.writeln( $li.context ); // [object HTMLDocument]
document.writeln( $li.context === document ); // true

var n1 = document.getElementById("n1");
var $n3 = $( "#n3", n1 );
// 返回n1
document.writeln( $n3.context ); // [object HTMLDivElement]
document.writeln( $n3.context === n1 ); // true

var $n2 = $("#n2");
var $n4 = $( "#n4", $n2 );
// 返回$n2的context属性：document对象
document.writeln( $n4.context ); // [object HTMLDocument]
document.writeln( $n4.context === document ); // true

var $n3 = $("#n3", n1);
var $n5 = $( "#n5", $n3 );
// 返回$n3的context属性：n1
document.writeln( $n5.context ); // [object HTMLDivElement]
document.writeln( $n5.context === n1 ); // true

三知之灵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery核心--对象访问

列表函数说明 size()1.8- 用于返回当前jQuery对象封装的元素个数。 get() 用于获取当前jQuery对象匹配到的DOM元素。 index() 用于获取当前jQuery对象中指定DOM元素的索引值。 each() 用于以当前jQuery对象匹配到的每个元素作为上下文来遍历执行指定的函数。属性...
复制链接

扫一扫