jQuery 能做什么?
- 就其核心特性而言伯襟,jQuery能夠滿足下列需求囊骤。
- 取得文檔中的元素晃择。jQuery為準確地獲取需要檢查或操縱的文檔元素,提供了可靠而富有效率的選擇符機制也物。
- 修改頁面的外觀宫屠。jQeury有較好的瀏覽器兼容性。
- 改變文檔的內(nèi)容滑蚯±缩澹可以改變文本、插入或翻轉(zhuǎn)圖像告材、列表重新排序坤次,甚至對HTML文檔的整個結(jié)構(gòu)都能重寫和擴充——所有這些只需一個簡單易用的API。
- 響應(yīng)用戶的交互操作斥赋。jQuery提供了截獲形形色色的頁面事件(比如用戶單擊某個鏈接)的適當方式缰猴。
- 為頁面添加動態(tài)效果。jQuery中內(nèi)置的一批淡入疤剑、擦除之類的效果洛波,以及制作新效果的工具包,為此提供了便利骚露。
- 無需刷新頁面從服務(wù)器獲取信息蹬挤。便利的Ajax函數(shù)。
- 簡化常見的JavaScript任務(wù)棘幸。jQuery也改進了對基本的JavaScript數(shù)據(jù)結(jié)構(gòu)的操作(例如迭代和數(shù)組操作等)焰扳。
jQuery 對象和 DOM 原生對象有什么區(qū)別?如何轉(zhuǎn)化?
jQuery對象是jQuery在DOM原生對象的基礎(chǔ)上進行封裝吨悍,使其能夠調(diào)用jQuery的方法扫茅。
-
jQuery對象轉(zhuǎn)換為DOM對象:
1. var $tab = $('.tab') $tab[0] // <ul>...</ul> 2. var $tab = $('.tab') $tab.get(0) // <ul>...</ul>
-
DOM對象轉(zhuǎn)換為jQuery對象:
var tab = document.querySelector('.tab') var $tab = $(tab)
jQuery中如何綁定事件?bind育瓜、unbind葫隙、delegate、live躏仇、on恋脚、off都有什么作用?推薦使用哪種焰手?使用on綁定事件使用事件代理的寫法糟描?
bind:為一個元素綁定一個事件處理程序。
unbind:從元素上刪除一個以前附加事件處理程序书妻。
delegate:為所有匹配選擇器(selector參數(shù))的元素綁定一個或多個事件處理函數(shù)船响,基于一個指定的根元素的子集,匹配的元素包括那些目前已經(jīng)匹配到的元素躲履,也包括那些今后可能匹配到的元素见间。
live:附加一個事件處理器到匹配目前選擇器的所有元素,現(xiàn)在和未來工猜。
on:在選定的元素上綁定一個或多個事件處理函數(shù)米诉。
off() 方法移除用.on()綁定的事件處理程序。
-
從jQuery 1.7開始域慷,.on() 方法是將事件處理程序綁定到文檔(document)的首選方法荒辕。示例:
$('.class').on('click', function(){...}) 事件代理寫法: <ul> <li>1</li> <li>2</li> <li>2</li> <li>2</li> </ul> <input type="text"> $('ul').on('click', 'li', function() { var value = $(this).text() $('input').val(value) })
jQuery 如何展示/隱藏元素汗销?
- 1.給元素換class犹褒,來實現(xiàn)隱藏元素,前提是換的class樣式定義好了隱藏屬性弛针。
- 2.通過jquery的css方法 / attr方法叠骑,設(shè)置css屬性。
- 3.通過jquery的show()削茁、hide()方法宙枷,設(shè)置元素隱藏。
- 4.通過jquery的toggle()方法茧跋,切換 hide() 和 show() 方法慰丛。
jQuery 動畫如何使用?
-
animate()方法根據(jù)一組 CSS 屬性瘾杭,執(zhí)行自定義動畫诅病。示例:
<div id="clickme"> Click here </div> ![](book.png) // 同時對透明度,左偏移值和高度應(yīng)用動畫: $('#clickme').click(function() { $('#book').animate({ opacity: 0.25, left: '+=50', height: '+=50' }, 5000); });
如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設(shè)置和獲取元素內(nèi)部文本贤笆?
-
html()方法獲取集合中第一個匹配元素的HTML內(nèi)容 或 設(shè)置每一個匹配元素的html內(nèi)容蝇棉。示例:
<div class="demo-container"> <div class="demo-box">Demonstration Box</div> </div> // 設(shè)置內(nèi)容 $('div.demo-container') .html('<p>All new content. <em>You bet!</em></p>'); // 獲取內(nèi)容 $('div.demo-container') .html('');
-
text()方法得到匹配元素集合中每個元素的文本內(nèi)容結(jié)合,包括他們的后代芥永,或設(shè)置匹配元素集合中每個元素的文本內(nèi)容為指定的文本內(nèi)容篡殷。示例:
<p>Test Paragraph.</p> <script> // 添加文本 $("p").text("<b>Some</b> new text."); // 獲取文本 $("p").text(); </script>
如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容?如何設(shè)置和獲取元素屬性埋涧?
-
val()方法獲取匹配的元素集合中第一個元素的當前值或設(shè)置匹配的元素集合中每個元素的值板辽。示例:
<input id="ipt1" type="text" value="some text"/> <input id="ipt2" type="text" value="some text"/> <p></p> <script> $("#ipt1").keyup(function () { var value = $(this).val(); $("#ipt2").val(value); }); </script>
-
attr()方法獲取匹配的元素集合中的第一個元素的屬性的值 或 設(shè)置每一個匹配元素的一個或多個屬性。示例:
<p> Once there was a <em title="huge, gigantic">large</em> dinosaur... </p> <script> var title = $("em").attr("title"); $("em").attr("title", "gg"); </script>