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

痛定思痛。 2024-04-19 10:00 76阅读 0赞

# 一、JQuery基础 #

## 1、概念 ##

jQuery 是一个 JavaScript 库；

jQuery 极大地简化了 JavaScript 编程；

jQuery 很容易学习；

## 2、快速入门 ##

### 使用步骤： ###

第一步：下载JQuery；

https://jquery.com/download/

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

第三步：使用；

### 代码演示： ###

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

## 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：**

**![20190917100648627.jpg][]**

**jq：**

![2019091710070919.jpg][]

### 说明： ###

①使用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写法：

JQ写法：

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

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

### 样式控制 ###

**改变背景色代码演示：**

**运行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d56c90dc63964ce58c9bc18faaf542aa.jpg
[20190917100648627.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/16bed72bbbb1437a9c44b73599223cdb.jpg
[2019091710070919.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3331aa411ecf41e987e1502ecd32b240.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9f5fe630727f409f8ede8cb2edd818de.jpg