題目1: jQuery 能做什么?
jQuery能選取并操作HTML元素,修改元素屬性,CSS屬性操作,監(jiān)聽事件并進(jìn)行對應(yīng)的操作,設(shè)置javascript動畫,Ajax
題目2: jQuery 對象和 DOM 原生對象有什么區(qū)別?如何轉(zhuǎn)化?
JQuery對象包含更多的對象屬性,DOM對象就是對應(yīng)的元素
J->D: $('#id')[0]
D->J: $(document.querySelector('#id'))
題目3:jQuery中如何綁定事件?bind、unbind、delegate、live、on、off都有什么作用?推薦使用哪種?使用on綁定事件使用事件代理的寫法?
jQuery使用一般使用.on綁定事件:
如:$('element').on('click',function(){})
.on( events [, selector ] [, data ], handler(eventObject) )
events
類型: String
一個或多個空格分隔的事件類型和可選的命名空間,或僅僅是命名空間,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
selector
類型: String
一個選擇器字符串,用于過濾出被選中的元素中能觸發(fā)事件的后代元素。如果選擇器是 null
或者忽略了該選擇器,那么被選中的元素總是能觸發(fā)事件。
data
類型: Anything
當(dāng)一個事件被觸發(fā)時,要傳遞給事件處理函數(shù)的event.data
。
handler(eventObject)
類型: Function()
事件被觸發(fā)時,執(zhí)行的函數(shù)。若該函數(shù)只是要執(zhí)行return false
的話,那么該參數(shù)位置可以直接簡寫成 false。
.bind():為一個元素綁定一個事件處理程序。
.unbind():從元素上刪除一個以前附加事件處理程序。
.delegate():為所有匹配選擇器(selector參數(shù))的元素綁定一個處理器到一個或多個事件,現(xiàn)在或?qū)恚?基于根元素的一個特定的組
.on():在選定的元素上綁定一個或多個事件處理函數(shù)。
.off():移除一個事件處理函數(shù)。
.live():附加一個事件處理器到符合目前選擇器的所有元素匹配,現(xiàn)在和未來。
推薦使用.on代理事件寫法:
$('#parent').on('click',$('.child'),function(){})
題目4:jQuery 如何展示/隱藏元素?
展示:.show()
隱藏: .hide()
展示/隱藏切換: .toggle()
題目5: jQuery 動畫如何使用?
jQuery動畫一般使用.animate()方法
.animate( properties [, duration ] [, easing ] [, complete ] )
properties
類型: PlainObject
一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動。
duration (默認(rèn): 400
)
類型: Number or String
一個字符串或者數(shù)字決定動畫將運(yùn)行多久。(愚人碼頭注:默認(rèn)值: "normal", 三種預(yù)定速度的字符串("slow", "normal", 或 "fast")或表示動畫時長的毫秒數(shù)值(如:1000) )
easing (默認(rèn): swing
)
類型: String
一個字符串,表示過渡使用哪種緩動函數(shù)。(譯者注:jQuery自身提供"linear" 和 "swing")
complete
類型: Function()
在動畫完成時執(zhí)行的函數(shù)。
題目6:如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設(shè)置和獲取元素內(nèi)部文本?
- 使用.html()來設(shè)置和獲取內(nèi)部HTML內(nèi)容如:
考慮以下的HTML:
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
獲取內(nèi)容
$('div.demo-container').html();
結(jié)果如下:
<div class="demo-box">Demonstration Box</div>
這種方法使用瀏覽器的innerHTML 屬性。有些瀏覽器返回的結(jié)果可能不是原始文檔的 HTML 源代碼。例如,如果屬性值只包含字母數(shù)字字符,Internet Explorer有時丟棄包裹屬性值的引號。
設(shè)置內(nèi)容
$('div.demo-container')
.html('<p>All new content. <em>You bet!</em></p>');
這行代碼將替換 <div class="demo-container">里的所有內(nèi)容
結(jié)果:
<div class="demo-container">
<p>All new content. <em>You bet!</em></p>
</div>
- 使用.text()來獲取設(shè)置文本內(nèi)容
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
代碼$('div.demo-container').text() 將提供下面的結(jié)果:
Demonstration Box list item 1 list item 2
$('div.demo-container').text('<p>This is a test.</p>');代碼語句將輸出以下 DOM :
<div class="demo-container">
<p>This is a test.</p>
</div>
題目7:如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容?如何設(shè)置和獲取元素屬性?
$('selector').val():獲取表單用戶輸入值;
$('selector').val('…'):設(shè)置輸入值;
$('selector').attr('name'):獲取元素屬性;
$('selector').attr('name','xxx'):設(shè)置元素屬性的值;