jQuery 简单示例

作者: 坎肩儿分类: jQuery 发布时间: 2011-07-29 11:04

示例代码：

<html>
<head>
<script type=”text/javascript” src=”jquery-1.4.3.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#clickArea”).click(function(){
  $(“#demoInfo”).hide(1000); //隐藏ID为 demoInfo
  $(this).css(“background-color”,”red”); //改变当前元素的颜色
  //$(this).hide(); //隐藏自身
});

$(“#showInfo”).click(function(){
  $(“#demoInfo”).show(1000); //显示指定层的内容 show(speed,callback) 可选值 speed 显示隐藏的速度 callback 当前函数执行完成之后执行的函数
});

$(“#showHide”).click(function(){
  $(“#showHideDemoInfo”).toggle(1000);
})

});
</script>
</head>
<body>
<div id=”clickArea” style=”height:30px; line-height:30px; border:1px #ff0000 solid;”>点我，隐藏下面的内容。</div>
<button id=”showInfo” type=”button”>显示</button>
<div id=”demoInfo” style=”height:25px; border:1px #ff0000 solid; margin:10px;”>这里的内容是显示的</div>
<hr>
<h1>显示/隐藏的切换</h1>
<button id=”showHide” type=”button”>显/隐</button>
<div id=”showHideDemoInfo” style=”border:1px #ff0000 solid; height:25px; padding:5px;”>这里的内容是做测试用的</div>
</body>
</html>

代码如上。