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(){})

    绑定事件三部曲：

    1. 为哪些元素绑定事件？
    2. 绑定什么样的事件？
    3. 事件触发什么样的操作？
    <!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  三两研几  阅读(118)  评论(0)  编辑  收藏  举报