1. jQuery 能做什么?
- 選擇網頁元素
- 改變結果集
- 元素的操作:取值和賦值
- 元素的操作:移動
- 元素的操作:復制、刪除和創建
- 工具方法
- 事件操作
- 特殊效果
- AJAX
2. jQuery 對象和 DOM 原生對象有什么區別?如何轉化?
- jQuery對象是一個類數組對象,擁有jQuery的方法和屬性
- DOM原聲對象是JS對象,擁有原生JS DOM的方法和屬性
DOM對象轉jQuery對象
var btn = document.querySelector(".btn")
$(btn)
jQuery對象轉DOM對象
$('.btn')[0]
3.jQuery中如何綁定事件?bind、unbind、delegate、live、on、off都有什么作用?推薦使用哪種?使用on綁定事件使用事件代理的寫法?
- 綁定事件:bind、on、live、delegate
- 觸發事件:trigger('keyup')、keyup()
- 解綁事件:unbind、off、die、undelegate
bind:將一個處理程序附加到元素的事件中
unbind:從元素中刪除先前附加的事件處理程序
delegate:根據特定的一組根元素,將處理程序附加到于現在或者將來的選擇器匹配的所有元素的一個或多個事件
live:附加一個事件處理器到匹配目前選擇器的所有元素,現在和未來。
on:在選定的元素上綁定一個或多個事件(推薦使用)
off:移除一個事件處理函數(推薦使用)
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
4.jQuery 如何展示/隱藏元素?
- duration:動畫持續多久
- easing:表示過渡使用哪種緩動函數,jQuery自身提供"linear" 和 "swing"
- complete:在動畫完成時執行的函數
使用toggle()切換展示/隱藏元素
.toggle( [duration ] [, easing ] [, complete ] )
$('btn').toggle()
使用show()、hide()展示/隱藏元素
.show( [duration ] [, easing ] [, complete ] )
.hide([duration ] [,easing ] [,complete ])
$('.btn').show()
$(',btn').hide()
5. jQuery 動畫如何使用?
漸變
.fadeln( [duration ] [, easing ] [, complete ] )
通過淡入的方式顯示匹配元素,參數含義和上面相同
.fadeOut( [duration ] [, easing ] [, complete ] )
通過淡出的方式隱藏匹配元素
$('#book').fadeIn('slow', function() { })
$('#book').fadeOut('slow', function() { })
.fadeTo( duration, opacity [, easing ] [, complete ] )
調整匹配元素的透明度,方法通過匹配元素的不透明度做動畫效果
$('#book').fadeTo('slow', 0.5, function() {
// Animation complete.
});
.fadeToggle( [duration ] [, easing ] [, complete ] )
通過匹配的元素的不透明度動畫,來顯示或隱藏它們,方法執行匹配元素的不透明度動畫。當被可見元素調用時,元素不透明度一旦達到0,display樣式屬性設置為none ,所以元素不再影響頁面的布局。
$("button:first").click(function() {
$("p:first").fadeToggle("slow", "linear");
});
滑動
.slideDown( [duration ] [, easing ] [, complete ] )
用滑動動畫顯示一個匹配元素,方法將給匹配元素的高度的動畫,這會導致頁面的下面部分滑下去,彌補了顯示的方式
.slideUp( [duration ] [, easing ] [, complete ] )
用滑動動畫隱藏一個匹配元素,方法將給匹配元素的高度的動畫,這會導致頁面的下面部分滑上去,當一個隱藏動畫后,高度值達到0的時候,display 樣式屬性被設置為none,以確保該元素不再影響頁面布局。 display 樣式屬性將被設置為none,以確保該元素不再影響頁面布局。
$('#book').slideDown('slow', function() {
// Animation complete.
});
$('#book').slideUp('slow', function() {
// Animation complete.
});
.slideToggle( [duration ] [, easing ] [, complete ] )
用滑動動畫顯示或隱藏一個匹配元素,方法將給匹配元素的高度的動畫,這會導致頁面中,在這個元素下面的內容往下或往上滑。display屬性值保存在jQuery的數據緩存中,所以display可以方便以后可以恢復到其初始值。
如果一個元素的display屬性值為inline,然后是隱藏和顯示,這個元素將再次顯示inline。當一個隱藏動畫后,高度值達到0的時候,display 樣式屬性被設置為none,以確保該元素不再影響頁面布局。
$('#clickme').click(function() {
$('#book').slideToggle('slow', function() {
// Animation complete.
});
});
自定義
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一個CSS屬性和值的對象,動畫將根據這組對象移動。
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
6.如何設置和獲取元素內部 HTML 內容?如何設置和獲取元素內部文本?
html([string])
這是一個讀寫兩用的方法,用于獲取/修改元素的innerHTML
1.當沒有傳遞參數的時候,返回元素的innerHTML
2.當傳遞了一個string參數的時候,修改元素的innerHTML為參數值
$('div').html()
$('div').html('123')
text()
和html方法類似,操作的是DOM的innerText值
7.如何設置和獲取表單用戶輸入或者選擇的內容?如何設置和獲取元素屬性?
$('.input').val('123') //設置input的value
$('.input').val() //獲取input的value
$('.input').attr('type') //獲取input的type屬性
$('.input').attr('type','password') //設置input的type屬性為password
【個人總結,如有錯漏,歡迎指出】
:>