顯隱特效

$btn.click(function(){

        $('#div1').fadeIn(  1000,'swing',function(){ alert('done!'); }  );

});

$('#div1').fadeIn()      淡入

.fadeOut()    淡出

.fadeToggle() 淡入/淡出  切換

.show()      顯示      慢

.hide()       隱藏hide("slow",function(){alert("藏了");});

.toggle()      顯示/隱藏  切換

.slideDown() 展開

.slideUp()     捲起

.slideToggle() 展開/捲起  切換

$(this).next().slideToggle(); 點選選單 子元素展開/關閉

動畫

        樣式（部分支援）   時間 速度(始,終慢 預設)

$('#div1').animate({width:300,height:300}, 1000, ‘swing’, function(){

alert('動畫結束執行函式');

$(this).animate({height:'+=100'},1000,linear,function(){...}) 執行動畫

});                寬

$('#div1').stop();  停止動畫

$('.list li').html('111');    陣列元素 內容都為'111'

$('.list li').each(  function(i){ $(this).html(i); }  )

陣列元素 每一個         內容為 其索引

獲取元素的尺寸  設定用.css

.width()           .height()         獲取元素 寬 高  

.innerWidth()      .innerHeight()       包括padding  

.outerWidth()      .outerHeight()       包括padding、border  

.outerWidth(true)   .outerHeight(true)   包括padding、border、margin

$('div').offse()     獲取元素相對頁面的絕對位置

$('div').offse().left  

$('div').offse().top

$(window).height();       獲取瀏覽器視窗高度

$(document).height();     獲取頁面高度

$(window).scroll(function(){ ... })  頁面滾動時 執行函式

$(document).scrollTop();  從頂端 總共滾動多少距離

$(document).scrollLeft();  獲取當前頁面滾動位置到左端距離

$(window).scroll(function(){

        if($(window).scrollTop() > 200){ //滾動大於200顯示

            $('.top').slideDown();

        }else{

            $('.top').slideUp();//hide()也行

        }

    });

事件 觸發 動畫

$('div').click( function(){  $(this).stop().animate({marginTop:100})   })

.blur()        元素失去焦點

.focus()       元素獲得焦點

.change()     表單元素的值發生變化

.click()       滑鼠單擊

.dblclick()    滑鼠雙擊

.mouseover() 滑鼠進入 向外冒泡（子元素也觸發）

.mouseout()  滑鼠離開 冒泡

.mouseenter() 滑鼠進入 不冒泡

.mouseleave() 滑鼠離開 不冒泡

.hover( function(){...}, function(){...})  (滑鼠進入函式, 滑鼠離開函式)

.mouseup()   鬆開滑鼠

.mousedown() 按下滑鼠

.mousemove() 滑鼠在元素內部移動

.keydown() 按下鍵盤

.keypress() 按下鍵盤

.keyup()   鬆開鍵盤          檢查使用者名稱已存在

.load()    元素載入完畢       $(window).load(function(){ ... })

.ready()   DOM載入完成      $(document).ready(function(){...})

.resize()   瀏覽器視窗改變尺寸 $(window).resize(function(){ ... })

.scroll()   滾動條的位置發生變化

.select()   使用者選中文字框中的內容

.submit()  使用者遞交表單

.toggle()  根據滑鼠點選的次數，依次執行多個函式

.unload() 使用者離開頁面

自定義事件

element.bind("hello",function(){ alert("hello!"); });   繫結hello事件

element.trigger("hello");                        觸發hello事件

element.bind("click",function(){ alert("click"); });    繫結click事件

element.trigger("click");                       觸發事件

阻止事件

$('div').click( function(event){  alert(1);  event.stopPropagation()  })

                                          阻止事件冒泡

$(document).contextmenu(function(event) {event.preventDefault();});

            右鍵選單                      阻止右鍵

$(document).contextmenu(function(event) {return false;});

            右鍵選單               阻止 預設行為(彈出右鍵選單)

$('div').click( function(event){  alert(1);  return false;  })

                                阻止 預設行為(冒泡—點選上層元素)

事件委託 （提高效能）

傳統寫法                                <ul id="list">

$('#list li').click(function(event) {             <li>1</li>

        $(this).css({background:'red'});          <li>2</li>

});                                     <li>3</li>

</ul>

事件委託

    $('#list').delegate('li', 'click', function(event) {  //click綁了list 冒泡給li

        $(this).css({background:'red'});

$('#list').undelegate();     取消事件委託

});

插入節點

var $span = $('<span>這是一個span元素</span>');    jq元素

$('div').append($span);    $span.appendTo('#div1');

.append()           .appendTo()：  新增子元素  從後面插入

.prepend()          .prependTo()：  新增子元素  從前面插入

.after()             .insertAfter()：  新增弟元素  從後面插入

.before()           .insertBefore()： 新增兄元素  從前面插入

刪除節點

$('#div1').remove();