JQuery开发手册

最新推荐文章于 2024-04-17 09:12:42 发布

野生java研究僧

最新推荐文章于 2024-04-17 09:12:42 发布

阅读量4.2k

点赞数 5

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

本文链接：https://blog.csdn.net/m0_46188681/article/details/123945789

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

JQuery开发文档

1. jQuery简介
2.JQuery核心函数
- 2.1 选择器
3.JQuery工具
4.Ajax
5.JQuery DOM基本操作
6.动态操作DOM
7.事件操作
8.动画
9.扩展

1. jQuery简介

1.1jQuery简介

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！

1.2 jQuery官网

官方地址：https://jquery.com/

官方文档：https://api.jquery.com/

1.3、jQuery版本介绍

1.x
兼容老版本IE
文件较大，但兼容性最好
2.x
部分IE8及以下版本不支持
文件较小，执行效率更高
3.x
完全不再支持IE8及以下版本
提供了一些新的API
提供不包含AJAX/动画API的版本

1.4 Query引入方式

本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用


<head>
	<script src="../js/jquery-3.4.1.min.js"></script>
</head>

CDN引入：使用远程CDN资源库在线引入，避免了文件下载（本教程所采用）

<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>

JQuery 页面加载完成后执行事件

// 方式1
$(document).ready(function(){
  //code
})

// 方式2
jQuery(document).ready(function(){
  //code
})

// 方式3
window.οnlοad=function(){
  //code
}

1.5 JQuery快速使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div id="app">
			hello world
		</div>
	</body>
	<script type="text/javascript">
		// code
		$(function(){
			$("#app").css({"color":"red"})
		})
	</script>
</html>

1.6 jQuery两把利器

jQuery两把利器分别是：

jQuery核心函数：即： $() 或 jQuery()，jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用，且传递的参数类型不同/格式不同，功能就完全不同，也可作为对象调用其定义好的方法，此时 $ 就是一个工具对象。
jQuery核心对象：即执行jQuery核心函数返回的对象，jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom，调用jQuery对象的任何方法后返回的还是当前jQuery对象。

1.7 html字符串转为Jquery或Dom对象

1、原html字符串如下：

var htmlText = '<div id="demo"><span class="sonSpan"></span></div>'；

2、下面使用Jquery库将htmlText 字符串变量转为Jquery对象。

// 就是htmlText 字符串转为了一个Jquery对象
$(htmlText)

3、将该Jquery对象返回元素内容：

console.log($(htmlText).html())

输出：

<span class="sonSpan"></span>

说明了：$(htmlText)Jquery对象代表的是最外层的html元素div。

4、将Jquery对象和DOM对象之间互转，代码如下：

var element= $(htmlText).get(0) //element就是一个dom对象
var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。

2.JQuery核心函数

2.1 选择器

2.1.1 id选择器

id选择器：根据id选择元素

需求选中id为app的元素并且为其添加红色字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div id="app">
			hello world
		</div>
		<div id="content">
			hello world
		</div>
	</body>
	<script type="text/javascript">
		// code
		$(function(){
			$("#app").css({"color":"red"})
		})
	</script>
</html>

2.1.2 标签选择器

标签选择器：根据标签名称选择元素

需求：选中所有的div元素，为其添加红色字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div id="app">
			hello world1
		</div>
		<div id="content">
			hello world2
		</div>
		<p>hello world3</p>
	</body>
	<script type="text/javascript">
		// code
		$(function(){
			$("div").css({"color":"red"})
		})
	</script>
</html>

2.1.3 class选择器

class选择器：根据class选择元素

需求：选中class为content的元素，为其添加红色字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div class="content">
			hello world1
		</div>
		<div class="content">
			hello world2
		</div>
		<div class="foot">
			hello world3
		</div>
	</body>
	<script type="text/javascript">
		// code
		$(function(){
			$(".content").css({"color":"red"})
		})
	</script>
</html>

2.1.4 通配符选择器

通配符选择器：选择页面中所有的元素

需求：给页面所有的元素都添加上绿色字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div class="content">
			hello world1
		</div>
		<div class="content">
			hello world2
		</div>
		<p> hello world3</p>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("*").css({
				"color": "green"
			})
		})
	</script>
</html>

2.1.5 并集选择器

并集选择器: 同时选择多个元素，也可以通过别的方式进行并集选择，例如id，class等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div class="content">
			hello world1
		</div>
		<div class="content">
			hello world2
		</div>
		<p> hello world3</p>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("div,p").css({
				"color": "red"
			})
		})
	</script>
</html>

2.1.6 交集选择器

交集选择器：从多个元素中，选择有共同特点的元素

需求：选择div中.class为app的所有元素，添加红色字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div class="app">
			hello world1
		</div>
		<div class="app">
			hello world2
		</div>
		<p> hello world3</p>
		<div class="content">
			hello world2
		</div>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
            // 如果选择的是id 就是：$("div#app")
			$("div.app").css({
				"color": "red"
			})
		})
	</script>
</html>

2.1.7 子代选择器

子代选择器：选择元素后面的子元素，必须是紧挨着父元素的子元素，不能是孙子元素

需求：选中ul 所有的p元素，字体设置为红色，li里面的p元素没有被选中，因为他不是ul元素的亲儿子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
	<ul>
		<li><p>hello world1</p></li>
		<li><p>hello world2</p></li>
		<li><p>hello world3</p></li>
		<p>hello world4</p>
	</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("ul>p").css({
				"color": "red"
			})
		})
	</script>
</html>

2.1.8 后代选择器

后代选择器：选中指定元素中的所有子元素，可以是深层嵌套，不像是子代选择器，只能选中亲儿子，后代选择器可以是孙子元素，以及更深层次的嵌套。

需求：选中ul中素有的p元素，为其设置红色字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
	<ul>
		<li><p>hello world1</p></li>
		<li><p>hello world2</p></li>
		<li><p>hello world3</p></li>
		<p>hello world4</p>
	</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("ul p").css({
				"color": "red"
			})
		})
	</script>
</html>

2.1.9 兄弟选择器

兄弟选择器：选中指定元素后的兄弟元素，必须紧挨着的，中间隔一个元素都不行

需求：选中ul中的li元素的兄弟元素p，为其设置红色字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
	<ul>
		<li><p>hello world1</p></li>
		<li><p>hello world2</p></li>
		<li><p>hello world3</p></li>
		<p>hello world4</p>
	</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("ul>li+p").css({
				"color": "red"
			})
		})
	</script>
</html>

2.1.10过滤选择器

1.基本筛选器(even)：选中下标为偶数的行

需求：选中ul里面的li下标为偶数的行，字体颜色设置为红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>
				<p>hello world1</p>
			</li>
			<li>
				<p>hello world2</p>
			</li>
			<li>
				<p>hello world3</p>
			</li>
			<li>
				<p>hello world4</p>
			</li>
			<li>
				<p>hello world5</p>
			</li>

		</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("ul>li:even").css({
				"color": "red"
			})
		})
	</script>
</html>

2.基本筛选器(even)：选中下标为奇数的行

需求：选中ul里面的li下标为奇数的行，字体颜色设置为红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>
				<p>hello world1</p>
			</li>
			<li>
				<p>hello world2</p>
			</li>
			<li>
				<p>hello world3</p>
			</li>
			<li>
				<p>hello world4</p>
			</li>
			<li>
				<p>hello world5</p>
			</li>

		</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("ul>li:odd").css({
				"color": "red"
			})
		})
	</script>
</html>

3.基本筛选器(first)：选中众多列表项中的第一一项

需求：选中ul里面的li下第一行，字体颜色设置为红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>
				<p>hello world1</p>
			</li>
			<li>
				<p>hello world2</p>
			</li>
			<li>
				<p>hello world3</p>
			</li>
			<li>
				<p>hello world4</p>
			</li>
			<li>
				<p>hello world5</p>
			</li>

		</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("ul>li:first").css({
				"color": "red"
			})
		})
	</script>
</html>

4.基本筛选器(last)：选中众多列表项中的最后一项

需求：选中ul里面的li下最后行，字体颜色设置为红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>
				<p>hello world1</p>
			</li>
			<li>
				<p>hello world2</p>
			</li>
			<li>
				<p>hello world3</p>
			</li>
			<li>
				<p>hello world4</p>
			</li>
			<li>
				<p>hello world5</p>
			</li>

		</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("ul>li:last").css({
				"color": "red"
			})
		})
	</script>
</html>

5.基本筛选器 lt(index)：选中列表项中小于于指定索引的元素【索引从0开始】

需求：选中ul里面的li下索引值小于2的元素，字体颜色设置为红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>
				<p>hello world1</p>
			</li>
			<li>
				<p>hello world2</p>
			</li>
			<li>
				<p>hello world3</p>
			</li>
			<li>
				<p>hello world4</p>
			</li>
			<li>
				<p>hello world5</p>
			</li>

		</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("ul>li:lt(2)").css({
				"color": "red"
			})
		})
	</script>
</html>

6.基本筛选器 gt(index)：选中列表项中大于指定索引的元素【索引从0开始】

需求：选中ul里面的li下索引值大于2的元素，字体颜色设置为红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>
				<p>hello world1</p>
			</li>
			<li>
				<p>hello world2</p>
			</li>
			<li>
				<p>hello world3</p>
			</li>
			<li>
				<p>hello world4</p>
			</li>
			<li>
				<p>hello world5</p>
			</li>

		</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("ul>li:gt(2)").css({
				"color": "red"
			})
		})
	</script>
</html>

6.基本筛选器 eq(index)：选中列表项中指定索引的元素【索引从0开始】

需求：选中ul里面的li下索引值为2的元素，字体颜色设置为红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>
				<p>hello world1</p>
			</li>
			<li>
				<p>hello world2</p>
			</li>
			<li>
				<p>hello world3</p>
			</li>
			<li>
				<p>hello world4</p>
			</li>
			<li>
				<p>hello world5</p>
			</li>

		</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("ul>li:eq(2)").css({
				"color": "red"
			})
		})
	</script>
</html>

**7.基本筛选器 contains(content)：选中列表项中包含此内容的元素（可以是部分内容模糊匹配） **

需求：选中ul里面的li下内容中有 world5 的元素，字体颜色设置为红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>
				<p>hello world1</p>
			</li>
			<li>
				<p>hello world2</p>
			</li>
			<li>
				<p>hello world3</p>
			</li>
			<li>
				<p>hello world4</p>
			</li>
			<li>
				<p>hello world5</p>
			</li>

		</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("ul>li:contains(world5)").css({
				"color": "red"
			})
		})
	</script>
</html>

**7.基本筛选器 has(tag)：选中列表项中包含此标签的元素 **

需求：选中ul里面的li下内容中所有 p标签的元素，字体颜色设置为红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>
				<span>hello world1</span>
			</li>
			<li>
				<p>hello world2</p>
			</li>
			<li>
				<p>hello world3</p>
			</li>
			<li>
				<p>hello world4</p>
			</li>
			<li>
				<span>hello world5</span>
			</li>
		</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("ul>li:has(p)").css({
				"color": "red"
			})
		})
	</script>
</html>

**7.基本筛选器 empty ：选中列表项中内容为空的元素 **

需求：选中ul里面的li内容为空的元素，背景颜色设置为红色【注意点：如果里面有空格也会被认为不为空】

同理： parent 表示不为空

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>
				<span>hello world1</span>
			</li>
			<li>
				<p>hello world2</p>
			</li>
			<li></li>
			<li>
				<p>hello world4</p>
			</li>
			<li>
				<span>hello world5</span>
			</li>
		</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("ul>li:empty").css({
				"background": "red"
			})
		})
	</script>
</html>

**7.属性筛选器：选中有指定属性的元素 **

需求：选择ul里面的li元素有data-message的元素，设置红色背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li >
				<span>hello world1</span>
			</li>
			<li data-message>
				<p>hello world2</p>
			</li>
			<li>
				<p>hello world3</p>
			</li>
			<li>
				<p>hello world4</p>
			</li>
			<li data-message>
				<span>hello world5</span>
			</li>
		</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("[data-message]").css({
				"background": "red"
			})
		})
	</script>
</html>

还可以选择指定属性的元素，例如我现在增加属性值，我需要选择中属性值为：active的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li >
				<span>hello world1</span>
			</li>
			<li data-message="active">
				<p>hello world2</p>
			</li>
			<li>
				<p>hello world3</p>
			</li>
			<li>
				<p>hello world4</p>
			</li>
			<li data-message="noActive">
				<span>hello world5</span>
			</li>
		</ul>
	</body>
	<script type="text/javascript">
		// code
		$(function() {
			$("[data-message='active']").css({
				"background": "red"
			})
		})
	</script>
</html>

高级过滤：

[data-message ^='e'] // data-message的值以 e开始
[data-message $='e'] // data-message的值以 e结束
[data-message *='e'] // data-message的值以 包含有e
[data-message !='e'] // data-message的值以 没有e

find: 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

描述：从所有的段落开始，进一步搜索下面的span元素。与$(“p span”)相同。

$("p").find("span")

8.可见性筛选器

让隐藏的元素显示出来

$('p:hidden').css('display', 'block');

让显示的元素隐藏起来

$('p:visible').css('display', 'none');

2.1.11 表单选择器

需求描述：选中表单中的文本框、密码框、文件框、按钮、提交按钮、重置按钮等，设置其背景为红色

# 表单元素选择器
(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button

$(":text") 选择所有的text input元素

$(":password") 选择所有的password input元素

$(":radio") 选择所有的radio input元素

$(":checkbox") 选择所有的checkbox input元素

$(":submit") 选择所有的submit input元素

$(":image") 选择所有的image input元素

$(":reset") 选择所有的reset input元素

$(":button") 选择所有的button input元素

$(":file") 选择所有的file input元素

$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域

# 表单元素过滤选择器：

$(":enabled") 选择所有的可操作的表单元素

$(":focus") 选择所有的获得焦点的表单元素

$(":disabled") 选择所有的不可操作的表单元素

$(":checked") 选择所有的被checked的表单元素

$("select option:selected") 选择所有的select 的子元素中被selected的元素

#获取input输入框中的值
<input id="id" name="username" type="text" value="admin"  >
console.log($("input[name='username']").val());

3.JQuery工具

3.1 $.each方法

方法描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1，其他对象通过其属性名进行迭代。

var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
$.each(arr, function (index, element) {
    console.log(index, element);
});

需求：遍历 ul 里面的li元素得到里面的文本值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
<p id="app"></p>
<ul>
	<li data-message>hello world 1</li>
	<li data-message>hello world 2</li>
	<li data-message>hello world 3</li>
	<li data-message>hello world 4</li>
	<li data-message>hello world 5</li>
</ul>

	</body>
	<script type="text/javascript">
	

$("ul>li").each(function(index,item){
	// 此处的this指向的是当前遍历的元素
	// 将其转换为Jquery对象
	console.log($(item).text())
 });
	</script>
</html>

给定一个对象，遍历对象的属性,并且将其属性名改为大写

	<script type="text/javascript">
		
		var obj = {
			name: 'admin',
			age: 28,
			email: "admin@qq.com",
			speak: function() {}
		};
		// 遍历这个对象，并且把属性名称改为大写
		$.each(obj, function(key, value) {
			obj[key.toString().toUpperCase()] =value;
			delete obj[obj]
		});
		console.log(obj)
	</script>

3.2 $.trim方法

方法描述：去掉字符串起始和结尾的空格。

	<script type="text/javascript">
		var str = '    hello world    ';
		console.log("未去除空格之前：", str.length)
		console.log("去除空格之后：", $.trim(str).length)
	</script>

3.3 $.isArray方法

方法描述：用来测试指定对象是否为一个数组。

需求描述：给定一个对象，输出该对象是不是数组类型

var arr = [7, 23, 32];
console.log($.isArray(arr));

3.4 $.isFunction方法

方法描述：用来测试指定对象是否为一个函数。

	<script type="text/javascript">
		function add(){
		}
		console.log($.isFunction(add))
	</script>

3.5 $.toArray方法

把jQuery集合中所有DOM元素恢复成一个数组。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<p id="app"></p>
		<ul>
			<li data-message>hello world 1</li>
			<li data-message>hello world 2</li>
			<li data-message>hello world 3</li>
			<li data-message>hello world 4</li>
			<li data-message>hello world 5</li>
		</ul>

	</body>
	<script type="text/javascript">
		var liList = $("ul>li").toArray()
	     liList.forEach((item,index,slef)=>{
			 console.log($(item).text())
		 });
	</script>
</html>

4.Ajax

$.ajax

需求描述：执行一个异步的HTTP 请求，从服务器加载数据。

$.get方法和 $. p o s t 方法我就不演示了，只演示一个$ .Ajax，因为 $.Ajax 是比较强大的包含了 $.get方法和 $.post方法

    $.ajax({
        url: "/user/getUserList.mvc",
        type: "GET", // 请求方式
        data: {"username":"admin"}, // 请求携带的数据
        contentType: "'application/json;charset=utf-8'", // 请求内容数据格式
        dataType: "json", // 请求传递的数据类型
        async:true, // 异步请求 默认是true 
        cache:true,// 要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。在使用ajax进行文件上传的时候需要将其设为false
        timeout:10,
        success: function(result) { // 请求成功执行的函数

        },
        error:function (error) { // 请求出错调用的函数
            console.log(error,"调用出错")
        },
        beforeSend:function (XMLHttpRequest) { // ajax调用之前

        },
        complete:function (XMLHttpRequest, textStatus) { // ajax调用完成，失败和成功都会调用

        },
        dataFilter:function (data, type) { // 对ajax返回的原始数据做处理

        }
    })

ajax全局函数

//  Ajax请求完成时执行的函数
ajaxComplete(callback)

// Ajax 请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递
ajaxError(callback)

// Ajax请求发送前执行的函数
ajaxSend(callback)

// Ajax 请求成功时执行的函数
ajaxSuccess(callback)

$Ajax参数解释

1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6.data:
要求为 Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo: [“bar1”,“bar2”]}转换为&foo=bar1&foo=bar2。

7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

8.beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
9.complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}

10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数 }

response： 包含来自请求的结果数据
status： 包含请求的状态（“success”, “notmodified”, “error”, “timeout” 或 “parsererror”）
xhr ： 包含 XMLHttpRequest 对象，可用xhr.status获取状态码

11.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}

12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}

14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}

15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:‘onJsonPLoad’}会导致将"onJsonPLoad=?"传给服务器。

18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。

20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

$.Ajax文件和表单数据一起上传

  	var formData = new FormData(document.querySelector("#uploadForm")); // from标签的id
    formData.append("files", $("#file1")[0].files[0]);
    // 表单所有的数据都在  formData 中，也可以调用 append()手动添加需要提交的数据
    formData.append("fileName", "test.png");
$.ajax({
         type:'POST',
         url:Feng.ctxPath+"/consult/add",
         data:formData,
         processData : false, // 告诉jQuery不要去处理发送的数据
         contentType : false, // 告诉jQuery不要去设置Content-Type请求头
         dataType:"json",
         mimeType:"multipart/form-data",
         success:function(data){
                if(200==data.code){
                    Feng.success("保存成功!");
                     window.parent.Consult.table.refresh();
                     ConInfoDlg.close();
                }else{
                    Feng.error("保存失败!"+data.message);
                }
            }
     });

5.JQuery DOM基本操作

5.1 属性操作

**attr(): ** 专门操作属性值为非布尔值的属性，该方法读写一体。

案例：点击按钮切换图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<img id="headImg" src="../img/bj2.jpg">

		<button id="opt"> 点击切换图片</button>

	</body>
	<script type="text/javascript">
		// 获取属性值 jquery对象.("属性名")
		let headImgSrc = $("#headImg").attr("src")
		console.log(headImgSrc)

		let flag = 1;
		$('#opt').click(function() {
			if (flag == 1) {
				// 设置属性值 jquery对象.("属性名","属性值")
				$("#headImg").attr("src", "../img/bj1.png")
				flag = 2
			} else if (flag == 2) {
				// 设置属性值 jquery对象.("属性名","属性值")
				$("#headImg").attr("src", "../img/bj2.jpg")
				flag = 1
			}
		});
	</script>
</html>

5.2 设置样式

css() :给dom元素设置样式，如果是-用驼峰的方式替换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
	<dv id="app"> hello world </dv>

	</body>
	<script type="text/javascript">
		$("#app").css({"fontSize":"50px","color":"red"})
	</script>
</html>

5.3 addClass

添加指定class到元素上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<style type="text/css">
			.titleCotent {
				color: crimson;
				background-color: aqua;
				font-size: 50px;
			}
		</style>
		<div> hello world </div>
		<button type="button" id="app">添加样式</button>
	</body>
	<script type="text/javascript">
		$('#app').click(function() {
			$('div').addClass('titleCotent');	
		})
	</script>
</html>

5.4 removeClass

从指定元素上移除掉该calss

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<style type="text/css">
			.titleCotent {
				color: crimson;
				background-color: aqua;
				font-size: 50px;
			}
		</style>
		<div class="titleCotent"> hello world </div>
		<button type="button" id="app">移除样式</button>
	</body>
	<script type="text/javascript">
		$('#app').click(function() {
			$('div').removeClass('titleCotent');
			
		})
	</script>
</html>

5.5 hasClass

判断某个元素上是否有该class，有就返回true

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<style type="text/css">
			.titleCotent {
				color: crimson;
				background-color: aqua;
				font-size: 50px;
			}
		</style>
		<div class="titleCotent"> hello world </div>
		<button type="button" id="app">是否有titleCotent</button>
	</body>
	<script type="text/javascript">
		$('#app').click(function() {
			console.log($('div').hasClass('titleCotent'))
		})
	</script>
</html>

5.6 toggleClass

为匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在。如果有就移除该class没有就添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<style type="text/css">
			.titleCotent {
				color: crimson;
				background-color: aqua;
				font-size: 50px;
			}
		</style>
		<div class="titleCotent"> hello world </div>
		<button type="button" id="app">切换样式</button>
	</body>
	<script type="text/javascript">
		$('#app').click(function() {
			$('div').toggleClass('titleCotent')
		})
	</script>
</html>

5.7 元素尺寸的操作

width(): 获取内容元素width的值

height(): 获取内容元素height的值。

innerWidth(): 获取内容元素width+padding的值。

nnerHeight()：获取内容元素height+padding的值。

outerWidth(false/true): 获取内容元素width+padding+border的值，如果是true再加上margin的值。

outerHeight(false/true)，获取内容元素height+padding+border的值，如果是true再加上margin的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<style type="text/css">
		.box{
		    margin: 30px;
		    padding: 20px;
		    border: 10px;
		    width: 100px;
		    height: 100px;
		    background: coral;
		}
		</style>
	<div class="box"></div>

	</body>
	<script type="text/javascript">
	var $box = $('.box');
	console.log($box.width(), $box.height());// 100 100
	console.log($box.innerWidth(), $box.innerHeight());// 140 140
	console.log($box.outerWidth(), $box.outerHeight());// 160 160
	console.log($box.outerWidth(true), $box.outerHeight(true));// 220 220
	
	</script>
</html>

5.8 位置操作

1.offset()：相对页面左上角的坐标。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<style type="text/css">
			.box {
				width: 100px;
				height: 100px;
				background: coral;
			}
		</style>
		<div class="box"></div>
	</body>
	<script type="text/javascript">
		var offset = $('.box').offset();
		console.log(offset.left, offset.top);
	</script>
</html>

2.position() ：相对于父元素左上角的坐标。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<style type="text/css">
		.box-container {
		    width: 300px;
		    height: 300px;
		    background: pink;
		    position: absolute;
		    left: 20px;
		    top: 20px;
		}
		
		.box {
		    width: 100px;
		    height: 100px;
		    background: coral;
		    position: absolute;
		    left: 20px;
		    top: 20px;
		}

		</style>
	<div class="box-container">
	    <div class="box"></div>
	</div>

	</body>
	<script type="text/javascript">
	var offset = $('.box').position();
	console.log(offset.left, offset.top);

	</script>
</html>

3. scrollLeft(): 读取/设置滚动条的X坐标，该方法读写合一

读取页面滚动条的Y坐标(兼容chrome和IE)

var scrollLeft = $(document.body).scrollLeft()+$(document.documentElement).scrollLeft();

设置页面滚动条滚动到指定位置(兼容chrome和IE)

$('body,html').scrollLeft(60);

需求描述：设置页面的宽度为2000px，设置滚动条的X轴坐标为300px，要求兼容各种浏览器

$('body').css('width', '2000px');
$('html,body').scrollLeft(300);

4. scrollTop(): 读取/设置滚动条的Y坐标，该方法读写合一

读取页面滚动条的Y坐标(兼容chrome和IE)

var scrollTop = $(document.body).scrollTop()+$(document.documentElement).scrollTop();

设置页面滚动条滚动到指定位置(兼容chrome和IE)

$('body,html').scrollTop(60);

需求描述：设置页面的高度为2000px，设置滚动条的Y轴坐标为300px，要求兼容各种浏览器

$('body').css('height', '2000px');
$('html,body').scrollTop(300);

6.动态操作DOM

6.1 获取和设置标签文本值

text() ：设置/获取元素的文本内容，该方法读写合一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>

		<div> hello world</div>
		<button id="app" type="button">替换div文本值</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
			// 获取文本值
			console.log($("div").text())
			// 替换文本值
			$("div").text("我是替换后的文本值")
		})
	</script>
</html>

6.2 获取元素的html

html()：设置/获取元素的html内容，该方法读写合一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>

		<div><p> hello world</p></div> 
		<button id="app" type="button">替换div文本值</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
			// 获取元素的html内容
			console.log($("div").html())
			// 设置元素的html内容
			$("div").html("<span>我是新来的</span>")
		})
	</script>
</html>

6.3 append()

方法描述：向当前匹配的所有元素内部的最后面插入指定内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>

		<ul>
			<li>我是列表项1</li>
			<li>我是列表项2</li>
		</ul>

		<button id="app" type="button">添加li</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
		
			// 在ul的最后添加一个 li元素
			$("ul").append("<li>我是新来的</li>")
		})
	</script>
</html>

6.4 appendTo()

方法描述：将指定的内容追加到当前匹配的所有元素的最后面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>

		<ul>
			<li>我是列表项1</li>
			<li>我是列表项2</li>
		</ul>

		<button id="app" type="button">添加li</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
		var last = '<li>我是新来的</li>';
		// 在ul的最后添加一个 li元素
		$(last).appendTo($("ul"))
		})
	</script>
</html>

6.5 prepend()

方法描述：向当前匹配的所有元素内部的最前面插入指定内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>

		<ul>
			<li>我是列表项1</li>
			<li>我是列表项2</li>
		</ul>

		<button id="app" type="button">添加li</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
		var last = '<li>我是新来的</li>';
		// 在ul的最后添加一个 li元素
		$('ul').prepend($(last))
		})
	</script>
</html>

6.6 prependTo

方法描述：将指定的内容追加到当前匹配的所有元素的最前面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>

		<ul>
			<li>我是列表项1</li>
			<li>我是列表项2</li>
		</ul>

		<button id="app" type="button">添加li</button>
	</body>
	<script type="text/javascript">
				var count = 0
		$("#app").click(() => {
			var first = '<li>我是新来的'+(count+=1)+'</li>';
			$(first).prependTo($('ul'));

		})
	</script>
</html>

6.7 after()

方法描述：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>

		<div id="content">我是div</div>

		<button id="app" type="button">添加li</button>
	</body>
	<script type="text/javascript">
		var count = 0
		$("#app").click(() => {
			var after = '<div>我是新来的div- '+(count+=1)+'</div>';
			$('#content').after(after);
			after = null;
		})
	</script>
</html>

6.8 before()

法描述：在匹配元素集合中的每个元素前边插入参数所指定的内容，作为其兄弟节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>

		<div id="content">我是div</div>

		<button id="app" type="button">添加li</button>
	</body>
	<script type="text/javascript">
		var count = 0
		$("#app").click(() => {
			var after = '<div>我是新来的div- '+(count+=1)+'</div>';
			$('#content').before(after);
			after = null;
		})
	</script>
</html>

6.9 empty()

方法描述：删除所有匹配元素的子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>

	<ul>
	    <li>列表项1</li>
	    <p>我是段落1</p>
	    <li>列表项2</li>
	    <p>我是段落2</p>
	    <li>列表项3</li>
	</ul>


		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		var count = 0
		// 移除 ul里面所有的p元素
		$("#app").click(() => {
			$('ul>p').empty();
		})
	</script>
</html>

6.10 remove()

方法描述：删除所有匹配的元素。注意：同时移除元素上的事件及 jQuery 数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>

	<ul>
	    <li>列表项1</li>
	    <p>我是段落1</p>
	    <li>列表项2</li>
	    <p>我是段落2</p>
	    <li>列表项3</li>
	</ul>


		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		var count = 0
		// 移除 ul里面所有的p元素
		$("#app").click(() => {
			$('ul>p').remove();
		})
	</script>
</html>

empty()是只移除了指定元素中的所有子节点的文本内容，仍保留其在dom中所占的位置，emove([expr])则是把其从dom中删除，而不会保留其所占的位置。

6.11 replaceWith()

方法介绍：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>

	<ul>
	    <li>列表项1</li>
	    <p>我是段落1</p>
	    <li>列表项2</li>
	    <p>我是段落2</p>
	    <li>列表项3</li>
	</ul>


		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		var count = 0
        // 移除 ul里面所有的p元素
		$("#app").click(() => {
			$('ul>p').replaceWith('<h1>我是新来的标题</h1>');
		})
	</script>
</html>

6.12 replaceAll()

方法介绍：.replaceAll()和.replaceWith()功能类似，但是目标和源相反。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>

	<ul>
	    <li>列表项1</li>
	    <p>我是段落1</p>
	    <li>列表项2</li>
	    <p>我是段落2</p>
	    <li>列表项3</li>
	</ul>


		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		var count = 0
		$("#app").click(() => {
			$('<h1>我是新来的标题</h1>').replaceAll($('ul>p'));
		})
	</script>
</html>

6.13 clone()

方法描述：创建一个匹配的元素集合的深度拷贝副本。如果传入一个true，则表示是否会复制元素上的事件处理函数，从jQuery 1.4开始，元素数据也会被复制。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>

		<ul>
			<li><input type="" name="" id="" value="1" /></li>
			<li><input type="" name="" id="" value="2" /></li>
			<li><input type="" name="" id="" value="3" /></li>
		</ul>
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">

		$("#app").click(() => {
			var ul = $('ul').clone();
			$('body').append(ul);
		})
	</script>
</html>

6.14 parent（）

选中当前元素的父元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>账号：<input type="" name="" id="a" value="1" /></li>
			<li>密码：<input type="" name="" id="b" value="2" /></li>
			<li>年龄：<input type="" name="" id="c" value="3" /></li>
		</ul>
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
		console.log( $("#a").parent().parent().css({"color":"red"}))
		})
	</script>
</html>

6.15 children()

方法描述：获取集合中每个匹配元素的子元素，可以提供一个可选的选择器来进行筛选。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>账号：<input type="" name="" id="a" value="1" /></li>
			<li>密码：<input type="" name="" id="b" value="2" /></li>
			<li>年龄：<input type="" name="" id="c" value="3" /></li>
		</ul>
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
		console.log( $("ul").children().css({"color":"red"}))
		})
	</script>
</html>

6.16 prev()

方法描述：获取集合中每个匹配元素紧邻的前一个兄弟元素，可以提供一个可选的选择器来进行筛选。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li id="a">账号：<input type="" name=""  value="1" /> </li>
			<li id="b">密码：<input type="" name=""  value="2" /> </li>
			<li id="c">年龄：<input type="" name=""  value="3" /> </li>
		</ul>
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
			console.log($("#b").prev().html().toString())
		})
	</script>
</html>

6.17 prevAll()

方法描述：获得集合中每个匹配元素的所有前面的兄弟元素，可以提供一个可选的选择器来进行筛选。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li id="a">账号：<input type="" name=""  value="1" /> </li>
			<li id="b">密码：<input type="" name=""  value="2" /> </li>
			<li id="c">年龄：<input type="" name=""  value="3" /> </li>
		</ul>
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
			console.log($("#c").prevAll()[0])
			console.log($("#c").prevAll()[1])
		})
	</script>
</html>

6.18 next()

方法描述：获取集合中每个匹配元素紧邻的后一个兄弟元素，可以提供一个可选的选择器来进行筛选。 nextAll():是获取他后面的全部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li id="a">账号：<input type="" name=""  value="1" /> </li>
			<li id="b">密码：<input type="" name=""  value="2" /> </li>
			<li id="c">年龄：<input type="" name=""  value="3" /> </li>
		</ul>
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
			console.log($("#a").next()[0])
		})
	</script>
</html>

6.19 筛选操作

first

方法描述：获取匹配元素集合中第一个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li id="a">账号：<input type="" name=""  value="1" /> </li>
			<li id="b">密码：<input type="" name=""  value="2" /> </li>
			<li id="c">年龄：<input type="" name=""  value="3" /> </li>
		</ul>
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
			$('ul>li').first().css('background', 'red');
		})
	</script>
</html>

eq

方法描述：获取匹配元素集合中指定位置索引的一个元素。索引从0开始

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li id="a">账号：<input type="" name=""  value="1" /> </li>
			<li id="b">密码：<input type="" name=""  value="2" /> </li>
			<li id="c">年龄：<input type="" name=""  value="3" /> </li>
		</ul>
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
			$('ul>li').eq(2).css('background', 'red');
		})
	</script>
</html>

not()

方法描述：从匹配的元素集合中移除指定的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li id="a">账号：<input type="" name=""  value="1" /> </li>
			<li id="b">密码：<input type="" name=""  value="2" /> </li>
			<li id="c">年龄：<input type="" name=""  value="3" /> </li>
		</ul>
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
			var liUsername = $('ul>li').eq(0);
			$('ul>li').not(liUsername).css('background', 'red');
		})
	</script>
</html>

filter()

方法描述：筛选元素集合中匹配表达式或通过传递函数测试的元素集合。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li id="a">账号：<input type="" name=""  value="1" /> </li>
			<li id="b">密码：<input type="" name=""  value="2" /> </li>
			<li id="c">年龄：<input type="" name=""  value="3" /> </li>
		</ul>
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$("#app").click(() => {
			var liUsername = $('ul>li').eq(0);
			$('ul>li').filter('[id=c]').css('background', 'red');
		})
	</script>
</html>

7.事件操作

7.1 resize()

方法描述：为 JavaScript 的 “resize” 事件绑定一个处理函数，或者触发元素上的该事件。

	<script type="text/javascript">
		$(window).resize(function() {
			console.log('浏览器尺寸改变了');
		});
	</script>

7.2 scroll()

方法描述：为 JavaScript 的 “scroll” 事件绑定一个处理函数，或者触发元素上的该事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<style type="text/css">
		body {
			height: 3000px;
		}
	</style>

	</body>
	<script type="text/javascript">
		$(window).scroll(function() {
			console.log('浏览器滚动条改变了');
		});
	</script>
</html>

7.3 on()

法描述：在选定的元素上绑定一个或多个事件处理函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>

	<body>
	
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
	$('button').on('click',function () {
	    console.log('你点击了button按钮');
	});
	</script>
</html>

7.4 off()

法描述：移除一个事件处理函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	
	<body>

		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
	$('button').on('click',function () {
	    console.log('你点击了button按钮');
		$('button').off('click');
	});
	
	</script>
</html>

7.5 delegate()

方法描述：设置事件委托。

案例：给ul中所有的li元素委托一个点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>

	<body>
		<ul>
			<li id="a">账号：<input type="" name="" value="1" /> </li>
			<li id="b">密码：<input type="" name="" value="2" /> </li>
			<li id="c">年龄：<input type="" name="" value="3" /> </li>
		</ul>
	</body>
	<script type="text/javascript">
		$('ul').delegate('li', 'click', function() {
			this.style.background = 'green';
		});
	</script>
</html>

7.6 undelegate()

方法描述：移除事件委托

需求：给ul中的所有li委托点击事件，只要其中一个li被点击，就移除掉所有li上委托的点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	
	<body>
		<ul>
			<li id="a">账号：<input type="" name="" value="1" /> </li>
			<li id="b">密码：<input type="" name="" value="2" /> </li>
			<li id="c">年龄：<input type="" name="" value="3" /> </li>
		</ul>
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$('ul').delegate('li', 'click', function() {
			this.style.background = 'green';
			// 移除事件委托
			$('ul').undelegate('click');
		});
	</script>
</html>

7.7 事件对象属性

对象属性名称	对象属性描述
event.currentTarget	当前执行的DOM元素。
event.target	触发事件的DOM元素。
event.pageX	相对于页面的左上角。
event.pageY	相对于页面的顶部。
event.clientX	相对于视口的左上角。
event.clientY	相对于视口的顶部。
event.offsetX	相对于事件元素左上角。
event.offsetY	相对于事件元素顶部。
event.key	键盘的按键信息。
event.preventDefault()	阻止事件默认行为。
event.stopPropagation()	防止事件向外冒泡。

7.8 表单事件

**1.focus() : 当获得焦点时触发所绑定的函数 **

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<input type="" name="username" id="" value="" />
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
	$('input[name="username"]').focus(function () {
	    $(this).css('background', 'red');
	});
	</script>
</html>

2.blur()：当失去焦点时触发所绑定的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<input type="" name="username" id="" value="" />
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
	$('input[name="username"]').blur(function () {
	    $(this).css('background', 'red');
	});
	</script>
</html>

3. change(): 当内容改变时触发所绑定的函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<input type="" name="username" id="" value="" />
		<button id="app" type="button">按钮</button>
	</body>
	<script type="text/javascript">
	$('input[name="username"]').change(function (event) {
	   console.log( $(this).val())
	});
	</script>
</html>

当选择框的内容改变时，就向控制台输出当前选中项的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
	<select>
	    <option>重庆</option>
	    <option>四川</option>
	    <option>上海</option>
	    <option>北京</option>
	    <option>广东</option>
	</select>
	</body>
	<script type="text/javascript">
	$('select').change(function () {
	    console.log($(this).val());
	});
	</script>
</html>

4.select(): 当内容选择时触发所绑定的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<input type="text" value="123456">
	</body>
	<script type="text/javascript">
		$('input').select(function() {
			console.log($(this).val());
		});
	</script>
</html>

5.submit():当表单被添加提交的时候触发，return 一个false可以避免表单被提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<form action="https://www.jq22.com/chm/jquery/jQuery.unique.html" method="get">
			<input type="submit">
		</form>
	</body>
	<script type="text/javascript">
		$('form').submit(function() {
			console.log("表单提交了");
			return false;
		});
	</script>
</html>

6.文本框获得焦点和失去焦点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input,button{
				width: 150px;height: 30px;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//$(this):表示正在操作的元素（当前获得焦点的文本框）
				//1.focusin事件,获得焦点时触发
				$("input").focusin(function(){
					$(this).css("background","#55ff7f");
				});
				
				//1.focusout事件,失去焦点时触发
				$("input").focusout(function(){
					$(this).css("background","#55ffff");
				});
			})
		</script>
	</head>
	<body>
		<form action="#" method="get">
			账号：<input type="text" value="8520"/>
			<br /><br /><br />
			密码：<input type="text" value=""/>
		
		</form>
	</body>
</html>

7.9 鼠标事件

1.click(): 当鼠标单击时调用所绑定的函数

小提示：如果是ajax请求回来的数据需要动态创建元素并且绑定事件，最好使用 on 进行绑定，普通的click会不生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<button type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$('button').click(function () {
		    console.log('按钮被点击');
		});

	</script>
</html>

2. dblclick(): 当鼠标双击时调用所绑定的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<button type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$('button').dblclick(function () {
		    console.log('按钮双击');
		});
	</script>
</html>

3. mousedown() ：当鼠标左键按下的时候调用所绑定的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<button type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$('button').mousedown(function () {
		    console.log('按钮被点击');
		});

	</script>
</html>

4. mouseup() : 当鼠标左键松开的时候调用所绑定的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<button type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$('button').mouseup(function () {
		    console.log('按钮被点击');
		});

	</script>
</html>

5. mouseenter() :鼠标进入目标元素的时候调用所绑定的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<button type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$('button').mouseenter(function () {
			// 当鼠标移动到button按钮上的时候事件触发
		    console.log('事件被触发');
		});

	</script>
</html>

6.mouseleave（）：当鼠标离开目标元素的时候事件触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<button type="button">按钮</button>
	</body>
	<script type="text/javascript">
		$('button').mouseleave(function () {
			// 当鼠标移动到button按钮上的时候事件触发
		    console.log('事件被触发');
		});

	</script>
</html>

7.mouseover(): 鼠标进入目标元素的时候调用所绑定的函数

当绑定事件的元素里面有子元素的时候，鼠标经过绑定mouseover的当前元素以及它里面的子元素的时候，都会触发，而经过绑定mouseenter的元素时，只会在鼠标刚进入的时候触发，当进入其子元素的时候，是不会再触发的了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<style type="text/css">
		div{
			width: 200px; height: 500px; background-color: aqua;
		}
	</style>
	<body>
		<div>
			<button type="button">按钮</button>
		</div>
	</body>
	<script type="text/javascript">
		$('div').mouseover(function () {
			// 当鼠标移动到button按钮上的时候事件触发
		    console.log('事件被触发');
		});

	</script>
</html>

8.事件监听on()

on()事件监听,可以有4个参数,在选择元素上绑定一个或多个事件

第1个参数为事件名,多个事件用空格隔开
第2个参数为选择器,筛选后代元素(可选)
第3个参数为传递数据给事件处理函数(可选)
第4个参数为事件处理函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: aqua;
		}
	</style>
	<body>
		<div>
			<button type="button">按钮</button>
		</div>
	</body>
	<script type="text/javascript">
		$("div").on("click", {
			style: "red"
		}, function(e) {
			$("div").css("background", e.data.style);
			console.log("事件被触发")
		});
	</script>
</html>

7.10 键盘事件

指定键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script src="../js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				 
				//1.keydown 任意按键按下
				$("input").keydown(function(){
					$("input").css("background","#ccc");
				});
				
				//2.keyup 按键按下松开弹起的时候触发
//				$("input").keyup(function(){
//					$("input").css("background","#55ffff");
//				});
				
				//3.事件监听,绑定不同事件,执行不同的方法
				// $("input").on({
				// 	keydown:function(){
				// 		$("input").css("background","#55ffff");
				// 	},
				// 	keyup:function(){
				// 		$("input").css("background","#fff");
				// 	}					
				// })
				
			})
		</script>
	</head>
	<body>
		账号： <input type="text"  value="" />
	</body>
</html>

为指定按钮添加键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {

				//指定某个按键按下时触发
				//event:当前按下的键
				//keyCode:按键编码值
				//键盘上的每一个键对应一个值，这样就方便指定我们按下某个键的时候触发什么处理程序
				$("input").keydown(function(event) {
					console.log(event.keyCode); //获取当前按下的键码值
					if (event.keyCode == 13) { //这里的13表示键盘上的enter键
						$("input").css("background", "#55ff7f");
					};
				});


				//指定某个按键弹起时触发 这里的8表示键盘上的backspace键
				$("input").keyup(function(event) {
					console.log(event.keyCode);
					if (event.keyCode == 8) {
						$("input").css("background", "#FFF");
					};
				});

			})
		</script>
	</head>
	<body>
		账号： <input type="text" value="" />
	</body>
</html>

8.动画

8.1 hide()

hide()：隐藏元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: aqua;height: 200px;
				
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
	<div></div>
	<button id="btn" type="button">按钮</button>
		<script type="text/javascript">
			$(function(){
			   $("#btn").click(()=>{
				   $('div').hide();
			   })
			})
		</script>
	</body>
</html>

8.2 show()

show：显示隐藏的元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{ 
				background-color: aqua;height: 200px;  display: none;
				
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
	<div></div>
	<button id="btn" type="button">按钮</button>
		<script type="text/javascript">
			$(function(){
			   $("#btn").click(()=>{
				   $('div').show();
			   })
			})
		</script>
	</body>
</html>

8.3 toggle()

toggle()：如果隐藏就设置为显示，如果显示就设置为隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				background: greenyellow;
				display: block;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<button id="btn">隐藏/显示</button>
		<div class="box"></div>

		<script type="text/javascript">
			$('button').click(function() {
				$('.box').toggle();
			});
		</script>
	</body>
</html>

8.4 fadeIn()

法描述：通过淡入的方式显示匹配元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				background: greenyellow;
				display: none;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<button id="btn">隐藏/显示</button>
		<div class="box"></div>

		<script type="text/javascript">
			$('button').click(function() {
				$('.box').fadeIn();
			});
		</script>
	</body>
</html>

8.5 fadeOut()

方法描述：通过淡出的方式隐藏匹配元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				background: greenyellow;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<button id="btn">隐藏/显示</button>
		<div class="box"></div>

		<script type="text/javascript">
			$('button').click(function() {
				$('.box').fadeOut();
			});
		</script>
	</body>
</html>

8.6 fadeToggle()

方法描述：用淡入淡出动画显示或隐藏一个匹配元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				background: greenyellow;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<button id="btn">隐藏/显示</button>
		<div class="box"></div>

		<script type="text/javascript">
			$('button').click(function() {
				$('.box').fadeToggle();
			});
		</script>
	</body>
</html>

8.7 slideDown()

方法描述：用滑动动画显示一个匹配元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				background: greenyellow;
				display: none;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<button id="btn">隐藏/显示</button>
		<div class="box"></div>

		<script type="text/javascript">
			$('button').click(function() {
				$('.box').slideDown();
			});
		</script>
	</body>
</html>

8.8 slideUp()

方法描述：用滑动动画隐藏一个匹配元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				background: greenyellow;
			
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<button id="btn">隐藏/显示</button>
		<div class="box"></div>

		<script type="text/javascript">
			$('button').click(function() {
				$('.box').slideUp();
			});
		</script>
	</body>
</html>

8.9 slideToggle

方法描述：用滑动动画显示或隐藏一个匹配元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				background: greenyellow;
			
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<button id="btn">隐藏/显示</button>
		<div class="box"></div>

		<script type="text/javascript">
			$('button').click(function() {
				$('.box').slideToggle();
			});
		</script>
	</body>
</html>

8.10 animate()

方法描述：根据一组 CSS 属性，执行自定义动画，并且支持链式调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box {
				background: greenyellow;
				width: 20px;
			    height: 20px;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<button id="btn">隐藏/显示</button>
		<div class="box"></div>

		<script type="text/javascript">
			$('button').click(function() {
		
				$('.box')
				.animate({
				    width: '200'
				})
				.animate({
				    height: '200',
				});

			});
		</script>
	</body>
</html>

9.扩展

9.1 给 jQuery对象添加扩展方法

checkAll()     : 全选
unCheckAll()   : 全不选
reverseCheck() : 全反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全 选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="reverseCheckedBtn" value="全反选" />


		<script type="text/javascript">
			
			// 扩展jQuery对象的方法
			$.fn.extend({
			    checkAll: function () {
			        this.prop('checked', true);
			    },
			    unCheckAll: function () {
			        this.prop('checked', false);
			    },
			    reverseCheck: function () {
			        this.each(function () {
			            this.checked = !this.checked;
			        });
			    }
			});

			
			// 测试扩展jQuery对象的方法
			var $items = $(':checkbox[name=items]');
			$('#checkedAllBtn').click(function() {
				$items.checkAll();
			});
			$('#checkedNoBtn').click(function() {
				$items.unCheckAll();
			});
			$('#reverseCheckedBtn').click(function() {
				$items.reverseCheck();
			});
		</script>
	</body>
</html>

9.2 CDN引入失败解决办法

<!-- CDN引入 -->
<script src="https://www.jq22.com/jquery/jquery-3.3.1.j"></script>
		<!-- 本地引入 -->
<script>window.jQuery || document.write(unescape("%3Cscript src='../js/jQuery_js.js' type='text/javascript'%3E%3C/script%3E"))</script>

9.3 jQuery中id或class中有特殊字符无法选中怎么办？

这样的特殊符号是无法进行选中的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<button id="submit:btn">按钮</button>
		<div class="box"></div>
		<script type="text/javascript">
			$('#submit:btn').click(function() {
				console.log("hello")
			});
		</script>
	</body>
</html>

对特殊符号进行转义即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<button id="submit:btn">按钮</button>
		<div class="box"></div>
		<script type="text/javascript">
			$('#submit\\:btn').click(function() {
				console.log("hello")
			});
		</script>
	</body>
</html>

野生java研究僧

关注

5
点赞
踩
41

收藏

觉得还不错? 一键收藏
3
评论
JQuery开发手册

JQuery开发文档1. jQuery简介1.1jQuery简介1.2 jQuery官网1.3、jQuery版本介绍1.4 Query引入方式1.5 JQuery快速使用1.6 jQuery两把利器1.7 html字符串转为Jquery或Dom对象2.JQuery核心函数2.1 选择器2.1.1 id选择器2.1.2 标签选择器2.1.3 class选择器2.1.4 通配符选择器2.1.5 并集选择器2.1.6 交集选择器2.1.7 子代选择器2.1.8 后代选择器2.1.9 兄弟选择器2.1.10过滤选择
复制链接

扫一扫

专栏目录