浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别

最新推荐文章于 2024-01-20 11:55:00 发布

ECMAScripter

最新推荐文章于 2024-01-20 11:55:00 发布

阅读量4.1k

点赞数 2

分类专栏： JavaScript 文章标签： JQuery 前端 dom

本文链接：https://blog.csdn.net/fabulous1111/article/details/78453910

版权

JavaScript 专栏收录该内容

79 篇文章 1 订阅

订阅专栏

举例浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别

demo Dom结构：

    <div>
        <ul>
            <li class="li-test">1</li>
            <li class="li-test">2</li>
            <li class="li-test">3</li>
        </ul>
    </div>

分析①：JQuery代码：

$(function () {
    console.log($('.li-test').get(0));
    console.log($('.li-test').eq(0));
    console.log($('.li-test')[0]);
})

运行结果为：

结果分析：

$('.li-test').get(0)和$('.li-test')[0]返回的是DOM对象，而$('.li-test').eq(0)返回的是JQuery对象。

分析②：如何获取标签中的值？

方法一：针对不同对象用不同的方式获取，代码如下：

    $(function () {
        console.log($('.li-test').get(0).innerText);
        console.log($('.li-test').eq(0).text());
        console.log($('.li-test')[0].innerText);
    })

方法二：转成JQuery对象用JQuery的方法获取，代码如下：

    $(function () {
        console.log($($('.li-test').get(0)).text());
        console.log($('.li-test').eq(0).text());
        console.log($($('.li-test')[0]).text());
    })

以上两种方法的运行结果都为：