1.jQuery链式调用
jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:
$('#div1') //id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素,也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul元素
.slideUp('fast') //高度实际高度变换到零来隐藏ul元素
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery链式调用</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
#box_01{
width: 50px;
height: 50px;
background-color: skyblue;
}
#box_02{
width: 100px;
height: 100px;
background-color: thistle;
}
ul{
display: none;
}
span{
display: none;
}
</style>
<script>
//入口函数
$(function(){
$("#wrap").children("ul").slideDown(5000).siblings().show(2000).parent().siblings().css("background","plum")
})
</script>
</head>
<body>
<div id="wrap">
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>
<div id="box_01">a</div>
<div id="box_02">b</div>
</li>
</ul>
<span>hhhhhh</span>
</div>
<div>
gggggg
</div>
</body>
</html>
我们可以通过其中的一个元素,对整个html页面的元素进行操作,节约JS代码,使代码看起来更优雅
2.jquery动画
概念:通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数
animate有四个参数:
1.对象,里面穿需要动画的样式(必填)
2.speed执行动画时间
3.执行动画效果
4.回调函数
举例:
2.1在body内创建元素
<div class="wrap" style="width: 50px;height: 50px; background-color: tomato;"></div>
2.2搭建环境
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
2.3编写jquery代码
$(function(){
$(".wrap").animate({
width:200,
height:200,
},2000,function(){
alert("就这?")
})
})
注意:在jquery动画中,只能设置带有属性值为数值的属性,例如width、height等,属性值不为数值的不可以设置,例如background等