題目1： jQuery 能做什么？
- 方便快捷獲取DOM元素
如果使用純JavaScript的方式來遍歷DOM以及查找DOM的某個部分編寫很多冗余的代碼，而使用jQuery只需要一行代碼就足夠了。例如，找到所有應用了.content class樣式的div中所有的P標簽，只需要下面的一行代碼：
$('div.content').find('p'); - 動態修改頁面樣式
使用jQuery我們可以動態的修改頁面的CSS即使在頁面呈現以后。jQuery仍然能夠改變文檔中某個部分的類或者個別的樣式屬性。例如，找到頁面所有的ul標簽的第一個li子標簽，然后為它們增加名為active的樣式，代碼如下：
$('ul > li:first').addClass('active'); - 動態改變DOM內容
使用jQuery我們可以很容易地對頁面DOM進行修改，例如，為ID為"Container"的元素添加一個鏈接：
$('#container').append('<a href="more.html">more</a>'); - 響應用戶的交互操作
jQuery提供了截獲形形色色的頁面事件（比如用戶單擊某個鏈接）的適當方式，而不需要使用事件處理程序拆散HTML代碼。此外，它的事件處理API也消除了經常困擾Web開發人員瀏覽器的不一致性。$('button.show-details').click(function() { $('div.details').show(); }); - 為頁面添加動態效果
jQuery中內置的一批淡入、擦除之類的效果，以及制作新效果的工具包，為此提供了便利。$(function () { $("#btnShow").click(function () { $("#msubject").hide("slow"); }); });
上面的代碼表示：為使用的.show-details樣式的button元素添加一個click事件，事件就是：顯示使用.details樣式的DIV。
- 統一Ajax操作
jQuery統一了多種瀏覽器的Ajax操作，使得開發人員更多的專注服務器端開發。function (data, type) { // 對Ajax返回的原始數據進行預處理 return data // 返回處理后的數據 } - 簡化常見的JavaScript任務。
除了這些完全針對文檔的特性之外，jQuery也改進了對基本的javascript數據結構（例如迭代和數組操作等）。$.each(obj, function(key, value) { total += value; });
題目2： jQuery 對象和 DOM 原生對象有什么區別？如何轉化？
DOM原生對象：w3c標準用于操作文檔的API。
jQuery對象：通過jQuery包裝DOM對象后產生的對象。
-
區別：
- jquery選擇器得到的jquery對象和標準的 javascript中的document.getElementById()取得的dom對象是兩種不同的對象類型，兩者不等價；
- jQuery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery里的方法. 亂使用會報錯。
例如：
$("#id").html();
document.getElementById("id").innerHTML;
意思是指：獲取ID為id的元素內的html代碼。這兩段代碼結果相同，但中間的取值過程不同。
即：$("#id").innerHTML、document.getElementById("id").html()之類的寫法都是錯誤的。
-
相互轉換：
jQuery對象轉成DOM對象---兩種轉換方式：[index]和.get(index)- jQuery對象是一個數據對象，通過
[index]的方法
如：
var $v = $("#v") ; //jQuery對象
var v = $v[0]; //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中 - jQuery本身提供，通過
.get(index)方法
如：
var $v = $("#v"); //jQuery對象
var v = $v.get(0); //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中
DOM對象轉成jQuery對象:
對于DOM對象，只需用$()把DOM對象包裝起來，就可得到jQuery對象
如：
var v=document.getElementById("v"); //DOM對象
var $v=$(v); //jQuery對象
- jQuery對象是一個數據對象，通過
題目3：jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？
- jQuery綁定事件用bind、或delegate、或live、或on
-
bind()為一個元素綁定一個事件處理程序，示例如下：$(‘button’).bind(‘click’,function(){console.log(this)});$(‘p’).bind(‘mouseenter mouseleave’,function({$(this).toggleClass(‘change’)})；
-
unbind()從元素上刪除一個以前附加事件處理程序，示例如下：-
$('p').unbind('mouseenter');
在最簡單的情況下，不帶參數的.unbind() 將移除元素上所有綁定的處理程序
-
-
delegate()為所有匹配選擇器（selector參數）的元素綁定一個或多個事件處理函數，基于一個指定的根元素的子集，匹配的元素包括那些目前已經匹配到的元素，也包括那些今后可能匹配到的元素。 -
live()附加一個事件處理器到匹配目前選擇器的所有元素，現在和未來。這種方法是將頁面的document元素作為事件代理元素，太消耗資源，已經過時。 -
on()在選定的元素上綁定一個或多個事件處理函數。$('button').on('click',function(){ $('.test').append('<p>新增內容'+ ($('p').length+1) +'</p>'); console.log($('p').length); }); -
off()移除用.on()綁定的事件處理程序
綁定事件和解綁事件推薦使用on()和off()
- 使用on綁定事件使用事件代理
//讓.ct>ul中的所有li綁定事件 $('.ct>ul').on('click','li',function(){ var $this=$(this); var str=$this.text(); $('.wrap').text(str); })
題目4：jQuery 如何展示/隱藏元素？
- jQuery展示元素：
2.通過淡入的方式顯示匹配元素$('.btn').on('click',function(){ $('.show').show(3000,'linear',function(){ alert('welcome'); }); });
3.用滑動動畫顯示一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式$('.btn').on('click',function(){ $('.show').fadeIn(3000); });$(.btn).on('click',funtion(){ $('.show').sildeDown(3000); }) - jQuery隱藏元素
1.$('.show').hide(1000);
2.通過淡出的方式隱藏匹配元素
3.用滑動動畫隱藏一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑上去，當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局。 display 樣式屬性將被設置為none，以確保該元素不再影響頁面布局。$('.btn').on('click',funtion(){ $(.show).fadeOut(3000,'slow'); });$('.btn').on('click',funtion(){ $(.show).fadeOut(3000,'slow'); });
題目5： jQuery 動畫如何使用？
.animate( properties [, duration ] [, easing ] [, complete ] )
用法：jquery對象.animate(執行動作(一般都是css樣式),回調函數(可選));
例子：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#ct {
border: 1px solid black;
width: 100px;
height: 100px;
background: red;
position: relative;
}
</style>
</head>
<body>
<div id="ct">animate</div>
<button type="button">動畫</button>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script>
$('button').on('click', function a() {
$('#ct').animate({
left: '300px',
}, 3000);
$('#ct').animate({
top: '300px',
left: '0'
}, 'slow');
$('#ct').animate({
left: '300'
}, 'slow');
$('#ct').animate({
left: '0',
top: '0'
}, 'slow');
});
</script>
</body>
</html>
題目6：如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？
- 獲取元素內部HTML內容
console.log($('.html').html()); - 設置元素內部內容
$('.html').html('<p>設置內部HTML內容</p>'); - 獲取元素內部文本
console.log($('.text').text()); - 設置元素內部文本
$(.text).text('設置元素內部文本');
題目7：如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？
- 獲取和設置表單用戶輸入或者選擇的內容
$('input').val();
$('input').val('newValue');
當方法沒有參數的時候返回input的value值，當傳遞了一個參數的時候，方法修改input的value值為參數值 - 獲取和設置元素屬性
//獲取元素特定屬性的值 var title = $( "em" ).attr( "title" ); //為元素屬性賦值 $( ".greatphoto" ).attr( "alt", "Beijing Brush Seller" ); $( ".greatphoto" ).attr({ alt: "Beijing Brush Seller", title: "photo by Kelly Clark" }); $( ".greatphoto" ).attr( "title", function( i, val ) { return val + " - photo by Kelly Clark"; });
