第四章前端开发基础jQuery

第一章：前端开发基础：html
第二章：前端开发基础：CSS
第三章：前端开发基础：JavaScript
第四章：前端开发基础：jQuery
第五章：前端UI框架 Layui

文章目录

jQuery介绍
jQuery基本使用
选择器
jQuery操作HTML
- 隐藏和显示元素
- - 举例
- 获取与设置内容
- - 举例
- 获取\设置和删除属性
- - 举例
- 元素操作
- - 举例
- CSS样式
jQery Ajax
- 介绍
- 准备工作
- 举例
- - 路由
  - 视图
  - 网页

jQuery介绍

jQuery是一个快速、轻量级的JavaScript库，用于简化HTML文档的客户端脚本编写。它是由John Resig创建的，于2006年首次发布。jQuery的目标是通过提供一种简洁而强大的API，简化跨浏览器的JavaScript编程。

官网：https://jquery.com

以下是jQuery的一些关键特点和优势：

简洁的语法： jQuery通过简洁而一致的语法提供了一种更容易理解和使用的方式来处理DOM操作、事件处理、动画效果等。这使得开发人员更容易编写干净、高效的代码。
跨浏览器兼容性： jQuery解决了许多浏览器之间的兼容性问题，使得开发者能够编写一次代码，然后在各种主流浏览器上都能正常运行。
DOM操作： jQuery提供了强大的DOM操作方法，使得选择、遍历和修改HTML文档中的元素变得更加简单。
事件处理： 通过jQuery，你可以轻松地附加和处理事件，无论是用户交互事件还是浏览器触发的事件。
动画效果： jQuery包含了一套丰富的动画效果，用于创建流畅的用户界面和交互效果。
AJAX支持： jQuery简化了通过AJAX进行异步数据加载的过程，使得与服务器的通信更加便捷。
插件扩展： jQuery的插件生态系统非常庞大，允许开发者使用已有的插件或创建自己的插件，以满足特定需求。
链式操作： jQuery允许你通过链式操作来组合多个方法调用，使得代码更为紧凑和可读。

jQuery基本使用

基本上，使用jQuery涉及以下几个方面：导入jQuery库、选择元素、操作DOM、处理事件、执行动画、使用AJAX等。以下是一个简单的例子，演示了基本的jQuery使用：

导入jQuery库： 在HTML文件的头部导入jQuery库。你可以从官方网站（https://jquery.com/）下载jQuery，或者使用CDN（Content Delivery Network）链接：

下载地址：

https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js

https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js

https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js

https://code.jquery.com/jquery-3.6.4.min.js

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>

<body>

选择元素： 使用jQuery选择器来选取HTML元素。选择器的语法类似于CSS选择器。以下是一些示例：

<script>
    // 通过元素名称选择
    $("p")          // 选择所有 <p> 元素

    // 通过类名选择
    $(".myClass")   // 选择所有类名为 "myClass" 的元素

    // 通过ID选择
    $("#myId")      // 选择ID为 "myId" 的元素

    // 复合选择器
    $("p.myClass")  // 选择所有同时有 <p> 标签和类名为 "myClass" 的元素
</script>

操作DOM： 使用jQuery提供的方法来操作DOM元素。以下是一些例子：

<script>
    // 修改文本内容
    $("#myElement").text("新的文本内容");

    // 修改HTML内容
    $("#myElement").html("<strong>新的HTML内容</strong>");

    // 添加类
    $("#myElement").addClass("highlight");

    // 移除类
    $("#myElement").removeClass("highlight");
</script>

处理事件： 使用jQuery来附加和处理事件：

<script>
    // 附加点击事件处理程序
    $("#myButton").click(function(){
        alert("按钮被点击了！");
    });
</script>

执行动画： 使用jQuery创建简单的动画效果：

<script>
    // 隐藏元素
    $("#myElement").hide();

    // 显示元素
    $("#myElement").show();

    // 切换元素的显示/隐藏状态
    $("#myElement").toggle();
</script>

这只是jQuery的基础用法。随着你的熟练程度提高，你还可以学习更多高级的特性，如AJAX请求、动画效果、插件的使用等。jQuery的官方文档（https://api.jquery.com/）是一个非常好的资源，可以帮助你更深入地了解和学习jQuery。

选择器

<table border="1" style="width: 100%; text-align: center; border-collapse: collapse;">
    <thead style="background-color: aqua;">
        <tr>
            <th>名称</th>
            <th>语法</th>
            <th>示例</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="vertical-align: middle;">标签显示器</td>
            <td style="vertical-align: middle;">element</td>
            <td align="left" style="vertical-align: middle;">$("h2") 选取所有h2元素</td>
        </tr>
        <tr>
            <td style="vertical-align: middle;">类选择器</td>
            <td style="vertical-align: middle;">.class</td>
            <td align="left" style="vertical-align: middle;">$(“.title“) 选取所有class为title的元素</td>
        </tr>
        <tr>
            <td style="vertical-align: middle;">ID选择器</td>
            <td style="vertical-align: middle;">#id</td>
            <td align="left" style="vertical-align: middle;">$(“#title”) 选取id为title的元素</td>
        </tr>
        <tr>
            <td style="vertical-align: middle;">并集选择器</td>
            <td style="vertical-align: middle;">selector1,selector2,...</td>
            <td align="left" style="vertical-align: middle;">$(“div,p,.title”) 选取所有div、p和拥有class为title的元素</td>
        </tr>
        <tr>
            <td style="vertical-align: middle;">属性选择器</td>
            <td style="vertical-align: middle;"></td>
            <td align="left" style="vertical-align: middle;">$(“input[name]=‘username’”) 选取input标签名为username的元素<br>
                $(“[href=‘#’]”) 选取href值等于“#”的元素</td>
        </tr>
    </tbody>
</table>

jQuery操作HTML

隐藏和显示元素

hide() ：隐藏某个元素
show() ：显示某个元素
toggle() ：hide()和show()方法之间切换

举例

<!DOCTYPE html>
<html>

<head>
    <!-- 设置字符编码为UTF-8 -->
    <meta charset="UTF-8">
    
    <!-- 设置页面标题为jquery -->
    <title>jquery</title>
    
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <!-- 创建一个段落，并为其设置id为demo -->
    <p id="demo">这是一句话</p>
    <!-- 创建一个隐藏按钮，并为其设置id为hide -->
    <button id="hide" type="button">隐藏</button>
    <!-- 创建一个显示按钮，并为其设置id为show -->
    <button id="show" type="button">显示</button>
    <!-- 创建一个切换按钮，并为其设置id为toggle -->
    <button id="toggle" type="button">切换</button>
    
    <!-- 使用jQuery为隐藏按钮添加点击事件 -->
    <script>
        $("#hide").click(function () {
            $("#demo").hide() // 隐藏id为demo的段落
        })
        $("#show").click(function () {
            $("#demo").show() // 显示id为demo的段落
        })
        $("#toggle").click(function () {
            $("#demo").toggle() // 切换id为demo的段落的显示状态
        })
    </script>

</body>

</html>

获取与设置内容

text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的HTML内容
val() 设置或返回表单字段的值

举例

<!DOCTYPE html>
<html>

<head>
    <!-- 设置字符编码为UTF-8 -->
    <meta charset="UTF-8">
    
    <!-- 设置页面标题为 jQuery -->
    <title>jQuery</title>

    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

    <!-- 一个带有 id 为 "txt" 的段落元素，包含一些文本和加粗的字体 -->
    <p id="txt">这是一<b>句话</b></p>

    <!-- 两个按钮，分别有 id 为 "btn1" 和 "btn2" -->
    <button id="btn1" type="button">显示文本</button>
    <button id="btn2" type="button">显示 HTML</button>

    <!-- 一个带有 id 为 "demo" 的段落元素，用于展示按钮点击后的结果 -->
    <p id="demo"></p>

    <script type="text/javascript">
        // 当按钮 "显示文本" 被点击时执行的 JavaScript 代码
        $("#btn1").click(function () {
            // 获取 #txt 元素的纯文本内容
            var x = $('#txt').text();

            // 将获取到的文本内容设置到 #demo 元素中，同时设置文字颜色为红色
            $('#demo').text(x).css('color', 'red');
        });

        // 当按钮 "显示 HTML" 被点击时执行的 JavaScript 代码
        $("#btn2").click(function () {
            // 获取 #txt 元素的包含 HTML 标签的内容
            var x = $('#txt').html();

            // 将获取到的 HTML 内容设置到 #demo 元素中，同时设置文字颜色为蓝色
            $('#demo').html(x).css('color', 'blue');
        });
    </script>

</body>

</html>

获取\设置和删除属性

attr() 设置或返回所选元素的属性值
removeAttr() 删除属性值

举例

<!DOCTYPE html>
<html>

<head>
    <!-- 设置字符编码为 UTF-8 -->
    <meta charset="UTF-8">
    
    <!-- 设置页面标题为 jQuery -->
    <title>jQuery</title>

    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <!-- 一个带有 id 为 "a1" 的超链接元素，指向百度官网 -->
    <a href="http://www.baidu.com" id="a1">官网</a><br>
    
    <!-- 三个按钮，分别有 id 为 "btn"、"btn2" 和 "btn3" -->
    <button type="button" id="btn">查看 CSS 属性值</button><br>
    <button type="button" id="btn2">设置超链接值</button><br>
    <button type="button" id="btn3">删除超链接</button><br>
    
    <!-- 一个带有 id 为 "demo" 的段落元素，用于展示按钮点击后的结果 -->
    <p id="demo"></p>

    <script type="text/javascript">
        // 当按钮 "查看 CSS 属性值" 被点击时执行的 JavaScript 代码
        $('#btn').click(function () {
            // 获取 #a1 元素的 href 属性值
            var x = $('#a1').attr('href');

            // 将获取到的属性值设置到 #demo 元素中
            $('#demo').text(x);
        });

        // 当按钮 "设置超链接值" 被点击时执行的 JavaScript 代码
        $('#btn2').click(function () {
            // 设置 #a1 元素的 href 属性值为新的链接
            var x = $('#a1').attr('href', 'http://aaa.aaa.com');

            // 将设置后的属性值设置到 #demo 元素中
            $('#demo').text(x);
        });

        // 当按钮 "删除超链接" 被点击时执行的 JavaScript 代码
        $('#btn3').click(function () {
            // 移除 #a1 元素的 href 属性
            var x = $('#a1').removeAttr('href');

            // 将移除属性后的结果设置到 #demo 元素中
            $('#demo').text(x);
        });
    </script>

</body>

</html>

元素操作

append() 在被选中元素的结尾插入内容
prepend() 在被选中元素的开头插入内容
after() 在被选中元素之后插入内容
beforce() 在被选中元素之前插入内容
remove() 删除被选元素及子元素
empty() 清空被选元素（删除下面所有子元素）

举例

<!DOCTYPE html>
<html>

<head>
    <!-- 设置字符编码为 UTF-8 -->
    <meta charset="UTF-8">

    <!-- 设置页面标题为 jQuery -->
    <title>jQuery</title>

    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <!-- 一个带有 id 为 "demo" 的段落元素，初始内容为 "111111" -->
    <p id="demo">111111</p><br>

    <!-- 六个按钮，分别有 id 为 "btn1" 到 "btn6" -->
    <button type="button" id="btn1">结尾插入</button><br>
    <button type="button" id="btn2">开头插入</button><br>
    <button type="button" id="btn3">之下插入</button><br>
    <button type="button" id="btn4">之上插入</button><br>
    <button type="button" id="btn5">删除被选元素及子元素</button><br>
    <button type="button" id="btn6">清空被选元素</button><br>

    <script type="text/javascript">
        // 当按钮 "结尾插入" 被点击时执行的 JavaScript 代码
        $('#btn1').click(function () {
            $('p').append('结尾插入');
        });

        // 当按钮 "开头插入" 被点击时执行的 JavaScript 代码
        $('#btn2').click(function () {
            $('p').prepend('开头插入');
        });

        // 当按钮 "之下插入" 被点击时执行的 JavaScript 代码
        $('#btn3').click(function () {
            $('p').after('之下插入<br>');
        });

        // 当按钮 "之上插入" 被点击时执行的 JavaScript 代码
        $('#btn4').click(function () {
            $('p').before('之上插入<br>');
        });

        // 当按钮 "删除被选元素及子元素" 被点击时执行的 JavaScript 代码
        $('#btn5').click(function () {
            $('p').remove();
        });

        // 当按钮 "清空被选元素" 被点击时执行的 JavaScript 代码
        $('#btn6').click(function () {
            $('p').empty();
        });
    </script>

</body>

</html>

CSS样式

css() 设置或返回样式属性（键值）
addClass() 向被选元素添加一个或多个类样式
removeClass() 从被选元素中删除一个或多个类样式
toggleClass() 对被选元素进行添加/删除类样式的切换操作

<!DOCTYPE html>
<html>

<head>
    <!-- 设置字符编码为 UTF-8 -->
    <meta charset="UTF-8">

    <!-- 设置页面标题为 jQuery -->
    <title>jQuery</title>

    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- 定义样式 -->
    <style>
        .cls {
            color: blue;
            font-size: 50px;
        }
    </style>
</head>

<body>

    <!-- 初始段落元素，id 为 "demo"，内容为 "111111" -->
    <p id="demo">111111</p><br>

    <!-- 按钮1，id 为 "btn1"，点击后将 #demo 元素的文字颜色设置为红色 -->
    <button type="button" id="btn1">按钮</button><br>

    <!-- JavaScript 代码 -->
    <script type="text/javascript">
        $('#btn1').click(function () {
            $('#demo').css('color', 'red');
        });
    </script>

    <!-- 包含一段文字的 div 元素，id 为 "DDD" -->
    <div id="DDD">
        <p>这是DDD</p>
    </div>

    <!-- 按钮2，id 为 "btn2"，点击后给 #DDD 元素添加名为 "cls" 的样式 -->
    <button type="button" id="btn2">按钮</button><br>

    <!-- JavaScript 代码 -->
    <script type="text/javascript">
        $('#btn2').click(function () {
            $('#DDD').addClass('cls');
        });
    </script>

    <!-- 包含一段文字的 div 元素，id 为 "DDD2" -->
    <div id="DDD2">
        <p>这是DDD2</p>
    </div>

    <!-- 按钮3，id 为 "btn3"，点击后切换 #DDD2 元素的名为 "cls" 的样式 -->
    <button type="button" id="btn3">按钮</button><br>

    <!-- JavaScript 代码 -->
    <script type="text/javascript">
        $('#btn3').click(function () {
            $('#DDD2').toggleClass('cls');
        });
    </script>
</body>

</html>

jQery Ajax

介绍

AJAX = 异步 JavaScript 和 XML，是一种在无需刷新整个网页的情况下，实现更新部分网页的技术。通过后台加载数据并在网页上进行显示，为用户提供了良好的交互体验。

jQuery中的ajax()方法是执行AJAX（异步HTTP）请求的常用方式，所有的jQuery AJAX方法都使用ajax()方法。该方法通常用于其他方法不能完成的请求。此外，如果没有jQuery，编写常规的AJAX代码可能会有些难度，因为不同的浏览器对AJAX的实现并不相同。

无刷新好处

减少带宽
减轻服务器负载压力
提供用户体验

准备工作

django-admin startproject jquery
cd jquery
mkdir templates
python3 manage.py startapp myjquery

setting.py修改洗白那两个

# jquery/jquery/settings.py
ALLOWED_HOSTS = ['*']
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [],
        'DIRS': ["%s/%s" %(BASE_DIR,'templates'),],    # 修改这一行
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

参数	类型	描述
url	string	发送请求的地址,默认为当前页地址
type	string	请求方式，默认为GET
data	obejct、array、string	发送到服务器的数据
dataType	string	预期服务器返回的数据类型，包括JSON、XML、text、HTML等
contentType	string	发送信息至服务器时内容编码类型。默认值: "application/xwww-form-urlencoded"。
timeout	number	设置请求超时时间
global	Boolean	表示是否触发全局Ajax事件，默认为true
headers	obejct	设置请求头信息
async	Boolean	默认true，所有请求均为异步请求。设置false发送同步请求

参数	函数格式	描述
beforeSend	function(jqXHR,object)	发送请求前调用的函数，例如添加自定义HTTP头
success	function(data, String textStatus,jqXHR)	请求成功后调用的函数，参数data：可选，由服务器返回的数据
error	function(jqXHR,String textStatus,errorThrown)	请求失败时调用的函数
complete	function(jqXHR, String textStatus)	请求完成后（无论成功还是失败）调用的函数

HTTP方法	数据处理	说明
POST	新增	新增一个资源
GET	获取	取得一个资源
PUT	更新	更新一个资源
DELETE	删除	删除一个资源

举例

路由

# jquery/jquery/urls.py
from django.contrib import admin
from django.urls import path,re_path

from myjquery import views

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path('server/$',views.server,name="server")
]

视图

# jquery/jquery/views.py
from django.http import JsonResponse
from django.shortcuts import render

# Create your views here.

def server(request):
    if request.method == "GET":
        print(request.GET)
        return render(request,'server.html')
    elif request.method == "POST":
        print(request.POST)
        code = 0
        msg = "添加数据成功"
        msg = {"code":code,"msg":msg}
        # return render(request,'server.html')
        return JsonResponse(msg)

网页

<!-- jquery/templates/server.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>服务器添加</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    {% csrf_token %}
    <form action="" method="post" onclick="return false">
        <h2>添加服务器</h2>
        主机名：<input type="text" name="host"><br>
        IP地址：<input type="text" name="ip"><br>
        操作系统：<input type="text" name="os"><br>
        硬件配置：<input type="text" name="hardware"><br>
        <input type="submit" value="提交" id="btn">
    </form>
    <p id="DDD"></p>
    <script type="text/javascript">
        $('#btn').click(function () {
            // 获取表单的值
            var host = $('input[name="host"]').val();
            var ip = $('input[name="ip"]').val();
            var os = $('input[name="os"]').val();
            var hardware = $('input[name="hardware"]').val();
            var csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val();
            data = { "host": host, "ip": ip, "os": os, "hardware": hardware, "csrfmiddlewaretoken": csrfmiddlewaretoken }
            // json格式提交
            $.ajax({
                type: "POST",
                url: "{% url 'server' %}",
                data: data,
                success: function (result) {
                    // console.log(result)
                    if (result.code == 0) {
                        $("#DDD").text(result.msg).css('color', 'blue')
                    } else if (result.code == 1) {
                        $("#DDD").text(result.msg).css('color', 'red')
                    }
                },
                error: function () {
                    $("#DDD").text('服务器接口异常').css('color', 'red')
                }
            })

        })
    </script>
</body>

</html>

第四章 前端开发基础jQuery