jQuery是javaScript的类库,可以简化javaScript的操作,统一浏览器的样式
jQuery中文文档:https://jquery.cuishifeng.cn/
jQuery下载:http://www.mywangku.com
jQuery1.x系列兼容IE6,7,8
jQuery.min.js min.js是压缩的版本 项目要用的是这个
jQuery.js 是完整版有注释
回调函数就是本函数执行完,要自动执行的函数
jQuery的主要知识
1.jQuery选择器
2.jQuery动画
3.jQueryDOM操作
主要应用:
1.取得文档的内容
2.修改页面的外观
3.改变文档的内容
4.响应用户的交互操作
5.为页面添加动画效果
jQuery书写界面初始模板
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function() /*当文档加载完成后,执行的函数*/
{
jQuery代码
});
});
</script>
</head>
<body>
</body>
</html> /
1.jQuery选择器:
$("this") 选中本元素
$("选择符") 选中该选择器
1.包含所有css的选择器,都可以使用jQuery选中
2.jQuery还可以选中表单和表单的属性
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
eg:$(":text") 选中所有type等于text的input
$(":input") 选中所有input表单
表单属性:
:enabled
:disabled
:checked:匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
:selected:
eg:$("input:enabled") 选中所有可用的input
2.jQuery事件:
常见DOM事件 JQuery的事件名字前面没有"on"
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
focus:获得焦点
blur:失去焦点
常见的jQuery事件
$(document).ready(function(){}); //当页面所有文档加载完自动执行
$("选择器").click(function(){}); //单击事件
$("选择器").fucus(function(){}) //当获得焦点时触发代码
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>
</body>
</html>
3.jQuery的效果:就是操作css的样式
本质:给操作元素添加或修改css的行内样式
可以打开浏览器开发者模式:观察元素样式变化过程
api都有speed和callback可选参数
eg:$("h1").slideUp(3000,function(){alert("隐藏元素")})
1.jQuery的隐藏和显示
隐藏:$("选择器").hide(speed,callback)
显示:$("选择器").show(speed,calllback)
用来切换hide()和show()方法:$(selector).toggle(speed,callback);
可选参数:speed规定隐藏或显示的速度,取值有"slow","fast",或毫秒
callback参数是显示或隐藏完成后所执行的函数名称
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#b").click(function(){
$("p").hide();
});
$("#a").click(function(){
$("p").show();
});
$("#c").click(function(){
$("p").toggle(); //用于切换hide()和show()函数
})
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button id="b">隐藏</button>
<button id="a">显示</button>
<button id="c">隐藏/显示</button>
</body>
</html>/
2.jQuery淡入淡出 ---> 自动操作display和opacity属性 重要:可以对图片应用淡入淡出
可以打开浏览器开发者模式:观察元素样式变化过程 speed属性的取得大一点这样才能观察到变化过程
淡入淡出:通过透明度(opacity)的变化动态地显示(同时去掉隐藏元素的属性 去掉display:none;)或隐藏(同时田间隐藏元素的属性display:none;)元素
1.淡入:原来元素是隐藏的(dispaly:none或者visiblity:hidden):用淡入可以使内容显示出来
本质:opacity从0变成1的过程 同时给操作元素添加一个display:block;或者display:inline样式;同时去掉display:none;样式
2.淡出:原来元素是显示的,用淡出可以使元素隐藏起来,
代码本质过程:opacity从1变成0 同时为元素添加dispaly:none属性,使元素隐藏起来
1.淡入已隐藏的元素:$("选择器").fadeIn(speed,callback)
2.淡出可见元素:$("选择器").fadeOut(speed,callback)
3.切换fadeIn()和fadeOut()方法:$("选择器").fadeToggle(speed,callback)
4.调整元素淡入/淡出到指定的不透明度:$("选择器").fadeTo(speed,opacity,callback)
本质:改变opacity属性,同时改变display
注意:fadeTo函数的speed和opacity必须一起写,否则没显示
fadeTo元素可以淡入,也可以淡出 (看初始状态是哪个 ---> opacity的指定值)
可选参数:speed参数规定效果的时长,取值有"slow","normal","fast",毫秒
callback参数是fading完成后所执行的函数名称
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<style type="text/css">
h2{
display: none;
}
</style>
<script>
$(document).ready(function(){
//1s = 1000ms
/*把隐藏的元素淡入*/
$("#a").click(function(){
$("h2").fadeIn(3000); //打开浏览器开发者模式 看元素变化过程
});
/*把显示的元素淡出*/
$("#b").click(function(){
$("h2").fadeOut(3000);
})
/*切换淡入淡出*/
$("#c").click(function(){
$("h2").fadeToggle(3000);
})
$("#d").click(function(){
$("h2").fadeTo(2000,0.5);
})
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button id="b">淡出</button>
<button id="a">淡入</button>
<button id="c">淡入/淡出</button>
<button id="d">淡入/淡出到指定透明度</button>
</body>
</html>/
3.jQuery滑动:jQuery的滑动方法可以使元素滑动
1.使隐藏的元素(display:none)滑动显示出来:$("选择器").slideDown(speed,callback)
2.使显示的元素滑动隐藏起来:$("选择器").slideUp(speed,callback)
3.切换slideDown和slideUp方法:$("选择符").slideToggle(speed,callback)
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<style type="text/css">
h2{
display: none;
}
</style>
<script>
$(document).ready(function(){
//1s = 1000ms
/*滑动显示隐藏元素*/
$("#a").click(function(){
$("h2").slideDown(2000,function(){
alert("fenglei")
});
});
/*滑动隐藏显示的元素*/
$("#b").dblclick(function(){
$("h2").slideUp(2000,function(){
alert("隐藏完毕")
});
});
/*切换函数*/
$("#c").click(function(){
$("h2").slideToggle(2000,function(){
alert("切换函数");
});
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button id="a">滑动显示</button>
<button id="b">滑动隐藏</button>
<button id="c">滑动显示/隐藏</button>
<!--<button id="d">淡入/淡出到指定透明度</button>-->
</body>
</html> /
4.jQuery自定义的动画 animate()方法用于创建自定义动画
注意:元素默认布局是static的,不能改变位置
animate()方法可以操作几乎所有css样式,但是使用animate()方法时,必须使用Camel标记法书写所有的属性名
eg:paddingLeft而不是padding-left
要想改变位置,布局必须设置成relative,absolute,fixed,才能修改位置
1.自定义动画:$("选择器").animate({params},speed,eff,callback)
必需的 params 参数定义形成动画的 CSS 属性。eg:{left:"300px",color:"red"}
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的动画效果eff: 默认变速:"swing" 匀速:"linear"
可选的 callback 参数是动画完成后所执行的函数名称
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
/*给div添加自定义动画*/
$("div").animate({"100%",opacity:"0.5"},2000,"linear",function(){
alert("动画结束!");
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;100px;position:absolute;">
</div>
</body>
</html>
2.animate()方法可以使用相对值(相对于元素的当前值),需要在值得前面加上+=或-=
eg: height:'+=150px','+=150px'
3.animate()方法可以使用预定义的值 可以把动画属性的值设置为"show","hide","toggle"
eg:height:"hide" //隐藏高度
4.animate()方法提供针对动画的队列功能
就是为一个元素编写多个animate方法,jQuery会创建包含这些方法调用的"内部"队列
然后逐一运行这些animate调用
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;100px;position:absolute;">
</div>
</body>
</html>
5.jQuery停止动画 适用于所有动画 eg:滑动,淡入淡出和自定义动画
//1.stop()停止当前正在运行的动画,动画会在当前位置停下来
//如果有等待执行的动画，他们将被马上执行
//2.finish()停止当前正在运行的动画和所有排队的动画
//所有排队的动画的CSS属性跳转到他们的最终值
语法:$("选择器").stop(stopAll,goToEnd)
可选参数:stopAll规定是否应该清楚动画队列,默认值是false,即仅停止活动的动画,允许任何排入队列的动画向后执行
goToEnd参数规定是否理解完成当前动画,默认值是false
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html> /
6.jQuery延迟动画 delay(speed)方法 用于动画延迟,放在将要延迟的动画之前
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
button{ 200px;height: 40px;}
#box{height: 200px;position: relative;}
#car{
200px;height: 80px;position: absolute;left: 0;top: 120px;
}
#box p{
20px;height: 200px;background: #000;
position: absolute;top: 0; left: 800px;
}
</style>
<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//delay()延时执行动画
$("#car").delay(3000).animate({left:"600px"},2000);
// $("#car").animate({left:"600px"},2000)
// .delay(3000).fadeOut(2000);
});
})
</script>
</head>
<body>
<button id="btn">按钮</button>
<br /><br />
<div id="box">
<img src="img/car.gif" id="car"/>
<p></p>
</div>
</body>
</html>
7.jQuery的方法链接(chaining) 允许我们在相同的元素上运行多条jQuery命令,一条接着一条
这样的话浏览器就不用多次查找相同的元素
eg:$("选择器").css().slideDown().animate({left:"400px"})
eg:下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">菜鸟教程!!</p>
<button>点我</button>
</body>
</html>/
4.jQuery操作DOM jQuery拥有操作HTML元素和属性的强大方法
jQuery DOM操作 DOM定义访问HTML和XML文档的标准
w3c文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容,结构,以及样式
1.获取和设置DOM元素内容 重点重点 这几个方法
1.text("要设置的文本内容")/text() 设置,返回所选元素内的文本内容(能获得元素内的所有文本,包括元素内嵌套的元素的文本 注意text只获得文本,不获得标签)
2.html("要设置的内容(可以是html标记)")/html() 设置,返回所选元素的内容(还包括html标签)
3.val("要设置的内容")/val() 设置,返回表单字段的值
4.attr("属性") 获取属性值 eg:$("a").attr("href")获得a标签的href属性
attr("属性","属性值") 为元素的属性设置属性值
attr({ /*同时为元素的多个属性赋值*/
"属性1","属性值",
"属性n","属性值"
});
eg: $("a").attr("href","http://www.baicu.com") 设置a标签的href值为http:///www.baidu.com
5.text(),html(),val(),attr()四个方法都有回调函数一样 两个参数 i:所选择元素的下标 origText:所选元素原来的内容
eg:$("a").attr("href",function(i,origText){return origText + "jQuery"}); 为a标签的href属性添加一个jQuery
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<style type="text/css">
input{
outline: none;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
var wo = $("span").text(); /*获得元素的text值*/
var pwd = $(":password").val();/*获得input[password]的value值*/
if (pwd == "lewis") {
alert("登陆成功");
$("span").text("我是"+pwd);
$(":password").val("123");
} else{
$("span").text("我不知道你是谁"); /*设置元素的text值*/
$(":password").val("123"); /*设置表单的value值*/
}
});
});
</script>
</head>
<body>
<span>我是谁?</span>
<input type="password" name="pwd" id="pwd" value="" />
<button>获得一切</button>
</body>
</html>/
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
});
</script>
</head>
<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>/
2.添加html元素 也可以添加文本内容
1.append("要添加元素") 在被选元素内部的结尾处插入内容
2.prepend("要添加的元素") 在被选元素内部的开头处插入内容
3.after("要插入的元素") 在被选元素的外部之后插入内容
4.before("要插入的元素") 在被选元素的外部之前插入内容
都可以添加多个元素
3.删除html元素
1.remove() 删除被选元素(及其子元素)
注意:remove() 还可以接受一个参数,表示过滤
eg:$("p").remove(".itals")
2.empty() 从被选元素中删除子元素
eg:$("p").remove() 删除p元素和p元素里面的子元素
$("p").empty() 删除p元素
5.jQuery操作css类 css类 eg: .in{color:red;}
注意:操作的是class类
addClass() 向被选元素添加一个或多个类
eg:$("p").addClass("in")
eg:$("p").addClass("in blue ff")
removeClass() 从被选元素中删除一个或多个类
eg:$("p").removeClass("in")
toggleClass() 对被选元素进行添加/删除类的切换操作
eg:$("p").toggleClass("in")
css()方法设置或返回被选元素的一个或多个样式属性
eg:返回样式 alert($("p").css("color")) 打印p元素的color属性值
eg:设置样式 $("p").css("color","red")
eg:设置多个css属性 $("p").css({
"color":"red",
"width":"100px"
})
6.jQuery遍历html元素(遍历DOM树)
注意:祖先是父亲,祖父,曾祖父等等
后代是子,孙,曾孙
同胞拥有相同的父
api的参数可以是选择器
1.遍历当前元素的祖先
1.parent() 返回被选元素的直接父元素
2.parents() 返回被选元素的所有祖先元素
3.parentsUnitl() 返回介于两个给定元素之间的所有祖先元素
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
/*选择span元素的直接父元素*/
$("#a").click(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
/*选择span元素的所有祖先元素*/
$("#b").click(function(){
$("span").parents().css({"background-color":"yellow"});
});
/*选中介于span和div之间的所有祖先元素*/
$("#c").click(function(){
$("span").parentsUntil("div").css({"color":"blue"});
});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
<div style="500px;">div (祖父元素)
<p>p (父元素)
<span>span</span>
</p>
</div>
</div>
<button id="a">选中span的父亲</button>
<button id="b">选中span的所有祖先元素</button>
<button id="c">选中介于span和div之间的所有祖先元素</button>
</body>
</html>
2.遍历当前元素的后代
1.children() 返回被选元素的所有直接子元素
eg:$("p").children().css("color":"red") 为p下的所有直接子元素设置css样式
$("p").children("span.a").css() 为p下的class属性为a的span元素设置css样式
2.find() 返回被选元素的所有后代元素
eg:$("p").find("*") 返回p下的所有后代元素
eg:$("p").find("span") 返回p下的所有后代span元素
3.遍历当前元素的同胞
1.siblings() 返回被选元素的所有同胞元素
eg:$("p").siblings() 选中p元素的所有同胞元素
eg:$("p").siblings("span") 选中p元素的所有span同胞元素
2.next() 返回被选元素的下一个同胞元素
eg:$("p").next() 选中p元素的下一个同胞元素
3.nextAll() 返回被选元素的所有下面的所有的的同胞元素
eg:$("p").nextAll() 选中p元素下面的所有同胞元素
4.nextUntil() 返回被选元素和给定元素之间的所有同胞元素
eg:$("p").nextUntil("span") 选中p元素和span元素之间的所有同胞元素
5.prev() 返回被选元素的上一个同胞元素
6.prevAll() 返回被选元素的上面的所有同胞元素
7.prevUntil() 返回被选元素和给定元素之间的所有同胞元素
4.jQuery过滤
1.first() 返回被选所有元素的首个元素
eg:$("div").first() 选中第一个div
2.last() 返回被选元素的最后一个元素
eg:$("div").last() 选中最后一个div
3.eq() 返回被选中元素中带有指定索引号的元素
索引号从0开始
eg:$("p").eq(1) 选中第二个p元素
4.filter("选择器") 返回匹配的所有元素
eg:$("p").filter(".url") 选中所有class为url的p元素
5.not("选择器") 返回选中之外的所有元素
eg:$("p").filter(".url") 选中所欲class不等于url的p元素
7.jQuery ajax:向服务器请求数据异步加载数据
同步加载:每次请求,必定重新加载响应整个界面
异步加载:在不重新加载整个页面的前提下,与服务器交换数据并更新网页的一部分
网页请求的两种方式:form表单,ajax 异步请求
ajax请求样式:{}之间的表示的是一些属性和方法的集合 即对象
$.ajax({
type:"POST",
url:服务器地址,
data:{ /*json类型的请求数据*/
"键1":"值1",
"键2":"值2"
},
dataType:"json", /*指定从服务器返回的数据的类型为json*/
success:function(result){/*result是从服务器返回的数据*/
//请求成功要执行的代码
}
error:function(result){ /*用于调试,发布之后就删掉这个函数*/
//请求失败要执行的代码
}
});
7.jQuery ajax_2:
1.jQuery load()方法
load()方法从服务器加载数据,并把返回的数据放入被选元素中
语法:
$("选择器").load(URL,data,callback)
必须参数URL规定您希望加载的URL
可选的参数data规定与一同发送的查询字符串键/值对集合
可选的参数callback是load()方法完成后执行的函数名称
callback回调函数的参数:
responseTxt:包含调用成功时的结果内容
statusTXT:包含调用的状态
xhr:包含XMLHttpRequest对象