<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//ready()文档加载完成执行函数
$(document).ready(function(){
//hide() 隐藏可见的元素
$('#button').click(function(){
$('.hide').hide();
})
//show() 显示可见的元素
$('#button2').click(function(){
$('.hide').show();
})
//css选择器
$('#button3').click(function(){
$(".hide").css("background-color","red").css('font-size','30px');
})
//下拉缩起效果
$('#button4').click(function(){
$('.hide').slideToggle();
})
//fadeOut()点击按钮消失 有动画效果 可以通过参数slow,normal,fast
$('#button5').click(function(){
$('.hide').fadeOut();
})
//fadeIn()点击按钮显示 有动画效果 可以通过参数slow,normal,fast
$('#button6').click(function(){
$('.hide').fadeIn();
})
//fadeTo(速度 ，透明度)两个参数 将被选元素的不透明度逐渐地改变为指定的值
$('#button7').click(function(){
//速度为1000毫秒，透明程度为0.4
$(".hide").fadeTo(1000,0.8);
})
//slideDown() 向下滑动显示隐藏的元素
$('#button8').click(function(){
$(".panel").slideDown("slow");
})
//slideUp() 向上滑动元素
$('#button9').click(function(){
$('.panel2').slideUp('slow');
})
})
//$.grep( array, function(elementOfArray, indexInArray) [, invert ] )
//用于数组元素过滤筛选 功能：查找满足过滤函数的数组元素
/*$(function(){
var arr = [1,2,3,4,5,56,7,8,9];
var arrGrep = $.grep(arr,function(element,index){
return(index<5)&&(element != 4);//整体返回一个数组
})
alert(arrGrep);
})*/
//$.map(array , callback(elementOfArray , indexInArray))
//讲一个数组中的所有元素转换到另一个数组中
/*$(function(){
var arr = [1,2,3,4,5,6];
var arrMap = $.map(arr , function(element , index){
if(index<3 && element<4)
{
return element;
}
})
alert(arrMap);
}*/
</script>
</head>
<body>
<div class="panel" style="display:none;">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<div class="panel2">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<div class="hide">111111111111111</div>
<button type="button" id="button">隐藏</button>
<button type="button" id="button2">显示</button>
<button type="button" id="button3">改变样式</button>
<button type="button" id="button4">下拉缩起</button>
<button type="button" id="button5">按下消失</button>
<button type="button" id="button6">按下显示</button>
<button type="button" id="button7">效果</button>
<button type="button" id="button8">向下显示</button>
<button type="button" id="button9">向上显示</button>
</body>
</html>