目录
简介
JQuery是一套兼容多浏览器的JavaScript脚本库，核心理念是写得更好，做的更多。使用JQuery将极大的提高编写JavaScript代码的效率，帮助开发者节省大量的工作，让写出来的代码更加优雅，更加健壮，如虎添翼。
JQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，JQuery已经成为最流行的JavaScript框架，在世界前10000多个访问最多的网站中，有超过55%在使用JQuery。
打开链接，复制内容并粘贴到项目中，文件名为：jquery-3.7.1.min.js
文件放在js目录下。
完整版：jquery-3.7.1.js --->学习版（学习源码 向高手学习时最好的学习方法）
压缩版：jquery-3.7.1.min.js --->开发版（压缩版，减少传输）
优点
- 提供了强大的功能函数
- 解决浏览器兼容性问题
- 实现丰富的UI和插件
- 纠正错误的脚本知识
JQuery对象
JQuery的使用
在页面引入即可
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
JQuery核心
$符号在JQuery中代表对JQuery对象的引用，"JQuery"是核心对象。通过该对象可以获取JQuery对象，调用JQuery提供的方法等。只有JQuery对象才能调用JQuery提供的方法。
$ <==> JQuery
Dom对象与JQuery包装集对象
明确Dom对象和JQuery对象包装集的概念，将极大的加快我们的学习速度。原始的Dom对象只有DOM接口提供的方法和属性，通过JS代码获取的对象都是Dom对象；而通过JQuery获取的对象是JQuery包装集对象，简称JQuery对象，只有JQuery对象才能使用JQuery提供的方法。
Dom对象：
通过js方式获取的元素名称(docment)
JQuery对象：
通过JQuery方法获取的元素对象，返回的是JQuery包装集
Dom对象
JavaScript中获取dom对象，dom对象只有有限的属性和方法；
var divs = document.getElementById("testDiv")
var divs = document.getElementsByTagName("div")
JQuery包装集对象
可以说Dom对象的扩充在JQuery世界中将所有的对象，无论是一个还是一组，都封装成一个JQuery包装集，比如获取包含一个元素的JQuery包装集。
var JQueryobject = $("#testDiv")
Dom对象转JQuery对象
Dom对象转JQuery对象，只需要利用$()方法进行包装即可
var domDiv = document.getElementById('mydiv') //获取Dom对象
mydiv = $(domDiv)
JQuery对象转Dom对象
JQuery对象转Dom对象，只需要取数组中的元素即可
//第一种方式 获取JQuery对象
// var jqueryDiv = jQuery('#mydiv');
//第二种方式 获取JQuery对象
jqueryDiv = $('#mydiv')
//将获取的JQuery对象转为dom
var dom = jqueryDiv[0]
JQuery选择器
和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在JQuery中提供了简便的方式供我们查找|定位元素，成为JQuery选择器，选择器可以说是最考验一个人JQuery功力的地方，通俗的讲，Selector选择器就是“一个表示特殊语意的字符串”。只要把选择字符串传入上面的方法中就能够选择不同的Dom对象并且以JQuery包装集的形式返回。
JQuery选择器按照功能只要分为“选择”和“过滤”。。并且是配合使用的，具体分类如下。基础选择器掌握即可，其他用到时再查阅。
基础选择器
| 选择器 | 名称 | 举例 | 含义 |
|---|---|---|---|
| id选择器 | #id | $("#id属性值")选择id为testDiv的元素 | 选择di为指定元素对象（如果有多个同名id，则以第一个为准） |
| 元素名称选择器 | element | $("标签名/元素名")选择所有div元素 | 选择所有指定标签的元素对象 |
| 类选择器 | .classs | $(".class属性值")选择所有class=blue的元素 | 选择class为指定值的元素对象 |
| 选择所有元素 | * | $("*")选择页面所有元素 | 选择页面中所有的元素对象 |
| 组合选择器 | 选择器1,选择器2,.. | $("#选择器1,选择器2,..")同时选择多个选择器匹配的元素 | 选择指定选择器选中的元素对象 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="mydiv1" class="blue">元素选择器</div>
<div id="mydiv1">id选择器<span>span中的内容</span></div>
<span class="blue">样式选择器</span>
</body>
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//ID选择器
var mydiv = $("#mydiv1")
console.log(mydiv)
//类选择器
var clas = $(".blue")
console.log(clas)
// 元素选择器
var spans = $("span")
console.log(spans)
// 通用选择器
var all = $("*")
console.log(all)
// 组合选择器
var group = $("#mydiv1, div, .blue")
console.log(group)
</script>
</html>
层次选择器
| 选择器 | 名称 | 举例 | 含义 |
|---|---|---|---|
| 后代选择器 | ancestor descendant | $("parent div") | 选择父元素的所有指定元素（包含第一代、第二代等） |
| 子代选择器 | parent > child | $("parent > div") | 选择父元素的所有第一代指定元素 |
| 相邻选择器 | prev + next | $(".blue + img") | 选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则获取不到） |
| 同辈选择器 | prev ~ sibling | $(".blue ~ img") | 选择元素的下面的所有指定元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.testColor{
background-color: green;
}
.gray{
background-color: gray;
}
</style>
<body>
<div id="parent">层次选择器
<div id="child" class="testColor">父选择器
<div class="gray">子选择器</div>
<img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129">
<img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129">
</div>
<div>
选择器2<div>选择器2中的div</div>
</div>
</div>
</body>
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//后代选择器
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>
表单选择器
| Forms | 名称 | 举例 |
|---|---|---|
| 表单选择器 | :input | 查找所有的input元素，注意会匹配所有的input、textarea、select和button元素 $(":input") |
| 文本框选择器 | :text | 查找所有文本框 $(":text") |
| 密码框选择器 | :password | 查找所有密码框 $(":password") |
| 单选按钮选择器 | :radio | 查找所有单选框 $(":radio") |
| 复选框选择器 | :checkbox | 查找所有复选框 $(":checkbox") |
| 提交按钮选择器 | :submit | 查找所有提交框 $(":submit") |
| 图像域选择器 | :image | 查找所有图像域 $(":image") |
| 重置按钮选择器 | :reset | 查找所有重置按钮 $(":reset") |
| 按钮选择器 | :button | 查找所有按钮 $(":button") |
| 文件域选择器 | :file | 查找所有文件域 $(":file") |
JQuery Dom操作
JQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。
常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。
注意：以下的操作方式只适用于JQuery对象
操作元素属性
获取属性
| 方法 | 说明 | 举例 |
|---|---|---|
| attr（属性名） | 获取指定的属性值，操作checkbox时，选中返回checked，没有选中返回undefined | attr('checked') attr('name) |
| prop（属性名） | 获取具有true和false两个属性的属性值 | prop('checked') |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.testColor{
background-color: green;
}
.gray{
background-color: gray;
}
</style>
<body>
<input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc"> aa
<input type="checkbox" name="ch" id="bb"> bb
</body>
<!--
操作元素的属性：
属性的分类：
固有属性：元素本身就有的属性：id、name、class、style
返回值是Boolean的属性：checked、selected、disabled
自定义属性：用户自定义的属性
区别：
1. 如果是固有属性，attr()和prop()方法均可操作
2. 如果是自定义属性，attr()可以操作，prop()不可操作
3. 如果返回值是Boolean类型的属性，
若设置了属性，attr()返回具体的值，prop()返回true
若未设置属性，attr()返回undefined，prop()返回false
获取属性：
attr("属性名")
prop("属性名")
设置属性
attr("属性名","属性值")
prop("属性名","属性值")
移除属性
removeAttr("属性名")
总结：
如果属性的类型是Boolean，则使用prop()方法，否则使用attr()方法。
一开始只有attr()方法，后续为了缓解attr()的压力，新推出了prop()方法来操作Boolean类型
-->
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//获取固有属性
var name = $("#aa").attr("name")
console.log(name);//ch
var name2 = $("#aa").prop("name")
console.log(name2)//ch
// 返回值是Boolean的属性（元素设置了属性）
var ck1 = $("#aa").attr("checked")
var ck2 = $("#aa").prop("checked")
console.log(ck1)//checked
console.log(ck2)//true
// 返回值是Boolean的属性（元素未设置属性）
var ck3 = $("#bb").attr("checked")
var ck4 = $("#bb").prop("checked")
console.log(ck3) //undefined
console.log(ck4) // false
//自定义属性
var abc1 = $("#aa").attr("abc")
var abc2 = $("#aa").prop("abc")
console.log(abc1) //aabbcc
console.log(abc2) //undefined
//设置固有属性
$("#aa").attr("value", "1")
$("#bb").prop("value", "2")
//返回值是Boolean的属性
$("#bb").attr("checked","checked")
$("#bb").prop("checked",false)
//自定义属性
$("#aa").attr("uname","admin")
$("#aa").prop("uage",18)
//移除属性
$("#aa").removeAttr("checked")
</script>
</html>
设置属性
//设置固有属性
$("#aa").attr("value", "1")
$("#bb").prop("value", "2")
//返回值是Boolean的属性
$("#bb").attr("checked","checked")
$("#bb").prop("checked",false)
//自定义属性
$("#aa").attr("uname","admin")
$("#aa").prop("uage",18)
移除属性
//移除属性
$("#aa").removeAttr("checked")
操作元素样式
对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。
| 方法 | 说明 |
|---|---|
| attr("class") | 获取class属性的值，即样式名称 |
| attr("class","样式名") | 修改class属性的值，修改样式 |
| addClass("样式名") | 添加样式名称 |
| css() | 添加具体的样式 |
| removeClass(class) | 移除样式名称 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.blue{
background: blue;
}
.larger{
font-size: 30px;
}
.pink{
background: pink;
}
.green{
background: green;
}
</style>
</head>
<body>
<!--
操作元素的样式
attr("class") 获取元素的样式名
attr("class", "样式名") 设置元素的样式 (设置样式，原本的样式会被覆盖)
addClass("样式名") 添加样式 （在原来的样式基础上添加样式，原本的样式会保留， 如果出现相同样式则以样式中后定义的为准）
css() 添加具体的样式 （添加行内样式）
css("具体样式名":"样式值") 设置单个样式
css({"具体样式名":"样式值","具体样式名":"样式值"}) 设置多个样式
removeClass("样式名") 移除样式
-->
<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
</body>
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// attr("class") 获取元素的样式名
var cla = $("#conBlue").attr("class")
console.log(cla)
//attr("class", "样式名") 设置元素的样式
$("#conBlue").attr("class","green")
// addClass("样式名") 添加样式
$("#conBlue").addClass("larger")
$("#conBlue").addClass("pink")
//css() 添加具体的样式 （添加行内样式）
$("#conRed").css("font-size","40px")
$("#conRed").css({"font-family":"楷体","color":"green"})
// removeClass("样式名") 移除样式
$("#remove").removeClass("blue")
</script>
</html>
操作元素的内容
对于元素还可以操作其中的内容，例如文本、值、甚至是HTML
| 方法 | 说明 |
|---|---|
| html() | 获取元素的HTML内容 |
| html("html,内容") | 设定元素的HTML内容 |
| text() | 获取元素的文本内容，不包含HTML |
| text("text 内容") | 设置元素的文本内容，不包含HTML |
| val() | 获取元素的value值 |
| val('值') | 设定元素的value值 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>html()和text()方法设置元素内容</h3>
<div id="html"></div>
<div id="html2"></div>
<div id="text">北京</div>
<div id="text2"><h2>北京</h1></div>
<input type="text" name="uname" value="oop" id="op">
<!--
操作元素的内容
html() 获取元素的内容，包含HTML标签（非表单元素）
html("内容") 设置元素的内容，包含HTML标签（非表单元素）
text() 获取元素的纯文本内容，不识别HTML标签（非表单元素）
text("内容") 设置元素的纯文本内容，不识别HTML标签（非表单元素）
val() 获取元素的值（表单元素）
val("内容") 设置元素的值（表单元素）
表单元素：
文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select
非表单元素:
div、span、h1~h6、table、tr、td、li、p等
-->
</body>
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//html("内容") 设置元素的内容，包含HTML标签（非表单元素）
$("#html").html("<h2>上海</h2>")
$("#html2").html("上海")
//html() 获取元素的内容，包含HTML标签（非表单元素）
var html = $("#html").html()
var html2 = $("#html2").html()
console.log(html)
console.log(html2)
//text("内容") 设置元素的纯文本内容，不识别HTML标签（非表单元素）
$("#text").text("北京")
$("#text2").text("<h2>北京</h2>")
//text() 获取元素的纯文本内容，不识别HTML标签（非表单元素）
var txt = $("#text").text()
var txt2 = $("#text2").text()
console.log(txt)
console.log(txt2)
// val() 获取元素的值（表单元素）
var val = $("#op").val()
console.log(val)
// val("内容") 设置元素的值（表单元素）
$("#op").val("今天天气还好")
</script>
</html>
创建元素
在JQuery中创建元素很简单，直接使用核心函数即可
$('元素内容')
$('<p>this is a paragaph!!!</p>')
添加元素
| 方法 | 说明 |
|---|---|
| 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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
margin: 10px 0px;
}
span{
color: white;
padding: 8px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
.pink{
background-color: pink;
}
.gray{
background-color: gray;
}
</style>
<body>
<h3>prepend()方法前面追加内容</h3>
<h3>prependTo()方法前面追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>
<span class="red">男神</span>
<span class="blue">偶像</span>
<div class="green"><span>小鲜肉</span></div>
<!--
创建元素和添加元素
创建元素
$("内容")
添加元素
1.前追加子元素
指定元素.prepend(内容) 在指定元素内部的最前面追加内容，内容可以是字符串、HTML元素
$(内容).prependTo(指定元素) 把内容追加到指定元素内部的最前面，内容可以是字符串、HTML元素
2.后追加子元素
指定元素.append(内容) 在指定元素内部的在最后面追加内容，内容可以是字符串、HTML元素
$(内容).appendTo(指定元素) 把内容追加到指定元素内部的最后面，内容可以是字符串、HTML元素
3.前追加同级元素
before() 在指定元素的前面追加内容
4.后追加1同级元素
after() 在指定元素的后面追加内容
注意：
在添加元素时，如果元素本身不存在（新建的元素），此时将元素追加到指定位置；
如果元素本身存在（已有元素）会将原来元素直接剪切到指定位置
-->
</body>
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//创建元素
var p = "<p>这是一个p标签</p>"
console.log(p)
console.log($(p))
// 创建元素
var span = "<span>小奶狗</span>"
//添加元素
$(".green").append(span)
var span2 = "<span>小狼狗</span>"
$(span2).appendTo($(".green"))
// 将已存在内容追加到指定元素中
$(".green").append($(".red"))
//同级追加
var sp1 = "<span class='pink'>女神</span>"
var sp2 = "<span class='gray'>歌手</span>"
$(".blue").before(sp1)
$(".blue").after(sp2)
</script>
</html>
删除元素
| 方法 | 说明 |
|---|---|
| remove() | 删除所选元素或指定的子元素，包括整个标签和内容一起删除 |
| empty() | 清空所选元素的内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
<body>
<!--
删除元素
remove()
删除元素及其对应的子元素，标签和内容一起删除
指定元素.remove()
empty()
清空元素内容，保留标签
指定元素.empty()
-->
<h3>删除元素</h3>
<span class="green">jquery<a>删除</a></span>
<span class="blue">javase</span>
<span class="green">http协议</span>
<span class="blue">servlet</span>
</body>
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//删除元素
$(".green").remove()
//清空元素
$(".blue").empty()
</script>
</html>
遍历元素
each()
$(selector).each(function(index,element)):遍历元素
参数function为遍历时的回调函数
index为遍历元素的序列号，从0开始。
element是当前元素，此时是dom元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
<body>
<!--
each()
$(selector).each(function(index,element)):遍历元素
参数function为遍历时的回调函数
index为遍历元素的序列号，从0开始。
element是当前元素，此时是dom元素。
-->
<h3>遍历元素</h3>
<span class="green">jquery<a>删除</a></span>
<span class="green">javase</span>
<span class="green">http协议</span>
<span class="green">servlet</span>
</body>
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//获取指定元素并遍历
$(".green").each(function(index,element){
console.log(index)
console.log(element)
console.log(this)
console.log($(this))
})
</script>
</html>
JQuery事件
ready预加载事件
代码执行从上往下执行的，如果先执行后定义 会出现object空的情况，所以ready加载就是解决这种问题的，允许先执行后定义
reayd()类似于onLoad()事件
ready()可以写多个，按顺序执行
\((document).ready(function(){})等价于\)(function(){})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//获取元素
console.log($("#p1"))
})
$(function(){
// 简便写法
console.log($("#p1"))
})
</script>
</head>
<body>
<!--
eready加载事件
预加载事件
当页面的dom结构加载完毕后执行
类似于js中load事件
ready事件可以写多个
语法：
$(document).ready(function(){
})
简写：
$(function(){
})
-->
<p id="p1">文本</p>
</body>
</html>
绑定事件
为备选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind(evenType [, eventData], handler(eventObject));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
绑定事件
bind绑定事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
语法：
$(selector).bind(evenType [, eventData], handler(eventObject));
解释：
eventType：是一个字符串类型的事件类型，就是你所需要绑定的事件
[, eventData] 传递参数，格式：{名：值，名2：值2}
handler(eventObject) 该事件触发执行的函数
绑定单个事件
$("元素").bind("事件类型"，function(){
})
直接绑定
$("元素").事件名(function(){
})
绑定多个事件
bind绑定
1、同时为多个事件绑定同一个函数
指定元素.bind("事件类型1 事件类型2 ..",function(){
})
2、为元素绑定多个事件并设置对应的函数
指定元素.bind("时间类型", function(){
})
3、为元素绑定多个事件，并设置对应的函数
指定元素.bind({
"事件类型": function(){
},
"事件类型": function(){
},
})
直接绑定
$("元素").事件名(function(){
}).事件名(function(){
}).事件名(function(){
})
-->
<h3>bind()方法简单的绑定事件</h3>
<!-- 设置鼠标图标 -->
<div id="test" style="cursor: pointer">点击查看名言</div>
<input id="btntest" type="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="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件（事件类型）
第一个参数 ：事件类型
3.相应事件触发的，执行的操作
第二个参数：函数
*/
//绑定单个事件
$("#test").bind("click", function(){
console.log("世上无难事只怕有心人")
})
//原生js绑定事件
document.getElementById("test").onclick = function(){
console.log("test")
}
//直接绑定事件
$("#btntest").click(function(){
//禁用按钮
$(this).prop("disabled", true)
})
//绑定多个事件
//1、同时为多个事件绑定同一个函数
$("#btn1").bind('click mouseout',function(){
console.log("按钮1")
})
//2、为元素绑定多个事件并设置对应的函数
$("#btn2").bind("click",function(){
console.log("按钮2被点击了")
}).bind("mouseout",function(){
console.log("按钮2离开了")
})
//3、为元素绑定多个事件，并设置对应的函数
$("#btn3").bind({
'click': function(){
console.log('按钮3点击了')
},
'mouseout': function(){
console.log('按钮3离开')
}
})
//直接绑定
$("#btn4").click(function(){
console.log("按钮4点击了")
}).mouseout(function(){
console.log("按钮4离开了")
});
</script>
</html>
JQuery Ajax
同步操作：我点击了请求按钮，必须要等到操作完成，给我返回值之后才能继续操作
异步操作：我点击了请求按钮，你给我返回值我就处理，等待给我返回值的这段时间，我就干其他的。
Ajax经常用于局部刷新或者无刷新的场景中。
$.ajax
JQuery调用Ajax方法
格式：$.ajax({});
参数：
type: 请求方式GET/POST
url: 请求地址URL
async: 是否异步，默认是true表示异步
data: 发送到后端的数据
dataType: 预期后端返回的数据类型
contentType: 设置请求头
success: 请求成功时调用此函数
error: 请求失败时调用此函数
get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
JQuery调用Ajax方法
格式：$.ajax({});
参数：
type: 请求方式GET/POST
url: 请求地址URL
async: 是否异步，默认是true表示异步
data: 发送到后端的数据
dataType: 预期后端返回的数据类型
contentType: 设置请求头
success: 请求成功时调用此函数
error: 请求失败时调用此函数
-->
<button type="button" id="btn">查询数据</button>
</body>
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//点击按钮，发送Ajax请求，将数据显示到页面中
$("#btn").click(function(){
$.ajax({
type:"get", //请求方式
url:"https://jsonplaceholder.typicode.com/users", //请求地址
// data:{ //请求数据，JSON格式
// uname:"" //如果没有参数，则不需要设置
// },
dataType:"json", //预期返回的数据类型，如果是JSON格式，在接收到返回值时自动供封装成JSON对象
//请求成功时调用函数
//data是形参名，代表的是返回的数据
success:function(data){
console.log(data)
//如果返回类型是字符串，则需要做JSON序列化;我这里获取到的就是JSON类型，不需要做
// var obj = JSON.parse(data)
// console.log(obj)
//Dom操作
//创建ul
var ul = $("<ul></ul>")
//遍历返回的数据数组
for(var i = 0; i < data.length; i ++){
//得到数组中的每一个元素
var user= data[i];
//创建li元素
var li = "<li>"+ user.username+"</li>"
//将li元素设置到ul元素中
ul.append(li);
}
console.log(ul)
//将ul添加到页面中
$("body").append(ul)
}
})
})
</script>
</html>
$.get
这是一个简单的GET请求功能，以取代复杂的$.ajax
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax
// 1.请求JSON文件，忽略返回值
$.get('js/cuisine_area.json')
//2.请求JSON文件，传递参数，忽略返回值
$.get('js/cuisine_area.json', {name:"tom",age:100});
//3.请求JSON文件，拿到返回值，请求成功后可拿到返回值
$.get('js/cuisine_area.json',function(data){
console.log(data);
})
//4.请求JSON文件，传递参数，拿到返回值
$.get('js/cuisine_area.json', {name:"tom",age:100},function(data){
console.log(data);
});
$.post
这是一个简单的GET请求功能，以取代复杂的$.ajax
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax
// 1.请求JSON文件，忽略返回值
$.post('js/cuisine_area.json')
//2.请求JSON文件，传递参数，忽略返回值
$.post('js/cuisine_area.json', {name:"tom",age:100});
//3.请求JSON文件，拿到返回值，请求成功后可拿到返回值
$.post('js/cuisine_area.json',function(data){
console.log(data);
})
//4.请求JSON文件，传递参数，拿到返回值
$.post('js/cuisine_area.json', {name:"tom",age:100},function(data){
console.log(data);
});
$.getJSON
表示请求返回的数据类型是JSON格式的Ajax请求
$.getJSON('js/cuisine_area.json', {name:"tom",age:100},function(data){
console.log(data); //要求返回的数据格式是JSON格式
});