JQuery功能摘要

$(this).hide()
隐藏当前的 HTML 元素。
$("#test").hide()
隐藏 id="test" 的元素。
$("p").hide()
隐藏所有 <p> 元素。
$(".test").hide()
隐藏所有 class="test" 的元素

$("p.test").hide()
隐藏所有 class="test" 的段落“P”。
同样适用于：p#test

$("ul li:first")
每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")
所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")
id="intro" 的 <div> 元素中的所有 class="head" 的元素

文档就绪函数
$(document).ready(function(){
});

jQuery 属性选择器
$("[href]")
选取所有带有 href 属性的元素。
$("[href='#']")
选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']")
选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']")
选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器
$("p").css("background-color","red");
把所有 p 元素的背景颜色更改为红色

jQuery 事件
$(document).ready(function)
将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)
触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)
触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)
触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件

jQuery 隐藏和显示
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
speed 参数规定显示或隐藏的速度。
可以设置这些值："slow", "fast", "normal" 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。

jQuery 隐藏和显示互相切换
$(selector).toggle(speed,callback)

jQuery滑动函数
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
使用事例：
<style type="text/css">
/*为一个样式定义两个方式，后者中height/display是两个必选属性*/
div.sliddown_up{
width:300px;
height:20px;
background-color:#9F0;
border:solid 1px #c3c3c3;
}
div.sliddown_up{
height:200px;
display:none;
}
</style>
<script type="text/javascript">
$("[href='1']").click(function(){
this.href="#";
$("div.sliddown_up").slideDown("slow");
});
</script>
<div class="sliddown_up">
</div>
<a href="1">sliddown</a>

jQuery Fade淡入/淡出函数
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

jQuery 自定义动画
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是 params。它定义产生动画的 CSS 属性。
第二个参数是 duration。它定义用来应用到动画的时间。
它设置的值是："slow", "fast", "normal" 或毫秒。
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

jQuery HTML 操作
$(selector).html(content)
改变被选元素的（内部）HTML
$(selector).append(content)
向被选元素的（内部）HTML 尾部追加内容
$(selector).prepend(content)
向被选元素的（内部）HTML 首部添加内容
$(selector).after(content)
在被选元素之后添加 HTML
$(selector).before(content)
在被选元素之前添加 HTML

jQuery CSS 函数
$(selector).css(name,value)
为匹配元素设置样式属性的值
$(selector).css({properties})
$("p").css({"background-color":"red","font-size":"200%"});
为匹配元素设置多个样式属性
$(selector).css(name)
获得第一个匹配元素的样式属性值
$(selector).height(value)
$("#id100").height("200px")
设置匹配元素的高度
$(selector).width(value)
设置匹配元素的宽度