jQuery小知识点

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");
  });