1. jQuery 能做什么?
jQuery 是一個高效鼎兽、精簡并且功能豐富的 JavaScript 工具庫答姥。它提供的 API 易于使用且兼容眾多瀏覽器,這讓諸如 HTML 文檔遍歷和操作谚咬、事件處理鹦付、動畫和 Ajax 操作更加簡單。
2. jQuery 對象和 DOM 原生對象有什么區(qū)別择卦?如何轉(zhuǎn)化敲长?
- 區(qū)別:
DOM對象 :W3C標(biāo)準(zhǔn)用于操作文檔的API郎嫁。具體點(diǎn)來說就是指 HTML 文本中的所有被標(biāo)簽標(biāo)記的東西 ,在js里可以用 getElementById 等傳統(tǒng)的方法獲得的對象祈噪,擁有原生對象的屬性和方法泽铛。
jQuery對象:將DOM原生對象進(jìn)行封裝后得到的類數(shù)組對象,可以使用jq對象的方法和屬性 - 轉(zhuǎn)化:
- jquery提供了兩種方法將一個jquery對象轉(zhuǎn)換成一個DOM對象辑鲤,[index]和. get(index)
var $v =$("#v") ; //jQuery對象 var v=$v[0]; //DOM對象
- 使用 $(DOM對象)就可以將DOM對象轉(zhuǎn)化為jQuery對象
- jquery提供了兩種方法將一個jquery對象轉(zhuǎn)換成一個DOM對象辑鲤,[index]和. get(index)
3. jQuery中如何綁定事件盔腔?bind、unbind月褥、delegate铲觉、live、on吓坚、off都有什么作用撵幽?推薦使用哪種?使用on綁定事件使用事件代理的寫法礁击?
- 綁定事件:一般使用on:
$(XX).on( events [,selector ] [,data ], handler(eventObject) )
這是1.7版本后統(tǒng)一的寫法盐杂。 -
.bind()
為一個元素綁定一個事件處理程序。 -
.unbind()
從元素上刪除一個以前附加事件處理程序哆窿。 -
.delegate()
為所有匹配選擇器(selector參數(shù))的元素綁定一個或多個事件處理函數(shù)链烈,基于一個指定的根元素的子集,匹配的元素包括那些目前已經(jīng)匹配到的元素挚躯,也包括那些今后可能匹配到的元素
$("table").delegate("td", "click", function() {
$(this).toggleClass("chosen");
})
-
.live()
附加一個事件處理器到匹配目前選擇器的所有元素强衡,現(xiàn)在和未來。 -
.on()
在選定的元素上綁定一個或多個事件處理函數(shù) -
.off()
移除一個事件處理函數(shù)码荔。
4. jQuery 如何展示/隱藏元素漩勤?
-
.hide()
隱藏匹配的元素 -
.show()
顯示匹配 -
.toggle()
顯示或隱藏匹配元素的元素 通過改變CSS的display屬性,匹配的元素將被立即顯示或隱藏缩搅,沒有動畫越败。如果元素是最初顯示,它會被隱藏硼瓣,如果隱藏的究飞,它會顯示出來
5. jQuery 動畫如何使用?
. 基本特效
.hide()
,.show()
,.toggle()
-
自定義
.animate()
根據(jù)一組 CSS 屬性堂鲤,執(zhí)行自定義動畫$("#block").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 )
所有用于動畫的屬性必須是數(shù)字的亿傅,除非另有說明;這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能瘟栖。(例如葵擎,width, height或者left可以執(zhí)行動畫,但background-color不能慢宗,除非使用jQuery.Color()插件坪蚁。)屬性值的單位像素(px),除非另有說明奔穿。單位em和 %需要指定使用。
.clearQueue()
從列隊中移除所有未執(zhí)行的項
當(dāng).clearQueue()方法被訪問的時候敏晤,所有在這個列隊中未執(zhí)行的函數(shù)將被移除
.delay()
設(shè)置一個延時來推遲執(zhí)行隊列中后續(xù)的項
.dequeue()
執(zhí)行匹配元素隊列的下一個函數(shù)
當(dāng).dequeue()被調(diào)用的時候贱田,列隊中的下一個函數(shù)將從這個列隊中被移除,然后再執(zhí)行嘴脾。這個執(zhí)行的函數(shù)中也應(yīng)當(dāng)直接或間接的包含 .dequeue()語句男摧,這樣才能繼續(xù)執(zhí)行隊列中的其它函數(shù),所以,這個序列可以繼續(xù)译打。
.finish()
停止當(dāng)前正在運(yùn)行的動畫耗拓,刪除所有排隊的動畫,并完成匹配元素所有的動畫
jQuery.fx.interval
這個屬性可以設(shè)置動畫每秒運(yùn)行幀數(shù)奏司。默認(rèn)是13毫秒乔询。該屬性值越小,在速度較快的瀏覽器中(例如韵洋,Chrome)竿刁,動畫執(zhí)行的越流暢,但是會影響程序的性能并且占用更多的 CPU 資源搪缨。
.queue()
顯示在匹配的元素上的已經(jīng)執(zhí)行的函數(shù)列隊食拜。在匹配元素上操作已經(jīng)附加函數(shù)的列表
.stop()
當(dāng)一個元素調(diào)用.stop(),當(dāng)前正在運(yùn)行的動畫(如果有的話)立即停止 漸變
.fadeIn()
通過淡入的方式顯示匹配元素
fadeOut()
通過淡出的方式隱藏匹配元素
fadeTo()
調(diào)整匹配元素的透明度
fadeToggle()
通過匹配的元素的不透明度動畫副编,來顯示或隱藏它們滑動
.slideDown()
用滑動動畫顯示一個匹配元素负甸。
.slideToggle()
用滑動動畫顯示或隱藏一個匹配元素。
.slideUp()
用滑動動畫隱藏一個匹配元素痹届。
6. 如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容呻待?如何設(shè)置和獲取元素內(nèi)部文本?
- 設(shè)置元素內(nèi)部 HTML 內(nèi)容
$('div').html('\<h1\>Hello world\</h1\>')
- 獲取元素內(nèi)部 HTML 內(nèi)容
var $content = $('div').html()
- 設(shè)置元素內(nèi)部文本
$('div').text('Hello world')
- 獲取元素內(nèi)部文本
var $title = $('h1').text()
7:如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容短纵?如何設(shè)置和獲取元素屬性带污?
- 設(shè)置表單用戶輸入或者選擇的內(nèi)容
$('#username").val('textarea')
- 獲取表單用戶輸入或者選擇的內(nèi)容
var $username = $('#username").val()
- 設(shè)置元素屬性
$("div").attr("color","#fff") || $('div').prop('color','red')
- 獲取元素屬性
$("div").attr("color") || $('div').prop('color')
8. 使用 jQuery實現(xiàn)如下效果 demo
預(yù)覽- http://js.jirengu.com/puqiz/2/edit
9. 使用 jQuery 實現(xiàn)如下效果 demo
預(yù)覽- http://js.jirengu.com/zarut/4/edit?html,output
10. 實現(xiàn)如下效果 demo
預(yù)覽- http://js.jirengu.com/pogan/1/edit?output
11.完成 左右切換的 Tab 效果
無動畫效果預(yù)覽- http://js.jirengu.com/zibew/1/edit?html,css,js,output
tab 上下滑動預(yù)覽- http://js.jirengu.com/tubox/1/edit?html,css,js,output
tab 左右滑動預(yù)覽- http://js.jirengu.com/robov/1/edit?html,css,js,output