jQuery效果

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。

基础语法：(selector).action() 定义jQuery

selector 查询和查找HTML元素

action()执行对元素的操作

eg:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

$(document).ready(function(){
//jQuery methods go here...
});
这是为了防止文档在完全加载之前运行jQuery代码，

jQuery选择器

元素选择器
$("p")选取页面中所有<p>元素
#id选择器
$("#test")选取id="test"的元素
.class 选择器
$(".test")选取class="test"的元素

jQuery事件

什么是事件？

页面对不同访问者的响应为事件。

比如：在元素上移动鼠标，

选取单选按钮，点击元素等

click()
页面中指定一个点击事件：
$("p").click(function(){
$(this).hide;
}
dblclick()
双击元素
$("p").dblclick(function(){
$(this).hide();
});

mouseenter()
当鼠标指针穿过元素时，发送mouseenter事件。
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mouseleave()
当鼠标指针离开元素时，会发送mouseleave事件。
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
等等....

jQuery效果-隐藏和显示

$("#hidetest").click(function(){//id="hidetest"的元素
$("p").hide();//"属性p"
});

$("#showtest").click(function(){
$(" .p").show(1000);//class="p"的元素,显示1000S
});
$("button").click(function(){
$("p").toggle();
});
通过toggle()方法来切换hide()和show()方法。显示被隐藏的元素，并隐藏已显示的元素。
$(selector).toggle(speed,callback);
speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

jQuery效果-淡入淡出

四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()

jQuery效果-滑动

slideDown()
slideUp()
slideToggle()

jQuery效果-动画-animate()方法

$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

jQuery停止动画 -stop()方法

$("button").click(function(){
$("p").hide("slow",function(){//回调函数
alert("The paragraph is now hidden");
});
});

jQuery方法链接

$("#p1").css("color","red").slideUp(2000).slideDown(2000);