Jquery
jQuery是一套兼容多浏览器的javascript脚本库。核心理念是写得更少，做得更多,使用jQuery将极大的提高编写javascript 代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，“如虎添翼”。同时网络上丰富的jQuery插件，也让我们的工作变成了"有了jQuery,一切so
easy。"因为我们已经站在巨人的肩膀上了。
jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今, jQuery已经成为最流行的javascript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
Jquery的下载与安装
下载
htp://jquery.com
版本
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持ie678,如果需要下载1.X)
(1)完整版: jquer-21.4.jis ->学习版本(学习源码向高手学习是最好学习方法)
(2)压缩版: jquery-2.1.4.min.js ->开发版本(压缩版，减少传输)
目前使用版本: jquery-3.4.1.js
优点
(1)提供了强大的功能函数
(2) 解决浏览器兼容性问题
(3) 实现丰富的UI和插件
(4)纠正错误的脚本知识
安装
在页面引入即可
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
Dom对象与Jquery包装集对象
原始的Dom对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是Dom对象。
而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象， 只有jQuery对象才 能使用jQuery提供的方法。
Dom对象
javascript中获取Dom对象，Dom 对象只有有限的属性和方法:
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
Jquery包装集对象
$符号在jQuery中代表对jQuery对象的引用，“jQuery” 是核心对象。通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。
$ <==> jQuery
Jquery包装集对象可以说是Dom对象的扩充。在jQuery的世界中将所有的对象，无论是一一个还是一组，都封装成一个jQuery包装集，比如通过id获取包含一个元素的jQuery包装集:
//第一种方式获取jQuery对象
var jQuery0bject = jQuery('#mydiv');
//第二种方式获取jQuery对象
var jQuery0bject = $('#mydiv');
互相转化
dom对象 --> Jquery对象
Dom对象转为jQuery对象,只需要利用$() 方法进行包装即可
DOM
通过document.getElementById("id属性值")获取
如果元素不存在，则获取的是null
// 获取Dom对象
var domDiv = document.getElementById('mydiv');
// Dom对象 --> jQuery对象
mydiv = $(domDiv);
Jquery对象 -->dom对象
jQuery对象转Dom对象，只需要取数组中的元素即可
Jquery包装集对象
$("#id属性值");获取
如果元素不存在，不会返回null，是一个空的结果集
判断jquery对象是否存在，判断其长度length属性是否为0
//获取jQuery对象
jqueryDiv = $('#mydiv');
//jQuery对象 --> Dom对象
var dom = jqueryDiv[0]; //将以获取的jquery对象转为dom
遍历
// 通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象
$('#mydiv').each(function() {//遍历
console.log(this); // Dom对象 <div id="div1">块级元素</div>
console.log($(this)); // jQuery对象 S.fn.init [div#div1]
});
Jquery选择器
基础选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| id选择器 | #id | $("#testDiv")选择id为testDiv的元素 |
| 元素名称选择器 | element | $(“div”)选择所有div元素 |
| 类选择器 | .class | $(".blue")选择所有class=blue的元素 |
| 选择所有元素 | * | $("*")选择页面所有元素 |
| 组合选择器 | selector1,selector2,selectorN | $("#testDiv,span,.blue")同时选中多个选择器匹配的元素 |
<body>
<!--
id选择器 #id$("#testDiv") 选择id为testDiv的元素
元素名称选择器 element$("div") 选择所有div元素
类选择器 .class$(".blue") 选择所有class=blue的元素
选择所有元素 *$("*") 选择页面所有元素
组合选择器 selector1,selector2,selectorN $("#testDiv,span,.blue")同时选中多个选择器 匹配的元素
-->
<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 mydiv1 = $("#mydiv1");
console.log(mydiv1);
//元素名称选择器
var divs = $("div");
console.log(divs);
//类选择器
var clsz = $(".blue");
console.log(clsz);
//选择所有元素
var all = $("*");
console.log(all);
//组合
var fz = $("div,.blue,#mydiv1");
console.log(fz);
</script>
</body>
层次选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| 后代选择器 | 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>
<!--
后代选择器 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元素
-->
<div id="parent">层次择器
<div id="child" class="testColor">父选择器
<div class="gray">子选择器
<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>新div1</div>
<div>新div2</div>
</div>
<script type="text/javascript">
//后代选择器
var hd = $("#child div");
console.log(hd);
//子代选择器
var zd = $("#child > div");
console.log(zd);
//相邻选择器
var xl = $(".gray + div");
console.log(xl);
//同辈选择器
var tb = $(".gray ~ div");
console.log(tb);
</script>
</body>
表单选择器
| 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>
<!--
表单选择器 :input查找所有的表单元素：$(":input")；
注意：会匹配所有的input、textarea、select和button元素。
文本框选择器 :text查找所有文本框：$(":text")
密码框选择器 :password查找所有密码框：$(":password")
单选按钮选择器 :radio查找所有单选按钮：$(":radio")
复选框选择器 :checkbox查找所有复选框：$(":checkbox")
提交按钮选择器 :submit查找所有提交按钮：$(":submit")
图像域选择器 :image查找所有图像域：$(":image")
重置按钮选择器 :reset查找所有重置按钮：$(":reset")
按钮选择器 :button查找所有按钮：$(":button")
文件域选择器 :file查找所有文件域：$(":file")
拓展：
属性选择器
$("[属性]") 获取到当前页面有这个属性的元素
$("[属性='属性值']") 获取到当前页面有这个属性并且值=属性值的元素
过滤选择器
$(":eq(index)") 匹配元素的指定下标的元素 （下标从0开始） .eq(index)
$(":gt(index)") 匹配元素下标大于指定值元素 （下标从0开始）.gt(index)
$(":odd") 匹配奇数下标
$(":even") 匹配偶数下标
$(":checked") 匹配元素被选中
-->
<form id='myform' name="myform" method="post">
<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" abc="123"/>你懂得 <br />
爱好:<input type="checkbox" name="ufav" checked="checked" abc="456" 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" onclick="return checkForm();">提交</button>
<button type="reset" >重置</button>
</form>
<script type="text/javascript">
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("file-->" + $(":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;
}
//属性选择器
var favs = $("[selected='selected']");
console.log(favs);
console.log(favs.length); // 1
var favs = $("[checked]");
console.log(favs);
console.log(favs.length); // 2
var favs = $("[checked='checked']");
console.log(favs);
console.log(favs.length); //2
var favs = $("[abc='123']");
console.log(favs);
console.log(favs.length); //1
//过滤选择器
// $(":eq(index)") 匹配元素的指定下标的元素 （下标从0开始） .eq(index)
console.log($(":eq(6)"));
//$(":gt(index)") 匹配元素下标大于指定值元素 （下标从0开始）.gt(index)
console.log($(":gt(5)"));
//$(":odd") 匹配奇数下标
console.log($(":odd"));
// $(":even") 匹配偶数下标
console.log($(":even"));
//$(":checked") 匹配元素被选中
console.log($(":checked"));
</script>
</body>
Jquery的Dom操作
创建元素
在jQuery中创建元素很简单，直接使用核心函数即可
$('元素内容');
$('<p>this is a paragraph!!!</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>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<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>append()方法后追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>appendTo()方法后追加内容</h3>
<div class="green">
<span >小鲜肉</span>
</div>
<span class="red">男神</span>
<span class="blue">偶像</span>
<script>
// 元素调用方法在自己内部前追加 字符
$(".green").prepend("<span>张三</span>");
// 元素调用方法在自己内部前追加 Jquery对象
var a = $("<span>李四</span>")
$(".green").prepend(a);
// 元素调用方法在自己内部后追加 字符
$(".green").append("<span>小红</span>");
// 元素调用方法在自己内部后追加 Jquery对象
var a = $("<span>小白</span>")
$(".green").append(a);
//prependTo(); 元素 被内部前追加
var b = "<span>大王</span>";
$(b).prependTo($(".red"));
//appendTo(); 元素 被内部后追加
$("<span >小王</span>").appendTo($('.red'));
//before 同级前追加
$(".blue").before("<span style='color:black'>李白</span>");
//after 同级后追加
$(".blue").after("<span style='color:black'>刘白</span>");
</script>
</body>
</html>
使用JS添加元素之前：
使用JS添加元素之后：
删除元素
| ⽅法 | 说明 |
|---|---|
| remove() | 删除所选元素或指定的⼦元素，包括整个标签和内容⼀起删。 |
| empty() | 清空所选元素的内容 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<!--
remove()删除所选元素或指定的子元素，包括整个标签和内容一起删。
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>
<script type="text/javascript">
//删除
$(".green").remove();
//清空
$(".green").empty();
</script>
</body>
</html>
删除和清空前:
只使用删除后：
只使用清空后：
遍历元素
each()
$(selector).each( function(index,element ) :遍历元素
参数function为遍历时的回调函数,
index为遍历元素的序列号，从0开始。
element是当前的元素，此时是dom元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
遍历元素
格式: $("值").each(function(index,element){
});
-->
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<h3>遍历元素 each()</h3>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http协议</span>
<span class="green">servlet</span>
<script type="text/javascript">
$(".green").each(function(ind,ele){
//当前元素的索引位置
console.log(ind);
//获取当前 dom 对象
console.log(ele);
console.log(this);
//统一设置样式需要用jquery对象
$(ele).attr("class","blue");
});
</script>
</body>
</html>
遍历之前：
遍历之后：
操作元素的属性
获取属性
| ⽅法 | 说明 | 举例 |
|---|---|---|
| attr(属性名称) | 获取指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。 | attr(‘checked’) attr(‘name’) |
| prop(属性名称) | 获取具有true和false两个属性的属性值 | prop(‘checked’) |
设置属性
| ⽅法 | 说明 | 举例 |
|---|---|---|
| attr(属性名称，属性值) | 设置指定的属性值， 操 作 checkbox 时 ， 选中返回 checked，没有选中返回 undefined。 | attr(‘checked’,’checked’) attr(‘name’,’zs’) |
| prop(属性名称，属性值) | 设置具有true和false的属性值 | prop(‘checked’,’true’) |
移除属性
| ⽅法 | 说明 | 举例 |
|---|---|---|
| removeAttr(属性名) | 移除指定的属性 | removeAttr(‘checked’) |
<body>
<!--
属性分类
固有属性
href、src.....
共有属性
id,class,name......
自定义属性
abc= '1234'
获取属性值
attr(属性名称);
prop(属性名称);
获取属性上的区别：
区别：
1.attr可以操作自定义属性，prop不能操作自定义属性
2.attr获取checked的是原值"checked"undefined，prop获取Boolean类型的属性是 true/false
设置属性值
attr(属性名称,属性值);
prop(属性名称,属性值);
移除属性
removeAttr("属性")
-->
<form action="" id="myform">
<input type="checkbox" id="ch1" name="ch1" abc='123' checked="checked"/>aa
</form>
<script type="text/javascript">
var ch1 = $("#ch1");
//获取属性-----------------------------
//获取固有属性
console.log(ch1.attr('type')); // checkbok
console.log(ch1.prop('type')); // checkbok
//获取共有属性
console.log(ch1.attr('name')); // ch1
console.log(ch1.prop('name')); // ch1
//获取自定义属性 prop不能操作自定义属性
console.log(ch1.attr('abc')); // 123
console.log(ch1.prop('abc')); //undefined
//获取boolean类型的属性
console.log(ch1.attr('checked'));//checked
console.log(ch1.prop('checked'));//true
//设置属性---------建议直接使用attr--------------------
//设置boolean类型属性
ch1.attr("checked","checked"); // checked
ch1.attr("checked",true); // checked
ch1.attr("checked",0); // checked
ch1.attr("checked",null); // undefined
ch1.attr("checked",false); // undefined
ch1.prop("checked",true); // true
ch1.prop("checked",false); // false
//移除属性--------------------------
ch1.removeAttr("checked");//boolen类型
ch1.removeAttr("abc");//自定义属性
ch1.removeAttr("name");//共有属性
ch1.removeAttr("type");//独有属性
</script>
</body>
操作样式
本质还是操作属性 ，但是还有一些专门的方式进行处理
| 方1法 | 说明 |
|---|---|
| attr(“class”) | 获取class属性的值，即样式名称 |
| attr(“class”,“样式名”) | 修改class属性的值，修改样式 |
| addClass(“样式名”) | 添加样式名称 |
| css() | 添加具体的样式 |
| removeClass(class) | 移除样式名称 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.5.1.min.js" type="text/javascript"></script>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.blue{
background: blue;
}
.green {
background : green;
}
.larger{
font-size: 30px;
}
</style>
</head>
<body>
<!--
addClass("样式名") 添加样式名称
css() 添加具体的样式 相当于直接设置行内style
attr("class","样式名") 修改class属性的值，修改样式
removeClass(class) 移除样式名称
attr("class") 获取class属性的值，即样式名称
-->
<h3>设置样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
<script>
//添加 class里的内容 (必须要先有这个class)
$("#conRed").addClass("blue");
//添加行内式style 里面的 名 和 值
$("#conRed").css("color","red");
//删除 class里的内容
$("#remove").removeClass("blue")
//修改 class里的内容
$("#conBlue").attr("class","green larger" )
//获取 class里的内容
var cl = $("#conBlue").attr("class");
console.log(cl);
</script>
</body>
</html>
操作元素的内容
对于元素还可以操作其中的内容，例如文本，值，甚至是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>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
获取元素内容
html() 获取或设置元素的内容，包含html内容 可以识别识别纯文本内容
取值：html()
赋值：html("html,内容")
text() 获取或设置元素的内容，不包含html内容 只能识别纯文本内容
取值：text()
赋值：text("html,内容")
val() 获取或设置元素的值
取值:val()
赋值:val(‘值’)
-->
<h3><span>html()和text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="123" />
<script type="text/javascript">
//html
//获取h3元素的内容
var ht = $("h3").html();
console.log(ht); // <span>html()和text()方法设置元素内容</span>
//设置div的元素内容
$("#html").html("<b>加粗效果</b>");
console.log($("#html").html()); // <b>加粗效果</b>
//text
//获取h3元素的内容
var te = $("h3").text();
console.log(te); // html()和text()方法设置元素内容
//设置div的元素内容
$("#text").text("text加粗效果");
console.log($("#text").html()); // text加粗效果
//val
//获取
var inpu = $('[type="text"]').val();
console.log(inpu); // 123
//设置元素的值
var inpu = $('[type="text"]').val("jquery");
console.log(inpu.val()); // jquery
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"> </script>
</head>
<body>
<!--
ready加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
语法：
$(document).ready(function(){})
或
$(function(){
});
ready加载事件和load加载事件区别
load：加载页面中的DOM结构和外部资源之后执行
ready：加载页面中的DOM之后执行
bind()绑定事件
格式：$(selector).bind( eventType [, eventData], handler(eventObject));
-->
<div id="ch1">div标签</div>
<button type="button" id="bt1">按钮1单个事件</button>
<button type="button" id="bt2">按钮2多个事件</button>
<button type="button" id="bt3">按钮3多个事件第二种</button>
<button type="button" id="bt4">按钮4便捷绑定事件</button>
<script type="text/javascript">
//ready加载事件
$(document).ready(function(){
console.log("123");
});
$(function(){
var ch1 = document.getElementById("ch1");
ch1.innerHTML = "新的内容";
});
//bind()绑定简单方式
$("#bt1").bind("click",function(){
console.log("按钮被点击了");
});
//bind绑定多个事件
$("#bt2").bind("click",function(){
console.log("按钮2被点击了");
}).bind("mouseover",function(){
console.log("按钮2鼠标悬停");
});
//bind绑定多个事件2
$("#bt3").bind({
"click":function(){
console.log("按钮3被点击了");
},
"mousemove":function(){
console.log("鼠标3移动了");
}
});
//bind便捷绑定事件3
$("#bt4").mouseout(function(){
console.log("鼠标移开了");
});
//js绑定事件方式
//document.getElementById("id值").onclick = function(){};
</script>
</body>
</html>
绑定事件前：
绑定事件后：
Ajax
jquery调用ajax方法:
格式:
$.ajax({});
参数:
type:请求方式GET/POST
url:请求地址
async︰是否异步，默认是true表示异步
data:发送到服务器的数据
dataType︰预期服务器返回的数据类型
contentType:设置请求头
success:请求成功时调用此函数
error:请求失败时调用此函数
.
g
e
t
这
是
一
个
简
单
的
G
E
T
请
求
功
能
以
取
代
复
杂
.get 这是一个简单的GET请求功能以取代复杂
.get这是一个简单的GET请求功能以取代复杂.ajax
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax
.
p
o
s
t
这
是
一
个
简
单
的
P
O
S
T
请
求
功
能
以
取
代
复
杂
.post 这是一个简单的POST请求功能以取代复杂
.post这是一个简单的POST请求功能以取代复杂.ajax
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax
$.getJSON
表示请求返回的数据类型是JSON格式的ajax请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"> </script>
</head>
<body>
<!--
ajax请求
格式：
$.ajax({
type:请求方式GET/POST,
url:"请求的地址",
data:"需要传输的数据",
dataType:"预期服务器返回的数据类型", text|html|json
success:function(返回的数据){
// 回调函数，形参名会接收返回的结果
}
});
$.get()
发送请求方式为get的ajax请求
语法：
$.get("请求的地址","请求的参数",回调函数);
$.post()
发送请求方式为post的ajax请求
语法：
$.post("请求的地址","请求的参数",回调函数);
$.getJSON()
发送ajax请求，要求返回的数据格式必须是JSON
语法：
$.getJSON("请求的地址","请求的参数",回调函数);
-->
<script type="text/javascript">
$.ajax({
type:'get',
url:'js/data.json',
data:{
uname:"abc",
upwd:'123'
},
dataType:'json',
success:function(data){
console.log(data);
},
error:function(){
console.log("找不到");
}
});
$.get('js/data.json',{name:"tom",age:100},function(data){
console.log(data);
});
//404找不到服务器
/* $.post('js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data);
}); */
$.getJSON('js/data.json',{name:"tom",age:100},function(data){
console.log(data); // 要求返回的数据格式是JSON格式
});
</script>
</body>
</html>
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
