題目1: jQuery 能做什么?
選擇網(wǎng)頁元素
改變結(jié)果集
元素的操作:取值和賦值
元素的操作: 移動
元素的操作: 復(fù)制、刪除和創(chuàng)建
工具方法
事件操作
特殊效果
AJAX
題目2: jQuery 對象和 DOM 原生對象有什么區(qū)別?如何轉(zhuǎn)化?
jquery對象通常用jquery的方法$('')來得到,可以使用jquery提供的方法來操作html的數(shù)據(jù)
DOM原生對象只能用js提供的方法,如getElementById,getElementByTagName,有的獲取的是一個元素,有的獲取的是一個數(shù)組。
DOM對象才能使用DOM中的方法,jQuery對象是不可以用DOM中的方法。
JQuery對象轉(zhuǎn)化Dom對象:
$('#id')[index]DOM對象轉(zhuǎn)化JQuery對象:
$(document.querySeletor('#id'))
題目3:jQuery中如何綁定事件?bind、unbind、delegate、live、on、off都有什么作用?推薦使用哪種?使用on綁定事件使用事件代理的寫法?
-
.on(event [,selector] [,data] [,handler(eventObject)])
event:一個dom事件類型字符串,在后面加.xx可以方便后面off(event.xx)
selector:事件代理時(shí)使用,指定觸發(fā)事件的元素,會隨著dom節(jié)點(diǎn)改變而改變
data:當(dāng)一個事件被觸發(fā),傳遞給處理函數(shù)的內(nèi)容,通過event.data訪問(好像沒啥卵用)
handler事件處理函數(shù)
-
.off(events [,selector] [,handler])
- 移除 on 事件,當(dāng)有多個過濾參數(shù)時(shí)需全部匹配才可移除
-
.bind()
- 是為一個元素綁定一個事件處理 (3.0中被表為棄用)
-
.unbind()
- 是為一個元素綁定一個事件處理 (3.0中被表為棄用)
-
.delegate()
- 為所有匹配選擇器的元素綁定一個或多個事件處理函數(shù),基于一個指定的根元素的子集 (3.0中被表為棄用)
-
.live()
- 從jQuery1.7開始棄用,舊版本jq用.delegate()替代之
題目4:jQuery 如何展示/隱藏元素?
// css 操作
.status {
display: none;
}
var $ul = $('ul')
$ul.addClass('statuse') //隱藏
$ul.removeClass('status') //展示
var $ul = $('ul')
$ul.css('display', 'block')
$ul.css('display', 'none')
// jQuery 動畫
var $ul = $('ul')
$ul.hide() //隱藏
$ul.show() // 展示
題目5: jQuery 動畫如何使用?
$(selector).animate(properties [,duration] [,easing] [,complete])
properties是一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動。
duration 持續(xù)時(shí)間,默認(rèn)是400毫秒
easing 線性變化
complete 動畫完成時(shí)執(zhí)行的函數(shù)
$('ul').click(function() {
$('li').animate({
opacity: 0.25,
left: '+=50',
}, 5000, function() {
// Animation complete.
});
});
題目6:如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設(shè)置和獲取元素內(nèi)部文本?
$(selector).html() //獲取html
$(selector).html('html元素') //設(shè)置html內(nèi)容
$(selector).text() // 獲取元素內(nèi)部文本
$(selector).text('paper') //設(shè)置內(nèi)部文本內(nèi)容
題目7:如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容?如何設(shè)置和獲取元素屬性?
$(selector).val() //獲取input的value值
$(selector).var(string) //設(shè)置input的value的值
$(selector).attr('attrbuteName') //獲取元素屬性
$(selector).attr('attrbuteName','newAttribute') //設(shè)置元素屬性的值
題目8: 使用 jQuery實(shí)現(xiàn)如下效果
題目9: 使用 jQuery實(shí)現(xiàn)如下效果
題目10: 使用 jQuery實(shí)現(xiàn)如下效果
題目11: 使用 jQuery實(shí)現(xiàn)如下效果