一:Jquery的使用1:加入Jquery库文档就绪(需要写一个函数(document),ready(function()),相当于 (document),ready(function()),
2:jQuery的基本语法:(select).action()。
jQuery的选择器:当要选择“p标签的第一个和第三个”,可以 (select).action()。
二:jQuery动画效果:1:隐藏和显示。
两个方法:hide(),show()。
语法:$(selector).hide(speed.callback) $(selector).hide(speed.callback)
例子:
<p>Jquery动画效果,隐藏和显示。
</p><input type="button" value="隐藏" id="button1"><input type="button" value="显示" id="button2">
<input type="button" value="按钮" id="button3">
<script>
$(document).ready(function(){ $("#button1").click(function(){ $("p").hide(1000) alert("恭喜你,隐藏完成") }) $("#button2").click(function(){ $("p").show(2000,function(){ alert("恭喜你,显示完成") }) }) $("#button3").click(function(){ $("p").toggle(1000,function(){ $("p").css({color:"yellow"})}) }) })
</script>
2
.滑动
两个方法:slidedown(),slideup(),slidetoggle()
例子:
<div id="slide">点击我,滑动显示或者隐藏面板</div>
<div id="panel"> Hello Jquery! !</div>
<style> #slide,#panel{ padding: 5px; text-align: center; background-color: #02a1d9; border: solid 1px #ff8cb9; } #panel{ display: none; padding: 40px; }
</style>
<script> $(document).ready(function(){ $("#slide").click(function(){ $("#panel").slideToggle() }) })
</script>
3.an
imate()方法用于创建自定义的动画jQuery停止动画:stop()stop()用于在动画完成前对它进行停止,只能暂停队列中的一个动画,如果队列中有很多个动画,它会结束当前的动画,然后运行下一个动画jQuery–链(chanining)通过jQuery,可以把方法连接在一起,chaining允许我们在一条语句中运行多个方法(在同一元素上)$(“p”).css({color:“red”}).slideUp(1500).slideDown(1500).animate(backgroundColor:“blue”);
jQuery停止动画:stop()
stop()用于在动画完成前对它进行停止,只能暂停队列中的一个动画,如果队列中有很多个动画,它会结束当前的动画,然后运行下一个动画
写二级菜单
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.3.min.js"></script>
<style>
.two_bar {
display:none;
margin:0 auto; }
li { list-style:none; }
.two_bar li,.one_bar {
display:block;
text-align:center;
font-size:16px;
background-color: #9e3927;
color: #3ae9ff;
border-bottom:1px solid #ffffff;
border-radius:10px;
line-height:38px;
overflow:hidden;
height:38px;
width:258px; }
a:link,a:visited,a:hover,a:active { text-decoration:none; } </style>
<script>
$(document).ready(function(){
$(".one_bar").click(function(){
$(this).next().slideToggle();
$(this).parent().siblings().children("ul").slideUp(); });
});
</script>
</head>
<body>
<div class="top_bar">
<ul>
<li>
<a href="###" class="one_bar">首页</a>
<ul class="two_bar">
<li>时尚</li>
<li>新闻</li>
<li>美食</li>
</ul>
</li>
<li>
<a href="###" class="one_bar">导航</a>
</li>
<li>
<a href="###" class="one_bar">关注</a>
</li>
<li>
<a href="###" class="one_bar">榜单</a>
</li>
</ul>
</div>
</body>
</html>