jquery(javascript库，极大简化了javascript编程)
jquery选择器
元素选择器：
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h1>标签</h1>
<p>i</p>
<p>love</p>
<p>you</p>
<button onclick="click()">点我</button>
</body>
<html><html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h1>标签</h1>
<p>i</p>
<p>love</p>
<p>you</p>
<button>点我</button>
</body>
<html>
css选择器：
一个属性：例如：$("p").css("background-color","red");
$("p").css("border","3px solid red");
多个属性： $("p").css({background:'#ccc',color:'blue'});
jquery效果——隐藏和显示（使用hide()、show()方法）
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$("p").hide();
});
$(".tg").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<input></input>
<p>如果你点击隐藏按钮，我将会消失了。</p>
<button class="wg">隐藏</button>
<button class="tg">显示</button>
</body>
</html>
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的speed参数规定隐藏、显示的速度，可以取以下值：“slow”、“fast”、或毫秒。
可选的callback参数是隐藏或显示完成之后所执行的函数名称。
例如，带有speed参数的hide()方法
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<input></input>
<button class="wg">隐藏</button>
<p>如果你点击隐藏按钮，我将会1000毫秒后消失了。</p>
</body>
</html>
使用toggle()方法来切换hide()和show()方法。
显示被隐藏的元素，并隐藏已显示的元素：
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$("p").toggle("slow");
});
});
</script>
</head>
<body>
<button class="wg">隐藏/显示</button>
<p>我可以隐藏，也可以显示。</p>
</body>
</html>语法：$(selector).toggle（speed,callback）;
可选的speed参数规定隐藏、显示的速度，可以取以下值：“slow”、“fast”、或毫秒。
可选的callback参数是隐藏或显示完成之后所执行的函数名称。
可选的callback参数，具有以下三点说明：
1. $(selector)选中的元素的个数为n个，则callback函数会执行n次。
2.callback函数名后加括号，会立即执行函数体，而不是等到隐藏/显示完成后才执行。
3.callback既可以是函数名，也可以是匿名函数。
jQuery效果——淡入淡出
jquery拥有下面四种fade方法：
1.fadeIn()方法 用于淡入已隐藏的元素。
语法：$(selector).fadeIn(speed,callback);
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$(".div1").fadeIn("slow");
$(".div2").fadeIn();
$(".div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>以下实例演示了fadeIn()使用不同参数的效果。</p>
<button class="wg">点击淡入div元素</button>
<div class="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div class="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
注意：display:none;与display:block; 的区别。
2.fadeOut()方法：用于淡出可见元素。
$(selector).fadeOut(speed,callback);
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$(".div1").fadeOut("slow");
$(".div2").fadeOut();
$(".div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>以下实例演示了fadeOut()使用不同参数的效果。</p>
<button class="wg">点击淡出div元素</button>
<div class="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div class="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div class="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
3.fadeToggle()方法
可以在fadeIn()和fadeOut()方法间进行切换。
如果元素已淡出，则fadeToggle()会向元素添加淡入元素。
如果元素已淡入，则fadeToggle()会向元素添加淡出元素。
语法：$(selector).fadeToggle(speed,callback);
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$(".div1").fadeToggle("slow");
$(".div2").fadeToggle();
$(".div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>以下实例演示了fadeToggle()使用不同speed参数的效果。</p>
<button class="wg">点击淡出或淡入</button>
<div class="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div class="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div class="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
4.fadeTo()方法
允许渐变为给定的不透明都度（值介于0与1之间)
语法：$(selector).fadeTo(speed,opacity,callback);
opacity参数将淡入淡出效果设置为给定的不透明度（值介于0与1之间）
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$(".div1").fadeTo("slow",0.15);
$(".div2").fadeTo("slow",0.4);
$(".div3").fadeTo("slow",0.7);
});
});
</script>
</head>
<body>
<p>以下实例演示了fadeTo()不同透明度的效果</p>
<button class="wg">点击我让颜色变淡</button>
<div class="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div class="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div class="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
jQuery效果——滑动
1.slideDown()方法 用于向下滑动元素
语法：$(selector).slideDown(speed,callback);
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#flip,#panel{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">点我滑下面板</div>
<div id="panel">I LOVE YOU !</div>
</body>
</html>
2.slideUp()方法 用于向上滑动元素
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#flip,#panel{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">点我拉起面板</div>
<div id="panel">I LOVE YOU !</div>
</body>
</html>
注意使用slideUp()和slideDown()的区别：display:none;
3.slide Toggle()方法
用于slideUp()和slideDown()方法之间进行切换。
如果元素向下滑动，则slideToggle()可向上滑动它们。
如果元素向上滑动，则slideToggle()可向下滑动它们。
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#flip,#panel{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">点我拉起面板</div>
<div id="panel">I LOVE YOU !</div>
</body>
</html>