jQuery入门详解

最新推荐文章于 2022-07-24 21:50:37 发布

运维@小兵

最新推荐文章于 2022-07-24 21:50:37 发布

阅读量517

点赞数

分类专栏： WEB 文章标签： js ajax

原文链接：https://ke.qq.com/course/320021

版权

WEB 专栏收录该内容

21 篇文章 4 订阅

订阅专栏

本文详细介绍了jQuery的基本使用，包括引入、基础语法、选择器和HTML操作，如隐藏显示元素、内容操作、属性管理、元素增删及CSS样式设置。此外，还讲解了jQuery的Ajax技术，阐述了异步数据交互的重要性及其基本用法，通过实例展示了如何使用Ajax提交表单数据。

摘要由CSDN通过智能技术生成

参考视频：https://ke.qq.com/course/320021

一、jQuery介绍

jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程，例如JS原生代码几十行实现的功能，jQuery可能一两行就可以实现，因此得到前端程序猿广泛应用。

官方网站： https://jquery.com

发展至今，主要有三个大版本：
• 1.x：常用版本
• 2.x，3.x：除非特殊要求，一般用的少

二、jQuery基本使用

`2.1.使用格式`

下载地址：
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

jQuery代码编写位置与JS位置一样，但需要先head标签里引入jquery.min.js文件：

<head>
	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
	<script type="text/javascript">
		// jquery代码
	</script>
</body>

`2.2.JQuery语法：`

2.2.1.基础语法

$(selector).action()

• $：代表jQuery本身
• (selector)：选择器，查找HTML元素
• action()：对元素的操作

2.2.2.示例

<body>
    <button type="button" id="btn">点我</button>
    <script type="text/javascript">
        $("#btn").click(function () {
            alert('有什么可以帮您的吗？')
        })
    </script>
</body>

在这里插入图片描述

三、选择器

在这里插入图片描述

四、jQuery操作HTML

`4.1.隐藏和显示元素`

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

示例：

<p id="demo">这是一个段落。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<button id="toggle" type="button">切换</button>
<script type="text/javascript">
	$("#hide").click(function () {
		$("p").hide();
	});
	$("#show").click(function () {
		$("p").show();
	});
	$("#toggle").click(function () {
		$("p").toggle();
	})
</script>

`4.2.获取与设置内容`

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

4.2.1.示例一

<p id="txt">这是一个<b>段落</b>。</p>
<button type="button" id="btn1">显示文本</button>
<button type="button" id="btn2">显示HTML</button>
<p id="demo"></p>
<script type="text/javascript">
	$("#btn1").click(function () {
		x = $("#txt").text();
		$("#demo").text(x).css("color","red") //不会解析b标签
	});
	$("#btn2").click(function () {
		x = $(“#txt”).html(); //获取
		$(“#demo”).html(x).css("color","red") //会解析b标签，.html()设置
	})
</script>

4.2.2.示例二：

<h1>欢迎访问运维管理系统</h1>
用户名：<input type="text" id="uname" name="username"><br>
密码：<input type="text" id="pwd" name="password"><br>
<button type="button" id="btn">显示输入内容</button>
<p id="demo"></p> 
<script type="text/javascript">
	$("#btn").click(function () {
		x = $("#uname").val();
		y = $("#pwd").val();
		$(“#demo”).text(x + ‘，’ + y).css("color","red") 
})
</script>

`4.3.获取、设置和删除属性`

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

4.3.1.示例一：

<a href="http://www.ctnrs.com" id="a1">学院官网</a><br>
<button type="button" id="btn">查看CSS属性值</button>
<p id="demo"></p>
<script type="text/javascript">
	$("#btn").click(function () {
		x = $(“#a1”).attr(“href”); //获取属性值
		$(“#demo”).text(x) //将属性值作为内容设置元素
	})
</script>

4.3.2.设置超链接值

<script type="text/javascript">
	$("#btn").click(function () {
		$("#a1").attr("href", "http://www.baidu.com");
	})
</script>

4.3.3.删除超链接属性

<script type="text/javascript">
	$("#btn").click(function () {
		x = $("#a1").removeAttr("href");
	})
</script>

`4.4.添加元素`

• append() 在被选中元素的结尾插入内容
• prepend() 在被选中元素的开头插入内容
• after() 在被选中元素之后插入内容
• beforce() 在被选中元素之前插入内容

示例：

<p>这是一个段落。</p>
<button id="btn1">追加文本</button>
<script type="text/javascript">
	$("#btn1").click(function () {
		$("p").append("这是追加的内容。");
	});
</script>

`4.5.删除元素`

• remove() 删除被选元素及子元素
• empty() 清空被选元素（删除下面所有子元素）

<div style='height: 50px;width: 50px;background-color: red' id="demo"></div>
<button id="btn">删除DIV</button>
<script type="text/javascript">
	$("#btn").click(function () {
		$("#demo").remove();
	})
</script>

`4.6.设置CSS样式`

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

示例：

<body>
    <p id="demo">一句话</p>
    <button type="button" id="btn">按钮</button>
    <script type="text/javascript">
        $("#btn").click(function () {
            $("#demo").css("color", "red")
        })
    </script>
</body>

五、jQuery Ajax

`5.1.背景`

浏览器访问网站一个页面时，Web服务器处理完后会以消息体方式返回浏览器，浏览器自动解析HTML内容。

如果局部有新数据需要更新，需要刷新浏览器重新发起页面请求获取最新数据，如果每次都是通过刷新解决这个问题，势必会给服务器造成负载加重，页面加载缓慢。

`5.2.定义`

Ajax（Asynchronous JavaScript And XML，异步JavaScript和XML），AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。例如在不刷新页面的情况下查询数据、登录验证等

无刷新的好处：
• 减少带宽、服务器负载
• 提高用户体验

`5.3.常用参数`

jQuery Ajax主要使用$.ajax()方法实现，用于向服务端发送HTTP请求。

语法：$.ajax([settings]);

settings 是$.ajax ( )方法的参数列表，用于配置 Ajax 请求的键值对集合，参数如下：
在这里插入图片描述

`5.4.基本语法`

$.ajax({
	type: "POST",
	url: "/ajax_api",
	data: data,
	success: function (result) { // result是返回的json数据
		if(result.code == '0') {
			// 服务器数据处理成功
		} else if(result.code == '1') {
			// 服务器数据处理失败
		}
	},
	error: function () {
		// 访问不了接口或者dataType类型不对
	}
})

`5.5.回调函数`

参数引用一个函数，并将数据作为参数传递给该函数
在这里插入图片描述
jqXHR：一个XMLHttpRequest对象

`5.6.HTTP方法`

向服务器提交数据，服务器根据对应方法操作
在这里插入图片描述

`5.7.案例：提交表单：新增数据`

urls.py:

re_path('^server/$', views.server, name='server'),

views.py:

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

server.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    {% csrf_token %}
    <form action="#" method="post" onclick="return false">  <!--当点击提交按钮时，不向服务端提交数据，只触发Ajax提交-->
        <h2>添加服务器</h2>
        主机名:<input type="text" name="host"><br>
        IP:<input type="text" name="ip"><br>
        <input type="submit" value="提交" id="btn">
    </form>
    <p id="notice"></p>

    <script type="text/javascript">
        $("#btn").click(function () {
            //获取表单的值
            var host = $("input[name='host']").val();
            var ip = $("input[name='ip']").val();
            var csrfmiddlewaretoken = $("input[name='csrfmiddlewaretoken']").val();   //获取csrf的值
            data = {"host": host, "ip": ip, "csrfmiddlewaretoken": csrfmiddlewaretoken}; //封装数据
            console.log(data);
            //以JSON格式提交到服务端
            $.ajax({
                type: "POST",
                url: "{% url 'server' %}",
                data: data,
                success: function (result) {    //result是服务端返回给客户端的数据
                    if (result.code == 0) {
                        $("#notice").text(result.msg).css('color', 'blue')
                    } else if (result.code == 1) {
                        $("#notice").text(result.msg).css('color', 'red')
                    }
                },
                error: function () {
                    $("#notice").text("服务器接口异常").css('color', 'red')
                }
            })
        })
    </script>
</body>
</html>