jQuery 能做什么？
jQuery將JavaScript的代碼進(jìn)行了封裝，處理了兼容性問題，提供API進(jìn)行調(diào)用，可以完成以下工作：
- 選擇網(wǎng)頁(yè)元素
- dom操作
- 事件操作
- 元素樣式操作
- 特殊效果
- AJAX
jQuery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別？如何轉(zhuǎn)化？
區(qū)別：
- DOM原生對(duì)象就是原生JS獲得的對(duì)象
- jQuery對(duì)象是DOM原生對(duì)象經(jīng)過包裝之后，擁有jQuery的屬性和方法，是類數(shù)組對(duì)象。
轉(zhuǎn)化：
- jQuery對(duì)象轉(zhuǎn)化成DOM對(duì)象，可以通過[index]的方法
var $node = $("#node"); // jQuery對(duì)象
var node = $node[0]; // DOM對(duì)象
- DOM對(duì)象轉(zhuǎn)化成jQuery對(duì)象
var node = document.getElementById("id"); //DOM對(duì)象
var $node = $(node); //jQuery對(duì)象
jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？
-
bind()向匹配元素附加一個(gè)或多個(gè)事件處理器 -
unbind()從匹配元素移除一個(gè)被添加的事件處理器 -
delegate()向匹配元素的當(dāng)前或未來的子元素附加一個(gè)或多個(gè)事件處理器 -
live()附加一個(gè)事件處理器到匹配目前選擇器的所有元素，現(xiàn)在和未來。
以上幾種方法是jQuery1.7以前的方法，現(xiàn)在推薦使用on()和off()來綁定/解除事件。
-
on()在選定的元素上綁定一個(gè)或多個(gè)事件處理函數(shù)。 -
off()移除一個(gè)事件處理函數(shù)
//普通的綁定事件，最簡(jiǎn)單的事件用法
$('div').on('click', function(e){
console.log(this);
console.log(e);
});
//事件代理，想讓div下面所有的span綁定事件，可以把事件綁定到div上
$('div').on('click', 'span', function(e){
console.log(this);
console.log(e);
});
//在綁定事件的時(shí)候給事件傳遞一些參數(shù)
$('div').on('click', {name: 'wing', age: 20}, function(e){
console.log(e.data);
});
jQuery 如何展示/隱藏元素？
- 使用
hide()和show()方法來隱藏和顯示HTML元素。
使用hide()和show()方法
- 使用
toggle()方法來切換hide()和show()方法
使用toggle()方法
jQuery 動(dòng)畫如何使用？
基礎(chǔ)方法：
.hide([duration ] [,easing ] [,complete ])隱藏元素
.show( [duration ] [, easing ] [, complete ] )顯示元素
.toggle( [duration ] [, easing ] [, complete ] )切換元素的顯示、隱藏
- duration：表示動(dòng)畫持續(xù)多久
- easing：表示過渡使用哪種緩動(dòng)函數(shù)，jQuery自身提供"linear" 和 "swing"
- complete：在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
漸變：
.fadeIn( [duration ] [, easing ] [, complete ] )通過淡入的方式顯示
.fadeOut( [duration ] [, easing ] [, complete ] )通過淡出的方式隱藏
.fadeTo( duration, opacity [, easing ] [, complete ] )調(diào)整匹配元素的透明度，方法通過匹配元素的不透明度做動(dòng)畫效果
.fadeToggle( [duration ] [, easing ] [, complete ] )通過匹配的元素的不透明度動(dòng)畫，來顯示或隱藏它們，方法執(zhí)行匹配元素的不透明度動(dòng)畫。
漸變
滑動(dòng)：
.slideDown( [duration ] [, easing ] [, complete ] ) 用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫，這會(huì)導(dǎo)致頁(yè)面的下面部分滑下去
.slideUp( [duration ] [, easing ] [, complete ] ) 用滑動(dòng)動(dòng)畫隱藏一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫，這會(huì)導(dǎo)致頁(yè)面的下面部分滑上去
.slideToggle( [duration ] [, easing ] [, complete ] ) 用滑動(dòng)動(dòng)畫顯示或隱藏一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫，這會(huì)導(dǎo)致頁(yè)面中，在這個(gè)元素下面的內(nèi)容往下或往上滑。
滑動(dòng)
自定義動(dòng)畫：
.animate( properties [, duration ] [, easing ] [, complete ] )
- properties是一個(gè)CSS屬性和值的對(duì)象,動(dòng)畫將根據(jù)這組對(duì)象移動(dòng)。
自定義動(dòng)畫
如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本？
html([string])
這是一個(gè)讀寫兩用的方法，用于獲取/修改元素的innerHTML
- 當(dāng)沒有傳遞參數(shù)的時(shí)候，返回元素的
innerHTML - 當(dāng)傳遞了一個(gè)string參數(shù)的時(shí)候，修改元素的
innerHTML為參數(shù)值
$('body').html(); // 獲取元素內(nèi)部HTML內(nèi)容
$('body').html('123') //設(shè)置元素內(nèi)部HTML內(nèi)容
text()
和html方法類似，操作的是DOM的innerText值
$('body').text(); // 獲取元素內(nèi)部
$('body').text('123') //設(shè)置元素內(nèi)部
如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設(shè)置和獲取元素屬性？
.val([value])
這個(gè)方法用來處理input的value，當(dāng)方法沒有參數(shù)的時(shí)候返回input的value值，當(dāng)傳遞了一個(gè)參數(shù)的時(shí)候，方法修改input的value值為參數(shù)值
獲取設(shè)置表單用戶輸入或選擇的內(nèi)容：
$('input').val(); // 獲取表單的內(nèi)容
$('input').val('newValue'); // 設(shè)置表單的內(nèi)容
設(shè)置和獲取元素屬性？
.attr()
獲取元素特定屬性的值
$('div').attr('id'); //獲取 div 的 id 的屬性
$('div').attr('id', 'newId'); //設(shè)置 div 的 id 屬性為newId
.css()
這是個(gè)和attr非常相似的方法，用來處理元素的css
獲取元素style特定property的值
$(this).css('background-color');
$(this).css({
"width",
"height",
"color",
"background-color"
});
設(shè)置元素style特定property的值
$(this).css('background-color', 'red');
$(this).css({
width: '100px',
height: '20px',
color: 'red'
});
還有其他方法操作css：
-
.addClass()為元素添加class，不是覆蓋原class -
.removeClass()移除元素單個(gè)/多個(gè)/所有class -
.hasClass(className)檢查元素是否包含某個(gè)class，返回true/false -
.toggleClass(className)toggle是切換的意思，方法用于切換
使用 jQuery實(shí)現(xiàn)如下效果
代碼預(yù)覽地址：
