js Jquery对象与DOM对象之间的转换.html

最新推荐文章于 2022-06-27 18:45:31 发布

学无止境慢慢来

最新推荐文章于 2022-06-27 18:45:31 发布

阅读量1.1k

点赞数

分类专栏： js jQuery

js 同时被 2 个专栏收录

132 篇文章 0 订阅

订阅专栏

jQuery

49 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="./js/jquery-3.2.1.js"></script>
    <title>jquery_dom</title>
</head>
<body>
<div id="div1" name="testDiv">div1</div>
<div id="div2" name="testDiv">div2</div>
<div id="div3" name="testDiv">div3</div>
</body>
<script>
    // 参考：https://www.cnblogs.com/Sara-shi/p/5291738.html
    // jquery对象
    console.log("jqueryObj:", $('#div1'));
    // DOM对象
    let div1Obj = document.getElementById('div1');
    console.log("domObj:", div1Obj);
    console.log('');

    // 1.dom -> jquery
    console.log("jqueryObj:", $(div1Obj));
    // 2.jquery -> dom
    console.log("domObj:", $('#div1')[0]);
    console.log("domObj:", $('#div1').get(0));
    console.log('');

    // 注：document或Jquery中通过className或TagName获取的数组对象，应该通过循环逐个转换。
    let divArray = document.getElementsByTagName('div');
    console.log(divArray);
    console.log($(divArray));
    console.log($('div'));
    console.log('');
    // 方式1.
    for (let index in divArray) {
        if (index < divArray.length) {
            console.log(divArray[index]);
        }
    }
    // 方式2.
    for (let index = 0; index < divArray.length; index++) {
        console.log(divArray[index]);
    }
    // 方式3.
    $('div').each(function () {
        console.log(this);
    });
</script>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js Jquery对象与DOM对象之间的转换.html

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <script src="./js/jquery-3.2.1.js"></script> <title>jquery_dom</title></...
复制链接

扫一扫

专栏目录