jQuery入门详解


参考视频: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>

执行效果
在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页