第15章-前端核心技术-JQuery基本操作

掌握Jquery的下载、安装和使用的方法
掌握Jquery的选择器和事件机制 重点
掌握Jquery的元素遍历方法 重点
掌握Jquery样式的操作 重点

jQuery 安装

jQuery 是一个 JavaScript 库。下载地址：http://jquery.com/download/

如果下载不了直接在网页打开了，可以直接复制网页打开后的代码，新建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” 选择器）

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

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$("#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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
//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")       //所有文件域

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

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

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

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

jQuery DOM遍历

first()

返回被选元素的首个元素

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

last()

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

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

eq(number)

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

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

filter(selector)

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

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

not(selector)

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

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

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() - 停止

语法:

1
2
3
$(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() - 停止

语法：

1
2
3
4
$(selector).fadeIn(time, function);
$(selector).fadeOut(time, function);
$(selector).fadeToggle(time, function);
$(selector).fadeTo(time,opacity, function);

滑动

滑动方法：

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

语法：

1
2
3
$(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` 对象的函数。

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../../js/jquery-3.3.1.min.js"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">button</span>&gt;</span>点击加载<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"div1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>&gt;</span><span class="javascript">
	$(<span class="hljs-string">"button"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
		$.ajax({
			type: <span class="hljs-string">"POST"</span>,
			url: <span class="hljs-string">"demo.php"</span>,
			data: <span class="hljs-string">"name=张三&amp;pswd=123456"</span>,
			success: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span> </span>{
				obj = <span class="hljs-built_in">JSON</span>.parse(data);
				<span class="hljs-keyword">if</span>(obj.status == <span class="hljs-string">"1"</span>) {
					$(<span class="hljs-string">'#div1'</span>).text(obj.msg);
				} <span class="hljs-keyword">else</span> {
					$(<span class="hljs-string">'#div1'</span>).text(obj.msg);
				}
			}
		})
	});
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>

</html>

load()

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

语法:

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

参数

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

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>

或者

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"jquery-3.3.1.min.js"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">button</span>&gt;</span>点击加载<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"div1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>&gt;</span><span class="javascript">
	$(<span class="hljs-string">"button"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
		$(<span class="hljs-string">"#div1"</span>).load(<span class="hljs-string">"demo.txt"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(responseTxt, statusTxt, xhr)</span> </span>{
			<span class="hljs-keyword">if</span>(statusTxt == <span class="hljs-string">"success"</span>)
				alert(<span class="hljs-string">"外部内容加载成功!"</span>);
			<span class="hljs-keyword">if</span>(statusTxt == <span class="hljs-string">"error"</span>)
				alert(<span class="hljs-string">"Error: "</span> + xhr.status + <span class="hljs-string">": "</span> + xhr.statusText);
		});
	});
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>

</html>

get()

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

语法：

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

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../../js/jquery-3.3.1.min.js"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">button</span>&gt;</span>点击加载<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"div1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>&gt;</span><span class="javascript">
	$(<span class="hljs-string">"button"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
		$.get(<span class="hljs-string">"demo.txt"</span>,
			<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data, status)</span> </span>{
				$(<span class="hljs-string">'#div1'</span>).html(<span class="hljs-string">"数据: "</span> + data + <span class="hljs-string">"\n状态: "</span> + status);
			}
		);
	});
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>

</html>

效果图

post()

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

语法:

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

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

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"jquery-3.3.1.min.js"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">button</span>&gt;</span>点击加载<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"div1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>

</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 函数，等价于：

1
2
3
4
5
6
7
8
9
10
11
$.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`）

后端

1
2
3
4
5
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");

作业

    </article>

第15章-前端核心技术-JQuery基本操作

ready()

holdReady()

on()

off()

one()