JQuery学习
jQuery 选择器
$(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); });
$(this).hide() 隐藏当前的 HTML 元素。
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
$("p").hide() 隐藏所有 <p> 元素。
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
$(".test").hide() 隐藏所有 class="test" 的元素。
$("#test").hide() 隐藏 id="test" 的元素
jQuery 事件
$(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); });
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：
$(document).ready(function(){ $("p").dblclick(function(){ $(this).hide(); }); });
dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
$(document).ready(function(){ $("#p1").mouseenter(function(){ alert('您的鼠标移到了这里!'); }); })
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
$(document).ready(function(){ $("#p1").mouseleave(function(){ alert("您的鼠标离开了该段落。"); }); });
mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
$(document).ready(function(){ $("#p1").hover( function(){ alert("光标进入！"); }, function(){ alert("光标离开了！"); } ) });
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数
jQuery 效果- 隐藏和显示
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$("button").click(function(){
$("p").hide(1000);
});
语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称
$(document).ready(function(){ $(".hidebtn").click(function(){ $("div").hide(1000,"linear",function(){ alert("Hide() 方法已完成!"); }); }); });
下面的例子演示了带有 speed 参数的 hide() 方法，并使用回调函数 linear表示 隐藏/显示 时直线运动
jQuery toggle()
$("button").click(function(){
$("p").toggle();
});
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
jQuery 效果 - 淡入淡出
jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() 方法
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
jQuery fadeTo() 方法 （此方法类似于 hide show 方法）
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
jQuery 效果 - 滑动
jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
$("#flip").click(function(){
$("#panel").slideUp();
});
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$("#flip").click(function(){
$("#panel").slideToggle();
});
jQuery 效果- 动画
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。 CSS属性值是必须的
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$("button").click(function(){
$("div").animate({left:'250px'});
});
动画的效果：它把 <div> 元素往右边移动了 250 像素
jQuery animate() - 操作多个属性
请注意，生成动画的过程中可同时使用多个属性：
$("button").click(function(){
$("div").animate({
left:'250px',//向左移动
opacity:'0.2',//透明度
height:'150px',//移动后的高
width:'150px'//移动后的宽
});
});
});
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
jQuery 停止动画
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop(true,true);
});
jQuery Callback 方法
Callback 函数在当前动画 100% 完成之后执行。
jQuery 动画的问题
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
使用 callback 实例 先执行隐藏再弹窗
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
没有 callback(回调) 先执行弹窗再隐藏
$("button").click(function(){
$("p").hide(1000);
alert("段落现在被隐藏了");
});
jQuery - 链(Chaining)
通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
