$(window).load(function(){ //編寫代碼 });
等價於:css
window.onload = function(){ //編寫代碼 };
$(document).ready(function(){ //編寫代碼 });
簡寫:jquery
$(function(){ //編寫代碼 });
$(document)也能夠簡寫爲$(),當$()不帶參數時,默認參數就是document,所以還能夠簡寫:windows
$().ready(function(){ // coding });
bind(type [,datd] ,fn);
$("#panel h5.head").bind("click",function(){ // coding });
unbind([type],[data]);
one(type [,data] ,fn);
$("#btn").trigger("click"); // 觸發id爲btn的click事件 // 也能夠簡化: $("#btn").click();
$('#btn').bind("myClick",function(){ $('#test').append("<p>個人自定義事件</p>"); }); $('#btn').trigger("myClick");
$('#btn').bind("myClick",function(event,message1,message2){ $('#test').append("<p>"+message1+message2+"</p>"); }); $('#btn').trigger("myClick",["個人自定義","事件"]);
$('input').trigger("focus");
$('input').triggerHandler("focus");
$(function(){ $("div").bind("mouseout mouseover",function(){ //do something }); };
$(function(){ $('div').bind("click.plugin",function(){ $('body').append("<p>click事件</p>"); }); $('div').bind("mouseover.plugin",function(){ $('body').append("<p>mouseover事件</p>"); }); $('div').bind("dbclick",function(){ $('body').append("<p>dbclick事件</p>"); }); $('button').click(function(){ $('div').unbind(".plugin"); }); });
$(function(){ $('div').bind("click",function(){ $('body').append("<p>click事件</p>"); }); $('div').bind("click.plugin",function(){ $('body').append("<p>click.plugin事件</p>"); }); $('button').click(function(){ $('div').trigger("click!"); //注意感嘆號 }); });
$("div").trigger("click");
$(「element」).show("slow");
$(function(){ $("#panel h5.head").toggle(function(){ $(this).next().show("slow"); },function(){ $(this).next().hide(1000); }); });
$(function(){ $("#panel h5.head").toggle(function(){ $(this).next().fadeOut(); },function(){ $(this).next().fadeIn(); }); });
$(function(){ $("#panel h5.head").toggle(function(){ $(this).next().slideDown(); },function(){ $(this).next().slideUp(); }); });
animate(params, speed, callback);
<div id="panels"></div>
#panels{ position: relative; width: 100px; height: 100px; border: 1px solid #0050d0; background: #96e555; cursor: pointer; }
$(function(){ $("#panels").click(function(){ $(this).animate({left:"500px"},3000); }); });
$(function(){ $("#panels").click(function(){ $(this).animate({left:"+=500px"},3000); }); });
$(function(){ $("#panels").click(function(){ $(this).animate({left:"500px",width:"200px",height:"200px"},3000); }); });
$(function(){ $("#panels").click(function(){ $(this).animate({left:"500px"},3000); $(this).animate({width:"200px"},3000); $(this).animate({height:"200px"},3000); }); });
鏈式寫法:瀏覽器
$(function(){ $("#panels").click(function(){ $(this).animate({left:"500px"},3000) .animate({width:"200px"},3000) .animate({height:"200px"},3000); }); });
四、綜合動畫app
$(function(){ $("#panels").css("opacity","0.5");//設置不透明度 $("#panels").click(function(){ $(this).animate({left:"400px",height:"200px",opacity:"1"},3000) .animate({top:"200px",width:"200px"},3000) .fadeOut("slow"); }); });
$(function(){ $("#panels").css("opacity","0.5");//設置不透明度 $("#panels").click(function(){ $(this).animate({left:"400px",height:"200px",opacity:"1"},3000) .animate({top:"200px",width:"200px"},3000,function(){ $(this).css("border","5px solid blue"); }); }); });
注:callback回調函數適合jQuery的全部動畫效果ide
stop([clearQueue],[gotoEnd]);
if(!$("element").is(":animate")){ //do something }
$(function(){ $("#panels").css("opacity","0.5");//設置不透明度 $("#panels").click(function(){ $(this).animate({left:"400px",height:"200px",opacity:"1"},3000) .delay(1000) // 延遲的是下一個動畫 .animate({top:"200px",width:"200px"},3000); }); });
$("#panel h5.head").click(function(){ $(this).next().toggle(); });
等價於:函數
$(function(){ $("#panel h5.head").toggle(function(){ $(this).next().show("slow"); },function(){ $(this).next().hide(1000); }); });