基本语法 $===jquery
只有一个属性:值的时候 ----()
有多个属性:值的时候 ---- { }
$(“*”)选取所有元素
$(ul li”)选取ul下的li
jquery动画效果:隐藏和显示
hide()show()
speed 参数规定:显示和隐藏得速度,取值为‘slow’,‘fast’,毫秒(1秒等于1000毫秒)
callback参数:是隐藏或显示完成后执行函数的名称
toggle()方法切换hide()和show方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){;
$("p").hide(500);
alert("恭喜你,隐藏成功")
}) ;
$("#button2").click(function(){;
$("p").show(200,function{
alert("恭喜你,显示完成")
});
}) ;
$("#button1").click(function(){;
$("p").toggle(1000,function{
$("p").css({color:"yellow"})
})
})
})
</script>
</head>
<body>
<p>JQuery的显示效果,隐藏和显示。</p>
<input type="button" value="隐藏" id="button1">
<input type="button" value="显示" id="button2">
<input type="button" value="切换" id="button3">
</body>
</html>
jquery动画效果:滑动
slideDown() slideToggle()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
#slide,#panel{
padding: 5px;
text-align: center;
background-color: #edcc61;
border: solid 1px #33b5e5;
}
#panel{
display: none;
padding: 40px;
}
</style>
<script>
$(document),ready(function(){
$("#slide").click(function(){
$("#panel").slideToggle()
})
})
</script>
</head>
<body>
<div id="slide">点击我,滑动显示或者隐藏面板</div>
<div id="panel">hello jequery!!</div>
</body>
</html>
jquery动画效果:动画
animate()方法用于创建自定义的动画
语法:
$(selector),animate({params}),speed,callback)
必须的params参数定义形成动画的css属性。
可选参数和上面的几个
是否可以用animate()方法来操作所有的css属性?
答:几乎可以,但需要记住,当使用animate()方法的时候,必须使用camel标记法书写所有的属性名。
eg:css:backgroud—color 在animate中:backgroudColor animate():使用相对值。
如果你在彼此之后编写多个animate()调用,jquery会创建包含这些方法调用的“内部”队列。然后逐一运行这些animate调用。
jquery动画效果:停止
stop()用于在动画完成前对它进行停止。暂停队列中的一个动画,那么暂停该动画,然后系统会执行后面的动画。
jquery----链(Chaining)
通过juquer,可以把方法连接在一起,Chaining允许我们在一条语句中运行多个jequer方法(在相同元素上)
$("#p1").css({'color':"red"}).slideUp(1500).slideDown(1500).animate({backgrouodColor:"blue"},1000)
//意思是#p1元素先变红,然后向上一1.5秒的速度移动,然后向下以1.5秒的速度移动。最后将背景颜色变成蓝色。