jQuery 能做什么?
Jquery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。它是輕量級(jí)的js庫(壓縮后只有21k) ,它兼容CSS3,還兼容各種瀏覽器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用戶能更方便地處理HTML documents、events、實(shí)現(xiàn)動(dòng)畫效果,并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是,它的文檔說明很全,而且各種應(yīng)用也說得很詳細(xì),同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁保持代碼和html內(nèi)容分離,也就是說,不用再在html里面插入一堆js來調(diào)用命令了,只需定義id即可。
jQuery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別?如何轉(zhuǎn)化?
- DOM對(duì)象擁有DOM對(duì)象的屬性方法。
- jQuery對(duì)象:是DOM元升級(jí)對(duì)象經(jīng)過包裝之后,擁有jQuery的屬性和方法(對(duì)原生DOM對(duì)象的封裝);
- jQuery對(duì)象是一個(gè)數(shù)據(jù)對(duì)象,可以通過[index]的方法,來得到相應(yīng)的DOM對(duì)象。
如:var $el =$("#element") ; //jQuery對(duì)象
var el=$el[0]; //DOM對(duì)象 - jQuery本身提供,通過.get(index)方法,得到相應(yīng)的DOM對(duì)象
如:var $el=$("#element"); //jQuery對(duì)象
var el=$el.get(0); //DOM對(duì)象
-對(duì)于DOM對(duì)象,只需要用$()把DOM對(duì)象包裝起來,就可以獲得一個(gè)jQuery對(duì)象了
jQuery中如何綁定事件?bind、unbind、delegate、live、on、off都有什么作用?推薦使用哪種?使用on綁定事件使用事件代理的寫法?
- 最簡(jiǎn)單的是bind(type,handle),這種方式的寫法和type(handle)寫法的作用是相同的($('a').click(function(){})),對(duì)應(yīng)的取消事件的方法是unbind:如果不帶參數(shù)默認(rèn)移除所有的綁定事件,若帶參數(shù)則移除指定的事件監(jiān)聽($(‘p’).unbind('click'))。bind這種是直接在符合條件的元素上綁定監(jiān)聽函數(shù),因此沒生成一個(gè)新的元素,就需要給新元素綁定一次事件
- bind(type,[data],fn) 為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)。
- unbind(type,[data|fn]]) bind()的反向操作,從每一個(gè)匹配的元素中刪除綁定的事件。
- delegate(selector,[type],[data],fn) 指定的元素(屬于被選元素的子元素)添加一個(gè)或多個(gè)事件處理程序,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。
- live(type, [data], fn) jQuery 給所有匹配的元素附加一個(gè)事件處理函數(shù),即使這個(gè)元素是以后再添加進(jìn)來的也有效。
這個(gè)方法是基本是的 .bind() 方法的一個(gè)變體。使用 .bind() 時(shí),選擇器匹配的元素會(huì)附加一個(gè)事件處理函數(shù),而以后再添加的元素則不會(huì)有。為此需要再使用一次 .bind() 才行 - on(events,[selector],[data],fn) 在選擇元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)。
- off(events,[selector],[fn]) 在選擇元素上移除一個(gè)或多個(gè)事件的事件處理函數(shù)。
$("p").on("click", function(){
alert( $(this).text() );
});
jQuery 如何展示/隱藏元素?
$('div').hide([duration][,easing][,complete]);//隱藏
$('div').slideUp([duration][,easing][,complete]);//向上收起
$('div').fadeOut([duration][,easing][,complete]);//淡出
$('div').show([duration][,easing][,complete]);//隱藏
$('div').slideDown([duration][,easing][,complete]);//向下滑出
$('div').fadeIn([duration][,easing][,complete]);//淡入
#jQuery 動(dòng)畫如何使用?
- animate(params,[speed],[easing],[Callback]) 用于創(chuàng)建自定義動(dòng)畫的函數(shù)。這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫形式及結(jié)果樣式屬性對(duì)象。
- 必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值:“slow”、“fast” 或毫秒。
可選的 callback 參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱。
當(dāng)動(dòng)畫 100% 完成后,即調(diào)用回調(diào)函數(shù) Callback。
#如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設(shè)置和獲取元素內(nèi)部文本?
html();獲取html內(nèi)容,有值的話就是設(shè)置html內(nèi)容
$('div').html();//獲取內(nèi)容
$('div').html('<p>我是段落</p>');//設(shè)置內(nèi)容
text();獲取文本元素,有值的話就是設(shè)置文本內(nèi)容
$('p').text();//獲取文本
$('p').text('我不是段落')//設(shè)置文本
#如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容?如何設(shè)置和獲取元素屬性?
$('input').val()//獲取
$('input').val('hello')//設(shè)置
設(shè)置和獲取元素屬性
$('input').attr('type')//獲取屬性,屬性名不能為空
$('input').attr('sex','women')//設(shè)置