jQuery学习（一）

最新推荐文章于 2024-09-07 13:38:28 发布

你对月慕几許

最新推荐文章于 2024-09-07 13:38:28 发布

阅读量83

点赞数

分类专栏： jQuery 文章标签： javascript js jquery html css

本文链接：https://blog.csdn.net/m0_45314682/article/details/111780107

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、原生js与jQuery的比较

原生的js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div{
            height: 100px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <input type="button" value="设置边框" id="btnOne"/>
    <input type="button" value="设置文本" id="btnTwo"/>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
<!--需求：点击按钮给三个div设置边框和文本-->
<script>
    //入口函数
    window.onload = function (){
        //1.先获取对应的元素
        let btnOne = document.getElementById("btnOne")
        var btnTwo = document.getElementById("btnTwo")
        var divs = document.getElementsByTagName("div")
        //2.给btnOne按钮设置点击事件
        btnOne.onclick = function (){
            for (var i = 0; i<divs.length;i++){
                divs[i].style.border = '1px solid red'
            }
        }
        //3.给btnTwo按钮设置点击事件
        btnTwo.onclick = function (){
            for (var i =0;i<divs.length;i++){
                divs[i].textContent = "我是设置的文本";
            }
        }
    }
    //再来一个入口函数
    // window.onload = function (){
    //     console.log("我又是一个窗口！！！！！")
    // }
    /**
     * 分析一下原生js的缺口：
     * 1、不能添加多个入口函数（window.onload），如果添加了多个，后面的会把前面的给覆盖
     * 2、原生的js的api名字太长，太难记
     * 3、原生的js代码有时候有些冗余
     * 4、原生的js中属性或者方法有浏览器兼容问题
     * 5、原生的js容错率比较低，前面的代码出了问题，后面的代码就执行不了了。
     */

</script>

jQuery代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div{
            height: 100px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<input type="button" value="设置边框" id="btnOne"/>
<input type="button" value="设置文本" id="btnTwo"/>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!--需求：点击按钮给三个div设置边框和文本-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    //入口函数
    $(document).ready(function (){
        //设置边框
        $('#btnOne').click(function (){
            $('div').css('border','1px solid red');
        });
        //设置文本
        $('#btnTwo').click(function (){
            $('div').text('我是文本！！！！！');
        });
    });
    //再来一个入口函数
    $(document).ready(function (){
        console.log("我又是一个入口函数")
    });
    /**
     * jQuery的优点：
     * 1、可以写多个入口函数
     * 2、jQuery的api名字都容易记忆
     * 3、jQuery代码简洁（隐式迭代）
     * 4、jQuery帮我们解决了浏览器兼容问题
     * 5、容错率较高，前面的代码出了问题，后面的代码不受影响。
     */

</script>

你对月慕几許

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习（一）

1、原生js与jQuery的比较原生的js:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <style> div{ height: 100px; margin-top: 10px; } &lt
复制链接

扫一扫

专栏目录