jQuery
事件处理
描述:
当每个段落被点击的时候,弹出其文本。
jQuery 代码:
$("p").bind("click", function(){
alert( $(this).text() );
});描述:
你可以在事件处理之前传递一些附加的数据。
jQuery 代码:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)描述:
通过返回false来取消默认的行为并阻止事件起泡。
jQuery 代码:
$("form").bind("submit", function() { return false; })描述:
通过使用 preventDefault() 方法只取消默认的行为。
jQuery 代码:
$("form").bind("submit", function(event){
event.preventDefault();
});描述:
通过使用 stopPropagation() 方法只阻止一个事件起泡。
jQuery 代码:
$("form").bind("submit", function(event){
event.stopPropagation();
});
自定义
描述:
点击按钮后div元素的几个不同属性一同变化
HTML 代码:
<button id="go"> Run</button>
<div id="block">Hello!</div>jQuery 代码:
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});描述:
让指定元素左右移动
HTML 代码:
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>jQuery 代码:
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});描述:
在600毫秒内切换段落的高度和透明度
jQuery 代码:
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");描述:
用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)
jQuery 代码:
$("p").animate({
left: 50, opacity: 'show'
}, 500);描述:
一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数,这个参数才起作用。
jQuery 代码:
$("p").animate({
opacity: 'show'
}, "slow", "easein");
设置
执行一个禁用的动画
jQuery 代码:
jQuery.fx.off = true;
$("input").click(function(){
$("div").toggle("slow");
});