有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

dom对象和jquery对象的区别

javascript cat 10个月前 (12-10) 50次浏览 已收录 0个评论 扫描二维码

1、页面加载

// 页面加载
window.onload = function () {
    console.log('我是原生的页面加载');
}

// jq
$(document).ready(function () {
    console.log('我是JQ的页面加载');
});

$(document).ready(function () {
    console.log('第二次');
});

// jq简写
$(function () {
    console.log('我是jq的加载完成简写');
})

// $(document).ready(function (){}) 同 window.onload = function (){}的区别:
// 1、执行时机不同,window.onload 必须等待网页中文档和资源都加载完成才能执行,而$(document).ready()是等文档加载完成后调用。
// 2、window.onload 只能写一个,多个时后面的会覆盖掉前面的,而$(document).ready()可以写多个,不会覆盖。
// 3、window.onload 没有简写形式,而$(document).ready()可以简写成$(function(){})。

2、DOM对象和JQ对象

<div id="box"></div>
<script>
    $(document).ready(function () {
        // DOM对象和jq对象可以共存,但不可混用
        // DOM对象只能使用原生的方法
        // jq对象只能使用jq的方法

        // 原生获取的DOM对象
        var box = document.getElementById('box');
        console.log(box);

        // jq对象
        var $box = $('#box');
        console.log($box);
    });
</script>

3、互转

<div id="box"></div>
<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>
<script>
    $(function () {
        // jq转原生
        var $box = $('#box');
        var $li = $('li');

        // console.log($box);
        // console.log($li);

        // 1、jq对象[下标]
        console.log($box[0]);
        console.log($li[1]);

        // 2、jq对象.get(参数下标);
        // 如果没有参数,返回的是一个数组,有参数,返回对应的哪一项
        console.log($box.get(0));
        console.log($li.get(1));

        // 原生转jq: $(原生)
        var box = document.getElementById('box');
        var li = document.querySelectorAll('li');
        // console.log(box, li);
        console.log($(box));
        console.log($(li));

    })
</script>
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址