jQuery基础知识
1.1基本概念
jQuery就是一个JS库,能够帮助我们轻松实现一些原本可能比较麻烦的功能。
jQuery每个版本又有两个小版本:压缩版和未压缩版,压缩版文件较小,但没有排版和注释,所以不便于阅读;而未压缩版文件较大,有排版和注释,便于阅读。
jQuery实际上就是一个js文件,加载到页面就可以直接使用了。
<scriptsrc="../jquery-3.2.1.min.js"></script>
菜鸟教程 CDN:
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
百度 CDN:
<scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
又拍云 CDN:
<scriptsrc="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
新浪 CDN:
<scriptsrc="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
使用CDN的好处:
(1) 省事
(2) 速度更快
1.2语法
$(选择器).action();
$:定义了这是一个jQuery的代码
选择器:按照一定的规则选择DOM元素,非常类似与CSS选择器
action:对选中元素执行的操作
案例:单击段落颜色变红
方案一:
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>
varparas = document.getElementsByTagName("p");
for(vari in paras){
paras[i].addEventListener("click",red);
}
functionred(){
this.style.color = "red";
}
</script>
方案二:
<script>
$(“p”).click(red);
function red(){
this.style.color = "red";
}
</script>
jQuery的一行代码
$(“p”).click(red);
相当于JS的若干行代码
var paras =document.getElementsByTagName("p");
for(var i in paras){
paras[i].addEventListener("click",red);
}
所以说jQuery极大简化了程序员的工作。
1.3选择器
(1)元素选择器:根据标签名来获取元素,比如
$(“p”):表示获取所有的段落
(2)id选择器
$(“#p1”):表示选择id=“p1”的元素
(3)class选择器
$(“.top2”):表示选择class=“top2”的所有元素
(4)后代选择器
$(“div p”):表示选择div元素中的所有p元素
(5)$(“p:first”):表示选择p标签的第一个元素,相当于css中的伪类选择器
(6)$(“p[name]”):表示选中所有具有name属性的段落
(7)$(“p[name=second]”):表示选中所有name为second的段落
(8)$(“tr:even”):表示选择表格的奇数行
1.4事件
jQuery中注册事件的方法也是调用jQuery对象的方法,比如单击事件
$(“#div1”).click();
鼠标移入事件
$(“#div1”).mouseenter()
而且方法名就是js中的事件名
之前,我们所有的JS代码是放在<body>之后的,如果放在<body>之前呢?
实验证明,如果放在body之前,在获取元素时得到的结果为空,因为在执行此代码时,文档还没有加载完成,也就是说元素都还不存在。
那怎么解决呢?
将代码放在$(document).ready(function(){……})中,也就是在文档加载完成之后才会去执行此代码。
<html>
<head>
<style type="text/css">
#div1{
width:100px;
height:100px;
background-color: blue;
}
</style>
<script src="../jquery-3.2.1.min.js"></script>
</head>
<script>
$(document).ready(function(){
$("#div1").mouseenter(function(){
$(this).css("background-color","skyblue");
});
});
</script>
<body>
<div id="div1"></div>
</body>
</html>
动画
2.1显示/隐藏
hide():隐藏
将高度、宽度、透明度变为0,display由“block”变为“none”
show():显示
将高度、宽度、透明度变为初始的值,display由“none”变为“block”
toggle():切换
如果display为none的时候,点击一下就变为了block,反之变成none
<head>
<style type="text/css">
#div1{
width:100px;
height: 100px;
background-color: skyblue;
}
</style>
<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<divid="div1"></div>
<button id="btnHide">消失</button>
<button id="btnShow">显示</button>
<button id="btnToggle">切换</button>
</body>
<script>
$("#btnHide").click(function(){
$("#div1").hide(5000);
});
$("#btnShow").click(function(){
$("#div1").show(5000);
});
$("#btnToggle").click(function(){
$("#div1").toggle(2000);
});
</script>
2.2淡入/淡出
fadeIn():淡入
将隐藏的元素的透明度由0变为1,display由none变为block
fadeOut():淡出
将某个元素的透明度由1变为0,display由block变为none
fadeToggle():透明度切换
可以将某个元素的透明度由0变为1,也可以由1变为0
fadeTo():设置为某个特定的透明度
将某个元素的透明度由0设为某个特定的值(0~1),也可以由1变为设定的那个透明度。
<head>
<script src="../jquery-3.2.1.min.js"></script>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: deepskyblue;
display:none;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btnFadeIn">淡入</button>
<button id="btnFadeOut">淡出</button>
<button id="btnFadeToggle">切换</button>
<button id="btnFadeTo">变为</button>
</body>
<script>
$("#btnFadeIn").click(function(){
$("#div1").fadeIn(3000);
});
$("#btnFadeOut").click(function(){
$("#div1").fadeOut(3000);
});
$("#btnFadeToggle").click(function(){
$("#div1").fadeToggle(3000);
});
$("#btnFadeTo").click(function(){
$("#div1").fadeTo(3000,0.2);
});
</script>
2.3上滑/下滑
slideUp():上滑
将某个元素的高度由设定的值变为0,然后隐藏它
slideDown():下滑
先显示某个元素,然后将它的高度由0变为初始值
slideToggle():上滑与下滑的切换
如果元素是隐藏的话,则让它显示,并把它的高度增加,如果元素是显示的话,就把高度减为0,再隐藏它。
<head>
<script src="../jquery-3.2.1.min.js"></script>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: deepskyblue;
display:none;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btnSlideDown">滑入</button>
<button id="btnSlideUp">滑出</button>
<button id="btnSlideToggle">切换</button>
</body>
<script>
$("#btnSlideDown").click(function(){
$("#div1").slideDown(3000);
});
$("#btnSlideUp").click(function(){
$("#div1").slideUp(3000);
});
$("#btnSlideToggle").click(function(){
$("#div1").slideToggle(3000);
});
</script>
2.4动画
移动一个块到某个位置
<head>
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color: blue;
position:absolute;
/*display:none;*/
}
</style>
<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<button>开始动画</button>
<divid="div1"></div>
</body>
<script>
$("button").click(function(){
$("#div1").animate({
left:'250px',
top:'250px'
});
});
</script>
同时使用多个属性实现动画效果
$("button").click(function(){
$("#div1").animate({
left:'300px',
width:'+=100px',
height:'+=100px',
opacity:'0.5'
});
});
改变预定义值来实现内容所需的显示或隐藏
$("button").click(function(){
$("#div1").animate({
width:'toggle',
height:'toggle'
});
});
animate()中有三个参数:
第一个参数是需要改变的样式
第二个参数是显示的速度(slow/fast/指定毫秒数)
第三个参数是回调函数
Var div = $(“#div1”);
$("#start").click(function(){
div.animate({width:'300px'});
div.animate({height:'300px'});
div.animate({width:'200px'});
div.animate({height:'200px'});
});
$("#stop").click(function(){
$("#div1").stop();
});
这里定义的是多个动画,宽和高变化到某个值后恢复到初始值,也可以用链的方式将动画连起来。