jquery

題目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è)置元素屬性的值;

題目8:

link

題目9:

link

題目10:

link

題目11:

link

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容