E023Web学习笔记-JQuery（一）：基础知识

訾博ZiBo

发布于 2025-01-06 14:44:26

5300

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

一、JQuery基础

1、概念

jQuery 是一个 JavaScript 库；

jQuery 极大地简化了 JavaScript 编程；

jQuery 很容易学习；

2、快速入门

使用步骤：

第一步：下载JQuery；

https://jquery.com/download/

第二步：导入JQuery的JS文件（直接复制）；

第三步：使用；

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="div1">大哥哥。。。</div>
    <div id="div2">二哥哥。。。</div>
</body>
<script type="text/javascript">
    // 使用JQuery获取元素对象
    var div1 = $("#div1");
    var div2 = $("#div2");
    alert(div1.html());
    alert(div2.html());
</script>
</html>

运行结果：

3、JQuery对象与JS对象的区别和转换

区别：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="div1">大哥哥。。。</div>
    <div id="div2">二哥哥。。。</div>
</body>
<script type="text/javascript">
    //通过js获取所有div标签
    var divs = document.getElementsByTagName("div");
    alert(divs);
    //通过jq获取所有div标签
    var $divs = $("div");
    alert($divs);

</script>
</html>

运行结果：

js：

jq：

说明：

①使用JQ获取元素，对元素进行操作比JS简单很多；

②JQ和JS的方法是不能通用的；

③JQ可以与JS相互转换；

JS转JQ

$(JS对象)

JQ转JS

JQ对象[索引]或者JQ对象.get[索引]

转换代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="div1">大哥哥。。。</div>
    <div id="div2">二哥哥。。。</div>
</body>
<script type="text/javascript">
    //通过js获取所有div标签
    var divs = document.getElementsByTagName("div");
    alert(divs.length);
    for (var i = 0; i < divs.length; i++) {
        $(divs[i]).html("aaa");
    }
    //通过jq获取所有div标签
    var $divs = $("div");
    alert($divs.length);
    for (var j = 0; j < $divs.length; j++) {
        var element = $divs.get(j);
        element.innerHTML = "bbb";
    }
</script>
</html>

4、基本语法

事件绑定

点击事件示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="div1">大哥哥。。。</div>
    <div id="div2">二哥哥。。。</div>
    <input type="button" value="点我呀" id="btn">
</body>
<script type="text/javascript">
    //给btn按钮添加点击事件
    //1、获取btn按钮对象
    var $btn = $("#btn");
    //2、绑定点击事件
    $btn.click(
        function () {
            alert("我被点击啦！");
        }
    );
    
</script>
</html>

入口函数

DOM文档加载完成后执行JS代码：

JS写法：

    <script type="text/javascript">
        //js写法
        window.onload = function () {
            //给btn按钮添加点击事件
            //1、获取btn按钮对象
            var $btn = $("#btn");
            //2、绑定点击事件
            $btn.click(
                function () {
                    alert("我被点击啦！");
                }
            );
        }
    </script>

JQ写法：

    <script type="text/javascript">
        //jq写法
        $(function ($) {
            //给btn按钮添加点击事件
                //1、获取btn按钮对象
                var $btn = $("#btn");
                //2、绑定点击事件
                $btn.click(
                    function () {
                        alert("我被点击啦！");
                    }
                )
            }
        );
    </script>

window.onload与$(function)的区别：

window.onload只能定义一次，若多次定义，则后面的会将前面的覆盖掉；
$(function)可以定义多次；

样式控制

改变背景色代码演示：

    <script type="text/javascript">
        //jq写法
        $(function ($) {
            //设置背景颜色
            //方式一
            $("#div1").css("background-color","red");
            //方式二
            $("#div2").css("backgroundColor","green");
            }
        );
    </script>

运行结果：