jQuery和JavaScript的区别

news2024/11/24 19:13:30

一、比较原生js和jQuery的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        // window.onload = function(){
        //     var div1 = document.querySelector('div');
        //     var div2 = document.getElementsByClassName('two')[0];
        //     var div3 = document.getElementById('three');
        //     div1.style.backgroundColor = 'red';
        //     div2.style.backgroundColor = 'blue';
        //     div3.style.backgroundColor = 'pink';
        // }
        $(document).ready(function(){
            var div1 = $('div:first');
            var div2 = $('.two');
            var div3 = $('#three');
            div1.css('background-color','red');
            div2.css({
                backgroundColor:'blue',
                fontSize:'18px',
                fontFamily:'楷体'
            });
            div3.css('background-color','pink');
        })
    </script>
</head>
<body>
    <div>我是一个div</div>
    <div class="two">我是一个div</div>
    <div id="three">我是一个div</div>
</body>
</html>

浏览器运行结果如下：

二、jquery和js入口函数区别

js入口函数只有一个后面的会覆盖前面的
jquery入口函数可以有多个会依次执行 $(function(){})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        // window.onload = function(){
        //     var img = document.querySelector('img');
        //     console.log(window.getComputedStyle(img).width);
        //     console.log(window.getComputedStyle(img).height);
        // }
        // $(function(){
        //     console.log($('img').width());
        //     console.log($('img').height());
        // })
        //js入口函数不会追加，后面的会覆盖前面的
        window.onload = function(){
            alert('js入口函数1')
        }
        window.onload = function(){
            alert('js入口函数2')
        }
        //jquery入口函数 4种形式  入口函数会依次执行 不会覆盖
        $(document).ready(function(){
            alert('入口函数1')
        })
        jQuery(document).ready(function(){
            alert('入口函数2')
        })
        $(function(){
            alert('入口函数3')
        })
        jQuery(function(){
            alert('入口函数4')
        })
    </script>
</head>
<body>
    <img src="图片地址" alt="">
</body>
</html>

浏览器运行如下：