jquery学习笔记之常用代码

发布时间：2012-07-28 23:24 浏览次数：

今天闲来没事，突然想学学jq，于是上w3school看相关部分的内容，不看不知道，一看就停不下来了，jq的效果非常有趣，学起来也很简单，jQuery让JavaScript代码变得简洁。有着类似于flash的动态效果，还可以和css结合，更加强大的是能实现ajax异步传输效果。废话不多说，整理学习笔记如下：

资料来源： http://www.w3school.com.cn/jquery/index.asp

1. 首先是通用代码，包括调用js库，还有加载页面判断

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".btn").click(function(){
				
		});	
	});
</script>

2.隐藏和显示某个div

$(".ex").hide();
$(".ex").show();
$(".ex").toggle();

3.改变css

$(".ex").css("background","red");
$(".ex").css({"background":"red","fontSize":"12px"});

4.淡入淡出效果

$(".ex").fadeIn("slow")
$(".ex").fadeOut("slow")
$(".ex").fadeTo("slow")

5.划入划出效果

$(".ex").slideDown("slow")
$(".ex").slideUp("slow")
$(".ex").slideToggle("slow")

6.动画效果

$(".ex").animate({height:300},"slow");
$(".ex").animate({width:300},"slow");
$(".ex").animate({height:100},"slow");
$(".ex").animate({width:100},"slow");