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>

代码如上。

相关信息:jQuery CSS选择器

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论