jQuery总结
jQuery
一、主要内容
二、jQuery对象
jQuery是一套兼容多浏览器的javascript脚本库。核心理念是写得更少，做得更多，使用jQuery将极大的提高编写javascript代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，“如虎添翼”。同时网络.上丰富的jQuery插件，也让我们的工作变成了"有了jQuery,一切soeasy。”-- 因为我们已经站在巨人的肩膀上了。
jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经 成为最流行的javascript 框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
1、下载与安装
1.1、下载
http://jquery.com/ 点击下载 -> 选则要下载的版本 -> 会进入一个页面都是jq代码，网页中直接 ctrl+s保存到本地即可。
1.2、版本
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer6, 7,or 8. (不支持ie6 7 8,如果需要下载1.X)
(1)完整版: jquery-2.1.4.js ->学习版本(学习源码向高手学习是最好学习方法)
(2)压缩版: jquery-2.1.4.min.js ->开发版本(压缩版，减少传输)
目前使用版本: jquery-3.4.1.js
1.3、优点
(1)提供了强大的功能函数
(2)解决浏览器兼容性问题
(3)实现丰富的UI和插件
(4)纠正错误的脚本知识.
1.4、安装
在页面引入即可
<script src="js/jquery-3.4.1.js" type= ”text/javascript" ></script>
2、jQuery核心
$符号在jQuery中代表对jQuery对象的引用，“iQuery” 是核心对象。通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对 象才能调用jQuery提供的方法。
3、jQuery对象与Dom对象
3.1、获取对象
js (var jsDiv = document.getElementById(“newDiv”); )
如果元素存在，则获取dom对象，如果元素不存在，值为null
jquery (var jqDiv = $(’#newDiv’); )
如果元素存在，获取的是结果集对象，元素不存在，获取到空结果集
jq转dom对象：
jq对象[下标] 可以直接获取该下标的dom对象 返回dom
jq遍历获取单个dom返回新jq：
jq对象.eq(下标) 可以获取jq结果集中该下标所对应dom对象封装成的新的jq结果集对象 返回jq
判断数据是否存在
js中直接判断对象是否为空
jquery中需要判断结果集对象的长度 >0 有对象
<body>
<div id="newDiv">
div
</div>
<script type="text/javascript">
//获取dom对象
var jsDiv = document.getElementById("newDiv");
console.log(jsDiv); //div的Dom对象
//获取不存在的js对象
var jsDiv2 = document.getElementById("newDiv2");
console.log(jsDiv2); //null
//获取jq对象
var jqDiv = $("#newDiv");
console.log(jqDiv); //含有div的jq对象，长度lenth=1
//获取不存在的jq对象
var jqDiv2 = $("#newDiv2");
console.log(jqDiv2); //找不到div，结果为jq对象，长度lenth=0
console.log("============");
//对象的互相转化
console.log(jsDiv);
//dom转化成jq结果集对象
console.log($(jsDiv)); //含有div的jq对象，长度lenth=1
var str = "<p>段落标签</p>";
//字符串转化成jq对象
console.log($(str)); //含有p标签的jq对象，长度lenth=1
console.log($(jsDiv)[0]); //jq对象给下标获取dom对象
console.log(jqDiv[0]); //jq对象给下标获取dom对象
console.log(jqDiv.eq(0)); //jq.eq(下标) 获取带有该下标位置dom对象的jq对象
/* this代表了dom对象， 不是jquery对象*/
console.log("------------dom转jQuery对象--------------");
$("#myDiv").each(function(){
//通过id选择器选择了id为mydiv的所有元素然后进行遍历
//那么遍历出的每个元素就是id为mydiv的标签元素
//而this就代表了当前的这个元素
var jquery = $(this);
});
console.log("------------jquery转dom对象--------------");
$("#newDiv").each(function() {
var dom3 = this;
});
</script>
</body>
三、jQuery选择器
和使用JS操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找 | 定位元素，称为jQuery选择器，选择器可以说是最考验一个人jQuery功力的地方，通俗的讲, Selector选择器就是"一个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回。
jQuery选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。基础选择器掌握即可,其他用到再查阅。
1、基础选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| id选择器 | #id | $(" #testDiv")选择id为testDiv的元素 |
| 元素名称选择器 | element | $(“div”)选择所有div元素 |
| 类选择器 | class | $(".blue")选择所有class=blue的元素 |
| 选择所有元素 | * | S("*")选择页面所有元素 |
| 组合选择器 | selector1,selector2,selectorN | $("#testDiv,span,.blue")同时选中多个选择器匹配的元素 |
<body>
<div id="mydiv1">id选择器1<span>span中的内容</span></div>
<div id="mydiv2" class="blue">元素选择器</div>
<span class="blue">样式选择器</span>
<script type="text/javascript">
//id选择器
var newId = $("#mydiv1");
console.log(newId); //含有一个div的dom的jq对象
//元素选择器
var newDiv = $("div");
console.log(newDiv); //含有一个所有div的dom集合的jq对象
//类选择器
var newClass = $(".blue");
console.log(newClass); //含有一个所有class为.blue的dom集合的jq对象
//通用选择器选择所有元素
var all = $("*"); //11个，包括html，head，body等
console.log(all);
//组合选择器
var zh = $("#mydiv1,span,.blue");
console.log(zh);
</script>
</body>
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元素 |
<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>
<script type="text/javascript">
//后代选择器 子孙后代所有
var hd = $("#parent div");
console.log(hd);
//子代选择器
var zd = $("#parent > div");
console.log(zd);
//相邻选择器下一个，若下一个不是加号后面的，则返回lenth=0的jq对象，必须相邻 不包括自己
var xl = $("#child+div");
console.log(xl);
//同辈选择器，选择自己后面的同辈，不包括前面的 不包括自己
var tb = $(".gray ~ img");
console.log(tb)
</script>
</body>
3、表单选择器
| Forms | 名称 | 举例 |
|---|---|---|
| 表单选择器 | :input | 查找所有的input元素：$(":input")； 注意：会匹配所有的input、textarea、select和button元素。 |
| 文本框选择器 | :text | 查找所有文本框：$(":text") |
| 密码框选择器 | :password | 查找所有密码框：$(":password") |
| 单选按钮选择器 | :radio | 查找所有单选按钮：$(":radio") |
| 复选框选择器 | :checkbox | 查找所有复选框：$(":checkbox") |
| 提交按钮选择器 | :submit | 查找所有提交按钮：$(":submit") |
| 图像域选择器 | :image | 查找所有图像域：$(":image") |
| 重置按钮选择器 | :reset | 查找所有重置按钮：$(":reset") |
| 按钮选择器 | :button | 查找所有按钮：$(":button") |
| 文件域选择器 | :file | 查找所有文件域：$(":file") |
<body>
<form id='myform' name="myform" action="#" method="get" onsubmit="return checkForm();">
<input type="hidden" name="uno" value="9999" disabled="disabled"/>
姓名:<input type="text" id="uname" name="uname" /><br />
密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
<input type="radio" name="uage" value="1"/>你懂得 <br />
爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
<input type="checkbox" name="ufav" value="爬床"/>爬床
<input type="checkbox" name="ufav" value="代码"/>代码<br />
来自:<select id="ufrom" name="ufrom">
<option value="-1" selected="selected">请选择</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select><br />
简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
头像:<input type="file" /><br />
<input type="image" src="http://www.baidu.com/img/bd_logo1.png"
width="20" height="20"/>
<button type="submit" >提交</button>
<button type="reset" >重置</button>
</form>
<script type="text/javascript">
//inpput查找所有的表单元素 textarea与button也会获取到
var froms = $(":input");
console.log(froms);
//单选按钮选择器
var newRadio = $(":radio");
console.log(newRadio);
//多选按钮选择器
var newCheckbox = $(":checkbox");
console.log(newCheckbox);
function checkForm(){
//获取所有的表单元素
$(":input").each(function(){
// console.log($(this)[0]);
console.log($(this)[0].tagName);
})
console.log("------+++++++++++++++++++++--------");
//获取text
console.log("text-->" + $(":text").length); // 1
//获取password
console.log("password-->" + $(":password").length); // 1
//获取radio
console.log("radio-->" + $(":radio").length); // 2
//获取checkbox
console.log("checkbox-->" + $(":checkbox").length); // 3
//获取file
console.log("f1le-->" + $(":file").length); // 1
//获取按钮
console.log("button-->" + $(":button").length); // 2
//获取submit按钮
console.log("submit-->" + $(":submit").length); // 1
//获取image按钮
console.log("image-->" + $(":image").length); // 1
//获取reset按钮
console.log("reset-->" + $(":reset").length); // 1
return false;
}
</script>
</body>
四、jQuery Dom操作
jQuery也提供了对HTML节点的操作，而且在原生js的基础之.上进行了优化，使用起来更加方便。
常用的从几个方面来操作，查找元素(选择器已经实现) ; 创建节点对象;访问和设置节点对象的值，以及属性;添加节点;删除节点;删除、添加、修改、设定节点的CS样式等。注意:以下的操作方式只适用于jQuery对象。
1、操作元素的属性
属性分类
1.固有属性
元素自带的属性
2.自定义属性
自己设置的属性名和属性值
3.属性值为boolean类型的属性
checked selected disabled
属性方法：
attr
可以操作固有属性，自定义属性
获取boolean类型的属性值，如果属性存在，返回具体的值，如果不存在 返回undefined
prop
可以操作固有属性，不可以操作自定义属性
获取boolean类型的属性值，如果属性存在，返回true，如果不存在 返回false
获取属性：给一个参数
attr(“checked”)或attr(“name”)
prop(“checked”)
| 方法 | 说明 | 举例 |
|---|---|---|
| attr(属性名称) | 获取指定的属性值，操作checkbox时， 选中返回checked,没有选中返回undefined. | attr(“checked”),attr(“name”) |
| prop(属性名称) | 获取具有true和false两个属性的属性值 | prop(“checked”) |
设置属性 ：给两个参数
attr(‘属性名’,“属性值”);
prop(‘属性名’,“属性值”);
删除属性：
removeAttr(属性名) ：移除指定的属性 例如：removeAttr('checked")
<body>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<form action="" id="myform">
<input type="checkbox" id="aa" data="标签1" name="ch" value="1" checked="checked"/> aa
<input type="checkbox" id="bb" data="标签2" name="ch" value="2"/> bb
<input type="checkbox" name="ch1" /> cc
</form>
<script type="text/javascript">
var aa = $("#aa");
var bb = $("#bb");
//获取固有属性
console.log(aa.attr("name"),aa.attr("value")); //ch 1
console.log(bb.attr("name"),bb.attr("value")); //ch 2
console.log(aa.prop("name"),aa.prop("value")); //ch 1
console.log(bb.prop("name"),bb.prop("value")); //ch 2
//获取自定义属性
console.log(aa.attr("data")); //标签1
console.log(bb.attr("data")); //标签2
console.log(aa.prop("data")); //undefined
console.log(bb.prop("data")); //undefined
//操作Boolean类型的数据
console.log(aa.attr("checked"),bb.attr("checked")); //checked undefined
console.log(aa.prop("checked"),bb.prop("checked")); //true false
//属性选择器 获取name='ch1'
console.log($("[name='ch1']"));
//设置属性
var cc = $("[name='ch1']"); //获取要操作的标签
//操作自定义属性
cc.attr("data1","标签3"); //可以设置成功
cc.prop("data2","自定义标签3"); //设置不成功
//操作固有属性
cc.attr("id","bq3"); //设置成功
cc.prop("value","bq3"); //设置成功
//操作boolean值的属性
cc.attr("checked","checked"); //设置成功
cc.prop("checked",false); //设置成功
//删除属性
console.log(cc.attr('name')); //ch1
cc.removeAttr("name");
console.log(cc.attr('name')); //undefined
</script>
</body>
2、操作元素样式
对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。
| 方法 | 说明 |
|---|---|
| attr(“class”) | 获取class属性的值，即样式名称 |
| attr(“class”,“样式名”) | 修改class属性的值，修改样式 |
| addClass(“样式名”) | 添加样式名称 |
| css() | 添加具体的样式 |
| removeClass(class) | 移除样式名称 |
<!--
css操作样式模板，添加的是style中的样式，多次操作相同样式后面会覆盖前面的
1) css({'样式名’:’样式值’，'样式名2':'样式值2'})
例: css({"background- color":"red", "color":"#fff"}):
2) css("样式名", "样式值")
例: css('color','white')
-->
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.blue{
background: blue;
}
.larger{
font-size: 30px;
}
.green {
background : green;
}
</style>
</head>
<body>
<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="con" class="blue green">没有颜色</div>
<div id="remove" class="blue larger">天蓝色</div>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取class属性的值，即样式名称
var cb = $("#conBlue");
var clas = cb.attr("class");
//修改class属性的值，修改样式
cb.attr("class","green");
//addClass添加样式名称
var cr = $("#conRed");
cr.addClass("larger");
var cn= $("#con");
cn.addClass("green");
cn.addClass("blue");
//添加具体的样式 操作的是style中的值，用removeClass删除不了
cr.css("color","red");
cr.css({
"background-color":"blue",
"font-family":"华文新魏"
});
//css操作样式可以覆盖
cr.css("color","black");
//操作class属性中的值
cr.removeClass("larger");
//无法删除style，错误操作
cr.removeClass("style");
</script>
</body>
3、操作元素内容
操作元素的内容
1.设置、获取元素内容 识别html标签内容
获取：html();
设置：html(“内容”);
2.设置、获取纯文本内容 不能识别html标签内容
获取：text();
设置：text(“内容”);
3.设置、获取表单元素的值
获取：val();
设置：val(“值”);
| 方法 | 说明 |
|---|---|
| html() | 获取元素的html内容 |
| html(“html,内容”) | 设定元素的html内容 |
| text() | 获取元素的文本内容，不包含html |
| text(“text内容”) | 设置元素的文本内容，不包含html |
| val() | 获取元素value值 |
| val(“值”) | 设定元素的value值 |
<body>
<h3><span>html()和text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="oop" />
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var h3 = $("h3");
//获取元素内容
console.log(h3.html()); //<span>html()和text()方法设置元素内容</span>
console.log(h3.text()); //html()和text()方法设置元素内容
//在div中添加元素
$("#html").html("<h2>html()和text()方法设置元素内容</h2>"); //识别h2标签
$("#text").text("<h2>html()和text()方法设置元素内容</h2>"); //不识别h2标签，原样输出
//获取和设置表单元素
console.log($("[name='uname']").val());
$("[name='uname']").val("admin");
</script>
</body>
4、创建元素
在jQuery中创建元素很简单，直接使用核心函数即可
$('元素内容');
$('<p>this is a paragraph!!!</p>');
5、添加元素
| 方法 | 说明 |
|---|---|
| prepend(content) | 在被选元素内部的开头插入元索或内容，被追加的content参数，可以是字符、HTML元素标记。 |
| $(content).prependTo(selector) | 把content元素或内容加入selector元素开头 |
| append(content) | 在被选元素内部的结尾插入元素或内容，被追加的content参数，可以是字符、HTML 元素标记。 |
| $(content).appendTo(selector) | 把content元素或内容插入selector元素内，默认是在尾部 |
| before() | 在元素前插入指定的元素或内容:$(selector).before(content) |
| after() | 在元素后插入指定的元素或内容:$(seletor).after(content) |
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
margin: 10px 0px;
}
span{
color: white;
padding: 8px
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
</style>
</head>
<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>
<div class="green">
<span >额额</span>
</div>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//这些方法只对jq对象有用，jq不存在数组，只看jq中含有多少dom对象，就操作多少dom元素
//创建元素
console.log($("<h2>jquery</h2>"));
//prepend(content) 内部前追加
console.log($(".green"));
$(".green").prepend("<span>张三</span>")
//$(content).prependTo(selector) 内部前追加
//内容被追加到哪个标签内部的前面
$("<span>asd</span>").prependTo($(".green"));
//append(content) 内部后追加
$(".green").append("<span>pdd</span>");
//$(content).appendTo(selector)
//内容被追加到哪个标签内部的后面
$("<span>飞飞</span>").appendTo($(".green"));
//before() 无子父级关系，该标签前面追加
$(".red").before("<span class='red'>刘德华</span>");
//after() 无子父级关系，该标签后面追加
$(".blue").after("<span class='blue'>胡歌</span>");
</script>
</body>
6、删除元素
| 方法 | 说明 |
|---|---|
| remove() | 删除所选元素和指定的子元素，包括整个标签和内容一起删 |
| empty() | 清空所选元素下的内容 |
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<h3>删除元素</h3>
<span class="green">jquery<a>删除</a></span>
<span class="blue">javase</span>
<span class="green">http协议</span>
<span class="blue">servlet</span>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//删除所选指定标签 包括自己
$("span a").remove();
//删除指定样式的标签 包括自己
$("span.blue").remove();
//清空指定标签下元素
$("span").empty();
//清空指定元素下所有子标签
$("span.green").empty(); //中间无空格表示两个条件都得满足 空格表示子孙元素
</script>
</body>
7、遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数function为遍历时的回调函数，
index为遍历元素的序列号，从0开始。
element是当前的元素，此时是dom元素。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<h3>删除元素</h3>
<span class="green">jquery<a>删除</a></span>
<span class="blue">javase</span>
<span class="green">http协议</span>
<span class="blue">servlet</span>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var spans = $("span");
console.log(spans);
//遍历jq对象中的所有dom元素
spans.each(function(index,ele){
//this表示当前遍历的dom对象
console.log(this);
//下标
console.log(index);
//当前dom对象
console.log(ele);
});
</script>
</body>
五、jQuery事件
1、ready加载事件
ready()类似于onLoad()事件
ready()可以写多个，按顺序执行
(
d
o
c
u
m
e
n
t
)
.
r
e
a
d
y
(
f
u
n
c
t
i
o
n
)
)
等
价
于
(document).ready(function){})等价于
(document).ready(function))等价于(function(){})
ready这个方法只是在页面所有的DOM加载完毕后就会触发
load 这个方法会等到页面所有内容加载完毕后才会触发
<body>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//load
window.onload = function(){
console.log("load加载事件"); //在ready加载之后加载
}
//read加载事件 方法一
$(function(){
console.log("ready加载事件");
});
//read加载事件 方法二
$().ready(function(){
console.log("read加载事件");
});
//ready加载事件 方法三
$(document).ready(function(){
console.log("ready加载事件");
});
</script>
</body>
2、bind()绑定事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(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] : 传递的参数，格式: {名1:值1,名2:值2}
handler(eventObject) : 该事件触发执行的函数
<body>
<button type="button" id="i1">按钮1</button>
<button type="button" id="i2">按钮2</button>
<button type="button" id="i3">按钮3</button>
<button type="button" id="i4">按钮4</button>
<button type="button" id="i4" onclick="test()">按钮</button>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//bind()绑定单个事件
$("#i1").bind("click",function(){
console.log("按钮1点击事件");
});
//bind()绑定多个事件
$("#i2").bind("click",function(){
console.log("按钮2点击事件");
}).bind("mouseover",function(){
console.log("按钮2悬停事件");
});
//绑定多个事件
$("#i3").bind({
"click":function(){
console.log("按钮3点击事件");
},
"mouseout":function(){
console.log("按钮3移开事件");
}
});
//绑定多个事件
$("#i4").click(function(){
console.log("鼠标4点击事件");
}).mouseout(function(){
console.log("按钮4移开事件");
});
</script>
</body>
六、jQuery Ajax
1、$.ajax
jquery调用ajax方法:
格式: $.ajax({});
参数:
type : 请求方式GET/POST
url:请求地址url
async:是否异步，默认是true表示异步
data:发送到服务器的数据
dataType:预期服务器返回的数据类型
contentType:设置请求头
success:请求成功时调用此函数
error :请求失败时调用此函数
<body>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$.ajax({
type:"get", //大小写都行
url:"js/data.json",
async:true,
data:{
uname:'admin',
upwd:'1234'
},
dataType:'json', //如果不给，根据文件类型解析格式 ,一般给json，都以json格式解析 解析不出就为空
success:function(data){
console.log(data);
}
});
</script>
</body>
2、$get
这是一个简单的GET请求功能以取代复杂s.ajax。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。
格式：
$.get(‘地址’,{传输到后台的数据},function(data){
//回调函数
});
3、$post
这是一个简单的POST请求功能以取代复杂 . a j a x 。 请 求 成 功 时 可 调 用 回 调 函 数 。 如 果 需 要 在 出 错 时 执 行 函 数 ， 请 使 用 .ajax。 请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 .ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用.ajax.
格式：
$.post(‘地址’,{传输到后台的数据},function(data){
//回调函数
});
4、$getJSON
表示请求返回的数据类型是JSON格式的ajax请求
格式：
$.getJSON(‘地址’,{传输到后台的数据},function(data){
//回调函数
});
<body>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//$.get()
$.get("js/test.txt",{uname:'admin'},function(data){
console.log(data);
});
//$.post()
$.post("js/data.json",{uname:'admin'},function(data){
console.log(data); //报错， Internal Server Error post请求必须要有服务器接受
})
//$.getJSON()
$.getJSON("js/test.txt",{uname:'admin'},function(data){
console.log(data); //要求返回类型必须是JSON格式
})
</script>
</body>
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
