JQuery 带你玩转【精通篇】_jqurey精通-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51411338/article/details/125873036

请添加图片描述

JQuery 基本操作
项目经理(作者)：张明星
掌握Jquery的下载、安装和使用的方法
掌握Jquery的选择器和事件机制重点
掌握Jquery的元素遍历方法重点
掌握Jquery样式的操作重点

jQuery 安装
jQuery 是一个 JavaScript 库。
下载地址
在这里插入图片描述
如果下载不了直接在网页打开了，可以直接复制网页打开后的代码，新建js文件，复制粘贴即可

下载好之后直接复制js文件到项目中，使用script标签引入即可

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

jQuery 语法

基础语法：

$(selector).action()

说明：

美元符号($)：定义jQuery
选择符(selector)：“查询"和"查找” HTML 元素
action()：执行对元素的操作

获得内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容 – innerText
html() - 设置或返回所选元素的内容（包括 HTML 标记） - innerHTML
val() - 设置或返回表单字段的值 – value
attr(‘name’) - 设置/改变属性值 – getAttribute - setAttribute

每个函数都可以接受函数类型的参数，如：

参数	描述
function(index,oldValue)	index - 选择器的 index 位置。element - 当前的元素（也可使用 “this” 选择器）

$("li").each(function(){ 
	alert($(this).text()) 
});

如：

$("#test1").text("Hello world!");
$("#test1").text(function(index,oldValue){ 
	return oldValue + "/jquery"; 
});
$("#test2").html("<b>Hello world!</b>");
$("#test2").html(function(index,oldValue){ 
	return oldValue + "/jquery"; 
});
$("#test3").val("RUNOOB");
$("#test3").val(function(index,oldValue){ 
	return oldValue + "/jquery"; 
});
$("#runoob").attr("href","http://www.baidu.com ");
$("#runoob").attr({ 
	"href" : "http://www.baidu.com ", 
	"title" : "jQuery 教程" 
});
$("#runoob").attr("href", function(index,oldValue){ 
	return oldValue + "/jquery"; 
});

jQuery 选择器

`$("*")`	选取所有元素
`$(this)`	选取当前 HTML 元素
`$("p.intro")`	选取 class 为 intro 的 `<p>` 元素
`$("p:first")`	选取第一个 `<p>` 元素
`$("ul li:first")`	选取第一个 `<ul>` 元素的第一个 `<li>` 元素
`$("ul li:first-child")`	选取每个 `<ul>` 元素的第一个 `<li>` 元素
`$("[href]")`	选取带有 `href` 属性的元素
`$("a[target='_blank']")`	选取所有 `target` 属性值等于 `"_blank"` 的 `<a>` 元素
`$("a[target!='_blank']")`	选取所有 `target` 属性值不等于 `"_blank"` 的 `<a>`元素
`$(":button")`	选取所有 `type="button"` 的 `<input>`元素和 `<button>` 元素
`$("tr:even")`	选取偶数位置的 `<tr>` 元素
`$("tr:odd")`	选取奇数位置的 `<tr>` 元素

jQuery 选择器（大全）

选择器	实例	选取
`*`	`$("*")`	所有元素
`#id`	`$("#lastname")`	id=“lastname” 的元素
`.class`	`$(".intro")`	所有 class=“intro” 的元素
`element`	`$("p")`	所有 `<p>`元素
`.class.class`	`$(".intro.demo")`	所有 class=“intro” 且 class=“demo” 的元素

`:first`	`$("p:first")`	第一个 `<p>` 元素
`:last`	`$("p:last")`	最后一个 `<p>` 元素
`:even`	`$("tr:even")`	所有偶数 `<tr>` 元素
`:odd`	`$("tr:odd")`	所有奇数 `<tr>` 元素

`:eq(index)`	`$("ul li:eq(3)")`	列表中的第四个元素（index 从 0 开始）
`:gt(no)`	`$("ul li:gt(3)")`	列出 index 大于 3 的元素
`:lt(no)`	`$("ul li:lt(3)")`	列出 index 小于 3 的元素
`:not(selector)`	`$("input:not(:empty)")`	所有不为空的 input 元素

`:header`	`$(":header")` 所有标题元素 `<h1> - <h6>`
`:animated`		所有动画元素

`:contains(text)`	`$(":contains('W3School')")`	包含指定字符串的所有元素
`:empty`	`$(":empty")`	无子（元素）节点的所有元素
`:hidden`	`$("p:hidden")`	所有隐藏的 `<p>`元素
`:visible`	`$("table:visible")`	所有可见的表格

`s1,s2,s3`	`$("th,td,.intro")`	所有带有匹配选择的元素

`[attribute]`	`$("[href]")`	所有带有 href 属性的元素
`[attribute=value]`	`$("[href='#']")`	所有 href 属性的值等于 “#” 的元素
`[attribute!=value]`	`$("[href!='#']")`	所有 href 属性的值不等于 “#” 的元素
`[attribute$=value]`	`$("[href$='.jpg']")`	所有 href 属性的值包含以 “.jpg” 结尾的元素

`:input`	`$(":input")`	所有`<input>`元素
`:text`	`$(":text")`	所有 type=“text” 的 `<input>`元素
`:password`	`$(":password")`	所有 type=“password” 的 `<input>`元素
`:radio`	`$(":radio")`	所有 type=“radio” 的 `<input>`元素
`:checkbox`	`$(":checkbox")`	所有 type=“checkbox” 的`<input>`元素
`:submit`	`$(":submit")`	所有 type=“submit” 的 `<input>` 元素
`:reset`	`$(":reset")`	所有 type=“reset” 的 `<input>` 元素
`:button`	`$(":button")`	所有 type=“button” 的`<input>` 元素
`:image`	`$(":image")`	所有 type=“image” 的 `<input>` 元素
`:file`	`$(":file")`	所有 type=“file” 的`<input>` 元素

`:enabled`	`$(":enabled")`	所有激活的 input 元素
`:disabled`	`$(":disabled")`	所有禁用的 input 元素
`:selected`	`$(":selected")`	所有被选取的 input 元素
`:checked`	`$(":checked")`	所有被选中的 input 元素

举例

//1.基本选择器
$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器
//2.层次选择器
 $("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器
//3.过滤选择器(重点)
$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
//3.2内容过滤选择器
$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素
//3.3可见性过滤选择器
$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素
//3.4属性过滤选择器
$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素
//3.5状态过滤选择器
$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option
//4.表单选择器
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

jQuery 事件

ready()

文档加载完毕事件，当文档全部加载完毕之后执行，等价于window.onload事件

$(function() {
	// 代码
})
// Or
$(document).ready(function() {
	// 代码
});

holdReady()

暂停ready()事件，holdReady(true)暂停执行，holdReady(false)取消暂停，则会执行

$.holdReady(true)
$(document).ready(function() {
	$("#first").click(function() {
		alert("解除延迟后被弹出");
	})
})
$("#second").click(function() {
	$.holdReady(false);
})

on()

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。如需移除事件处理程序，请使用 off() 方法。

语法：

$(selector).on(event[,childSelector][,param],function)

如：

$(document).ready(function(){
	$("div").on("click","p",function(){
		alert("div中的p段落被点击了。");
	});
});

off()

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
selector	可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj)	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

语法：

$(selector).off(event,selector,function(eventObj),map)

如：

$("button").click(function(){
    $("p").off("click");
});

one()

one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。

当使用 one() 方法时，每个元素只能运行一次事件处理器函数。

语法：

$(selector).one(event,param,function)

 
 
如： 
$("p").one("click",function(){
	$(this).css("background-color","#ffffff");
});

其他事件

方法	描述
blur()	当失去焦点事件
focus()	添加/触发获得焦点时
focusin()	当元素（或在其内的任意元素）获得焦点时
focusout()	当元素（或在其内的任意元素）失去焦点时
change()	当内容改变时
click()	当单机时
dblclick()	当双击时
hover()	当鼠标悬停时
keydown()	当键盘按下时
keypress()	当完成键盘按下并弹起整个过程时
keyup()	当键盘弹起时
resize()	当浏览器窗口调整大小时
scroll()	当元素滚动时（需出现滚动条）
select()	当输入框和文本域内容被选择时
trigger()	触发被选元素的指定事件类型，执行事件的代码
submit()	当表单提交时
contextmenu()	右键单机时
mousedown()	当鼠标按下时
mouseenter()	当鼠标进入时
mouseleave()	当鼠标离开时
mousemove()	当鼠标移动时
mouseout()	当鼠标移开时
mouseover()	当鼠标悬停时
mouseup()	当鼠标按下弹起时

如：

$("input").blur(function(){
	$(this).css("background-color","#ffffff");
});
$("input").focus(function(){
	$(this).css("background-color","#cccccc");
});
$("div").focusin(function(){
	$(this).css("background-color","#FFFFCC");
});
$("div").focusout(function(){
    $(this).css("background-color","#FFFFFF");
});
$(".field").change(function(){
	$(this).css("background-color","#FFFFCC");
});
$("p").click(function(){
	$(this).css("background-color","#ffffff");
});
$("p").dblclick(function(){
 	$(this).hide();
});
$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});
$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});
$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});
$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});
$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);
$("input").keydown(function(){
	$("input").css("background-color","#FFFFCC");
});
$("input").keydown(function(){
	$("span").text(i+=1);
});
$("input").keyup(function(){
	$("input").css("background-color","#D6D6FF");
});
$(window).resize(function() {
	$('span').text(x+=1);
});
$("div").scroll(function() {
	$("span").text(x+=1);
});
$("input").select(function(){
	$("input").after(" Text marked!");
});
$("button").click(function(){
	$("input").trigger("select");
});

事件

方法	描述
event.pageX	返回相对于文档左边缘的鼠标位置
event.pageY	返回相对于文档上边缘的鼠标位置
event.stopImmediatePropagation()	阻止其他相同事件继续执行
event.stopPropagation()	阻止事件向上传递到父容器
event.target	返回哪个 DOM 元素触发事件
event.timeStamp	鼠标左键第一次按下到最后一次抬起所消耗的毫秒数
event.preventDefault()	阻止元素原本的事件
event.which	返回指定事件上哪个键盘键或鼠标按钮被按下
event.result	获取上一个相同事件返回的内容

案例01

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		</script>
	</head>
	<body>
		<div style="background-color: red;">
			点击我
			<span style="background-color: yellow;">点我</span>
		</div>
		<button>按钮</button>
		<input type="text" />
	</body>
	<script type="text/javascript">
		//文档加载完毕事件
		$(document).ready(function() {
			$("div").click(function() {
				return "你点击我勒!";
			});
			$("div").click(function(event) {
				$("span").html(event.result);
			});
		});
		$(document).ready(function() {
			$("span").click(function(event) {
				event.stopPropagation();
				alert("DIV里面的SPAN被点击");
			});
			$("p").click(function(event) {
				alert("The p element was clicked.");
			});
			$("div").click(function() {
				alert("DIV被点击");
			});
		});
		$(document).ready(function() {
			$("div").click(function(event) {
				alert("事件句柄 1 被执行");
				event.stopImmediatePropagation();
			});
			$("div").scroll(function(event) {
				alert("事件句柄 2 被执行");
			});
			$("div").click(function(event) {
				alert("事件句柄 3 被执行");
			});
		});
		$(document).ready(function() {
			$("button").click(function(event) {
				$("span").text(event.timeStamp);
			});
		});
		$(document).ready(function() {
			$("input").keydown(function(event) {
				$("span").html("Key: " + event.which);
			});
		});
	</script>
</html>

效果展示
在这里插入图片描述

jQuery CSS样式

jQuery 拥有若干进行 CSS 操作的方法：

方法	描述
addClass()	向匹配的元素添加指定的类名。
hasClass()	检查匹配的元素是否拥有指定的类。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
toggleClass()	从匹配的元素中添加或删除一个类。
css()	设置或返回样式属性

如：

$("p").css({"background-color":"yellow","font-size":"200%"});

案例02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.style {
				background-color: red;
				height: 60px;
			}
		</style>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$('button:nth-child(1)').click(function() {
					$('div').addClass('style');
				});
				$('button:nth-child(2)').click(function() {
					$('div').removeClass('style');
				});
				$('button:nth-child(3)').click(function() {
					$('div').toggleClass('style');
				});
			});
		</script>
	</head>
	<body>
		<button>添加样式</button>
		<button>删除样式</button>
		<button>智能切换</button>
		<div>测试样式</div>
	</body>
</html>

效果展示
在这里插入图片描述

jQuery DOM遍历

遍历父元素

用于向上遍历 DOM 树：

parent(selector) - 被选元素的直接父元素
parents(selector) - 被选元素的所有祖先元素，一路向上直到文档的根元素<html>
parentsUntil(selector) - 向上直到给定元素之间的所有祖先元素

案例03

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		</script>
		<script>
			$(document).ready(function() {
				$("span").parentsUntil("div").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body class="ancestors"> body (曾曾祖父元素)
		<div style="width:500px;">div (曾祖父元素)
			<ul>ul (祖父元素)
				<li>li (父元素)
					<span>span</span>
				</li>
			</ul>
		</div>
	</body>
</html>

效果展示
在这里插入图片描述

遍历同级元素

在 DOM 树进行水平遍历：

siblings(selector) - 返回被选元素的所有同胞元素
next(selector) - 返回被选元素的下一个同胞元素，只有紧挨着的一个
nextAll(selector) - 返回被选元素的所有同胞元素
nextUntil(selector) - 返回直到给定参数之间的所有跟随的同胞元素
prev(selector) - 同理向上遍历
prevAll(selector) - 同理向上遍历
prevUntil(selector) -同理向上遍历

案例04

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(document).ready(function() {
				$("li.start").nextUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>
		<div class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
				<li class="start">li (类名为"start"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
			</ul>
		</div>
	</body>
</html>

效果展示
在这里插入图片描述

遍历子元素

两个用于向下遍历 DOM 树的 jQuery 方法：

children(selector) - 返回被选元素的所有直接子元素
find(selector) - 返回被选元素的后代元素，一路向下直到最后一个后代

案例05

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.descendants * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(document).ready(function() {
				$("div").children("p.1").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>
		<div class="descendants">div (当前元素)
			<p class="1">p (儿子元素)
				<span>span (孙子元素)</span>
			</p>
			<p class="2">p (儿子元素)
				<span>span (孙子元素)</span>
			</p>
		</div>
	</body>
</html>

效果展示
在这里插入图片描述

first()

返回被选元素的首个元素

$(document).ready(function(){
	$("div p").first();
});

last()

返回被选元素的最后一个元素

$(document).ready(function(){
	$("div p").last();
});

eq(number)

返回被选元素中带有指定索引（下标）号的元素

$(document).ready(function(){
	$("p").eq(1);
});

filter(selector)

筛选所选元素中满足特定条件的元素

$(document).ready(function(){
	$("p").filter(".url");
});

not(selector)

返回不匹配标准的所有元素

$(document).ready(function(){
	$("p").not(".url");
});

jQuery 增删元素

增加元素

append(arg1,arg2) - 在被选元素的结尾插入一个或者多个子元素
prepend(arg1,arg2) - 在被选元素的开头插入一个或者多个子元素
after(arg1,arg2) - 在被选元素之后插入一个或者多个内容
before(arg1,arg2) - 在被选元素之前插入一个或者多个内容

如：

$("p").append("追加文本");
$("div").append("<h1>追加文本</h1>");
$("p").prepend("在开头追加文本");
$("div").prepend("<h1>在开头追加文本</h1>");
$("img").before("在img前面添加文本");
$("img").before("<h1>在img前面添加文本</h1>");
$("img").after("在img后面添加文本");
$("img").after("<h1>在img后面添加文本</h1>");

删除元素

remove() - 删除被选元素自身（及其子元素）
empty() - 从被选元素中删除子元素，把子元素清空

如：

$("#div1").remove(selector);
$("#div1").empty();

 
 
 
 1
2

案例06

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html,
			body {
				padding: 0;
				margin: 0;
			}
			#header {
				height: 200px;
				background-color: rgba(255, 0, 0, 0.1);
				overflow: hidden;
			}
			#footer {
				height: 200px;
				background-color: rgba(0, 255, 0, 0.1);
				overflow: hidden;
			}
			ul {
				list-style: none;
			}
			li {
				border: 1px solid rgba(10, 10, 10, 0.05);
				padding: 15px 20px;
				float: left;
				margin: 10px;
				cursor: pointer;
			}
		</style>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function top_bottom(t) {
				$('#footer ul').append('<li οnclick="bottom_top(this)">' + $(t).text() + '</li>');
				$(t).remove();
			}
			function bottom_top(t) {
				$('#header ul').append('<li οnclick="top_bottom(this)">' + $(t).text() + '</li>');
				$(t).remove();
			}
		</script>
	</head>
	<body>
		<div id="header">
			<ul>
				<li onclick="top_bottom(this)">功能1</li>
				<li onclick="top_bottom(this)">功能2</li>
				<li onclick="top_bottom(this)">功能3</li>
				<li onclick="top_bottom(this)">功能4</li>
				<li onclick="top_bottom(this)">功能5</li>
			</ul>
		</div>
		<div id="footer">
			<ul>
				<li onclick="bottom_top(this)">功能6</li>
				<li onclick="bottom_top(this)">功能7</li>
				<li onclick="bottom_top(this)">功能8</li>
				<li onclick="bottom_top(this)">功能9</li>
				<li onclick="bottom_top(this)">功能10</li>
			</ul>
		</div>
	</body>
</html>

效果展示
在这里插入图片描述

jQuery 尺寸

处理尺寸的重要方法：

width() - 设置或返回元素的宽度（不包括内边距、边框或外边距）
height() - 设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth() - 返回元素的宽度（包括内边距）clientWidth
innerHeight() - 返回元素的高度（包括内边距）clientHeight
outerWidth() - 返回元素的宽度（包括内边距和边框）offsetWidth
outerHeight() - 返回元素的高度（包括内边距和边框）offsetHeight
offset() - left:元素距离左边的距离；top:元素距离顶部的距离

jQuery 效果

显示隐藏

可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

hide(time,function) - 隐藏元素
show(time,function) - 显示元素
toggle(time,function) - 显示或者
stop() - 停止

语法:

$(selector).hide(time,function);
$(selector).show(time,function);
$(selector).toggle(time,function);

淡入淡出

fade可以实现元素的淡入淡出效果。

fadeIn(time,function) - 淡入效果
fadeOut(time,function) - 淡出效果
fadeToggle(time,function) - 淡入或者淡出
fadeTo(time, opacity ,function) - 渐变到指定透明度
stop() - 停止

语法：

$(selector).fadeIn(time, function);
$(selector).fadeOut(time, function);
$(selector).fadeToggle(time, function);
$(selector).fadeTo(time,opacity, function);

滑动

滑动方法：

slideDown() - 从上往下滑动
slideUp() - 从下往上滑动
slideToggle() - 点击向下出现，再点向上消失
stop() - 停止

语法：

$(selector).slideDown(time, function);
$(selector).slideUp(time, function);
$(selector).slideToggle(time, function);

动画

animate() 方法用于创建自定义动画。
stop() - 停止

语法：

$(selector).animate({params}, time, function);

JQuery ajax

ajax() 方法用于执行 AJAX（异步 HTTP）请求。所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

语法：

$.ajax({name:value, name:value, ... })

参数：

名称	值/描述
`async`	布尔值，表示请求是否异步处理。默认是 true。
`beforeSend(xhr)`	发送请求前运行的函数。
`cache`	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
`complete(xhr,status)`	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
`contentType`	发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
`data`	规定要发送到服务器的数据。
`dataFilter(data,type)`	用于处理 `XMLHttpRequest` 原始响应数据的函数。
`dataType`	预期的服务器响应的数据类型。
`error(xhr,status,error)`	如果请求失败要运行的函数。
`jsonp`	在一个 jsonp 中重写回调函数的字符串。
`jsonpCallback`	在一个 jsonp 中规定回调函数的名称。
`password`	规定在 HTTP 访问认证请求中使用的密码。
`processData`	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
`scriptCharset`	规定请求的字符集。
`success(result,status,xhr)`	当请求成功时运行的函数。
`timeout`	设置本地的请求超时时间（以毫秒计）。
`traditional`	布尔值，规定是否使用参数序列化的传统样式。
`type`	规定请求的类型（GET 或 POST）。
`url`	规定发送请求的 URL。默认是当前页面。
`username`	规定在 HTTP 访问认证请求中使用的用户名。
`xhr`	用于创建 `XMLHttpRequest` 对象的函数。

如：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button>点击加载</button>
		<div id="div1"></div>
	</body>
	<script type="text/javascript">
		$("button").click(function() {
			$.ajax({
				type: "POST",
				url: "demo.php",
				data: "name=张三&pswd=123456",
				success: function(data) {
					obj = JSON.parse(data);
					if(obj.status == "1") {
						$('#div1').text(obj.msg);
					} else {
						$('#div1').text(obj.msg);
					}
				}
			})
		});
	</script>
</html>

load()

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

参数

URL ：必需的参数规定您希望加载的 URL。
data ：可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
callback ：可选的 callback 参数是 load() 方法完成后所执行的函数名称。参数如下：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
	<script type="text/javascript">
		$("#div1").load("demo.txt #p1")
	</script>
</html>

或者

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button>点击加载</button>
		<div id="div1"></div>
	</body>
	<script type="text/javascript">
		$("button").click(function() {
			$("#div1").load("demo.txt", function(responseTxt, statusTxt, xhr) {
				if(statusTxt == "success")
					alert("外部内容加载成功!");
				if(statusTxt == "error")
					alert("Error: " + xhr.status + ": " + xhr.statusText);
			});
		});
	</script>
</html>

get()

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,callback(data, status));

如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button>点击加载</button>
		<div id="div1"></div>
	</body>
	<script type="text/javascript">
		$("button").click(function() {
			$.get("demo.txt",
				function(data, status) {
					$('#div1').html("数据: " + data + "\n状态: " + status);
				}
			);
		});
	</script>
</html>

效果图

post()

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法:

$.post(URL,data,callback(data, status));

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	<button>点击加载</button>
	<div id="div1"></div>
</body>
<script type="text/javascript">
	$("button").click(function() {
		$.post("demo.php", {
				name: "张三",
				age: 23
			},
			function(data, status) {
				$('#div1').html("数据: \n" + data + "\n状态: " + status);
			}
		);
	});
</script>
</html>

getJSON()

可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据，如 “myurl?callback=?”。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

语法：

jQuery.getJSON(url,data,success(data,status,xhr))

参数

参数	说明
`url`	必需。规定将请求发送的哪个 URL。
`data`	可选。规定连同请求发送到服务器的数据。
`success(data,status,xhr)`	可选。规定当请求成功时运行的函数。额外的参数：data - 包含来自请求的结果数据status - 包含请求的状态xhr - 包含 XMLHttpRequest 对象

该函数是简写的 Ajax 函数，等价于：

$.ajax({
 url: url,
 data: data,
 success: callback,
 dataType: json
});

跨域

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域.

当前页面url	被请求页面url	是否跨域	原因
`http://www.test.com/`	`http://www.test.com/index.html`	否	同源（协议、域名、端口号相同）
`http://www.test.com/`	`https://www.test.com/index.html`	跨域	协议不同（`http/https`）
`http://www.test.com/`	`http://www.bai.com/`	跨域	主域名不同（`test/baidu`）
`http://www.test.com/`	`http://blog.test.com/`	跨域	子域名不同（`www/blog`）
`http://www.test.com:8080/`	`http://www.test.com:7001/`	跨域	端口号不同（`8080`/`7001`）

后端

HttpServletResponse response1 = (HttpServletResponse) response;
response1.setHeader("Access-Control-Allow-Origin", "*");
response1.setHeader("Access-Control-Allow-Methods", "POST, DELETE,PUT,GET,OPTIONS");
response1.setHeader("Access-Control-Max-Age", "3600");
response1.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");