JQuery 基础知识学习（详尽版）2024.11.17
一、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官网地址： jQuery
https://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('属性')
- 1
- 设置属性语法
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" />男
<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(); // 找祖宗 body
alert( 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个script
for(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的其余所有li
var x = $("li").parent().is("ul"); // 返回布尔型，li的父节点是不是ul
alert(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', // 请求的 URL
type: '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 === $);//true
function fn(){}
var num = 10
// jQuery.isFunction( ) 检查是不是函数
console.log($.isFunction(num));//false
console.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对象的 链式调用
