第一章 jquery 操作网页
2016-07-12 本文已影响24人
天黑北风吹
1.1、显示或隐藏网页内容
语法：$(selector).show(speed,callback);
*speed 用来设置显示的速度，取值show fast 或毫秒
callback 参数用来设置动作完成后所执行的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.1</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#id-button-show").click(function () {
$("h2").show();
});
$("#id-button-hide").click(function(){
$("h2").hide();
});
});
</script>
</head>
<body>
<h2 class="h2-caption">jquery实现显示和隐藏网页内容</h2>
<button id="id-button-show">显示</button>
<button id="id-button-hide">隐藏</button>
/*用户代码*/
</body>
</html>
1.2 切换页面的显示或隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.1</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$("h3").toggle();
});
});
</script>
</head>
<body>
<h2 class="h2-caption">jquery切换和隐藏功能的方法</h2>
<hr><br>
<button type="button">显示/隐藏</button>
<h3 class="h3-text">隐藏和显示</h3>
/*用户代码*/
</body>
</html>
1.3 实现幻灯片式的淡入淡出效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.1</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#id-button-fadeout").click(function(){
$("#id-div-fade").fadeOut(3000);
});
$("#id-button-fadein").click(function(){
$("#id-div-fade").fadeIn(3000);
});
});
</script>
</head>
<body>
<h2 class="h2-caption">jquery实现幻灯片式的淡入淡出效果</h2>
<hr><br>
<h3 class="h3-text">页面淡入淡出</h3>
<button id="id-button-fadeout">页面淡出效果</button>
<button id="id-button-fadein">页面淡入效果</button>
/*用户代码*/
<div id="id-div-fade">
<p>这里js控制的两个数值</p>
<p>1.第1个为淡入时间</p>
<p>2.第2个为淡出时间</p>
</div>
</body>
</html>
1.4 切换页面的淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.1</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#id-button-fadetoggle").click(function(){
$("#id-div-fade").fadeToggle(3000);
$("#id-div-fade").fadeToggle(3000);
$("#id-div-fade").fadeTo(3000);
});
});
</script>
</head>
<body>
<h2 class="h2-caption">jquery实现幻灯片式的淡入淡出效果</h2>
<hr><br>
<h3 class="h3-text">页面淡入淡出</h3>
<button id="id-button-fadetoggle">页面淡出效果</button>
/*用户代码*/
<div id="id-div-fade">
<p>这里js控制的两个数值</p>
<p>1.第1个为淡入时间</p>
<p>2.第2个为淡出时间</p>
</div>
</body>
</html>
1.5 页面的滑动隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.1</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn-slideup").click(function(){
$("#id-div-slide").slideUp("fast");
});
$("#btn-slidedown").click(function(){
$("#id-div-slide").slideDown("fast");
});
});
</script>
</head>
<body>
<h2 class="h2-caption">jquery页面滑动操作</h2>
<hr><br>
<div id="id-div-slide">
<h3 class="h3-text">页面滑动操作</h3>
<h3 class="h3-text">页面滑动操作</h3>
</div>
<button id="btn-slideup">页面滑动隐藏</button>
<button id="btn-slidedown">页面滑动显示</button>
</body>
</html>
