当前位置：首页 > news >正文

JQuery 基础知识学习（详尽版）2024.11.17

news 文章来源：https://blog.csdn.net/zgscwxd/article/details/143835077 2024/11/28 20:57:58

一、jQuery简介及使用详解

1.1 jQuery简介

写更少的代码，做更多的事；jQuery可以做：HTML 元素选取， HTML 元素操作，CSS 操作，HTML 事件函数，JavaScript 特效和动画，HTML DOM 遍历和修改

1.2 jQuery的使用

jQuery就是一个封装了很多函数的js文件，并不会与其他的js文件发生冲突。可以直接到jQuery的官网下载jQuery脚本文件，然后放入本地服务器，并在网页中通过script 标签进行引入

① 第一种引入方式：直接路径引入

<head><script src="jquery-3.7.1.min.js"></script>
</head>

注意：

script标签的src属性中，要根据jQuery文件所在的目录引入，如果jQuery文件和当前的HTML文件放在同一个目录下，即可直接写jQuery的文件名；如果jQuery文件和HTML文件不在同一个目录下，我们可以使用相对路径和绝对路径的方式引入jQuery。

在HTML5中，script标签上可以不用添加 type="text/javascript" 属性，因为JavaScript是HTML5以及所有现代浏览器中的默认脚本语言。

jQuery官网地址： jQueryhttps://jquery.com/

打开官网，即可看到jQuery的下载按钮，点击进入下载页面。有两个版本的jQuery可以下载：Production version - 用于实际的网站中，是已经被精简和压缩过的jQuery文件。
Development version - 用于测试和开发中，是未压缩的jQuery文件，可以方便阅读源码。
.min.js 这是压缩的版本。
.js就是JavaScript的外部脚本文件。

② 第二种引入方式：使用第三方CDN

1.3查看jQuery版本

在浏览器中打开已经引用jQuery的网页，然后按F12打开 开发者工具 ，选择“Console”控制台，在控制台中输入以下命令：

$.fn.jquery

输入命令后按回车，即可显示当前jQuery的版本号。

二、jQuery简介及使用详解

在项目中引用jQuery

2.1基本语法

jQuery的核心方法，在jQuery中封装了一系列的方法。
核心方法： jquery();
简化格式： $(); $代替jQuery这个方法名。
$(参数)：参数可以是选择器，还可以直接就是一个函数。

<script>$(selector).action();
</script>

说明：

工厂函数 $() ：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素（用法基本上和css一致）
方法 action()：jQuery中提供的方法，其中包括绑定事件处理的方法 $等同于jQuery

2.1 jQuery 的顶级对象 $

$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
$ 是jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

2.2jQuery对象 & DOM对象

$("#title").html();
// 等同于
document.getELementById("title").innerHTML;

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用，想混用，先转换：

DOM对象转jQuery对象

DOM 对象转换为 jQuery 对象： $(DOM对象)

var a = document.getElementById("name"); // a是DOM对象
var b = $(a); // b是jQuery对象

jQuery对象转DOM对象（两种方式）

$('div') [index]       index 是索引号
$('div') .get(index)    index 是索引号

var a = $("#name"); 	 // a是jQuery对象
var b = jqObject.get(0); // b是DOM对象

2.2选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

<html>
<head><title>jquery使用</title><script type="text/javascript" src="jquery/jquery-3.7.1.min.js"></script>
</head>
<body><p>中国</p><p>武汉</p><p class="jy">加油</p><p id="wan">祖国万岁</p><h3 class="jy">祖国万岁</h3><script>$("h3.jy").css("color","red");	    // 交集选择器，既是h3标签，又拥有.jy的元素</script>
</body>
</html>

层次选择器

属性选择器

过滤选择器

2.3事件

事件注册

element.事件(function(){})$("div").click(function(){  事件处理程序 })

其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

鼠标事件

键盘事件

方法	描述	执行时机
`keydown()`	触发或将函数绑定到指定元素的keydown事件	按下按键时
`keyup()`	触发或将函数绑定到指定元素的keyup事件	释放按键时

<input>
<h3></h3><script src="js/jquery-3.4.1.min.js"></script>
<script>$("input").keyup( function(){var str = $(this).val(); // 获取框中的值$("h3").text( str ); 	 // 将h3元素中的文本内容更改为str} );
</script>

表单事件

方法	描述	执行时机
`focus()`	触发或将函数绑定到指定元素的focus事件	获得焦点
`blur()`	触发或将函数绑定到指定元素的blur事件	失去焦点

<form action=""><p>帐号: <input id="a" value="请输入帐号..."> </p><p>电话: <input id="b"> </p>
</form><script src="js/jquery-3.4.1.min.js"></script>
<script>// 获得焦点（激活/点击一下）$("#a").focus(function(){$(this).val("");});// 失去焦点（未激活/未点击）$("#a").blur(function(){$(this).val("请输入帐号...");});
</script>

事件处理

事件处理 on() 动态绑定事件，对DOM元素绑定事件的另一种写法。

绑定一个事件

$(".del").on('click', function() {alert('hello');
})

绑定多个事件

$(".del").on('click mouseover', function() {alert('hello');
})

events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
selector: 元素的子元素选择器。
fn:回调函数即绑定在元素身上的侦听函数。

可以绑定多个事件，多个处理事件处理程序
$("div").on({mouseover: function(){}, mouseout: function(){},click: function(){}	
});

如果事件处理程序相同
$("div").on("mouseover mouseout", function() {$(this).toggleClass("current");
});

可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$('ul').on('click', 'li', function() {alert('hello world!');
});

动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件$("div").append($("<p>我是动态创建的p</p>"));$(“div").on("click",”p”, function(){alert("俺可以给动态生成的元素绑定事件")
});

事件处理 off() 解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序。

$("p").off() // 解绑p元素所有事件处理程序$("p").off( "click")  // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名$("ul").off("click", "li");   // 解绑事件委托

如果有的事件只想触发一次，可以使用 one() 来绑定事件。

自动触发事件 trigger()

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click()  // 第一种简写形式element.trigger("type") // 第二种自动触发模式$("p").on("click", function () {alert("hi~");
}); 
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击element.triggerHandler(type)  // 第三种自动触发模式
triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。

事件对象

事件被触发，就会有事件对象的产生。

element.on(events,[selector],function(event) {})

阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()

元素的隐藏和显示

改变元素的宽高（带动画效果）

show( speed )：显示
hide( speed )：隐藏
toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<style>div{width: 200px;height: 200px;background-color: black;}
</style>
<body><button id="btn1">显示</button><button id="btn2">隐藏</button><button id="btn3">切换</button><div></div><script src="js/jquery-3.4.1.min.js"></script><script>$("#btn2").click(function(){// fast:快速的// slow:缓慢的// 毫秒：自定义$("div").hide(2000); });$("#btn1").click(function(){$("div").show('slow');});$("#btn3").click(function(){$("div").toggle(1000);});</script>
</body>

2.4jQuery的方法

设置或获取元素固有属性值 prop()

获取属性语法

prop('属性')

设置属性语法

prop('属性', '属性值')

DOM和CSS的操作

属性函数

attr( "属性" ) 获得元素的属性值
- attr( "属性" , "新值" ) 修改元素的属性值
- attr( 样式参数 ) ：样式参数可以写成json格式

<body><button id="btn1">点我试试</button><hr><img src="img/1.jpg" title="图片1" width="300"><script src="js/jquery-3.4.1.min.js"></script><script>$("#btn1").click(function(){$("img").attr("src","img/2.jpg");$("img").attr("title","高清无码");$("img").attr( {width:"200",height:"200"} );});</script>
</body>

val() 获得表单元素中的value值
- val("x") 修改表单元素中的value值
html() 获得元素中的内容（标签+文本）
- html("x") 修改元素中的内容（标签+文本）
text() 获得元素中的文本
- text("x") 修改元素中的文本

<button>试试</button>
<hr>
<input id="username"><div><h1><i>中国加油！</i></h1>
</div><script src="js/jquery-3.4.1.min.js"></script>
<script>$("button").click(function(){//alert($("input").val()); 		// input框中的值//$("input").val("哈哈哈"); 		// 修改input框中的值   //alert( $("div").html() ); 	// 获得div中的内容（包含标签信息）//alert( $("div").text() ); 	// 获得div中的内容（不包含标签信息，只包含文本内容）$("div").text("祖国万岁！"); 	// 修改div中的内容（全部内容都覆盖）});
</script>

样式函数

css("属性") 获得该属性值
css("属性","值") 设置属性的值
css( { json} ) 设置多个属性的值

使用css()的方法可以设置和获取对象的样式。
css() 方法设置或返回被选元素的一个或多个样式属性。

<style>div{width: 150px;height: 150px;background-color: #000;}
</style>
<body><button>试试</button><hr><div></div><script src="js/jquery-3.4.1.min.js"></script><script>$("button").click(function(){//var w = $("div").css("width"); // 获取css属性，width的值//1.一个键值对//$("div").css("background-color","pink");//2.链式编程//$("div").css("background-color","pink").css("border-radius","50%");//3.json为参数$("div").css({opacity:"0.4",background:"orange",borderRadius:"50%"} );});</script>
</body>

width() 获得元素的宽度
width( number ) 修改元素的宽度
height() 获得元素的高度
height( number ) 修改元素的高度

<style>div{width: 150px;height: 150px;background-color: #000;}
</style>
<body><button>试试</button><hr><div></div><script src="js/jquery-3.4.1.min.js"></script><script>$("button").click(function(){var w = $("div").width(); 	// （无参）获取宽度var h = $("div").height();	// （无参）获取高度// alert("宽:"+w+"px，高:"+h+"px");$("div").width("300"); 		// （传参）修改宽度$("div").height("300"); 	// （传参）修改高度});</script>
</body>

类样式函数

addClass() 为元素添加类样式
removeClass() 将元素的类样式移除
toggleClass() 样式的切换（有->无，无->有

<style>div{width: 100px;height: 100px;background-color: #000;}   .a{background: palevioletred;border-radius: 50%;} .b{border:5px dashed darkcyan;opacity: 0.6;}.cn{background: #000;color:#FFF; font-family: 楷体;}
</style>
<body><button id="btn1">试试</button><button id="btn2">取消透明度</button><button id="btn3">样式切换</button><hr><div></div><h1>中华人民共和国，万岁！</h1><script src="js/jquery-3.4.1.min.js"></script><script>$("#btn1").click(function(){// $("div").addClass("a");$("div").addClass("a b");});$("#btn2").click(function(){$("div").removeClass("b");});$("#btn3").click(function(){$("h1").toggleClass("cn");});</script>
</body>

addClass( )

- 为jQuery对象添加一个或多个class

- 可以接收一个回调函数作为参数,

回调函数中有两个参数：1.当前元素的索引，2.当前元素的类名

在回调函数中this 就是当前的元素，但this是一个DOM对象，不能调用jQuery对象的方法

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>document</title><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script><style>.box1{width: 200px;height: 200px;background-color: #bfa;}.box2{border: 10px red solid;}.box3{background-color: orange;}</style><script>$(function(){// 为按钮绑定响应函数$("#btn").click(function(){// // 为box1添加class// // addClass()可以为元素添加一个或多个class// $(".box1").addClass(["box2","box3"])//可以使用数组的形式添加多个class// 								// 与"box2 box3"相同// 			// 具有隐式迭代的特点，可以为所有的box1类添加class// addClass可以接收一个回调函数作为参数$(".box1").addClass(function(index,className){// alert(index + "--" + className)// 在回调函数中this 就是当前的元素alert(this);//[object HTMLDivElement]// 说明this是一个DOM对象，不能调用jQuery对象的方法if(index % 2 == 0){// 添加box2// this.classList.add("box2") //this是一个DOM对象$(this).addClass("box2")//将this 转换为jQuery对象，可以调用jQuery对象的方法}else{// 添加box3// this.classList.add("box3")$(this).addClass("box3")}})})})</script>
</head>
<body>	<button id="btn">点我一下</button><hr><div class="box1"></div><div class="box1"></div><div class="box1"></div></body>

addClass（）的回调函数的返回值会成为当前元素的class

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>document</title><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script><style>.box1{width: 200px;height: 200px;background-color: #bfa;}.box2{border: 10px red solid;}.box3{background-color: orange;}</style><script>$(function(){// 为按钮绑定响应函数$("#btn").click(function(){$(".box1").addClass(function(index){// 回调函数的返回值会成为当前元素的class// return ["box2","box3"]if(index % 2 == 0){return "box2"}else{return "box3"}})})})</script>
</head>
<body>	<button id="btn">点我一下</button><hr><div class="box1"></div><div class="box1"></div><div class="box1"></div></body>

节点操作

创建节点
- 工厂函数$()用于获取或创建节点
插入节点
- 插入子节点

替换节点
- replaceWith()
- replaceAll()
复制节点
- clone()
删除节点
- remove()删除整个节点
- empty()清空节点内容

通过 jQuery，可以很容易地添加新元素/内容。
添加新的 HTML 内容四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

<input> <button id="test">测试</button><ul><li>三国演义</li><li>水浒传</li><li>西游记</li>
</ul><script src="js/jquery-3.4.1.min.js"></script>
<script>$("#test").click(function(){var bookname = $("input").val();var newli = $("<li>"+bookname+"</li>"); //通过工厂函数，创建新的li节点/*添加子节点*///$("ul").append(newli); // newli添加到ul后面//newli.appendTo("ul"); // newli添加到ul后面//$("ul").prepend(newli); // newli添加到ul前面//newli.prependTo("ul");/*添加同辈节点*///$("li:last").after( newli ); // newli添加到最后的li的后面//newli.insertAfter("li:last");//$("li:last").before(newli); //newli添加到最后的li的前面//newli.insertBefore("li:last");/*替换节点*///$("li:eq(1)").replaceWith(newli); // 将第二个li替换成newli//newli.replaceAll( "li:eq(1)" );/*复制节点*///$("li:first").clone().insertAfter("li:last"); // 复制第一个li，并插入到最后一个li的后面/*删除节点*///$("li:eq(1)").empty(); // 清空了节点上的文本（节点并没有消失）$("li:eq(1)").remove(); //删除节点});
</script>

实现动态表格

步骤：①创建一个表格

②编写数据

③在页面加载完成之后初始化表格

④将表单中的数据加到表格

⑤为每一行增加一个删除按钮

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.c1 {background-color: #00FFFF;}.c2 {background-color: burlywood;}thead {background-color: fuchsia;}</style><script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script><script>let stuArr = [{'sid': 1,'sname': '残念','ssex': '1','sscore': 60},{'sid': 2,'sname': '白茶','ssex': '0','sscore': 90},{'sid': 3,'sname': '八碗','ssex': '1','sscore': 100}];$(function(){$("#btnAdd").click(function(){let trObj = $("<tr></tr>");let sidTd = $("<td></td>").html($("#sid").val());let snameTd = $("<td></td>").html($("#sname").val());let ssexTd = $("<td></td>").html($(".radioCls:checked").val());let sscoreTd = $("<td></td>").html($("#sscore").val());let delTd = $("<td></td>");let delBtn = $("<input>").attr("type","button").val("删除");delTd.append(delBtn);trObj.append(sidTd).append(snameTd).append(ssexTd).append(sscoreTd).append(delTd);$("#tabData").append(trObj);delBtn.click(function(){if(confirm("是否删除"+$(this).parent().parent().find("td:eq(1)").text()+"？")){$(this).parent().parent().remove();$("#tabData tr").removeClass("c1");$("#tabData tr").removeClass("c2");$("#tabData tr:even").addClass("c1");$("#tabData tr:odd").addClass("c2");}});$("#tabData tr:even").addClass("c1");$("#tabData tr:odd").addClass("c2");});$.each(stuArr,function(i,jsonObj){//在jQuery中如何创建一个tr标签对象let trObj = $("<tr>");let sidTd = $("<td>").html(jsonObj.sid);let snameTd = $("<td>").html(jsonObj.sname);let ssexTd = $("<td>").html(jsonObj.ssex);let sscoreTd = $("<td>").html(jsonObj.sscore);let delTd = $("<td></td>");let delBtn = $("<input/>").attr("type","button").val("删除");delTd.append(delBtn);trObj.append(sidTd).append(snameTd).append(ssexTd).append(sscoreTd).append(delTd);$("#tabData").append(trObj);delBtn.click(function(){if(confirm("是否删除"+$(this).parent().parent().find("td:eq(1)").text()+"？")){$(this).parent().parent().remove();$("#tabData tr").removeClass("c1");$("#tabData tr").removeClass("c2");$("#tabData tr:even").addClass("c1");$("#tabData tr:odd").addClass("c2");}});});$("#tabData tr:even").addClass("c1");$("#tabData tr:odd").addClass("c2");})</script></head><body><table width="60%" border="1px" cellpadding="3px" cellspacing="0px"><thead><tr><th>编号</th><th>姓名</th><th>性别</th><th>积分</th><th>删除</th></tr></thead><tbody id="tabData"></tbody></table><hr><form>编号：<input type="text" name="sid" id="sid" value="" /><br>姓名：<input type="text" name="sname" id="sname" value="" /><br>性别：<input type="radio" name="ssex" value="1" id="ssex" />男 &nbsp;&nbsp;<input type="radio" name="ssex" value="0" id="ssex" />女<br>积分：<input type="text" name="sscore" id="sscore" value="" /><br><input type="button" id="btnAdd" name="btnAdd" value="保存" /></form></body>
</html>

遍历节点

祖先元素

用于向上遍历 DOM 树

parent() 返回被选元素的直接父元素，仅上一级
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

<p><button>测试</button></p>
<ul><li>a</li><li><b>b</b></li><li>c</li>
</ul><script src="js/jquery-3.4.1.min.js"></script>
<script>$("button").click(function(){//var x = $("b").parent().html(); 		 // 找爸爸//var x = $("b").parents("ul").html(); 	 // 找祖宗 ul//var x = $("b").parents("body").html(); // 找祖宗 bodyalert( x );});
</script>

同辈元素

next() 获取紧邻匹配元素之后的元素
prev() 获取紧邻匹配元素之前的元素
siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素

<button>测试</button>
<p>p1</p>
<ul><li>a</li><li><b>b</b></li><li>c</li>
</ul>
<p>p2</p>
<p id="x">p3</p><script src="js/jquery-3.4.1.min.js"></script>
<script>$("button").click(function(){//var x = $("ul").next().text(); 		 // 紧邻的下一个元素//var x = $("ul").prev().text(); 		 // 紧邻的上一个元素//var x = $("ul").siblings("#x").text(); // 所有的兄弟中，id=x的var arr = $("ul").siblings();  			 // ul的所有兄弟,1个button，3个p，2个scriptfor(var i = 0 ;i< arr.length ;i++){alert(arr[i]);}});
</script>

后代元素

children( [selector] ) 方法返回被选元素的所有直接子元素

<button>测试</button>
<ul><li>盘古</li><li>蚩尤</li><li>刑天<p>共工</p></li><h3>祝融</h3>
</ul><script src="js/jquery-3.4.1.min.js"></script>
<script>$("button").click(function(){//var x = $("ul").find("p").text();  	// 在ul中查找p元素，忽略层级//var x = $("ul").find("h3").text(); 	// 在ul中查找h3元素，忽略层级var x = $("ul").find().text(); 		 	// find()没有传参，返回空值alert(x);});
</script>

元素的过滤

first()：过滤第一个元素
last()：过滤最后一个元素
eq(index)：过滤到下标为index的元素
not()：除了什么之外的元素
is()：返回布尔，判断是不是这种元素

<button>测试</button>
<ul><li>盘古</li><li>蚩尤</li><li>刑天</li>
</ul><script src="js/jquery-3.4.1.min.js"></script>
<script>$("button").click(function(){//var x = $("li").first().text(); 			// 第一个li//var x = $("li").last().text(); 			// 最后一个li//var x = $("li").eq(1).text(); 			// 下标为1的li//var x = $("li").not("li:eq(1)").text();	// 除了下标为1的其余所有livar x = $("li").parent().is("ul"); 			// 返回布尔型，li的父节点是不是ulalert(x);});
</script>

jQuery对象复制

clone( ) 用来复制jQuery对象

- 只会复制元素本身，不会复制元素的事件

- 在clone( )中传入一个参数true,表示不仅复制元素本身，还包括其事件、数据等

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>document</title><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script><script>/* 点击按钮，使得孙悟空添加到 list2 中*/$(function(){$("#list li:nth-child(1)").click(function(){alert("孙悟空")})// clone( )用来复制jQuery对象// var $swk = $("#list li:nth-child(1)").clone()// 只会复制元素本身，不会复制元素的事件，所以在list2中添加的孙悟空不会有点击出现“孙悟空"的事件var $swk = $("#list li:nth-child(1)").clone(true)// 在clone()中传入一个参数true,表示不仅复制元素本身，还包括其事件、数据等var $list2 = $("#list2")$("#btn").click(function(){$list2.append($swk)})})</script>
</head>
<body>	<button id="btn">点我</button><hr><ul id="list"><li>孙悟空</li><li>猪八戒</li></ul><ul id="list2"><li>沙和尚</li><li>唐僧</li></ul>
</body>

jQuery中封装的Ajax的使用详解

1.第一种：

$.ajax()

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。

语法：

$.ajax( { name:value, name:value, ... } )

$.ajax({ 参数1，参数2···})

$.ajax({type:“请求方式”,url:“请求地址”，data:“请求参数”，dataType:"服务器返回的数据类型"success:fundction(data){ //成功且完整响应自动调用的函数},error: function(){ //出现错误自动调用的函数}
})

dataType：用来指定服务器返回来的数据类型，可选值有如下：

xml：表示服务器返回的是xml内容

html：表示服务器返回的是html文本内容

script：表示服务器返回的是script文本内容

json：表示服务器返回的是json内容（重点）

jsonp：表示使用jsonp形式调用函数，早期我们用它来解决跨域问题

text：表示服务器返回的是纯文本字符串

（如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递）

说明：对于json和jsonp的区别，本小白暂时没有深入了解，目前只知道jsonp可以跨域读取数据，有待进一步学习~

async 异步方式，默认为true，即异步方式。当设置为false时，为同步方式。

异步方式：ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发ajax里的success方法，这时候执行的是两个线程。
同步方式：在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。


<html>
<head><title>Title</title><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><script>function doAjax(){$.ajax({url:"bmiAjax",type:"POST",data:"name="+$("#name").val()+"&height="+$("#height").val()+"&weight="+$("#weight").val(),success:function (data) {alert(data);//这个是响应服务器的处理结果$("#result").text(data);},error:function () {alert("error！！！");},dataType:"json"})}</script>
</head>
<body>姓名: <input type="text"id="name" name="name"/><br/>体重（kg）<input type="text" id="weight" name="weight"/><br/>身高(米)<input type="text" id="height" name="height"/><br/><input type="button" value="计算BMI"onclick="doAjax()"><div id="result"></div>
</body>
</html>

实例1

实现在页面上输入一个地址，点击获取经纬度，弹出该地址的经纬度。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">function showAdress(){var str = document.getElementById("text").value;	$.ajax({url: "https://restapi.amap.com/v3/geocode/geo",dataType: "json",type: "get",data: { address: str,  			key: "7486e10d3ca83a934438176cf941df0c", },success:function(res){alert(res.geocodes[0].formatted_address+"经纬度："+res.geocodes[0].location);console.log(res);  //在console中查看数据},error:function(){alert('failed!');},});}
</script>

html部分


<div><form name="form"><span>输入地址：</span><input id="text" class="textbox" type="text"/><input class="button" type="button" value="获取经纬度" onclick="showAdress()"/></form>
</div>

实例2

将http://hebutgo.com:8080/maps/getMapsList接口中的result字段绘制成表格。

打印之前，先让我们看看这个接口中的result是什么？

data.json

{"result":[{"申请人省份":"0","counts":1553},{"申请人省份":"上海市","counts":637},{"申请人省份":"云南省","counts":81},{"申请人省份":"内蒙古自治区","counts":52},{"申请人省份":"北京市","counts":1186},{"申请人省份":"吉林省","counts":90},{"申请人省份":"四川省","counts":443},{"申请人省份":"天津市","counts":249},{"申请人省份":"宁夏回族自治区","counts":15},{"申请人省份":"安徽省","counts":1633},{"申请人省份":"山东省","counts":780},{"申请人省份":"山西省","counts":60},{"申请人省份":"广东省","counts":1575},{"申请人省份":"广西壮族自治区","counts":367},{"申请人省份":"新疆维吾尔自治区","counts":48},{"申请人省份":"江苏省","counts":1889},{"申请人省份":"江西省","counts":90},{"申请人省份":"河北省","counts":164},{"申请人省份":"河南省","counts":261},{"申请人省份":"浙江省","counts":905},{"申请人省份":"海南省","counts":20},{"申请人省份":"湖北省","counts":439},{"申请人省份":"湖南省","counts":211},{"申请人省份":"甘肃省","counts":71},{"申请人省份":"福建省","counts":277},{"申请人省份":"西藏自治区","counts":5},{"申请人省份":"贵州省","counts":108},{"申请人省份":"辽宁省","counts":199},{"申请人省份":"重庆市","counts":193},{"申请人省份":"陕西省","counts":270},{"申请人省份":"青海省","counts":15},{"申请人省份":"香港","counts":1},{"申请人省份":"黑龙江省","counts":215},],"reason":"","status":"success"}

分析
1.可以看到，接口中有三个数据，result数组、reason、status，由于三项数据共同构成了我们要请求的json，所以为get请求，data为默认即可，result数组通过data.result得到。
2.为了将result数组中的数据以表格形式打印，使用$.each(data.result,function(index,obj){}) 方法实现依次读取。

ps：

此处的data.result是本例中的目标数组，each方法使用时此处填入所要遍历的数组即可；
index表示的是数组的下标（从0开始累加），即当前遍历到了该数组的哪个位置，如果不需要输出所读取的数组元素下标的话，这个下标值的命名随意，因为函数中无需使用；

如果data.result数组中的元素也为一个json 如{“申请人省份”:“上海市”,“counts”:637}（本例中），此时obj表示的是就是这个数组，可以通过obj[‘申请人省份’]、obj[‘counts’]等读取json中的元素。

代码
js部分

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">function printtable(){$.ajax({url:'http://hebutgo.com:8080/maps/getMapsList',type:'get',datatype:'json',success:function(res){console.log(res);  //在console中查看数据$.each(res.result,function(index,obj){$("#table").append(                  "<tr><td>"+obj['申请人省份']+"</td>"+"<td>"+obj['counts']+"</td><tr>");});}})}</script>

html部分

<div class="main"><table id="table"><tr><th>申请人省份</th><th>数量</th></tr></table><input type="button" value="PRINT" onclick="printtable()"/>
</div>

<style type="text/css">.main{width: 500px;margin:0 auto;text-align: center;}#table{display: inline-block;vertical-align: top;border-collapse:collapse;}tr td{width:200px;border: 1px solid gray;}
</style>

$.ajax({url: 'https://api.example.com/data', // 请求的 URLtype: 'GET', // 请求方法：GET、POST 等dataType: 'json', // 预期服务器返回的数据类型success: function(data, textStatus, jqXHR) {// 请求成功时的回调函数console.log("成功获取数据: ", data);},error: function(jqXHR, textStatus, errorThrown) {// 请求失败时的回调函数console.log("请求失败: ", textStatus, errorThrown);}
});

在这个例子中，我们发送一个 GET 请求到指定的 URL，并期望服务器返回 JSON 格式的数据。如果请求成功，success 回调函数将被触发，并接收返回的数据作为参数。如果请求失败，error 回调函数将被触发，并接收关于错误的信息。

 <script type="text/javascript">function login1(){$.ajax({//${pageContext.request.contextPath}用于取后端方法的绝对路径的项目名url: "${pageContext.request.contextPath}/user/returnJson",type: "GET",data:'{name: 'James'}', //必须是字符串格式contentType:"application/json", //指定内容格式dataType:json,success: function(daa) {  //括号里的daa是服务器返回的数据console.log(daa);document.getElementById("myDiv").innerText=daa["name"];}});}</script>

2.第二种：

$.get(“请求地址”，“请求参数”，回调函数, 返回的数据类型)

（请求参数以形式js对象形式传入，可以避免不必要的字符拼接形式传入数据的麻烦）

<head>
<script>
function f1(fid) {if(confirm("是否删除？")){$.get("DeleteServlet",{id:fid},function (data) {console.log(data);if ("ok"=== data){$("#suc").slideUp(3000);setTimeout(function () {$("#suc").slideDown(2000);},2000);setTimeout(function () {location.href="show.html";},7000);}else{alert("删除失败")}},"text")}}</script>
</head>
<body>
<!--    让a标签失去跳转功能，点击触发事件f1（fid）里面并传入参数        -->
<a href=\"javascript:void(0)\" onclick='f1("+e.fid+")'>删除</a>
</body>

<script>function doAjax(){$.get("bmiAjax",{name:"ycy",height:1.75,weight:58},function (data) {alert(data);},"json")}
</script>

$.get('https://api.example.com/users', function(data) {// 在这里处理返回的数据console.log(data);// 假设 data 是一个用户列表的数组，我们可以遍历它$.each(data, function(index, user) {console.log('用户ID:', user.id);console.log('用户名:', user.username);});
});

向 https://api.example.com/users 发送了一个 GET 请求，并在请求成功时调用了一个匿名函数来处理返回的数据。我们假设服务器返回的是一个 JSON 格式的用户列表，因此我们可以在回调函数中遍历这个列表并打印出每个用户的 ID 和用户名。

如果你需要向服务器发送额外的数据，你可以将数据作为第二个参数传递给 $.get() 方法。例如：

$.get('https://api.example.com/users', { id: 123 }, function(data) {console.log(data); // 处理返回的用户数据
});

我们向服务器发送了一个包含 id: 123 的 GET 请求，以获取具有特定 ID 的用户的信息。

$.get() 方法提供了简化的 Ajax GET 请求功能，但在处理复杂的请求或需要更多配置选项时，使用 $.ajax() 方法可能更为合适。此外，对于涉及敏感数据的请求，务必确保使用 HTTPS 来保护数据的传输安全。

$.post(“请求地址”，“请求参数”，回调函数, 返回的数据类型)

1.若不涉及文件上传，要拿表单中的数据可以直接将表单序列化

$("#form1").serialize()

可以把表单的所有参数都获取到，并以name=value&age=value2的形式拼接起来

$("#form1").serialize()需要都哪个表单绑定起来。

<script>$("#btn").click(function(){alter($("form1").serialize());
})
</script>

<head><meta charset="UTF-8"><title>登录页面</title><!--要求：1.登录成功跳转展示所有数据页面2.登录失败显示登录失败信息--><script src="jquery.js"></script><script>function f() {var formS = $("form").serialize();// console.log(formS);$.ajax({type:"post",url:"LoginServlet",data:formS ,dataType:"text",success:function (data) {console.log(data);if ("ok"==data){location.href="show.html";}else{$("#sp").text("登录失败");}},error:function (e) {console.log(e);}})}</script>
</head>
<body>
<h3 align="center">登录页面</h3>
<hr>
<form><table align="center"><tr><td>用户名</td><td><input type="text" name="uname"></td></tr><tr><td>密码</td><td><input type="password" name="pwd"></td></tr><tr><td colspan="2" style="text-align: center"><span id="sp"></span></td></tr><tr align="center"><td colspan="2"><input type="button" value="登录" onclick="f()"></td></tr></table>
</form>
</body>

$.post('https://api.example.com/login', {username: 'myusername',password: 'mypassword'
}, function(response) {// 在这里处理返回的数据console.log(response);if (response.success) {alert('登录成功！');} else {alert('登录失败：' + response.message);}
}, 'json');

我们向 https://api.example.com/login 发送了一个 POST 请求，包含了用户名和密码数据。我们指定了预期返回的数据类型为 JSON，并在请求成功时调用了一个匿名函数来处理返回的数据。在回调函数中，我们检查了返回的响应对象，根据 success 属性显示相应的提示信息。

使用 POST 请求发送敏感数据时（如用户名和密码），务必确保通过 HTTPS 进行通信，以保护数据的传输安全。此外，对于涉及用户输入的数据，应该进行适当的验证和清理，以防止潜在的安全漏洞，如 SQL 注入或跨站脚本攻击（XSS）。

2.涉及文件上传的form表单，必须发post请求；后端还是要@MultipartConfig，且需要做如下操作：

将表单数据化（里面要一个DOM对象）
将 contentType:false，processData:false,

<head>
<script src=juqery.js></script>
<script>function alter() {var formData = new FormData($("form")[0]);$.ajax({type:"post",url:"AlterServlet",data:formData,contentType:false,processData:false,dataType:"text",success:function (data) {console.log(data);if ("ok" === data){location.href="show.html";}else {alert("修改失败");}}})}</script>
</head>
<body>
<h2 align="center" style="color: black">修改花的信息</h2>
<hr>
<form><table align="center"><tr><td>编号</td><td><input type="text" name="fid" readonly ></td></tr><tr><td>名称</td><td><input type="text" name="fname" ></td></tr><tr><td>价格</td><td><input type="text" name="price" ></td></tr><tr><td>产地</td><td><input type="text" name="made_in" ></td></tr><tr><td>描述</td><td><input type="text" name="describe" ></td></tr><tr><td>图片</td><td><input type="file" name="photo"></td></tr><tr><td colspan="2" style="text-align: center"><input type="button" value="修改" onclick="alter()"></td></tr></table>
</form>
</body>

回调函数主要是用来处理服务器对我们的响应结果。

返回的数据类型这个参数用来设置服务器返回来的数据类型，可以是xml, html, script, json, text。

3.第三种：

$.getJSON("请求地址", "请求参数", "回调函数")

通过HTTP GET请求，请求载入JSON数据，请求方式和回调数据类型是固定的（$.get()和$.post()都是四个参数而这个只要三个参数即可），请求方式是GET，数据返回是JSON格式；

用该方法记得写<thead> <tbody>, i代表循环中对象的索引，e代表循环中拿出的对象，data用于接收后端响应回来的数据

$(function () {$.getJSON("QueryServlet",function (data) {$(data).each(function (i,e) {console.log(e);var $1 = $("<tr align=\"center\">\n" +"            <td>"+e.fid+"</td>\n" +"            <td>"+e.fname+"</td>\n" +"            <td>"+e.price+"</td>\n" +"            <td>"+e.made_in+"</td>\n" +"            <td>"+e.describe+"</td>\n" +"            <td><img src=\"upload/"+e.photo+"\" alt=\"\"></td>\n" +"            <td>\n" +"                <a href=\"javascript:void(0)\" onclick='f1("+e.fid+")'>删除</a>\n" +"                <a href=\"updata.html?fid="+e.fid+"\">变更</a>\n" +"            </td>\n" +"        </tr>");$("tbody").append($1);$1.mouseover(function () {$(this).css("background-color","palevioletred")});$1.mouseout(function () {$(this).css("background-color","white")})});});});

这种方式要求服务器返回的数据类型得是json格式的。

<script>function doAjax(){$.getJSON("bmiAjax",{name:"ycy",height:1.75,weight:58},function (data) {alert(data);})}
</script>

4.第四种：

这种方式是发送ajax请求获取一个js文件。

$.getScript("请求地址", "回调函数")

5. 注意

a标签这种跳转的，同时需要把数据传过去的：直接后面拼接数据

<a href="login.html?id=1&password=123">跳转</a>

四、jQuery load() 方法

jQuery 的 load() 方法是一个简单而强大的 Ajax 函数，用于从服务器加载数据，并把返回的数据放入被选元素中。这个方法通常用于将 HTML 片段加载到指定的元素中，而无需使用 $.ajax() 或其他更复杂的 Ajax 方法。

以下是 load() 方法的基本语法

$(selector).load(URL, [data], [callback]);

selector: 一个 jQuery 选择器，指定要加载数据的元素。
URL: 要请求的 URL。
data (可选): 发送到服务器的数据，以键值对的形式表示。这通常是一个对象或查询字符串。
callback (可选): 请求完成时的回调函数。这个函数接收返回的 HTML 内容作为参数。

面是一个简单的例子，展示如何使用 load() 方法将一个页面的内容加载到一个 <div> 元素中：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery load() 示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><button id="load-button">加载内容</button>
<div id="content"></div><script>
$(document).ready(function() {$('#load-button').click(function() {$('#content').load('content.html');});
});
</script></body>
</html>

在这个例子中，当用户点击 “加载内容” 按钮时，load() 方法会向 content.html 发送一个 GET 请求，并将返回的 HTML 内容加载到 ID 为 content 的 <div> 元素中。

如果你需要向服务器发送额外的数据，你可以传递一个对象作为 data 参数：

$('#content').load('content.php', { param1: 'value1', param2: 'value2' });

在这个例子中，content.php 会接收到 param1 和 param2 这两个参数，并可以根据这些参数返回不同的内容。

此外，你还可以提供一个回调函数来处理加载完成后的逻辑：

$('#content').load('content.html', function(response, status, xhr) {if (status == "error") {var msg = "抱歉，无法加载内容: ";$(this).html(msg + xhr.status + " " + xhr.statusText);}
});

在这个回调函数中，response 参数包含请求返回的内容，status 参数包含请求的状态（“success”, “error”, “notmodified”, “timeout”, 或 “abort”），而 xhr 参数包含 XMLHttpRequest 对象，你可以用它来获取更多关于请求的信息。

oad() 方法默认使用 GET 请求来加载数据。如果你需要发送 POST 请求或其他类型的请求，你可能需要使用 $.ajax() 方法，因为它提供了更多的配置选项。此外，对于安全性敏感的数据传输，确保使用 HTTPS。

iframe标签模仿实现Ajax效果

AJAX 可以用于创建快速动态的网页。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

编写一个 ajax-frame.html浏览器打开

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>kuangshen</title>
</head>
<body><script type="text/javascript">function LoadPage(){var targetUrl =  document.getElementById('url').value;console.log(targetUrl);document.getElementById("iframePosition").src = targetUrl;}</script><div><p>请输入要加载的地址：</p><p><input id="url" type="text" value="https://www.bilibili.com/"/><input type="button" value="提交" onclick="LoadPage()"></p>
</div><div><h3>加载页面位置：</h3><iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div></body>
</html>

~~~~~~~~~~~~~~~~

入口函数，表示页面输载入事件：ready(函数)

$(document).ready(function(){...  //  此处是页面DOM加载完成的入口
});$(function () {   ...  // 此处是页面 DOM 加载完成的入口 -- 推荐
}) ;

<script type="text/javascript">
$(document).ready(function(){alert("msg");
});
</script>

//简化版<script type="text/javascript">
$(function(){
alert("msg");
});
</script>

jQuery 元素操作

1 遍历元素

$("div").each(function (index, domEle) { xxx; })1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
2. 里面的回调函数有2个参数：  index 是每个元素的索引号;  demEle 是每个DOM元素对象，不是jquery对象
3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象  $(domEle)

$.each(object, function (index, element) { xxx; })1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数：  index 是每个元素的索引号;  element  遍历内容

2 创建元素

$('<li></li>');

jQuery核心函数

引入jQuery库，其实就是向网页中添加了一个新的函数$（jQuery）

- $ 是jQuery中的核心函数，jQuery的所有功能都是通过该函数来进行的

- 核心函数的功能（两种作用）

1. 将它作为对象使用，此时是一个工具类

- 在核心函数中jQuery为我们提供了多个工具方法

jQuery.isArray( ) 检查是不是数组

jQuery.isFunction( ) 检查是不是函数

jQuery.isNumeric( ) 检查是不是数值

2. 将它作为函数调用，根据不同参数的不同可以发挥不同的作用

jQuery( 函数 ) 将一个函数作为$的参数

- 这个函数会在文档加载完毕之后执行

- 相当于document.addEventListener("DOMContentLoaded",function(){ })

jQuery( 选择器 ) 将选择器字符串作为参数

- jQuery 自动去网页中查找元素

- 作用类似于 document.querySelectorAll( "...")

- 注意：通过jQuery核心函数查询的结果并不是原生的DOM对象，

而是一个经过jQuery包装过的新的对象，这个对象我们称其为jQUery对象 jQuery对象不能直接调用原生DOM对象的方法，

通常我们为jQuery对象命名时，会使用$开头（为了区分 $对象和DOM原生对象)

jQuery( DOM对象) 将DOM对象作为参数

- 可以将DOM对象转换为jQuery对象，从而使用jQuery对象的方法

jQuery( HTML代码 ) 将HTML代码作为参数

- 会根据html 代码来创建元素

注意：在jQuery中我们设置变量时，使用var ，因为一般使用jQuery说明比较旧的项目，考虑兼容性，同时也尽量避免使用箭头函数

1. 将jQuey作为对象（工具类）调用的例子

	<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script><script>console.log(jQuery === $);//truefunction fn(){}var num = 10// jQuery.isFunction( )  检查是不是函数console.log($.isFunction(num));//falseconsole.log($.isFunction(fn));//true// 可以使用typeof检查类型console.log(typeof fn === "function");//true</script>

2. 将其作为函数调用的例子

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>document</title><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script><script>//  将一个函数作为$的参数// $(function(){// 	alert("核心函数~~")// })// alert("核心函数外~~")// 将选择器字符串作为参数$(function(){// 通过jQuery核心函数查询的结果可以直接调用click，因为其是jQUery对象 $("#btn01").click(function(){// alert("你点我干嘛")var btn = document.getElementById("btn01")// 所以为了区分 jQUery对象和DOM原生对象，// 我们一般为 jQUery对象 命名时，会为其加上一个$				var $btn2 = $("#btn01")// 将DOM对象作为参数传进去，可以将DOM对象转换为jQuery对象alert($(btn))//[object Object]alert(btn);//[object HTMLButtonElement]alert($btn2);//[object Object]var $h1 = $("<h1>我是一个标题</h1>")//会根据html代码创建元素alert($h1)//[object Object]，是一个jQuery对象$("div").append($h1)//把创建的h1加入到div中})})		</script>
</head>
<body>	<div></div><button id="btn01" type="button">点我一下</button>
</body>

四、jQuery对象
jQuery对象

- 通过jQuery核心函数获得到的对象就是jQuery对象

- jQuery对象是jQuery中定义的对象，可以将其理解为DOM对象的升级

在jQuery对象中为我们提供了很多简单易用的方法来帮助我们简化DOM操作

- jQuery对象本质上是一个DOM对象的数组（类数组）

可以通过索引获取jQuery 对象中的DOM对象，注意获取的是DOM对象

- 当我们修改jQuery对象，它会自动修改jQuery对象中的所有元素

这一特点称为jQuery的隐式迭代

- 通常情况下，jQuery对象的方法的返回值依然是一个jQuery对象

所以我们可以调用一个方法后继续调用其他的jQuery对象的方法

这一特性称为jQuery对象的链式调用