jQuery選擇器_ Dom操作_ 樣式_ 事件處理_動畫
jQuery 能做什么
jQuery是一款快速而簡潔的javascript的庫,核心是構(gòu)建與css選擇器上,用來操作DOM元素,通過鏈?zhǔn)秸{(diào)用,兼容性好,API 友好,功能強(qiáng)大陋气，與時俱進(jìn)
- HTML元素選取
- HTML元素的操作：取值和賦值、移動引润、復(fù)制巩趁、刪除和創(chuàng)建等
- CSS操作
- 事件操作
- 特殊效果，如JavaScript 特效和動畫
- HTML DOM 遍歷和修改
- 工具方法
- AJAX
- Utilities
jQuery 對象和 DOM 原生對象有什么區(qū)別淳附？如何轉(zhuǎn)化
- 對于jQuery對象只能使用jQuery對象的API
- 對于原生對象只能使用原生對象的 API
轉(zhuǎn)化
- 對于原生轉(zhuǎn)化為jQuery,只需在外面加上一層
$符號
$(document.querySelector("#box"))
就可以變?yōu)閖Query對象,就可以使用jQuery對象的API了
- 對于jQuery對象轉(zhuǎn)換為原生對象,只需要加個
[下標(biāo)]
$("#box .box")[0]
,就可以使用j原生對象的API了
問題是:那我們又不想變成原生對象,又想取值怎么辦呢?
$("#box .box").eq(0) //.eq(index)
jQuery中如何綁定事件议慰？bind、unbind奴曙、delegate别凹、live、on洽糟、off都有什么作用炉菲？推薦使用哪種？使用on綁定事件使用事件代理的寫法
jQuery提供了四種方法進(jìn)行事件監(jiān)聽坤溃，on拍霜，bind，delegate薪介，one（live已經(jīng)棄用）祠饺，相應(yīng)的解除監(jiān)聽off，unbind汁政，undelegate道偷。
$('a').bind('click', handle);//給$('a')的‘click’事件綁定執(zhí)行函數(shù)
$('a').unbind(['click']);//給$('a')解除所有綁定事件【‘click’事件】
jQuery 掃描文檔找到所有 $(‘a(chǎn)’) 元素缀旁，然后給每一個找到的元素的 click 事件綁定處理函數(shù)。
$('a').live('click',handle });// $('a')綁定‘click’事件试疙，執(zhí)行函數(shù)
$('a').die('click',handle });// $('a')解除及‘click’事件執(zhí)行函數(shù)
jQuery綁定處理函數(shù)到 $(document) 元素诵棵，并把 ‘click’ 和 ‘a(chǎn)’ 作為函數(shù)的參數(shù)抠蚣。有事件冒泡到document節(jié)點(diǎn)的時候祝旷，檢查這個事件是不是 click 事件，target element能不能匹配 ‘a(chǎn)’ css選擇器嘶窄，如果兩個條件都是true怀跛，處理函數(shù)執(zhí)行
$('a', $('#container')[0]).live(...);
live方法也可以綁定到指定的元素（或者說“上下文(context)”）而不用綁定到document.
$('#container').delegate('a', 'click', handle);//$('#container')綁定‘click’事件，執(zhí)行函數(shù)
$('#container').undelegate('a', 'click', handle);//$('#container')解除‘click’事件和執(zhí)行函數(shù)
jQuery掃描文檔找到 $(‘#container’)柄冲，綁定處理函數(shù)到他的 click 事件吻谋，’a’ css選擇器作為函數(shù)的參數(shù)。當(dāng)有事件冒泡到 $(‘#container’)现横，檢查事件是不是 click漓拾，并檢查target element是不是匹配css選擇器，如果兩者都符合戒祠，執(zhí)行函數(shù)骇两。
one()該方法綁定的事件觸發(fā)一次后自動刪除
$('.class').on( events [,selector ] [,data ], handler);//$('.class')綁定事件
$('.class').off（）$('.class')解除事件
on實(shí)現(xiàn)事件委托很簡單， '.class'為父元素姜盈，on后面括號里的selector 參數(shù)為子元素低千，當(dāng)‘.class’的事件觸發(fā)時，判斷事件來源是否子元素selector馏颂，若是示血，則執(zhí)行處理函數(shù)，從而實(shí)現(xiàn)事件委托救拉。
on是最基本的事件綁定方法难审，bind，delegate亿絮，live都是調(diào)用on來綁定事件告喊，因此，推薦使用on來綁定事件壹无。
//delegate源碼
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
//live源碼
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
//bind源碼
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
jQuery 如何展示/隱藏元素
- 通過設(shè)置css的display屬性來實(shí)現(xiàn)
var $h1 = $('h1')
$h1.css('display', 'block')
$h1.css('display', 'none')
- 通過增加或刪除class來實(shí)現(xiàn)
//css部分
.status{
display: none;
}
//js部分
var $h1 = $('h1')
$h1.addClass('status') //隱藏元素
$h1.removeClass('status') //展示元素
- 通過jQuery動畫的hide葱绒、show、toggle方法實(shí)現(xiàn)
var $h1 = $('h1')
$h1.hide()//隱藏
$h1.show()//展示
$h1.toggle()//隱藏
其中toggle方法用于切換元素的隱藏斗锭、顯示地淀。
jQuery 動畫如何使用
duration：動畫持續(xù)多久
easing：表示過渡使用哪種緩動函數(shù)，jQuery自身提供"linear" 和 "swing"
complete：在動畫完成時執(zhí)行的函數(shù)
opacity：不透明度
- 基礎(chǔ)用法：
- 隱藏元素
.hide([duration ] [,easing ] [,complete ]) - 顯示元素
- 隱藏元素
.hide([duration ] [,easing ] [,complete ])- 顯示元素
.show( [duration ] [, easing ] [, complete ])- 切換元素
.toggle( [duration ] [, easing ] [, complete ] ) - 漸變
- 淡入顯示
.fadeIn( [duration ] [, easing ] [, complete ] )- 淡出隱藏
.fadeOut( [duration ] [, easing ] [, complete ] )- 調(diào)整匹配元素的透明度岖是，方法通過匹配元素的不透明度做動畫效果
.fadeTo( duration, opacity [, easing ] [, complete ] )- 調(diào)整匹配的元素的不透明度動畫來顯示或隱藏它們帮毁，方法執(zhí)行匹配元素的不透明度動畫实苞。當(dāng)被可見元素調(diào)用時，元素不透明度一旦達(dá)到0烈疚，display樣式屬性設(shè)置為none 黔牵，元素不再影響頁面的布局。
.fadeToggle( [duration ] [, easing ] [, complete ] ) - 自定義
- properties是一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動爷肝。
.animate( properties [, duration ] [, easing ] [, complete ] )- options是一組包含動畫選項(xiàng)的值的集合猾浦。
.animate( properties, options )- 當(dāng)一個元素調(diào)用.stop()，當(dāng)前正在運(yùn)行的動畫（如果有的話）立即停止灯抛。
.stop( [clearQueue ] [, jumpToEnd ] )
如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容金赦？如何設(shè)置和獲取元素內(nèi)部文本
- 用html方法獲取/修改元素的innerHTML
- 沒有傳遞參數(shù)時直接返回元素的innerHTML
$('div').html()- 傳遞了一個string參數(shù)時修改元素的innerHTML為參數(shù)值
$('div').html('hello world') - 用text方法獲取/修改元素的innerText
- 沒有傳遞參數(shù)時直接返回元素的innerText
$('div').text()- 傳遞了一個string參數(shù)時修改元素的innerText為參數(shù)值
$('div').text('hello world')
這種讀寫兩用的方法很多，原理都類似
- 如果結(jié)果是多個進(jìn)行賦值操作的時候會給每個結(jié)果都賦值
- 如果結(jié)果多個对嚼，獲取值的時候夹抗，返回結(jié)果集中的第一個對象的相應(yīng)值
如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設(shè)置和獲取元素屬性
- 用val方法設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容
也是一個讀寫雙用的方法纵竖，用來處理input的value漠烧，當(dāng)方法沒有參數(shù)的時候返回input的value值，當(dāng)傳遞了一個參數(shù)的時候靡砌，方法修改input的value值為參數(shù)值
$('input').val()//獲取用戶輸入或選擇的內(nèi)容
$('input').val('newValue');//設(shè)置用戶輸入或選擇的內(nèi)容
- 用attr和prop方法來設(shè)置和獲取元素屬性
$('div').attr()//獲取元素屬性
$('div').prop()//獲取元素屬性
$('div').attr('color','red')//設(shè)置元素屬性
$('div').prop({
background: "yellow",
font-size: "3em"
})//設(shè)置元素屬性
其中：attr多用于html原有屬性已脓，prop多用于自定義屬性
