一、什么是 jQuery ？
jQuery是一个轻量级的”写的少，做的多”的JavaScript函数库。[独立的javascript文件]
1.jQuery 是一个 JavaScript 函数库。[.js]
2.jQuery 极大地简化了 JavaScript 编程。
3.jQuery 很容易学习。
jQuery库包含以下功能：
1.HTML元素选取
2.HTML元素操作
3.CSS 操作
4.HTML 事件函数
5.JavaScript 特效和动画[元素的隐藏和显示]
6.HTML DOM 遍历和修改
7.AJAX请求【获取后台处理程序返回的数据值】高级操作
Jquery下载
Download the compressed, production jQuery 3.6.0—jquery-3.6.0.min.js
Download the uncompressed, development jQuery 3.6.0—jquery-3.6.0.js
Jquery是以“.js”结尾的，说明他是一个javascript文件。可以按照javascript的用法使用。
jquery-3.6.0.min.js–jquery的发布版，它的特点小，节省内存。因为它里面的内容被压缩了。
jquery-3.6.0.js—jquery的开发版，它的特点有注释可以查看具体的内容。它是没有压缩的。
二、jQuery的使用
1.通过script标记导入本地jquery函数库文件到网页中。它是一个javascript文件。
2.通过script标记利用网络地址导入jquery函数库到网页中
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!--导入本地jquery文件-->
<!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
<!--script标记利用网络地址导入jquery函数库到网页中-->
<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
<script>
//javascript页面初始化事件
//window.onload=function(){}
//jquery页面初始化事件
//$(function(){})
$(function(){
alert("script标记利用网络地址导入jquery函数库到网页中");
})
</script>
</head>
<body>
</body>
</html>三、 jQuery 语法
通过 jQuery，您可以选取HTML 元素【标记】，并对它们执行”操作”（actions）。
基础语法： $(selector).action()
1.美元符号定义 $ -表示jQuery，jQuery表示$。我们可以使用$代替jQuery。
2.选择符（selector）—“查询”和”查找”需要被控制的 HTML 元素。可以将被控制的 HTML 元素转换成jQuery对象。【 $(selector)–jQuery的构造器–创建jQuery对象】
action()指对得到的jQuery对象调用的函数/属性
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!--导入本地jquery文件-->
<!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
<!--script标记利用网络地址导入jquery函数库到网页中-->
<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
<script>
//javascript页面初始化事件
//window.onload=function(){}
//jquery页面初始化事件
//$(function(){})
$(function(){
//alert("script标记利用网络地址导入jquery函数库到网页中");
//Jquery 语法
//基本语法：$(select).action()
//1.$--美元符号--表示jQuery，我们在使用的时候可以使用“$”代替jQuery
//2.$(select)---选择符/器--“查询”和“查找”需要被控制的HTML元素
//使用上面的选择器得到的是jQuery对象
//jQuery--$("#p1")----jQuery对象
//$("#p1").css("color","red");
//javascript---document.getElementById("p1")----dom对象
//document.getElementById("p1").style.color="red";
//jquery--$("p")-----jQuery对象
//$("p").css("color","red");//所有p段落都会改变样式
//javascript---document.getElementsByTagName("p")----dom对象
//document.getElementsByTagName("p").style.color="red";//不能变样式因为得到的是数组
//document.getElementsByTagName("p")[0].style.color="red";
//jquery--$("p")-----jQuery对象
//$(".p2").css("color","red");//所有的p段落都改变样式
//javascript---document.getElementsByClassName("p")----dom对象
//document.getElementsByClassName("p2").style.color="red";//不能变样式因为得到的是数组
document.getElementsByClassName("p2")[0].style.color="red";//变第一个样式
//总结: jQuery对象.函数名([参数]);
})
</script>
</head>
<body>
<p id="p1" class="p2">测试jQuery 语法</p>
<p id="p1" class="p2">测试jQuery 语法</p>
</body>
</html>四、 页面初始化事件
JavaScript的页面初始化事件：
1.body中提供οnlοad=“函数”
2.window.οnlοad=function(){}
jQuery的页面初始化事件：
1.$(document).ready(function( ){ 执行代码})
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!--导入本地jquery文件-->
<!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
<!--script标记利用网络地址导入jquery函数库到网页中-->
<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
<script>
//页面初始化事件
//javasc的页面初始化事件
//1.body中提供onload="函数"
//2.window.onload=function(){}
//特点:1.执行时机，必须等到整个html加载完毕以后，在执行包裹代码
//2.只能执行一次，如果执行第二次，那么就会覆盖第一次的执行结果
/*window.onload=function(){
alert("第一次执行！");
}
window.onload-function(){
alert("第二次执行！");
}
*/
//jQuery的页面初始化事件
//特点:1.执行时机，必须等到整个html页面加载完毕以后，在执行包裹代码
//2.可以执行多次，不会覆盖之前的执行
$(document).ready(function(){
alert("第一次执行！")
})
$(function(){
alert("第二次执行！")
})
//简写
$(function(){
alert("第一次执行");
})
$(function(){
alert("第二次执行");
})
</script>
</head>
<body>
</body>
</html>五、Jquery对象与javascript对象的转换
1.javascript对象—-》Jquery对象——-【$(javascript对象)】
2.Jquery对象——》javascript对象—–【Jquery对象.get()】
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!--导入本地jquery文件-->
<!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
<!--script标记利用网络地址导入jquery函数库到网页中-->
<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
<script>
//Jquery对象与javascript对象的转换
//通过$(" ")得到的是jQuery对象
//jQuery对象只能调用jQuery函数，不能使用JavaScript对象的方法
//JavaScript对象就是我们通过document.getElemen...()得到的dom对象
//dom对象只能调用JavaScript对象的方法，不能使用jQuery函数
$(document).ready(function(){
//将JavaScript对象转换成jQuery对象----$(dom对象)
var jsobj= document.getElementsByTagName("p")[0];
alert(jsobj);//[object HTMLParagraphElement]JavaScript对象
var jqobj=$(jsobj);
alert(jqobj);//[object Object]
jqobj.css("font-size","30px");
//Jquery对象---转换---javascript对象
//jqobj.get();
var jqobj1=$("p");
alert(jqobj1);//[object Object]
var jsobj1= jqobj1.get();
alert(jsobj1);//[object HTMLParagraphElement]
jsobj1[0].style.color="red";
})
</script>
</head>
<body>
<p>测试Jquery对象与javascript对象的转换</p>
</body>
</html>六、jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
1.元素选择器 $(“html元素名称”)
2.jQuery id 选择器通过 HTML 元素的 id 属性选取指定的元素。$(“#id”)
3.jQuery 类选择器可以通过指定的 class 查找元素。$(“.class”)
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!--导入本地jquery文件-->
<!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
<!--script标记利用网络地址导入jquery函数库到网页中-->
<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
<script>
//1.HTML元素的获取
//jQuery对象的创建方式
$(function(){
//1.$(select)---将被选中的HTML标记构造成jQuery对象
//$("#idname")----根据HTML元素的id属性得到HTML元素转换成的jQuery对象
//$("#p1").css("color","red");
//等价于document.getElementById("id")---dom对象
//$("标记名称")----根据HTML元素的标记名称得到HTML元素转换成的jQuery对象
//$("p").css("color","red");
//等价于document.getElementsByTagName("标记名称")---dom对象
//$(".classname")---根据html元素的class属性得到html元素转换成Jquery对象
$(".p2").css("color","red");
//等价于document.getElementsByClassName("classname")---dom对象
})
</script>
</head>
<body>
<p id="p1" class="p2">测试jQuery 语法</p>
<p id="p1" class="p2">测试jQuery 语法</p>
</body>
</html>七、jquery中HTML元素操作
1.jQuery获取/设置文本元素的值
jQuery获取元素的值 text()、html() 以及 val()
text()—返回所选元素的文本内容
html()–返回所选元素的内容（包括 HTML 标记）
val()—-返回表单字段的值
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!--导入本地jquery文件-->
<!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
<!--script标记利用网络地址导入jquery函数库到网页中-->
<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
<script>
$(function(){
//1.HTML元素的操作
//javascript中HTML元素操作
//innerHTML属性---可以修改元素以及元素中的内容
//可以解释运行html标记
//innerText属性---可以修改html元素中的内容
//不可以解释运行html标记，可以操作html元素中的内容
//value属性--专门控制表单元素的值
//jQuery中和HTML元素操作
//html(内容)函数---可以修改HTML元素以及元素中的内容
//得到HTML元素内容
var htmlnode= $("#p1").html();
alert(htmlnode);//测试<a href="#">jquery</a>对HTML元素操作
//修改HTML元素内容
$("#p1").html("<h4>修改HTML元素内容<h4>");//修改HTML元素内容
//text(内容)函数---可以修改和得到html元素的内容
//得到HTML元素中的内容
var p2=$("#p2").text();
alert(p2);//测试jquery对HTML元素操作
//修改HTML元素中的内容
$("#p2").text("<h1>测试<a href=\"#\">jquery</a>对HTML元素操作</h1>");//<h1>测试<a href="#">jquery</a>对HTML元素操作</h1>
//val(内容)函数----专门控制表单元素的值
//得到表单元素的值
var val3=$("[name]").val();
alert(val3);//默认值
//修改表单的值
$("[name]").val("文本默认值");
})
</script>
</head>
<body>
<p id="p1">测试<a href="#">jquery</a>对HTML元素操作</p>
<p id="p2">测试<a href="#">jQuery</a>对HTML元素得控制</p>
<input type="text" value="默认值" name="">
</body>
</html>八、jQuery – 添加元素 jQuery – 删除元素
jQuery – 添加元素
append() – 在被选中元素中插入内容
after() – 在被选元素之后插入内容
before() – 在被选元素之前插入内容
jQuery – 删除元素
remove() – 删除被选元素（及其子元素）【有过滤功能】
empty() – 从被选元素中删除子元素
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
#div1{
width: 280px;
height: 200px;
background-color: red;
}
#div2{
width: 280px;
height: 200px;
background-color: red;
}
</style>
<!--导入本地jquery文件-->
<!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
<!--script标记利用网络地址导入jquery函数库到网页中-->
<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
<script>
$(function(){
//jQuery - 添加元素
//javascript中创建添加html元素
//document.createElement("元素名称");
//document.createTextNode("文本内容");
//父元素的dom对象.appendchild(nide);
//创建标记
var h4dom=document.createElement("h4");
//创建内容
var textdom=document.createTextNode("文本内容");
//将内容添加进标记中
var text= h4dom.appendChild(textdom);
//将元素追加到div中
var h5dom= document.getElementById("div2");
h5dom.appendChild(text)
//jQuery中创建添加HTML元素
document.getElementById("but1").onclick=function(){
//创建元素---$("元素以及元素内容")
var hobj=$("<h5>创建元素-h1</h1>");
//alert(hobj)
//添加html元素 jQuery对象.append() / after() / before()
//append()---指定元素的里面
//before()--指定元素的前面
//after()--指定元素的后面
$("#div1").append(hobj);
//$("#div1").before(hobj)
//$("#div1").after(hobj);
}
//删除元素
//javascript中删除元素
//父元素的dom对象.removeChild(子元素的dom对象);
//jquery中删除元素
document.getElementById("but2").onclick=function(){
//remove() - 删除被选元素（及其子元素）【有过滤功能】
$("#div1").remove();
}
document.getElementById("but3").onclick=function(){
//empty() - 从被选元素中删除子元素
$("#div1").empty();
}
})
</script>
</head>
<body>
<input id="but1" type="button" value="添加元素">
<input id="but2" type="button" value="删除元素remove()">
<input id="but3" type="button" value="删除元素empty()">
<div id="div1"></div><br>
<div id="div2"></div>
</body>
</html>九、jquery的CSS 操作
1.为元素添加不存在的样式
css(样式属性名称，属性值) 设置被选元素的具有这个样式。
css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。
2.为元素添加已经存在的样式
addClass() – 向被选元素添加一个或多个样式类
removeClass() – 从被选元素删除一个或多个类
toggleClass() – 对被选元素进行添加/删除类的切换操作
3.获取元素样式
css(样式属性名称) 返回被选元素的指定样式属性值。
例如：添加不存在的样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!--导入本地jquery文件-->
<!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
<!--script标记利用网络地址导入jquery函数库到网页中-->
<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
<script>
$(function(){
//javascript中css的控制
//JavaScript中为元素添加不存在的样式
//document.getElementById("p1").style.color="red";
//jQuery中css的控制
/*为元素添加不存在的样式*/
//css("css属性名称","属性值")---设置一个css属性
$("#p1").css("color","red");
//css({"css属性名称":"属性值","css属性名称":"属性值"})---设置一组css属性
$("#p2").css({"color":"blue","font-size":"30px"});
//得到css样式
//javascript中css的控制---得到css样式
//行内样式设置
//document.getElementById("p1").style.css属性名称
//jquery得到css样式
//css("css属性名称")
var cssvalue=$("#p2").css("font-size");
alert(cssvalue)
})
</script>
</head>
<body>
<p id="p1">测试jquery控制css</p>
<p id="p2">测试jquery控制css</p>
</body>
</html>例如：添加存在的样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
.pclass{
color: red;
font-size: 50px;
background-color: royalblue;
}
</style>
<!--导入本地jquery文件-->
<!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
<!--script标记利用网络地址导入jquery函数库到网页中-->
<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
<script>
$(function(){
//jquery中css的控制
//控制已经存在的样式
//元素的样式是通过class选择器设置
document.getElementById("bu1").onclick=function(){
//添加样式addClass()
$("#p1").addClass("pclass");
}
document.getElementById("bu2").onclick=function(){
//添加样式removeClass()
$("#p1").removeClass("pclass");
}
document.getElementById("bu3").onclick=function(){
//toggleClass()
$("#p1").toggleClass("pclass");
}
})
</script>
</head>
<body>
<input id="bu1" type="button" value="添加样式">
<input id="bu2" type="button" value="删除样式">
<input id="bu3" type="button" value="切换【有/无】样式">
<p id="p1">测试控制已经存在的样式</p>
</body>
</html>十、 jQuery 事件
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$(“p”).click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$(“p”).click(function(){ // 动作触发后执行的代码!! });
常用的 jQuery 事件方法
- $(document).ready(function) 文档完全加载完后执行函数
- click(function) 方法是当按钮点击事件被触发时会调用一个函数
- dblclick(function)双击元素时，会发生 dblclick 事件。
- mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。
- mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
- hover(function)方法用于模拟光标悬停事件。
- focus(function)当元素获得焦点时，发生 focus 事件。
- blur(function)当元素失去焦点时，发生 blur 事件。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../20211015_Js高级Jquery/JqueryJs/jquery-3.6.0.min.js"></script>
<script>
//JavaScript事件
//1.在html元素中通过事件来设置对应事件
//function 事件处理函数( ){}
//<input type="button" value="按钮" onclick="事件处理函数">
//2.得到html元素的dom对象，调用方法的设置
/*window.onload=function(){
var btn1dom=document.getElementById("btn1");
btn1dom.onclick=function(){alert("执行函数");}
}
<input id="btn1" typeof="button" value="按钮">
*/
//jQuery 事件
//页面初始化事件---文档完全加载完后执行函数
//原始做法
//$(document).ready(function(){})
//简写做法
//$(function(){})
$(function(){
//2.点击事件
/*$("[type]").click(function(){
alert("jQuery的点击事件");
})*/
//3.双击事件
/*$("[type]").dblclick(function(){
alert("双击事件！")
})*/
//4.当鼠标指针穿过元素时，会发生 mouseenter 事件。
/*$("[type]").mouseenter(function(){
alert("当鼠标指针穿过元素时，会发生 mouseenter 事件。")
})*/
//5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
/*$("[type]").mouseleave(function(){
alert("mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件")
})*/
//6.hover(function)方法用于模拟光标悬停事件。
/*$("p").hover(function(){
alert("光标悬停事件")
})*/
//7.focus(function)当元素获得焦点时，发生 focus 事件。
//8.blur(function)当元素失去焦点时，发生 blur 事件。
$("[placeholder]").focus(function(){
$("[placeholder]").val("获得焦点时文本变为此时的。")
})
$("[placeholder]").blur(function(){
$("[placeholder]").val("失去焦点时文本变为默认")
})
})
</script>
</head>
<body>
<input type="button" value="按钮">
<p>测试事件</p>
<input type="text" placeholder="默认值">
</body>
</html>十一、元素的隐藏和显示动画【就是元素的隐藏和显示】
hide([毫秒数],[success-function]) 隐藏元素
show([毫秒数],[success-function]) 显示元素
fadeIn([毫秒数],[success-function]) 显示元素。
fadeOut([毫秒数],[success-function]) 隐藏元素。
slideDown([毫秒数],[success-function]) 显示元素
slideUp([毫秒数],[success-function]) 隐藏元素
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../20211015_Js高级Jquery/JqueryJs/jquery-3.6.0.min.js"></script>
<script>
/*
元素的隐藏和显示动画【就是元素的隐藏和显示】
hide([毫秒数],[uccess - function])隐藏元素
show([毫秒数], [success - function]) 显示元素
fadeIn([毫秒数], [success - function]) 显示元素。
fadeOut([毫秒数], [success - function]) 隐藏元素。
slideDown([毫秒数], [success - function]) 显示元素
slideUp([毫秒数], [success - function]) 隐藏元素
*/
$(function(){
$("[type]").click(function(){
if($("[type]").val()=="隐藏"){
/*$("img").hide(2000,function(){
alert("已经隐藏成功")
});*/
/*$("img").fadeOut(2000,function(){
alert("已经隐藏成功")
});*/
$("img").slideUp(2000,function(){
alert("已经隐藏成功")//动画完成后得到函数结果
});
$("[type]").val("显示")
}else{
//$("img").show(2000);
//$("img").fadeIn(3000)
$("img").slideDown(3000);
$("[type]").val("隐藏")
}
})
})
</script>
</head>
<body>
<input type="button" value="隐藏"><br>
<img src="../imgs/avatar2.png" alt="">
</body>
</html>十二、jQuery 效果- 动画
jQuery animate() 方法允许您创建自定义的动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性.
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../20211015_Js高级Jquery/JqueryJs/jquery-3.6.0.min.js"></script>
<style>
img{
position: absolute;
top: 50px;
left: 0px;
}
</style>
<script>
//jQuery 效果--动画
//animate() 方法允许您创建自定义的动画
//$(selector).animate({params},apeed,callback);
//必须的params参数定义形成动画的css属性
//可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。
//可选的callback参数是动画完成后所执行的函数名称
//jQuery stop( )方法用于停止动画或效果，在他们完成之前
$(function(){
//开始动画绑定点击事件
$("#bnt1").click(function(){
//给img添加开始动画事件，第三个参数是执行动画动作的函数
$("[src]").animate(
{ "position":"absolute","top":"50px","left":"500px"},
5000,
function(){
alert("动画执行结束");
})
})
//停止动画绑定事件
$("#btn2").click(function(){
//用于停止动画或效果，在他们完成之前
$("img").stop()
})
})
</script>
</head>
<body>
<input id="bnt1" type="button" value="开始动画">
<input id="btn2" type="button" value="停止动画"><br>
<img src="../imgs/avatar2.png">
</body>
</html>十三、HTML DOM 遍历和修改
jQuery each() 方法
语法
$(selector).each(function(index,element){ })
each函数中的function的
参数1-index–被遍历出的每一个元素在数组中的位置[下标]
参数2-element–被遍历出的每一个元素具体元素【DOM对象】
each函数中的function中没有element时，可以被this代替
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../20211015_Js高级Jquery/JqueryJs/jquery-3.6.0.min.js"></script>
<script>
//javascript的foreach方法
window.onload=function(){
var pdom=document.getElementsByTagName("p");
//因为for循环遍历的数组dom对象得到的是Java对象和其他所以不能用for循环遍历的到里面的元素内容
/*for(index in pdom){
console.log(pdom[index]);//[object HTMLParagraphElement],length 4,function item() { [native code] },function namedItem() { [native code] }
}*/
//forEach()只能遍历不通的数组,并且直接拿到里面的值
/*var arr=[1001,1002,1003]
arr.forEach(function(res){
alert(res)
});*/
//可以使用for循环
for(var index=0;index<pdom.length;index++){
//alert(pdom[index]);//[object HTMLParagraphElement]
//因为的到的是dom对象所以可以直接使用dom对象的样式设置方法
pdom[index].style.color="red";
}
}
//jquery的each()
//$(selector).each(function(index,[element]){ })
//index---元素下标
//element---当前元素的dom对象,可以使用this代替
$(function(){
$("p").each(function(index){
//得到的是里面的下标值但是里面每个对应的值是一个dom对象
//可以让他转化为jQuery对象进行样式设置
$(this).css("font-size","30px")
})
})
</script>
</head>
<body>
<p>测试遍历元素</p>
<p>测试遍历元素</p>
<p>测试遍历元素</p>
<p>测试遍历元素</p>
</body>
</html>总结：
1.jQuery 选择器
2.jQuery对象与javascriptDOM对象转换
3.jQuery控制html元素内容【text([content]) /html([content]) / val([content]) 】
4.jQuery添加html元素[append()/ after() / before()]
5.jQuery删除html元素[remove()/empty()]
6.jQuery控制css 【css(“css属性名”)
/ css(“css属性名”,”属性值”)
/css({“css属性名”:”属性值”,….}) 设置一组
/addClass(class类型样式)
/removeClass(class类型样式)
1.jQuery控制事件 【jquery对象.事件名称(function(){/* 事件处理动作 */})】
2.jQuery的each方法
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79855.html
