JQuery

Jquery

1、主要内容

image-20201207170135728

2、Jquery对象

jQuery是一套兼容多浏览器的javascript脚本库.核心理念是写得更少，做得更多，使用jQuery将极大的提高编写javascript 代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，“如虎添翼"。同时网络上丰富的jQuery 插件也让我们的工作变成了"有了jQuery，一切so easy。"
jQuery在2006年1月由美国人John Resig在纽约的barcamp 发布，吸引了来自世界各地的众多JavaScript 高手加入，由Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的javascript 框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

2.1.Jquery的下载与安装

2.1.1.下载

http:/ljquery.com/下载

2.1.2.版本

jQuery 2.x has the same APl as jQuery 1.x, but does not support InternetExplorer 6, 7,or 8.(不支持ie678,如果需要下载1.X)T

完整版: jquery-2.1.4.js -->学习版本(学习源码想高手学习是最好学习方法)
压缩版:jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)
目前使用版本: jquery-3.5.1.js

2.1.3.优点

提供了强大的功能函数
解决浏览器兼容性问题
实现丰富的UI和插件
纠正错误的脚本知识

2.1.4安装

<script src="jquery-3.5.1.js"  type="text/javascript" charset="UTF-8"></script>

2.2.Jquery核心

$符号在jQuery中代表对 jQuery对象的引用, "jQuery"是核心对象。通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

$	<===> Jquery

2.3.Dom对象与Jquery包装集对象

明确Dom对象和jQuery包装集的概念,将极大的加快我们的学习速度。原始的Dom对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是dom对象;而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供的方法。

2.3.1.Dom对象

JavaScript中获取DOM对象，DOM对象只有有限的属性和方法：

var div = document.getElementById('testDiv');
var divs = document.getElementsByTagName('div');

2.3.2 Jquery包装集对象

可以说DOM对象的扩充，在Jquery的世界中将所用的对象，无论是一个还是一组，都封装成一个Jquery包装集，比如获取包含一个元素的Jquery包装集：

var JqueryObject = $('#testDiv');

2.3.3 DOM对象转Jquery对象

DOM对象转Jquery对象，只需要利用$()方法进行包裹即可

2.3.4 Jquery对象转DOM对象

<script src="jquery-3.5.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
   	/* JQUERY对象 */
   	//通过id选择器获取元素对象，$('#id属性值')
   	var divJquery = $('#mydiv');
   	console.log(divJquery);
   	/* Jquery对象转DOM对象 */
   	// 获取标签集中指定下标的元素，将Jquery对象转换为dom对象
   	console.log(divJquery[0]);	
</script>

3、Jquery选择器

和使用js操作DOM一样，获取文档中的节点对象是很频繁的一个操作，在Jquery中提供了简便的方式供我们查找|定位元素，称之为Jquery选择器，选择器可以说是最考验一个人Jquery功力的地方，通俗的将，Selector选择器就是“一个表示特殊语意的字符串”。只要把选择器字符串传入上面的方法中，就能够选择不同的DOM对象并且以Jquery包装集的形式放回。

Jquery选择器按照功能主要分为“选择”和“过滤”。并且是配合使用的，具体分类如下。基础选择器掌握即可，其他用到查阅。

3.1 基础选择器

image-20201207185704993

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- ID选择器	#id属性值		$("#id属性值")
			 类选择器	.class属性值		$(".class属性值")
			 元素选择器	标签名/元素名		$("标签名/元素名")
			 通用选择器	*				$("*")
			 组合选择器	选择器1.选择器2
					
		 -->
		 <div id='mydiv1'>id选择器1<span>span中的内容</span></div>
		 <div id="mydiv1" class="blue">元素选择器</div>
		 <span class="blue">样式选择器</span>
	</body>
	<script src="jquery-3.5.1.js" type="text/javascript" charset="UTF-8"></script>
	<script type="text/javascript">
		// id选择器
		var v1 = $('#mydiv1');
		console.log(v1);
		//类选择器
		var v2 = $('.blue');
		console.log(v2); 
		// 元素选择器
		var v3 = $('span');
		console.log(v3);
		// 组合选择器
		var v4 = $('#mydiv1,.blue');
		console.log(v4);
	</script>
</html>

3.2 层次选择器

选择器	名称	举例
后代选择器	ancestor descendant	$("#parent div")选择id为parent的元素的所有后代div元素
子代选择器	parent > child	$("#parent>div")选择id为parent的直接div子元素
相邻选择器	prev + next	$(".blue + img") 选择css类为blue的下一个img元素
同辈选择器	prev ~sibling	$(".blue ~ img")选择css类为blue的之后的img元素

后代选择器：选择父元素的所有指定元素（包含第一代，第二代）

子代选择器>：选择父元素所有的第一代子元素

相邻选择器+：选择元素的下一个指定元素，（只会查找下一个元素，如果元素不存在，则获取不到）

同辈选择器~：所有同辈元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
		.textColor{
			background: green;
		}
		.gray{
			background:gray;
		}
	</style>
	</head>
	<body>
		<div id="parent">层次选择器
			<div id="child" class="textColor">父选择器
				<div class="gray">子选择器</div>
				<img src="../JS-DOM/img1.png"  width="270" height="129"/>
				<img src="../JS-DOM/img1.png"  width="270" height="129"/>
			</div>
			<p>我就是来破坏div相邻状况的！</p>
			<div>选择器2
				<div>选择器2中的选择器</div>
			</div>
		</div>
	</body>
	<script src="jquery-3.5.1.js" type="text/javascript" charset="UTF-8"></script>
	<script type="text/javascript">
		// 后代选择器 4
		var hd = $("#parent div");
		console.log(hd);
		// 子代选择器
		var zd = $("#parent > div");
		console.log(zd);
		// 相邻选择器
		var xl = $("#child + div");
		console.log(xl);
		// 同辈选择器
		var tb = $(".gray ~ img");
		console.log(tb);
	</script>
</html>

3.3 表单选择器

Forms	名称	举例
表单选择器	:input	查找所有的input元素：$(":input"); 注意：会匹配所有的input，textarea,select和button元素
文本框选择器	:text	查找所有的文本框：$(":text")
密码框选择器	:pasword	查找所有密码框：$(":password")
单选按钮选择器	:radio	查找所有的单选按钮：$(":radio")
复选框	:checkbox	查找所有复选框：$(":checkbox")
提交按钮选择器	:submit	查找所有复选框：$(":submit")
图像域选择器	:image	查找所有图像域：$("image")
重置按钮选择器	:reset	查找所用重置按钮$(":reset")
按钮选择器	:button	查找所有按钮：$(":button")
文件域选择器	:file	查找所有文件域：$(":file")

3.4 基本过滤器

开发中若需要对获取到的元素进行筛选，如仅获取指定选择器中的第一个或最后一个元素，偶数行或奇数行中的元素，可以使用jquery提供的基本过滤选择器完成。

image-20201213092937313

<body>
  <table>
    <tr><th>姓名</th><th>语文</th><th>数学</th></tr>
    <tr><td>Tom</td><td>76</td><td>89</td></tr> 
    <tr><td>Lucy</td><td>98</td><td>90</td></tr>
    <tr><td>Jimmy</td><td>100</td><td>99</td></tr>
    <tr><td>John</td><td>45</td><td>12</td></tr>
  </table>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    console.log($('tr:first'));
    console.log($('tr:odd'));
    console.log($('tr:not(tr:first)'));
  </script>
</body>

3.5 内容选择器

根据元素内容完成指定元素的获取

选择器	功能描述	示例
:contains(text)	获取内容包含text文本的元素	$("li:contains'js"获取内容中含“js”的元素
:empty	获取内容为空的元素	$("li:empty")获取内容为空的元素
:has(selector)	获取内容包含指定选择器的元素	$("Ii:has('a')")获取内容中含元素的所有元素
:parent	获取内容不为空的元素（特殊）	$("li:parent")获取内容不为空的元素

<body>
  <ul>
    <li><div>PHP JavaScript jQuery</div></li>
    <li>JavaScript</li>
    <li><a href="#">jQuery</a></li>
    <li class="defined"></li>
  </ul>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    console.log($('li:contains(\'jQuery\')'));
    console.log($('li:empty'));//空元素
    console.log($('li:has(\'a\')'));//获取含有a标签的li
    console.log($('li:parent'));//非空
  </script>
</body>

3.6 可见性选择器

选择器	功能描述	示例
:hidden	获取所有隐藏元素	$("li:hidden")获取所有隐藏的<i>元素<br/>:visible<br/>获取所有可见元素<br/>$
:visable	获取所有可见元素	("li:visible")获取所有可见的元素

当指定元素的display设置为none时，可以通过“:hidden”获取隐藏的元素;
当指定元素的display设置为 block时，可以通过“:visible”获取可见的元素。

3.7 属性选择器

jQuery中还提供了根据元素的属性获取指定元素的方式

image-20201213094914619

3.8 子元素选择器

开发中若需要通过子元素的方式获取元素，则可以利用jQuery 提供的子元素选择器完成

image-20201213095233788

更好理解of-type 获取所有含有<span>元素的第1个子元素

<body>
  <div>
    <span>Corey,</span> <span>Yehuda,</span> <span>Adam,</span> <span>Todd</span>
  </div>
  <div>
    <b>Nobody,</b> <span>John,</span> <span>Scott,</span> <span>Timo</span>
  </div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    console.log($('span:first-child'));//Corey
    console.log($('span:first-of-type'));//corey,John
  </script>
</body>

4、Jquery DOM操作

jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。
常用的从几个方面来操作，查找元素（选择器已经实现)；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；节点;删除、添加、修改、设定节点的CSS样式等。注意:以下的操作方式只适用于jQuery对象。

4.1.操作元素的属性

4.1.1.获取属性

方法	说明	举例
attr(属性名称)	获取指定的属性值，操作checkbox时，选中返回checked，没有选中返回undefined	attr("checked") attr('name')
prop(属性名称)	获取具有true和false两个属性的属性值	prop("checked")

属性的分类：

固有属性：元素本身就有的属性（id,name，class,style)
返回值是Boolean的属性，checked，selected,disabled
自定义属性，用户自己定义的属性

区别：

如果是固有属性，attr()和prop()方法均可操作
如果是自定义属性，attr()可以获取，prop()不可获取
如果是返回值Boolean类型的属性
- 若设置了属性，attr()返回具体的值，prop()返回true
- 若未设置属性，attr()返回undefined，prop()返回false

4.1.2.设置属性

attr("属性名","属性值")；

prop("属性名","属性值");

4.1.3.移除属性

选择器.removeAttr("属性名")

总结：如果属性类型是Boolean（checked,selected,disabled)使用prop()方法，否则使用attr()方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素的属性</title>
		<!-- 属性的分类：固有属性	attr,prop
			 返回值是boolean的属性：checked，selected,disabled
			 自定义属性：用户自定义
		 -->
	</head>
	<body>
		<form action="" id="myform">
		<input type = "checkbox" name="ch" checked="checked" id="aa" abc="aabbcc"/>aa
		<input type="checkbox" name="ch" id="bb"/> bb
		</form>

	</body>
	<script src="jquery-3.5.1.js" type="text/javascript" charset="UTF-8"></script>
	<script type="text/javascript">
		// 获取属性
		var name = $("#aa").attr("name");
		console.log(name);
		var name2 = $("#aa").prop("name");
		console.log(name2);
		// 返回值是Boolean属性,复选框设置checked属性
		var v1 = $("#aa").attr("checked");//返回checkded
		console.log(v1);
		var v2 = $("#aa").prop("checked");//返回true
		console.log(v2);
		// 返回值是Boolean属性，checked属性未设置
		var v3 = $("#bb").attr("checked");//undefined
		console.log(v3);
		var v4 = $("#bb").prop("checked");//false
		console.log(v4);
		// 自定义属性
		var v5 = $("#aa").attr("abc");//aabbcc
		console.log(v5);
		var v6 = $("#aa").prop("abc");//undefined
		console.log(v6);
		/* 设置属性 */
		// 固有属性
		$("#aa").attr("value",100);
		$("#bb").prop("value",101);
		// 返回值是boolean的属性
		$("#aa").attr("checked","checked");
		$("#bb").prop("checked",false);
		// 自定义属性
		$("#aa").attr("uanme","zhagnsan");
		$("#bb").prop("uname","lisi");
		// 移除属性
		$("#aa").removeAttr("checked");
		
	</script>
</html>

4.2.操作元素的样式

方法	说明
attr("class")	获取class属性的值，即样式名称
attr("class","样式名")	修改class属性的值，修改样式（原本的样式会被覆盖
addClass("样式名")	添加样式名称，如果出现相同的样式，以后出现的为准
css()	添加具体的样式（相当于添加行内样式，样式级别高） css({"样式名":"样式值","样式名":"样式值"}); css("样式名","样式值");
removeClass(class)	移除样式名称

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作样式</title>
		<script src="jquery-3.5.1.js" type="text/javascript"></script>
		<style type="text/css">
			div{
				padding:10px;
				width: 180px;
			}
			.blue{
				background: blue;
			}
			.larger{
				font-size: 28px;
			}
			.green{
				background-color: green;
			}
			.pink{
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<h3>css方法设置样式</h3>
		<div id="conBlue" class="blue larger">天蓝色</div>
		<div id="conRed">红色</div>
		<div id="remove" class="blue larger">布吉岛色</div>
	</body>
	<script type="text/javascript">
		// 1.获取样式名
		var v1 = $("#conBlue").attr("class");
		console.log(v1);
		// 设置样式
		$("#conBlue").attr("class","green");
		// 添加属性
		$("#conBlue").addClass("green");
		console.log($("#conBlue").attr("class"));
		// css，添加样式
		$("#conRed").css("font-size","40px");
		$("#conRed").css({"color":"red","font-family":"楷体"});
		//移除样式
		$("#remove").removeClass("larger");//移除样式class
	</script>
</html>

4.3.操作元素的内容

对于元素还可以操作其中的内容，例如文本，值，甚至是html

方法	说明
html()	获取元素的HTML内容
html("html.内容")	设定元素的HTML内容
text()	获取元素的文本内容，不包含HTML
text("text 内容")	设置元素的文本内容，不包含HTML
val()	获取元素value值
val("值")	设定元素的value值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<!-- 操作元素的内容
			html()		获取元素的内容	包含HTML标签（非表单元素
			html("内容")	设置元素的内容	包含HTML标签（非表单元素
			text()		获取元素的的纯文本内容，不识别HTML标签，非表单元素
			text("纯文本内容")	设置	非表单元素
			val()	获取元素的值（表单元素）
			val("值") 设置元素的值（表单元素）
			
		-->
	</head>
	<body>
		<h3><span>html()和text()方法设置元素内容</span></h3>
		<div id="html_1"></div>
		<div id="html_2"></div>
		<div id="text_1"></div>
		<input type="text" name="uname" id="table" value="oop"/>
	</body>
	<script src="jquery-3.5.1.js" type="text/javascript" charset="UTF-8"></script>
	<script type="text/javascript">
		// 
		console.log($("h3").html());
		console.log(typeof $("h3").html());
		// 设置、获取HTML内容
		$("#html_1").html("<h2>上海是个不夜城</h2>");
		$("#html_2").html("上海是个不夜城");
		console.log($("#html_1").html());
		console.log($("#html_2").html());
		// 设置text
		$("#text_1").text("<h2>上海是个不夜城</h2>");
		console.log($("h3").text());//html()和text()方法设置元素内容
		// 获取，设置表单value
		var v1 = $("#table").val()
		console.log("获取表单元素内容："+v1);
		
		$("#table").val("unbelievable");
	</script>
</html>

4.4. 创建元素

在JQuery中创建元素很简单，直接使用核心函数即可

$('元素内容')例如：

$('<p>this is a paragraph!!</p>')

4.5. 添加元素

方法	说明
prepend(content)	在被选元素内部的最前面追加内容，被追加的content参数，可以是字符，HTML元素标签
$(content).prependTo(selector)	把content元素或内容加入selector元素开头
append(content)	在被选元素内容的结尾插入元素或内容，被追加的content参数，可以是字符，HTML标签
$(content).appendTo(selector)	把content元素或内容插入selector元素内，默认是在尾部
before()	同级，在元素前插入指定的元素或内容：$(selector).before(content)
after()	同级，在元素后插入指定的元素或内容：$(selector).after(content)

注：在添加元素时，如果元素本身不存在（新建的元素）,此时会将元素追加到指定位置

如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建或添加元素对象</title>
	<style type="text/css">
		.blue{
			background-color: blue;
		}
		.red{
			background-color: pink;
		}
		.green{
			background-color: green;
		}
		span{
			margin:10px;
		}
	</style>
	</head>
	<body>
		<h3>prepend（）方法前追加内容</h3>
		<h3>prependTO（）方法前追加内容</h3>
		<h3>append（）方法后追加内容</h3>
		<h3>appendTo（）方法后追加内容</h3>
		<span class="blue">牛</span>
		<span class="red">虎</span>
		<div class="green">
			<span>XXX</span>
		</div>
	</body>
	<!-- 创建元素：$('内容')
		 添加元素：1.前追加子元素
				  2.后追加子元素
				  3.前追加同级元素
				  4.后面追加同级元素
	-->
	<script src="jquery-3.5.1.js" type="text/javascript" charset="UTF-8"></script>
	<script type="text/javascript">
		// 创建对象
		var p = '<p>这是一个p标签</p';
		console.log(p);
		p = $(p);
		console.log(p);
		/* 添加对象 */
		// 创建对象
		var v1 = $(".green");
		var span2 = '<span>仁</span>';
		$(span2).prependTo(v1);
		var span = '<span>虾</span>';
		v1.prepend(span);
		// 
		var span3 = '<span>猪</span>';		
		v1.append(span3);
		var span4 = '<span>心</span>';
		$(span4).appendTo(v1);
		//将已存在对象添加
		var v2 = $(".blue");
		v2.appendTo(v1);
		// 同级追加
		var sp1 =  '<span class="green">天</span>'//如果这里class="red",那么,之后的同级追加会在两个都为red样式的标签后添加 sp2
		var sp2 =  '<span class="green">地</span>'
		
		$(".red").before(sp1);
		$(".red").after(sp2);
	</script>
</html>

4.6.删除元素

方法	说明
remove()	删除所选元素或指定的子元素，包括整个标签和内容一起删
empty()	清空所选元素的内容，会保留标签

4.7.遍历元素 each()

$(selector).each(function(index,element));遍历元素

参数 function 为遍历时的回调函数，每个匹配元素都会去执行这个函数
index 为遍历元素的序列号，从0开始
element是当前的元素，此时是dom元素
在回调函数内部还可以直接使用$(this)来表示当前元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				color: wheat;
				padding: 8px;
				margin: 5px;
				float:left;
			}
			.green{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>each()遍历</h3>
		<span class="green">Jquery</span>
		<span class="green">javaee</span>
		<span class="green">http协议</span>
		<span class="green">Servlet</span>
	</body>
	<script src="jquery-3.5.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(".green").each(function(index,element){
			console.log(index);
			console.log(element);
			console.log(this);//指代element
			console.log($('element'));//转换为jquery对象
		})
	</script>
</html>

4.8 元素筛选

image-20201213100744911

5、Jquery事件

5.1.ready加载事件

预加载事件，当页面的dom结构加载完毕后执行
ready()类似于onLoad()事件
ready()可以写多个，按顺序执行
$(document).ready(function(){}) 等价于 简写$(function(){})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ready加载事件</title>
		<script src="jquery-3.5.1.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			//ready加载事件的	简写
			$(function(){
				console.log($("#test").text());
			})
			$(document).ready(function(){
				console.log("hello world！");
			})
		</script>
	</head>
	<body>
		<p id="test">read加载事件</p>
	</body>
</html>

5.2.绑定事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector). bind( eventType , [ , eventData] , handler(eventobject)) ;
eventType :是一个字符串类型的事件类型，就是你所需要绑定的事件。
这类类型可以包括如下:

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,mouseleave,change, select, submit, keydown, keypress, keyup, error

eventData：传递的参数，格式:{名:值,名2:值2}

handler(eventObject):该事件触发执行的函数

绑定单个事件：

`$("元素").bind("事件类型",function(){})`
直接绑定
`$("元素").事件名(function(){})`

绑定多个事件：

1.同时为一个元素的多个事件绑定同一个函数
  指定元素.bind("事件类型1 事件类型2"...,function(){...});
2.为元素绑定多个事件，并设置对应的函数
指定元素.bind("事件类型",function(){}).bind("事件类型",function(){});
3.为元素绑定多个事件，并设置对应的函数
指定元素.bind({"事件类型":function(){},
			 "事件类型":function(){},
			  ...
	})
4.直接绑定
指定元素.事件类型(function(){}).事件类型(function(){})

绑定事件三部曲：

为哪些元素绑定事件？
绑定什么样的事件？
事件触发什么样的操作？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定事件</title>
	</head>
	<body>
		<h3>bind()简单的绑定事件</h3>
		<div id='test' style="cursor:pointer">点击查看名言</div>
		<!-- style="cursor:pointer" 设置鼠标经过的样式，变成可点击的小手 -->
		<input id="button" value="点击就不可用了"/>
		<hr/>
		<button type="button" id="btn1">按钮1</button>
		<button type="button" id="btn2">按钮2</button>
		<button type="button" id="btn3">按钮3</button>
		<button type="button" id="btn4">按钮4</button>
	</body>
	<script src="jquery-3.5.1.js" type="text/javascript" charset="UTF-8"></script>
	<script type="text/javascript">
		 var v1 = $("#test");
			//直接绑定
		 $("#test").click(function(){
			 console.log("世上无难事只怕有心人");
		 })
		 //绑定单个事件
		 $("#button").bind('click',function(){
			 //禁用按钮
			$(this).prop("disabled",true);
		 });
		 /* 绑定多个事件*/
		 // 指定元素.bind("事件类型1" "事件类型2"...,function(){...});
		 $("#btn1").bind("click mouseout",function(){
			 console.log("专注！");
		 })
		 // 指定元素.bind("事件类型",function(){}).bind("事件类型",function(){});为同一元素的多个事件类型绑定不同的函数
		$("#btn2").bind("click",function(){
			console.log("被玩坏了");
		}).bind("mouseout",function(){
			console.log("快滚蛋!");
		})
		// 指定元素.bind({"事件类型":function(){}, "事件类型":function(){},
		$("#btn3").bind({
			"click":function(){
				console.log("啊，鼠标点击我了");
			},
			"mouseout":function(){
				console.log("啊，鼠标离开我了！");
			}
		})
		// 直接绑定
		$("#btn4").click(function(){
			console.log("按钮4被点击了");
		}).mouseout(function(){
			console.log("轻轻的我将离开你");
		});
	</script>
</html>

6、Jquery Ajax

6.1. $ajax

Asynchronous Javascript And XML，异步JavaScript和XML，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
ajax：异步，无刷新

jquery调用ajax方法：格式：$.ajax({});

参数：

type:请求方式GET/POST
url:请求地址
async:是否异步，默认true表示异步
data:发送到服务器的数据，请求附带的参数
contentType:设置请求头
success: 请求成功调用此函数function(data){}
error: 请求失败调用此函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" id="btn">查询用户</button>
	</body>
	<script src="../Jquery/jquery-3.5.1.js" type="text/javascript" charset="UTF-8"></script>
	<script type="text/javascript">
		$("#btn").click(function(){
			$.ajax({
				type:"get",//请求方式
				url:"JS/data.json",//可访问 的请求路径
				data:{
					//提交的参数,没有请求参数，该项可以省略
				},
				dataType:"json",
                //请求成功时调用
				success:function(data){//成功返回的数据
					// 创建dom元素
					var ul = $('<ul></ul>');
					for (var i = 0; i < data.length; i++) {
						var user = data[i];
						var str = '<li>'+user.userName+'</li>';
						ul.append(str);
					}
					$("body").append(ul);
				}
			})
		});
	</script>
</html>

6.2. $get

一个简单的GET请求功能以取代复杂$.ajax

请求成功时可调用回调函数，如果需要在出错时执行函数，请使用$.ajax

//1.请求json文件，忽略返回值
$.get('Js/xxx.json')
//2.请求json文件，传递参数，忽略返回值
$.get('JS/xxx.json',{name:"kangkagn",age:100})
//3.请求json文件，拿到返回值，请求成功后可拿到返回值
$.get('JS/xxx.json',function(data){
    console.log(data);
})
//4.请求json文件，传递参数，拿到返回值
$.get('JS/xxx.json',{name:"kagnkang",password:"1234567"},function(){
    console.log(data);
})

6.3. $Post

几乎同$.get

$.getJSON()

注意：getJSON()只识别json格式的文件

posted @ 2021-10-10 23:38 三两研几阅读(159) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？

站点概览文章目录

Aspiration

风朗气晴，江山稳固