除了可以為元素添加樣式外，還可用來查詢元素，某樣式值alert($('.cls1').css('width')); //100px(返回帶單位的值)註意:原生CSS樣式中有-的去掉並且將後面的單詞第一個字母大寫 alert($('.box').width( )); alert($('.box').h ...
| css( ) |
除了可以為元素添加樣式外，還可用來查詢元素，某樣式值 |
| 關於寬高 |
alert($('.box').width( )); alert($('.box').height( )); 獲取元素的原始寬高(不帶單位) alert($('.box').innerWidth( )); alert($('.box').innerHeight( )); 獲取元素的寬度+padding 不計入border alert($('.box').outerWidth( )); alert($('.box').outerHeight( )) 獲取元素的寬度+padding+border alert($(document).width( )); alert($(document).height( )); 瀏覽器inner寬高 |
| 添加節點 |
|
| 刪除節點 |
empty( ) $('a').empty( ); 清空a的所有子節點 remove() $('a:eq(3)').remove( ); 刪除$('a:eq(3)')這一整個節點 |
| 替換節點 |
replaceAll( ) $('<a href="http://www.baidu.com">百度鏈接地址</a>').replaceAll('a'); 用<a href="http://www.baidu.com">百度鏈接地址</a>替換全部a replaceWith( ) $('a').replaceWith('<a href="http://www.baidu.com">百度鏈接地址</a>'); ( 與replaceAll()效果一樣 ) |
| 包含節點 |
wrap( ) $('a').wrap('<li class="one">'); 用每個li分別包含每個a unwrap( ) $('a').unwrap('<li class="one">'); 取消全部包含在a外面的li wrapAll( ) $('a').wrapAll('<li class="one">'); 一個li包含全部a $('a:not(.no)').wrapAll('<li class="one">'); 如果a.no下麵有a的話 則a.no會被頂到li節點後 wrapInner( ); $('a').wrapInner('<li class="one">'); 將a的文本用li包含起來 |
| 複製節點 | clone( ) $('a.no').clone( ).appendTo('.one'); 克隆$('a.no')並把它添加到('.one')節點里的後面 |
| offset( ) | 設置匹配元素相對於文檔的偏移（位置） 屬性1:top 屬性2:left |
| delay( ) | 延遲多少毫秒後觸發 |
| index( ) | 獲取當前元素索引 |
| 點擊 | $('#one').click(function( ){
}); |
| 綁定 |
on綁定 $('#one').on('click',function( ){ }) 取消on事件 用off( ) bind綁定 $('#one').bind('click',function(){ }) unbind取消綁定 $('.unbind').bind('click',function( ){ $('.bind').unbind('click'); }); 動態添加的按鈕要綁定事件的話 則使用live $('.live').live('click',function( ){ }); one一次性事件 $('.one').one('click',function(){ alert('資料一但確定就無法修改,您確定嗎?'); }); |
| 點擊切換 | $('.toggle').toggle(function( ){ },function( ){ },function( ){ },...） |
| hover | hover事件 $('button').hover(function( ){ },function( ){ }); 當hover只添加一個回調函數時 則效果相當於mouseover |
| animate( ) |
animate(json,時間,回調函數) 以json形式傳參 回調函數為可選項 動畫目標值的設定可以是累加或者累減 $(this).animate({left:'+=500px'},500） 動畫按順序執行 $(this).animate({left:'600px'},2000).animate({top:'550px'},2000) |
| stop( ) | stop( ) 停止動畫隊列
使用stop( )會立即停止當前的動畫 stop(true) 如果滑鼠移除元素的時候會停止當前的動畫而執行下一個動畫而不是立即執行hover移開的動畫 如果想移開的同時立即執行hover的移除動畫 則添加true參數 |
| 三種常見動畫 |
slideDown(500);向下展開 slideUp(500);向上縮起 參數為執行動畫的時間 無透明度效果 show(1000);展示 hide(1000); 隱藏有伸縮效果和透明度改變效果 fadeIn(1000);淡入 fadeOut(1000); 淡出無伸縮效果 |
