jQuery

最新推荐文章于 2024-08-27 13:38:21 发布

night_du

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量197

点赞数

分类专栏： JavaWeb 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_44119864/article/details/125262195

版权

JavaWeb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery

定义

jQuery是js的框架，利用了选择器（借鉴了css选择器）查找要操作的节点（dom对象），将dom节点对象封装成jquery对象，调用jQuery提供的方法或者属性操作dom节点

文档地址：https://jquery.cuishifeng.cn/

目的

简化代码
解决兼容性问题

编程步骤

1. 引入jquery.js文件
2. 使用jQuery提供的选择器查找节点
3. 调用jQuery提供的属性和方法操作节点

dom对象与jQuery对象互转

dom->jQuery

$(obj)

jQuery ->dom

$obj.get(0);
$obj.get()[0];
$obj[0]

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        function f1() {
            //原生写法
            let obj = document.getElementById("a1");
            alert(obj.innerHTML);
        }

        //使用jQuery
        function f2() {
            let $obj = $("#a1");
            alert($obj.html());
        }

        //dom对象转成jquery对象 this $(this)
        function f3() {
            let obj = document.getElementById("a1");
            let $obj = $(obj);
            alert($obj.html());
        }

        //jquery对象转成dom对象
        function f4() {
            let $obj = $("#a1");
            //$obj[0]   $obj.get()[0] 这两种方法也可以
            let obj = $obj.get(0);
            alert(obj.innerHTML);
        }
    </script>
</head>
<body>
<a href="javascript:;" onclick="f4();" id="a1">hello jquery</a>
</body>
</html>

选择器

- #id：id选择器
- element：元素选择器
- .class：类选择器
- *：通配选择器
- select 1，select 2，select n：组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        function f1() {
            //修改hello jquery1的字体大小
            $("#d1").css("font-size", "40px");

            //修改hello jquery2和hello jquery2字体大小
            $(".s1").css("font-size", "40px");

            //修改hello jquery4的字形  分类选择器
            $("p").css("font-style", "italic");

            //修改hello jquery4和hello jquery4的字体颜色、字形  组合选择器
            $("#d1,p").css("color", "red").css("font-style", "italic");

            //修改所有的为红色  通配符选择器
            $("*").css("color", "red");
        }
    </script>
</head>
<body>
    <div id="d1">
        <span>hello jquery1</span>
    </div>
    <div class="s1">hello jquery2</div>
    <span class="s1">hello jquery3</span>
    <p>hello jquery4</p>
    <input type="button" value="按钮" onclick="f1();">
</body>
</html>

dom节点数据查看

- html()：等同于innerHTML（加标签）
- text()：获取文本，等同于innerText
- val：获取value属性值
- prop：（“属性名”）；节点的某个属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        function f1() {
            //获取参数
            alert($("#d1").html());  //标签加文本
            alert($("#d1").text());     //文本

            $("#d1").html("hello");  //传参两个都一样
            $("#d1").text("hello");

            $(":text").val("rose");  //获取type属性的值
            $("#id").attr("rose");  //获取节点的属性值(自定义+固有)
            $("#id").prop("rose");  //获取节点的属性值（固有）
        }
    </script>
</head>
<body>
<div id="d1">
    <span>hello jquery</span>
</div>
username:<input name="username" value="jack"/><br>
<select>
    <option value="nj">南京</option>
    <option value="yz">扬州</option>
</select>
<input type="button" value="提交" onclick="f1();">
</body>
</html>

dom节点的操作

let $o = $('<p>***</p>')

- 添加节点
    1. append()：追加
    2. prepend()：在最前面添加
    3. after()：追加兄弟节点
    4. before()：在最前面添加兄弟节点
- 删除节点
    1. remove()[sekector]：删除节点
    2. empty()：清空节点内容
- 复制节点
    1. clone()：复制节点，不复制行为
    2. clone(true)：复制节点和行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        function f1() {
            // let obj = $('<li>item4</li>');
            // $("#u1").append(obj);//最后添加
            // $("#u1").prepend(obj);//最前面添加

            //简写
            // $("#u1").after('<div>hello</div>')//在后面添加兄弟节点
            $("#u1").before('<div>hello</div>')//在前面添加兄弟节点
        }

        function f2() {
            // $("#u1 li:eq(1)").remove();  //删除
            // $("#u1 li:eq(1)").remove("#i2");  //删除指定的节点
            $("#u1 li:eq(1)").empty(); //删除节点的数据，节点依旧存在
        }

        function f3() {
            $("#i2").click(function () {
                alert(1);
            })
            let obj = $("#i2").clone(true); //true带着行为一起复制
            $("#u1").prepend(obj);
        }
    </script>
</head>
<body>
<ul id="u1">
    <li>item1</li>
    <li id="i2">item2</li>
    <li>item3</li>
</ul>
<input type="button" value="插入节点" onclick="f1();">
<input type="button" value="删除节点" onclick="f2();">
<input type="button" value="复制节点" onclick="f3();">
</body>
</html>

样式操作

- 添加样式：`addClass("s1")`
- 删除样式：`removeClass("s1")`
- 切换样式：`toggleClass("s1")`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .s1 {
            color: green;
        }
        .s2 {
            color: red;
        }
    </style>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        //添加样式
        function f4() {
            // $("#d1").css({"font-size": "40px", "color": "red"});
            // $("#d1").addClass("s1");
            $("#d1").attr("class", "s1");
        }

        function f5() {
            $("#d1").removeClass("");//删除所有样式
            $("#d1").removeClass("s1");//删除指定样式
        }
        function f6() {
            $("#d1").toggleClass("s2")//修改样式
        }
    </script>
</head>
<body>
    <div id="d1" class="s1">hello</div>
    <input type="button" value="添加样式" onclick="f4();">
    <input type="button" value="删除样式" onclick="f5();">
    <input type="button" value="修改样式" onclick="f6();">
</body>
</html>

遍历节点

- children()：查找子节点
- find()：查找后代
- next()：下一个兄弟节点
- prev()：//上一个兄弟节点
- siblings()：所有的兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        function f1() {
            let arr = $("#d1").children();  //d1下面所有子节点
            arr.css("color", "red");

            $("#d1").next().css("color", "red");//d1下面第一个兄弟节点
            $("#d1").prev().css("color", "red");//d1上面第一个兄弟节点
            $("#d1").siblings().css("color", "red");//d1所有兄弟节点
            $("#d1").children("span").css("color", "red"); //d1下span子节点
        }
    </script>
</head>
<body>
<p>hello</p>
<div id="d1">
    <div>hello1</div>
    <div>hello2</div>
    <div><span>hello3</span></div>
    <span>hello4</span>
</div>
<p>hello</p>
<input type="button" value="遍历节点" onclick="f1();">
</body>
</html>

事件处理

<input onclick="f1();"/>静态绑定

事件绑定
1. bind（事件类型，回调）；正式的写法
2. click（回调）；简写
事件合成 hover（回调1，回调2）
失焦事件：blur() $("p").blur( function () { alert("Hello World!"); } );

改变事件：change() 数据发送改变时调用

$("input[type='text']").change( function() {
  // 这里可以写些验证代码
});

点击事件：click() $("p").click( function () { $(this).hide(); });

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        //页面加载自动调用该方法
        $(function () {
            //点击事件：当点击时触发
            $("#d1").click(function () {
                alert(1);
            });
            //事件合成事件（鼠标焦点）：改变样式
            $("#d2").hover(function () {
                $(this).css("color", "red");
            }, function () {
                $(this).css("color", "blue");
            });

            //事件合成样式：隐藏、显示
            $("#a1").hover(function () {
                $("#d3").show();
            }, function () {
                $("#d3").hide();
            });
        });
    </script>
</head>
<body>
    <div id="d1">hello</div>
    <div id="d2">路在何方</div>

    <a href="javascript:;" id="a1">如果才能学好java</a>
    <div id="d3" style="display: none">百无一用是书生</div>
</body>
</html>

动画

- show()	hide()	显示/隐藏
- fadeIn()    fadeOut()    节点的透明度实现隐藏/显示
- slideDown()    slideUp()    节点改变高度实现隐藏/显示
- animate()    自定义动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        //页面加载自动调用该方法
        $(function () {
            $("#b1").hover(function () {
                $("#d4").animate({left: '500px', top: '300px'}, 2000);
            }, function () {
                $("#d4").animate({left: '0px', top: '0px'}, 2000);
            });
        });
    </script>
</head>
<body>
    <!--自定义动画-->
    <div id="d4" style="position: relative;background-color: red;width: 50px;height: 50px;"></div>
    <input id="b1" type="button" value="自定义动画"/>
</body>
</html>

each()

元素遍历

以每一个匹配的元素作为上下文来遍历执行，从0开始，直到false结束

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            //遍历
            $("img").each(function (i) {
                //循环体
                this.src = "test" + i + ".png";
            })
        })
    </script>
</head>
<body>
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</body>
</html>

对象、数组遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            //数组遍历
            $.each([5, 7, 4], function (i, n) {
                //i第几个元素，从0开始，n元素值
                alert("Item #" + i + "：" + n);//Item #0：5  Item #1：7  Item #2：4
            });
            //对象遍历
            $.each({name: "jack", lang: "JS"}, function (i, n) {
                alert("Name：" + i + ",Value：" + n);//Name：name,Value：jack  Name：lang,Value：JS
            });
        })
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            //给按钮点击绑定事件
            $("#b1").click(function () {
                let $obj = $("#u1 li");
                alert($obj.length);
                let obj1 = $obj.get(0);//dom对象
                alert(obj1.innerHTML);
                let $obj1 = $obj.eq(0);//jquery对象
                alert($obj.html());
                //获取元素的下标
                alert($obj.index($obj1));
                $obj.each(function (index, obj) {
                    if (index == 0) {
                        $(obj).css("color", "red");
                    } else {
                        $(obj).css("color", "green");
                    }
                });
            });
        });
    </script>
</head>
<body>
<input type="button" id="b1" value="提交">
<ul id="u1">
    <li>1231</li>
    <li>3231</li>
    <li>2313</li>
</ul>
    </body>
</html>

对Ajax的支持

格式

$.ajax({key:value})0

演示

package pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Car {
    private String name;
    private String desc;
}

package controller;

import com.alibaba.fastjson.JSON;
import pojo.Car;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("*.action")
public class CarServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out = resp.getWriter();

        String url = req.getRequestURI();
        url = url.substring(url.lastIndexOf("/"), url.lastIndexOf("."));

        if ("/chooseCar".equals(url)) {
            String CarName = req.getParameter("CarName");

            System.out.println(CarName);
            Car car = null;
            if ("1".equals(CarName)) {
                car = new Car("", "");
            } else if ("2".equals(CarName)) {
                car = new Car("阿斯顿马丁", "买不起");
            } else if ("3".equals(CarName)) {
                car = new Car("玛莎拉蒂", "还是买不起");
            }
            String string = JSON.toJSONString(car);
            out.print(string);
        }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            //下拉框的数据改变事件
            $("#s1").change(function () {
                $.ajax({
                    url: "chooseCar.action",	//servlet地址
                    type: "get",//请求方法
                    data: "CarName=" + this.value,	//下拉框中的数据
                    dataType: "json",	//服务器的返回数据类型
                    //返回成功的业务
                    success: function (data, txt) {		//date：服务器返回的数据  text：状态描述信息
                        console.log(data);
                        console.log(txt);
                        $("#d1").html("描述信息：" + data.name + "\t" + data.desc);
                    },
                    //返回失败的业务
                    error: function (xhr, txt) {	//xhr：Ajax对象  text：状态描述信息
                        console.log(xhr);
                        console.log(txt);
                        alert("系统繁忙");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <select id="s1">
        <option value="1">请选择</option>
        <option value="2">阿斯顿马丁</option>
        <option value="3">玛莎拉蒂</option>
    </select>
    <div id="d1"></div>
</body>
</html>

l-JQuery

一、快速入门

1.1 概述

* jQuery 是一个 JavaScript 库。
* jQuery 极大地简化了 JavaScript 编程。
* jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。
* jQuery 很容易学习。

1.2 为什么使用 jQuery ？

* 目前网络上有大量开源的 JS 代码库, 但是 jQuery 是目前最流行的 JS 代码库，而且提供了大量的扩展。
* 很多大公司都在使用 jQuery， 例如:
    * Google
    * Microsoft
    * IBM
    * Netflix

1.3 jQuery 安装

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：

从 jquery.com 下载 jQuery 库

https://jquery.com/download/
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js

https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js

1.4 开发工具

HBulider

1.5 运行和测试

浏览器

二、JQuery语法

2.1 语法

$(selector).action

$ jq语法必备的一个符号

selector jq查询元素的选择器

action jq执行的操作

2.2 快速入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jq语法</title>
		<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h3 id="title">《元日》</h3>
		<h4 id="author">[作者] 王安石</h4>
		<p class="con-ji" id="con01">爆竹声中一岁除，</p>
		<p class="con-ou" id="con02">春风送暖入屠苏。</p>
		<p class="con-ji" id="con03">千门万户曈曈日，</p>
		<p class="con-ou" id="con04">总把新桃换旧符。</p>
		
		<button type="button" onclick="hideTitle()">隐藏标题</button>
		<button type="button" onclick="showTitle()">显示标题</button>
		
		<button type="button" onclick="hideP()">隐藏p标记</button>
		<button type="button" onclick="showP()">显示p标记</button>
		
		<button type="button" onclick="hideOddP()">隐藏奇数行p标记</button>
		<button type="button" onclick="showOddP()">显示奇数行p标记</button>
		
	</body>
	
	<script type="text/javascript">
		/**
		 * 	$(this).hide() - 隐藏当前元素
			$("p").hide() - 隐藏所有 <p> 元素
			$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
			$("#test").hide() - 隐藏 id="test" 的元素
		 */
		
		// id选择器操作标题
		function hideTitle(){
			$("#title").hide();
		}
		
		function showTitle(){
			$("#title").show();
		}
		
		// 元素选择器操作
		function hideP(){
			$("p").hide();
		}
		
		function showP(){
			$("p").show();
		}
		
		// 通过class操作
		function hideOddP(){
			$(".con-ji").hide();
		}
		
		function showOddP(){
			$(".con-ji").show();
		}
		
	</script>
</html>

2.3 选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jq选择器</title>
		<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" onclick="hideAll()">隐藏所有元素</button>
		<button type="button" onclick="hideConOddP()">隐藏p.con-ji</button>
		<button type="button" onclick="hide1stP()">隐藏第一个p元素</button>
		<button type="button" onclick="hideLastP()">隐藏最后一个p元素</button>
		<button type="button" onclick="get1stLi()">隐藏第一个li标记</button>
		<button type="button" onclick="hide1stLi()">隐藏第一个li标记02</button>
		<button type="button" onclick="hideOddP()">隐藏奇数位p</button>
		<button type="button" onclick="hideEvenP()">隐藏偶数位p</button>
		
		<h3 id="title">水调歌头*明月几时有</h3>
		<p class="con-ji con">明月几时有，把酒问青天。</p>
		<p>不知天上宫阙，今夕是何年。</p>
		<p class="con-ji con">我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</p>
		<p>起舞弄清影，何似在人间。</p>
		
		<hr >
		
		<ul>
			<li>苏洵</li>
			<li>苏辙</li>
			<li>苏轼</li>
			<li>苏小妹</li>
		</ul>
		
		<ul>
			<li>司马防</li>
			<li>司马朗</li>
			<li>司马懿</li>
			<li>司马孚</li>
		</ul>
	</body>
	
	<script type="text/javascript">
		function hideAll(){
			$("*").hide();
		}
		
		function hideConOddP(){
			$("p.con-ji").hide();
		}
		
		function hide1stP(){
			$("p:first").hide();
		}
		
		function hideLastP(){
			$("p:last").hide();
		}
		
		function get1stLi(){
			$("ul li:first").hide();
		}
		
		function hide1stLi(){
			// 所有ul中li的第一个
			$("ul li:first-child").hide();
		}
		
		function hideOddP(){
			$("p:odd").hide();
		}
		
		function hideEvenP(){
			$("p:even").hide();
		}
	</script>
</html>

三、jq事件

3.1 概述

页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
在事件中经常使用术语"触发"（或"激发"）例如： “当您按下按键时触发 keypress 事件”。

3.2 创建JQ事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

3.3 事件案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jq事件</title>
		<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h3 id="title">水调歌头*明月几时有</h3>
		<p class="con-ji con">明月几时有，把酒问青天。</p>
		<p>不知天上宫阙，今夕是何年。</p>
		<p class="con-ji con">我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</p>
		<p>起舞弄清影，何似在人间。</p>
	</body>
	<script type="text/javascript">
		$("#title").click(function(){
			alert("作者:苏轼");
		});
		
		$("#title").mouseover(function(){
			console.log("光标悬浮:" + Math.random());
		});
	</script>
</html>

四、动画效果

4.1 淡入淡出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淡入淡出</title>
		
		<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			#box{
				width: 300px;
				height: 300px;
				background-color: red;
			}
			
			#box02{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
		</style>
		
	</head>
	<body>
		
		<button type="button" onclick="fadeInBox()">淡入</button>
		<button type="button" onclick="fadeOutBox()">淡出</button>
		<button type="button" onclick="fadeToggleBox()">切换淡入淡出</button>
		<button type="button" onclick="fadeInOut()">淡入+淡出</button>
		<button type="button" onclick="fadeToBox()">渐变</button>
		
		<div id="box">
			
		</div>
		
		<div id="box02">
			
		</div>
		
	</body>
	
	<script type="text/javascript">
		/* 
			fadeIn
			fadeOut
		 */
		function fadeInBox(){
			$("#box").fadeIn(2000,function(){
				alert("淡入成功...");
			});
		}
		
		function fadeOutBox(){
			$("#box").fadeOut(2000,function(){
				alert("淡出成功...");
			});
		}
		
		function fadeToggleBox(){
			$("#box").fadeToggle(2000);
		}
		
		function fadeInOut(){
			$("#box").fadeIn(2000).fadeOut(2000);
		}
		
		function fadeToBox(){
			$("#box").fadeTo(2000,0.5);
		}
	</script>
</html>

4.2 滑入滑出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滑动效果</title>
		<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div{
				width: 100px;
				height: 300px;
			}
			
			#box{
				background-color: red;
			}
			
			#box02{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="slideUpBox()">滑入</button>
		<button type="button" onclick="slideDownBox()">滑出</button>
		<button type="button" onclick="slideDownUpBox()">滑入/滑出</button>
		
		<div id="box">
			
		</div>
		<div id="box02">
			
		</div>
	</body>
	
	<script type="text/javascript">
		function slideUpBox(){
			$("#box").slideUp(2000,function(){
				alert("隐藏成功...");
			});
		}
		
		function slideDownBox(){
			$("#box").slideDown(2000,function(){
				alert("显示成功...");
			});
		}
		
		function slideDownUpBox(){
			$("#box").slideToggle(1000);
		}
		
	</script>
</html>

4.3 动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画效果</title>
		<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#box{
				position: relative;
				width: 100px;
				background-color: red;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="startAnimate()">开始动画</button>
		<button type="button" onclick="startAnimateBox()">动画</button>
		
		<button type="button" onclick="stopAnimate()">停止动画</button>
		<button type="button" onclick="stopAnimateBox()">停止All动画</button>
		
		<div id="box">
			
		</div>
	</body>
	
	<script type="text/javascript">
		function startAnimate(){
			$("#box").animate({
				left:"300px",
				top:"300px",
				width:"+=300px",
				height:"300px"
			},2000);
		}
		
		function startAnimateBox(){
			$("#box").animate({
				left:"300px",
				top:"800px",
				width:"300px",
				height:"300px"
			},3000).animate({
				left:"600px",
				top:"0px",
				width:"100px",
				height:"100px"
			},3000).animate({
				left:"900px",
				top:"800px",
				width:"300px",
				height:"300px"
			},3000).animate({
				left:"1200px",
				top:"0px",
				width:"100px",
				height:"100px"
			},3000).animate({
				left:"1500px",
				top:"800px",
				width:"300px",
				height:"300px"
			},3000).animate({
				left:"0px",
				top:"0px",
				width:"100px",
				height:"100px"
			},3000);
		}
		
		function stopAnimate(){
			$("#box").stop();
		}
		
		function stopAnimateBox(){
			$("#box").stop(true);
		}
		
	</script>
</html>

五、操作元素

5.1 捕获和修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取数据</title>
		
		<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<button type="button" onclick="getTitle()">获取标题</button>
		<button type="button" onclick="getCon01()">获取诗词01</button>
		<button type="button" onclick="getCon0103()">获取诗词01+03</button>
		<button type="button" onclick="getCons()">获取All诗词</button>
		<h3 id="title">悯农</h3>
		<h4 id="author">
			作者:<a href="https://baike.baidu.com/item/%E6%9D%8E%E7%BB%85/6908">李绅</a>
		</h4>
		<p id="con01" class="con con-ji">锄禾日当午，</p>
		<p id="con02" class="con con-ou">汗滴禾下土。</p>
		<p id="con03" class="con con-ji">谁知盘中餐，</p>
		<p id="con04" class="con con-ou">粒粒皆辛苦。</p>
		<hr >
		
		<input type="text" name="bookName" id="bookName" value="" placeholder="请输入您喜欢的书名..."/>
		<button type="button" onclick="getBookName()">确定</button>
		
		<input type="text" name="titleCon" id="titleCon" value="" placeholder="请输入新的标题"/>
		<button type="button" onclick="changeTitle()">修改标题</button>
		
		<input type="text" name="authName" id="authName" value="" placeholder="请输入新的标题"/>
		<button type="button" onclick="changeAuthor()">修改作者</button>
	</body>
	
	<script type="text/javascript">
		function getTitle(){
			console.log($("#title").text());
		}
		
		function getCon01(){
			console.log($("#con01").text());
		}
		
		function getCon0103(){
			console.log($(".con-ji").text());
		}
		
		function getCons(){
			console.log($(".con").text());
		}
		
		function getBookName(){
			console.log($("#bookName").val())
		}
		
		function changeTitle(){
			$("#title").text($("#titleCon").val());
		}
		
		function changeAuthor(){
			var $name = $("#authName").val();
			console.log($("#author").html("作者:<a href='https://baike.baidu.com/item/%E6%9D%8E%E7%BB%85/6908'>" + $name + "</a>"));
		}
	</script>
</html>

5.2 添加元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加元素</title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<dl id="sanguo">
			<dd id="caocao">曹操</dd>
			<dd id="caopi">曹丕</dd>
			<dd id="caozhi">曹植</dd>
			<dd id="caochong">曹冲</dd>
		</dl>
		
		<input type="text" name="username" id="username" value="" placeholder="请输入人名..."/>
		<button type="button" onclick="addNameStart()">在头部添加</button>
		<button type="button" onclick="addNameEnd()">在尾部添加</button>
		<button type="button" onclick="addAfterCaoCao()">在曹操后面添加</button>
		<button type="button" onclick="addBeforeCaoCao()">在曹操后面添加</button>
	</body>	
	<script type="text/javascript">
		function addNameStart(){
			var $username = $("#username").val();
			$("#sanguo").prepend("<dd id='caocao'>"+$username+"</dd>");
		}
		
		function addNameEnd(){
			var $username = $("#username").val();
			$("#sanguo").append("<dd id='caocao'>"+$username+"</dd>");
		}
		
		function addAfterCaoCao(){
			var $username = $("#username").val();
			$("#caocao").after("<dd>"+$username+"</dd>");
		}
		
		function addBeforeCaoCao(){
			var $username = $("#username").val();
			$("#caocao").before("<dd>"+$username+"</dd>");
		}
	</script>
</html>

5.3 删除元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除元素</title>
		<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul id="names">
			<li>吴亦凡</li>
			<li>尹相杰</li>
			<li>宁财神</li>
			<li>高虎</li>
		</ul>
			<button type="button" onclick="removeAllEle()">删除全部</button>
			<button type="button" onclick="removeEle()">删除全部子元素</button>
	</body>
	
	<script type="text/javascript">
		
		function removeAllEle(){
			$("#names").remove();
		}
		
		function removeEle(){
			$("#names").empty();
		}
		
	</script>
	
</html>

5.4 添加/删除class属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class添加删除操作</title>
		
		<style type="text/css">
			.small{
				font-size: 12px;
			}
			
			.big{
				font-size:24px ;
			}
			
			.red{
				color: red;
			}
			
			.blue{
				color: blue;
			}
		</style>
		<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			关关雎鸠，在河之洲。窈窕淑女，君子好逑。
			参差荇菜，左右流之。窈窕淑女，寤寐求之。
			求之不得，寤寐思服。悠哉悠哉，辗转反侧。
			参差荇菜，左右采之。窈窕淑女，琴瑟友之。
		-->
		<h3>关雎</h3>
		<p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p>
		<p>参差荇菜，左右流之。窈窕淑女，寤寐求之。</p>
		<p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p>
		<p>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p>
		<button type="button" onclick="bigSize()">变大</button>
		<button type="button" onclick="smallSize()">变小</button>
		<button type="button" onclick="redColor()">红色</button>
		<button type="button" onclick="blueColor()">蓝色</button>
		
		<button type="button" onclick="removeBlueColor()">去除蓝色</button>
		<button type="button" onclick="removeBigSize()">去除大字体</button>
		
		<button type="button" onclick="redBlackColor()">红色/黑色</button>
	</body>
	<script type="text/javascript">
		function bigSize(){
			$("h3,p").addClass("big");
		}
		
		function smallSize(){
			$("h3,p").addClass("small");
		}
		
		function redColor(){
			$("h3,p").addClass("red");
		}
		
		function blueColor(){
			$("h3,p").addClass("blue");
		}
		
		function removeBlueColor(){
			$("h3,p").removeClass("blue");
		}
		
		function removeBigSize(){
			$("h3,p").removeClass("big");
		}
		
		function redBlackColor(){
			$("h3,p").toggleClass("red");
		}
		
	</script>
</html>

5.5 jq尺寸

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jq尺寸</title>
		<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
			
			#box01{
				float: left;
				margin: 10px 20px 40px 80px;
				padding: 80px 40px 20px 10px;
			}
			
			#box02{
				float: left;
			}
			
			#box03{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="box01">
			上邪 - 百度汉语
			作者：佚名
			
			上邪，
			我欲与君相知，
			长命无绝衰。
			山无陵，
			江水为竭。
			冬雷震震，
			夏雨雪。
			天地合，
			乃敢与君绝。
		</div>
			
		<div id="box02">
			
		</div>
		
		<div id="box03">
			
		</div>
		
		<button type="button" onclick="getWidthHeight()">获取元素width和height</button>
		<button type="button" onclick="getInnerWidthHeight()">获取元素innerWidth和innerHeight</button>
		<button type="button" onclick="getOuterWidthHeight()">获取元素outerWidth和outerHeight</button>
	</body>
	
	<script type="text/javascript">
		function getWidthHeight(){
			console.log($("#box01").width());
			console.log($("#box01").height());
		}
		
		function getInnerWidthHeight(){
			console.log($("#box01").innerWidth());
			console.log($("#box01").innerHeight());
		}
		
		function getOuterWidthHeight(){
			console.log($("#box01").outerWidth(true));
			console.log($("#box01").outerHeight(true));
		}
	</script>
</html>

5.6 遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遍历</title>
		
		<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="box">
			<h3>三国演义</h3>
			<ul id="sanguo">
				<li class="wei" id="simayi0">
					<a id="simayi" href="https://baike.baidu.com/item/%E5%8F%B8%E9%A9%AC%E6%87%BF/9367?fr=aladdin">司马懿</a>
				</li>
				<li class="shu">诸葛亮</li>
				<li class="wei">荀彧</li>
				<li class="wei" id="guojia">郭嘉</li>
				<li class="wu">鲁肃</li>
				<li class="wu" id="luxun">陆逊</li>
				<li class="wu" id="zhouyu">周瑜</li>
			</ul>
			
			<h3>西游记</h3>
			<ul id="xiyou">
				<li>奔波儿灞</li>
				<li>奔波儿灞</li>
				<li>金角大王</li>
				<li>银角大王</li>
			</ul>
		</div>
		<button type="button" onclick="getParentOfSiMaYi()">获取司马懿所在元素的上级元素</button>
		<button type="button" onclick="getChildrenOdSanGuo()">获取子级元素</button>
		
		<button type="button" onclick="getGuoJiSilbings()">郭嘉的同胞元素</button>
		<button type="button" onclick="getFirstAndLast()">获取第一个/最后一个元素</button>
		
		<hr >
		
		<input type="text" name="index" id="index" placeholder="请输入元素的索引..." />
		<button type="button" onclick="getEleByIndex()">查询</button>
		
		<hr >
		<input type="text" name="country" id="country" placeholder="请输入要查询的国家" />
		<button type="button" onclick="getEleByCountry()">查询</button>
	</body>
	
	<script type="text/javascript">
		
		function getParentOfSiMaYi(){
			// 获取上一级
			console.log($("#simayi").parent());
			console.log("================");
			// 获取上面所有节点
			console.log($("#simayi").parents());
			console.log("================");
			// 获取指定区间的节点
			console.log($("#simayi").parentsUntil("body"));
		}
		
		function getChildrenOdSanGuo(){
			console.log($("#sanguo").children());
			console.log("======================");
			console.log($("#sanguo").children("li.wei"));
			console.log("======================");
			console.log($("#sanguo").find("*"));
		}
		
		function getGuoJiSilbings(){
			// 获取所有同胞元素
			console.log($("#guojia").siblings());
			console.log("=====================");
			// 获取下一个同胞元素
			console.log($("#guojia").next());
			console.log("=====================");
			// 获取后面的所有同胞元素
			console.log($("#guojia").nextAll());
			console.log("=====================");
			// 获取下面指定区间的同胞元素
			console.log($("#guojia").nextUntil("#luxun"));
			
			console.log("=====================");
			// 获取上一个同胞元素
			console.log($("#guojia").prev());
			console.log("=====================");
			// 获取上面的所有同胞元素
			console.log($("#guojia").prevAll());
			console.log("=====================");
			// 获取指上面定区间的同胞元素
			console.log($("#guojia").prevUntil("#simayi0"));
		}
		
		function getFirstAndLast(){
			console.log($("li").first());
			console.log($("li").last());
		}
		
		// 获取指定索引的元素
		function getEleByIndex(){
			var $index = $("#index").val();
			console.log($("li").eq($index));
		}
		
		function getEleByCountry(){
			var $country = $("#country").val();
			console.log($("li").filter("." + $country));
			console.log("=============");
			console.log($("li").not("." + $country));
			console.log("=============");
		}
		
	</script>
	
</html>

六、JQ的异步请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jq异步请求</title>
		<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" onclick="getData()">发送请求</button>
	</body>
	<script type="text/javascript">
		function getData(){
			$.ajax({
				type:"GET",
				url:"https://www.fastmock.site/mock/cb3a0f8c5e9fef7defbb90f5fffc7781/hero/heroes",
				dataType:"JSON",
				success:function(result){
			        console.log(result.data);
			    }
			});
		}
	</script>
</html>