dom对象和jquery对象的区别

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>