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

来源：互联网发布：php cgi.exe 命令行编辑：程序博客网时间：2024/05/16 15:55

举例浅谈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());    })

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

阅读全文

0 0