jQuery選擇器_ Dom操作_ 樣式_ 事件處理_動畫

jQuery 能做什么

jQuery是一款快速而簡潔的javascript的庫,核心是構(gòu)建與css選擇器上,用來操作DOM元素,通過鏈式調(diào)用,兼容性好,API 友好,功能強大，與時俱進

• 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)換為原生對象,只需要加個[下標]

$("#box .box")[0]
,就可以使用j原生對象的API了

問題是:那我們又不想變成原生對象,又想取值怎么辦呢?
$("#box .box").eq(0)  //.eq(index)

jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法

jQuery提供了四種方法進行事件監(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é)點的時候，檢查這個事件是不是 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ù)。當有事件冒泡到 $(‘#container’)，檢查事件是不是 click，并檢查target element是不是匹配css選擇器，如果兩者都符合，執(zhí)行函數(shù)。

one()該方法綁定的事件觸發(fā)一次后自動刪除

$('.class').on( events [,selector ] [,data ], handler);//$('.class')綁定事件
$('.class').off（）$('.class')解除事件

on實現(xiàn)事件委托很簡單， '.class'為父元素，on后面括號里的selector 參數(shù)為子元素，當‘.class’的事件觸發(fā)時，判斷事件來源是否子元素selector，若是，則執(zhí)行處理函數(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屬性來實現(xiàn)

var $h1 = $('h1')
$h1.css('display', 'block')
$h1.css('display', 'none')

• 通過增加或刪除class來實現(xiàn)

//css部分
.status{
    display: none;
}

//js部分
var $h1 = $('h1')
$h1.addClass('status') //隱藏元素
$h1.removeClass('status') //展示元素

• 通過jQuery動畫的hide、show、toggle方法實現(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í)行匹配元素的不透明度動畫。當被可見元素調(diào)用時，元素不透明度一旦達到0，display樣式屬性設(shè)置為none ，元素不再影響頁面的布局。

  .fadeToggle( [duration ] [, easing ] [, complete ] )
  

• 自定義
  • properties是一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動。

  .animate( properties [, duration ] [, easing ] [, complete ] )
  

  • options是一組包含動畫選項的值的集合。

  .animate( properties, options )
  

  • 當一個元素調(diào)用.stop()，當前正在運行的動畫（如果有的話）立即停止。

  .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')
  

這種讀寫兩用的方法很多，原理都類似

1. 如果結(jié)果是多個進行賦值操作的時候會給每個結(jié)果都賦值
2. 如果結(jié)果多個，獲取值的時候，返回結(jié)果集中的第一個對象的相應(yīng)值

如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設(shè)置和獲取元素屬性

• 用val方法設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容
  也是一個讀寫雙用的方法，用來處理input的value，當方法沒有參數(shù)的時候返回input的value值，當傳遞了一個參數(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多用于自定義屬性

使用 jQuery實現(xiàn)如下效果

預(yù)覽

使用 jQuery 實現(xiàn)如下效果

預(yù)覽

實現(xiàn)如下效果

預(yù)覽

模仿視頻6，完成 左右切換的 Tab 效果

預(yù)覽