你必須知道的JQuery

1、 jQuery 能做什么？

jquery是一個(gè)豐富的js庫(kù)，內(nèi)部對(duì)js的很多復(fù)雜的方法進(jìn)行了封裝和加工，比如js很多方法名很冗長(zhǎng)，jquery封裝后方法就變得簡(jiǎn)便了，也考慮到了跨瀏覽器兼容問(wèn)題，這樣我們用js時(shí)需要考慮的很多問(wèn)題它都幫我們解決了，這樣我們使用時(shí)就比js代碼要方便，高效的多。

JQuery對(duì)js的優(yōu)化包括：
選擇網(wǎng)頁(yè)元素
改變結(jié)果集
元素的操作：取值和賦值
元素的操作：移動(dòng)
元素的操作：復(fù)制、刪除和創(chuàng)建
工具方法
事件操作
特殊效果
AJAX
English：http://devdocs.io/jquery/
　　　 ：https://api.jquery.com/
中文：http://www.jquery123.com/

  • 方便快捷獲取DOM元素
    　　如果使用純JavaScript的方式來(lái)遍歷DOM以及查找DOM的某個(gè)部分編寫(xiě)很多冗余的代碼，而使用jQuery只需要一行代碼就足夠了。例如，找到所有應(yīng)用了.content class樣式的div中所有的P標(biāo)簽，只需要下面的一行代碼：
$('div.content').find('p');
  • 動(dòng)態(tài)修改頁(yè)面樣式
    　　使用jQuery我們可以動(dòng)態(tài)的修改頁(yè)面的CSS，即使在頁(yè)面呈現(xiàn)以后，jQuery仍然能夠改變文檔中某個(gè)部分的類(lèi)或者個(gè)別的樣式屬性。例如，找到頁(yè)面所有的ul標(biāo)簽的第一個(gè)li子標(biāo)簽，然后為它們?cè)黾用麨閍ctive的樣式，代碼如下：
$('ul > li:first').addClass('active');
  • .動(dòng)態(tài)改變DOM內(nèi)容
    　　使用jQuery我們可以很容易地對(duì)頁(yè)面DOM進(jìn)行修改，例如，為ID為"container"的元素添加一個(gè)鏈接：
$('#container').append('<a href="more.html">more</a>');
  • 響應(yīng)用戶(hù)的交互操作
    　　jQuery提供了截獲形形色色的頁(yè)面事件（比如用戶(hù)單擊某個(gè)鏈接）的適當(dāng)方式，而不需要使用事件處理程序拆散HTML代碼。此外，它的事件處理API也消除了經(jīng)常困擾Web開(kāi)發(fā)人員瀏覽器的不一致性。
$('button.show-details').click(function() {
  $('div.details').show();
});

上面的代碼表示：為使用的.show-details樣式的button元素添加一個(gè)click事件，事件就是：顯示使用.details樣式的DIV。

  • 為頁(yè)面添加動(dòng)態(tài)效果
    　　jQuery中內(nèi)置的一批淡入、擦除之類(lèi)的效果，以及制作新效果的工具包，為此提供了便利。
$(function () {
  $("#btnShow").click(function () {
    $("#msubject").hide("slow");
  });
});
  • .統(tǒng)一Ajax操作
    　　jQuery統(tǒng)一了多種瀏覽器的Ajax操作，使得開(kāi)發(fā)人員更多的專(zhuān)注服務(wù)器端開(kāi)發(fā)。
function (data, type) {
    // 對(duì)Ajax返回的原始數(shù)據(jù)進(jìn)行預(yù)處理
    return data  // 返回處理后的數(shù)據(jù)
}
  • 7.簡(jiǎn)化常見(jiàn)的JavaScript任務(wù)。
    　　除了這些完全針對(duì)文檔的特性之外，jQuery也改進(jìn)了對(duì)基本的JavaScript數(shù)據(jù)結(jié)構(gòu)（例如迭代和數(shù)組操作等）。
$.each(obj, function(key, value) {
  total += value;
});

2、 jQuery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別？如何轉(zhuǎn)化？

區(qū)別：

  • DOM原生對(duì)象：
    是對(duì)象；
    擁有原生對(duì)象的屬性和方法；
  • JQuery對(duì)象：
    是DOM元原生對(duì)象經(jīng)過(guò)包裝之后，擁有jQuery的屬性和方法（對(duì)原生DOM對(duì)象的封裝）；
    是類(lèi)數(shù)組；

轉(zhuǎn)化方法：

  • JQuery對(duì)象是一個(gè)數(shù)據(jù)對(duì)象，可以通過(guò)[index]的方法，來(lái)得到相應(yīng)的DOM對(duì)象。如：
var $a =$("#a") ; //jQuery對(duì)象
var a=$a[0]; //DOM對(duì)象
  • 反之，用$()方法把原生對(duì)象轉(zhuǎn)化為JQuery對(duì)象，如：
* var a=document.getElementById("a"); //DOM對(duì)象
var $a=$(a); //jQuery對(duì)象

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

JQuery事件是DOM事件的封裝，同時(shí)支持自定義的擴(kuò)展。在程序設(shè)計(jì)中，事件和代理有著相似的作用： 它們提供了一種機(jī)制，使得行為的實(shí)現(xiàn)方式和調(diào)用時(shí)機(jī)可以分離。
不談jQuery，DOM本身就提供了一系列的javascript事件，例如click，keyup，submit。
為實(shí)現(xiàn)相關(guān)業(yè)務(wù)邏輯，通常會(huì)為這些事件定義一系列的處理函數(shù)，處理函數(shù)定義了業(yè)務(wù)的實(shí)現(xiàn)方式，而瀏覽器知道這些業(yè)務(wù)的調(diào)用時(shí)機(jī)。 Javascript事件就是這樣一種機(jī)制，使得行為的實(shí)現(xiàn)方式和調(diào)用時(shí)機(jī)可以動(dòng)態(tài)地綁定。
jQuery事件是通過(guò)封裝javascript事件來(lái)實(shí)現(xiàn)的，例如.keyup()便onkeyup
的封裝。
除了封裝大多數(shù)的javascript事件，jQuery提供了統(tǒng)一的事件綁定和觸發(fā)機(jī)制：

  • 綁定事件：bind、on、live、delegate、keyup(<function>)；
  • 觸發(fā)事件：trigger('keyup')、keyup()；
  • 解綁事件：unbind、off、die、undelegate。

JQuery中如何綁定事件

  • bind

$(selector).bind(event,data,function)參數(shù)含義
event:事件類(lèi)型，如click、change、mouseover等;
data:傳入監(jiān)聽(tīng)函數(shù)的參數(shù)，通過(guò)event.data取到?？蛇x;
function:監(jiān)聽(tīng)函數(shù)，可傳入event對(duì)象，這里的event是jQuery封裝的event對(duì)象，與原生的event對(duì)象有區(qū)別，使用時(shí)需要注意。

用法一：基本用法：$(selector).bind(event,function)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind("click",function(){
    $("p").slideToggle();
  });
});
</script>
<p>This is a paragraph.</p>
<button>請(qǐng)點(diǎn)擊這里</button>
916-01.gif

這種基本用法可以簡(jiǎn)化為：$(selector).event(function)

.click(<function>)
//等效于.bind('click', <function>)。

用法二：data用法：$(selector).bind(event,data,function)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind("click","hello",function(e){
    $("p").slideToggle().html(e.data);
  });
});
</script>
<p>This is a paragraph.</p>
<button>請(qǐng)點(diǎn)擊這里</button>
916-02.gif

用法三：綁定多個(gè)類(lèi)型事件：$(selector).bind({event:function, event:function, ...})

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });
});
</script>
<p>This is a paragraph.</p>
<button>請(qǐng)點(diǎn)擊這里</button>
916-03.gif
  • delegate
    可以用來(lái)實(shí)現(xiàn)事件代理；它將事件處理函數(shù)綁定在指定的根元素上， 由于事件會(huì)冒泡，它用來(lái)處理指定的子元素上的事件。

$(selector).delegate(childSelector,event,data,function)參數(shù)：
childSelector:必須。附加事件處理程序的一個(gè)或多個(gè)子元素。
event:必須。附加到元素的一個(gè)或多個(gè)事件。
data:可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。
function:必需。當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。

用法一：基本用法$(selector).delegate(childSelector,event,function)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("button","click",function(){
    $("p").slideToggle();
  });
});
</script>
<div style="background-color:red">
<p>這是一個(gè)段落。</p>
<button>請(qǐng)點(diǎn)擊這里</button>
</div>

916-04.gif

用法二：data用法$(selector).delegate(childSelector,event,data,function)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("button","click","hello",function(e){
    $("p").slideToggle().text(e.data);
  });
});
</script>
</head>
<body>
<div style="background-color:red">
<p>這是一個(gè)段落。</p>
<button>請(qǐng)點(diǎn)擊這里</button>
</div>
916-05.gif

用法三：向尚未創(chuàng)建的元素添加事件

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>這是一個(gè)新段落。</p>").insertAfter("button");
  });
});
</script>
<div style="background-color:yellow">
<p>這是一個(gè)段落。</p>
<p>請(qǐng)點(diǎn)擊任意一個(gè) p 元素，它會(huì)消失。包括本段落。</p>
<button>在本按鈕后面插入一個(gè)新的 p 元素</button>
</div>
<p><b>
注釋?zhuān)?lt;/b>通過(guò)使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素會(huì)受到影響。</p>
916-06.gif
<div id="root">
  <a>Alice</a>
  <a>Bob</a>
</div>
<script>
$('#root').delegate('a', 'click', function(){
    console.log('clicked');
});
</script>

它的使用方式比bind稍顯復(fù)雜，但它的功能非常強(qiáng)大：
自動(dòng)綁定動(dòng)態(tài)添加的元素。因?yàn)槭录幚砗瘮?shù)綁定在#root上，新加的子元素事件也會(huì)冒泡到#root。
性能好于.bind()。只綁定一個(gè)事件處理函數(shù)，綁定速度相當(dāng)快。

  • live

$(selector).live(event,data,function)參數(shù)含義
event:事件類(lèi)型，如click、change、mouseover等;
data:傳入監(jiān)聽(tīng)函數(shù)的參數(shù)，通過(guò)event.data取到?？蛇x;
function:監(jiān)聽(tīng)函數(shù)，可傳入event對(duì)象

用法一：基本用法$(selector).live(event,function)
　　?。篸ata用法$(selector).live(event,data,function)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").live("click","hello",function(e){
    $("p").slideToggle().html(e.data);
  });
});
</script>
<p>這是一個(gè)段落。</p>
<button>請(qǐng)點(diǎn)擊這里</button>
916-07.gif

用法二：向尚未創(chuàng)建的元素添加事件

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").live("click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});
</script>
<p>這是一個(gè)段落。</p>
<p>點(diǎn)擊任意 p 元素會(huì)令其消失。包括本段落。</p>
<button>在本按鈕后面插入新的 p 元素</button>
<p><b>注釋?zhuān)?lt;/b>通過(guò)使用 live() 方法而不是 bind() 方法，新的 p 元素同樣會(huì)在點(diǎn)擊時(shí)消失。</p>
916-08.gif
  • on

$(selector).on( events ,selector ,data ,function )
events（必需）：一個(gè)或多個(gè)空格分隔的事件類(lèi)型和可選的命名空間，或僅僅是命名空間，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
selector（可選）：一個(gè)選擇器字符串，用于過(guò)濾出被選中的元素中能觸發(fā)事件的后代元素。如果選擇器是 null 或者忽略了該選擇器，那么被選中的元素總是能觸發(fā)事件
data（可選）：當(dāng)一個(gè)事件被觸發(fā)時(shí)，要傳遞給事件處理函數(shù)的event.data
function（必需）：事件被觸發(fā)時(shí)，執(zhí)行的函數(shù)。若該函數(shù)只是要執(zhí)行return false的話(huà)，那么該參數(shù)位置可以直接簡(jiǎn)寫(xiě)成 false

用法一：基本用法$(selector).on( events ,function )
　　?。篸ata用法$(selector).on( events ,data ,function )

<link  rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").on("click",["hello world"],function(e){
    $("p").toggle().text(e.data);
  });
});
</script>
<p>This is a paragraph.</p>
<button type="button">Click me</button>

916-09.gif

用法二：事件代理$(selector).on( events ,selector ,function )

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").appendTo("div");
  });
});
</script>
  <div>
    <h3>這是個(gè)h3</h3>
    <p>這是一個(gè)段落。</p>
    <p>點(diǎn)擊任意 p 元素會(huì)令其消失。包括本段落。</p>
  </div>
  <button>在div尾部插入新的 p 元素</button>
  <p><b>注釋?zhuān)?lt;/b>與使用 live() 方法、 bind() 方法相似，新的 p 元素同樣會(huì)在點(diǎn)擊時(shí)消失。</p>
916-10.gif

JQuery中如何解除綁定事件

  • unbind（解除unbind綁定的事件）

$(selector).unbind( )刪除選中元素所有事件
$(selector).unbind(eventObj)規(guī)定要?jiǎng)h除的事件對(duì)象。
$(selector).unbind(event,function)規(guī)定從指定事件上刪除一個(gè)或多個(gè)事件處理程序。

用法一：刪除某個(gè)事件$(selector).unbind(eventObj)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").click(function(){
    $("p").slideToggle();
  });
  $("input").mouseenter(function(){
    $("body").css("background","green");
  });
  $("input").mouseout(function(){
    $("body").css("background","white");
  });
  $("button").click(function(){
    $("input").unbind("click");
  });
});
</script>
<p>這是一個(gè)段落。</p>
<input type="button" value="click me"></input>
<button>刪除 input 元素的click事件處理器</button>
916-11.gif

用法二：刪除某個(gè)事件上的處理程序$(selector).unbind(event,function)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
  function changeColor()
  {
    $(this).css("color","red");
  }
  function changeBg()
  {
    $(this).css("background","yellow");
  }
  $(document).ready(function(){
    $("p").click(changeColor).click(changeBg);
    $("button").click(function(){
      $("p").unbind("click",changeColor);
    });
});
</script>
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
<button>從 p 元素的 click 事件刪changColor框函數(shù)</button>
916-12.gif
  • die（用法和unbind相似，用來(lái)解除live綁定的事件）

$(selector).die( )刪除選中元素所有事件
$(selector).die(eventObj)規(guī)定要?jiǎng)h除的事件對(duì)象。
$(selector).die(event,function)規(guī)定從指定事件上刪除一個(gè)或多個(gè)事件處理程序。

  • undelegate（移除delegate綁定的事件）

$(selector).undelegate(selector,event,function)的參數(shù)：
selector 可選。規(guī)定需要?jiǎng)h除事件處理程序的選擇器。
event 可選。規(guī)定需要?jiǎng)h除處理函數(shù)的一個(gè)或多個(gè)事件類(lèi)型。
function 可選。規(guī)定要?jiǎng)h除的具體事件處理函數(shù)。

用法一：$(selector).undelegate()刪除所有事件
用法二：$(selector).undelegate(selector)刪除滿(mǎn)足過(guò)濾條件的元素的所有事件
用法三：$(selector).undelegate(event)刪除某個(gè)事件
用法四：$(selector).undelegate(event,function)刪除某個(gè)事件的某個(gè)函數(shù)

  • .off（移除on綁定的事件）

$(selector).off( event , selector , function )參數(shù)
event 可選。規(guī)定需要?jiǎng)h除處理函數(shù)的一個(gè)或多個(gè)事件類(lèi)型。
selector 可選。規(guī)定需要?jiǎng)h除事件處理程序的選擇器。
function 可選。規(guī)定要?jiǎng)h除的具體事件處理函數(shù)。

各種事件綁定/解除方法的比較

事實(shí)上，.on()才是jQuery事件的提供者。其他的事件綁定方法都是通過(guò).on()來(lái)實(shí)現(xiàn)的，請(qǐng)看jQuery1.8.2的源碼：

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
    return this.off( types, null, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
die: function( types, fn ) {
    jQuery( this.context ).off( types, this.selector || "**", fn );
    return this;
},

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
    return arguments.length === 1 ? this.off( selector, "**" ) 
    : this.off( types, selector || "**", fn );
},

既然.on是最通用的jQuery事件機(jī)制，其他的事件綁定都可以用.on()來(lái)實(shí)現(xiàn)：

// bind 
$( "#foo" ).bind( "click", function( e ) {} );
$( "#foo" ).on( "click", function( e ) {} ); 

// delegate 
$( "#root" ).delegate( "a", "click", function( e ) {} );
$( "#root" ).on( "click", "a", function( e ) {} );
  • bind:為一個(gè)元素綁定一個(gè)事件處理程序，在jQuery 3.0版本中，標(biāo)記為棄用。
  • unbind:用來(lái)解除bind方法綁定的事件。同樣，在jQuery 3.0版本中，標(biāo)記為棄用。
  • live：附加一個(gè)事件處理器到匹配目前選擇器的所有元素，現(xiàn)在和未來(lái)。
    這種方法是將頁(yè)面的document元素作為事件代理元素，太消耗資源，已經(jīng)過(guò)時(shí)。在新版本中推薦用.on()方法，即時(shí)在舊版本中，也推薦使用.delegate()方法來(lái)取代.live()方法。
  • delegate：為所有匹配選擇器（selector參數(shù)）的元素綁定一個(gè)處理器到一個(gè)或多個(gè)事件，現(xiàn)在或?qū)?lái)， 基于根元素的一個(gè)特定的組。
    在jQuery 3.0中，.delegate()也已被標(biāo)記為棄用。
    delegate方法比live方法好在能指定事件代理元素。。
  • on：在選定的元素上綁定一個(gè)或多個(gè)事件處理函數(shù)。
    從jQuery1.7開(kāi)始，.on()方法提供了事件處理的所有功能。所以，為了統(tǒng)一和方便，推薦使用.on()方法作為綁定事件的方法。
  • off:用來(lái)移除用.on()方法綁定的事件。

4、jQuery 如何展示/隱藏元素？

基礎(chǔ)的展示/隱藏

  • .hide(duration ,easing, complete)

用于隱藏元素，沒(méi)有參數(shù)時(shí)等同于設(shè)置display屬性.css('display', 'none')
duration（可選）：動(dòng)畫(huà)持續(xù)多久
easing（可選）：表示過(guò)渡使用哪種緩動(dòng)函數(shù)，jQuery自身提供"linear" 和 "swing"
complete（可選）：在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)

舉例：

<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide(2000,"linear",function(){
      $("body").css("background","green")
    });
  });
});
</script>
<p>點(diǎn)擊我，我會(huì)消失。</p>
916-13.gif
  • .show( [duration, easing , complete )
    用于顯示元素，用法和hide類(lèi)似，舉例：
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide(1000,"linear",function(){
      $(this).show(1000,"linear",function(){
        $("body").css("background","green")
      })
    });
  });
});
</script>
<p>點(diǎn)擊我，我會(huì)消失。</p>
916-14.gif
  • .toggle( duration , easing , complete )

事件處理套件也有一個(gè)名為.toggle()方法。哪一個(gè)被調(diào)用取決于傳遞的參數(shù)的設(shè)置
用來(lái)切換元素的隱藏、顯示，類(lèi)似于toggleClass，用法和show、hide類(lèi)似

舉例：

<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle(1000,"linear");
  });
});
</script>
<p>點(diǎn)擊button，我會(huì)消失/顯示。</p>
<button>click me</click>
916-15.gif

漸變的展示/隱藏 fade

  • .fadeIn( duration , easing, complete)
    通過(guò)淡入的方式顯示匹配元素，參數(shù)含義和上面相同

  • .fadeOut( duration , easing , complete )
    通過(guò)淡出的方式隱藏匹配元素

  • .fadeTo( duration, opacity , easing, complete )
    調(diào)整匹配元素的透明度，方法通過(guò)匹配元素的不透明度做動(dòng)畫(huà)效果。
    第一、二個(gè)參數(shù)必須，第一個(gè)參數(shù)設(shè)置無(wú)意義時(shí)會(huì)取默認(rèn)時(shí)間；第二個(gè)參數(shù)設(shè)置透明度。

以上三個(gè)綜合舉例：

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut(1000,"linear",function(){
      $("#div1").fadeIn();
    });
    $("#div2").fadeTo(1000,0.2,"linear");
  });
});
</script>
<style>#div1,#div2{width:80px;height:80px;background:green;float:left;margin-right:20px}</style>
<button>click</button>
<div id="div1">1</div>
<div id="div2">2</div>
916-16.gif
  • .fadeToggle( duration ,easing ,complete )
    通過(guò)匹配的元素的不透明度動(dòng)畫(huà)，來(lái)顯示或隱藏它們，方法執(zhí)行匹配元素的不透明度動(dòng)畫(huà)。當(dāng)被可見(jiàn)元素調(diào)用時(shí)，元素不透明度一旦達(dá)到0，display樣式屬性設(shè)置為none ，所以元素不再影響頁(yè)面的布局。舉例：
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle(1000,0);
  });
});
</script>
<style>#div1,#div2{width:80px;height:80px;background:green;margin-right:20px;float:left}#div2{background:red;}</style>
<button>click</button>
<div id="div1">1</div>
<div id="div2">2</div>
916-17.gif

滑動(dòng)的展示/隱藏 slide

  • .slideDown( duration , easing , complete )
    用滑動(dòng)動(dòng)畫(huà)顯示一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫(huà)，這會(huì)導(dǎo)致頁(yè)面的下面部分滑下去，彌補(bǔ)了顯示的方式

  • .slideUp(duration , easing , complete )
    用滑動(dòng)動(dòng)畫(huà)隱藏一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫(huà)，這會(huì)導(dǎo)致頁(yè)面的下面部分滑上去，當(dāng)一個(gè)隱藏動(dòng)畫(huà)后，高度值達(dá)到0的時(shí)候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁(yè)面布局。 display 樣式屬性將被設(shè)置為none，以確保該元素不再影響頁(yè)面布局。

  • .slideToggle( duration , easing , complete )
    用滑動(dòng)動(dòng)畫(huà)顯示或隱藏一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫(huà)，這會(huì)導(dǎo)致頁(yè)面中，在這個(gè)元素下面的內(nèi)容往下或往上滑。display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復(fù)到其初始值。
    如果一個(gè)元素的display屬性值為inline，然后是隱藏和顯示，這個(gè)元素將再次顯示inline。當(dāng)一個(gè)隱藏動(dòng)畫(huà)后，高度值達(dá)到0的時(shí)候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁(yè)面布局。

綜合舉例

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#div1").slideUp(1000,"linear",function(){$("#div1").slideDown()});
  });
  $("#btn2").click(function(){
    $("#div1").slideToggle()
  })
});
</script>
<style>#div1,#div2{width:80px;height:80px;background:green;margin-top:10px}#div1{background:red}</style>
<button id="btn2">toggle</button>
<button id="btn1">click</button>
<div id="div1">1</div>
<div id="div2">2</div>
916-18.gif

另外，還可以用 animate 自定義展示/隱藏效果

5、 jQuery 動(dòng)畫(huà)如何使用？

jQuery .animate()方法用于創(chuàng)建自定義動(dòng)畫(huà)：

.animate( properties , duration , easing ，step, complete )
其中后四個(gè)為可選參數(shù)
properties是一個(gè)CSS屬性和值的對(duì)象,動(dòng)畫(huà)將根據(jù)這組對(duì)象移動(dòng)。
duration (default: 400)：一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久。默認(rèn)值: "normal"， 三種預(yù)定速度的字符串("slow", "normal", 或 "fast"或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000) ）
easing (default: swing)：一個(gè)字符串，表示過(guò)渡使用哪種緩動(dòng)函數(shù)。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
step：每個(gè)動(dòng)畫(huà)元素的每個(gè)動(dòng)畫(huà)屬性將調(diào)用的函數(shù)。這個(gè)函數(shù)為修改Tween 對(duì)象提供了一個(gè)機(jī)會(huì)來(lái)改變?cè)O(shè)置中得屬性值。
complete：在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)

  • 簡(jiǎn)單用法：
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("#div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    },2000,"swing",function(){$("#div").css({background:"red"})});
  });
});
</script> 
<button>開(kāi)始動(dòng)畫(huà)</button>
<p>默認(rèn)情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無(wú)法移動(dòng)。如需對(duì)位置進(jìn)行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p>
<div id="div" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
916-19.gif
  • jQuery animate() - 使用相對(duì)值
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'150px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
<button>開(kāi)始動(dòng)畫(huà)</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
916-20.gif
  • jQuery animate() - 使用預(yù)定義的值
    甚至可以把屬性的動(dòng)畫(huà)值設(shè)置為 "show"、"hide" 或 "toggle"：
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("#btn1").click(function(){
    $("div").animate({
      height: "toggle"
    });
  });
  $("#btn2").click(function(){
    $("div").animate({
      width: "show"
    });
  });
  $("#btn3").click(function(){
    $("div").animate({
      width: "hide"
    });
  });
});
</script> 
<button id="btn1">toggle</button> <button id="btn2">show</button> <button id="btn3">hide</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;"></div>
916-21.gif
  • jQuery animate() - 使用隊(duì)列功能
    默認(rèn)地，jQuery 提供針對(duì)動(dòng)畫(huà)的隊(duì)列功能。
    這意味著如果您在彼此之后編寫(xiě)多個(gè) animate() 調(diào)用，jQuery 會(huì)創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊(duì)列。然后逐一運(yùn)行這些 animate 調(diào)用。
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script> 
<button>開(kāi)始動(dòng)畫(huà)</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
916-22.gif
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});
</script> 
<button>開(kāi)始動(dòng)畫(huà)</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
916-23.gif

除了這些，JQuery animate 還有一些高級(jí)用法，以后在做歸納

6、如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本？

HTML內(nèi)容與內(nèi)部文本內(nèi)容的區(qū)別，相當(dāng)于原生 JS 中的innerText與innerHTML的區(qū)別。
innerText返回元素內(nèi)包含的文本內(nèi)容，在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容。
innerHTML回元素的HTML結(jié)構(gòu)，在寫(xiě)入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM。
JQuery與之對(duì)應(yīng)的兩個(gè)方法是text() 和 html()

  • 獲取內(nèi)容
$(".box").html() //獲取元素內(nèi)部的html內(nèi)容，類(lèi)似于innerHTML
$(".box").text() //獲取元素內(nèi)部的text文本，類(lèi)似于innerText
  • 設(shè)置內(nèi)容
$(".box").html("<p>設(shè)置了一個(gè)段落</p>")//設(shè)置了元素內(nèi)部的html內(nèi)容,標(biāo)簽生效
$(".box").text("設(shè)置了一個(gè)文本")//設(shè)置了元素內(nèi)部的text文本，標(biāo)簽不生效
  • text()、html() 的回調(diào)函數(shù)
    上面的兩個(gè) jQuery 方法：text()、html() （以及 下邊提到的val())，擁有回調(diào)函數(shù)?；卣{(diào)函數(shù)由兩個(gè)參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串。如：
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").text(function(i,origText){
      return origText + "newText"+i; 
    });
  });

  $("#btn2").click(function(){
    $("p").html(function(i,origText){
      return origText + "<b>newHTML</b>"+i; 
    });
  });

});
</script>
<p>oldText</p>
<p>oldHTML</p>
<button id="btn1">添加text</button>
<button id="btn2">添加HTML</button>

916-24.gif

注意第二次點(diǎn)擊把新增的<b></b>丟掉了

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

設(shè)置/獲取表單內(nèi)容

$("#ipt").val() //獲取表單的html內(nèi)容
$("#ipt").val(content) //更改表單的內(nèi)容

如：

<input id="ipt" type="text" value="hello world">
$("#ipt").val()
//"hello world"
$("#ipt").val("jirengu") 
$("#ipt").val()
//"jirengu"

與上邊 text()、html()類(lèi)似 val()同樣可擁有回調(diào)函數(shù)

設(shè)置/獲取元素屬性

  • .attr()

獲取元素特定屬性的值.attr(attributeName)

var title = $( "em" ).attr( "title" );

為元素屬性賦值.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )
普通用法：

$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );

屬性JSON形式

  $("#baid").attr({
    "href" : "http://www.baid.com.cn",
    "title" : "bai du"
  });

回調(diào)函數(shù)用法.attr( attributeName, function(index, attr) )
jQuery 方法 attr()，也提供回調(diào)函數(shù)?；卣{(diào)函數(shù)由兩個(gè)參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串。

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("iframe").attr("src", function(i,origValue){
      return origValue + "/app/album/index"; 
    });
  }); 
});
</script>
<button>改變iframe的src值</button>
<iframe src="https://jirengu.com"></iframe>
916-25.gif
  • .removeAttr()
    為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性（attribute）
    .removeAttr() 方法使用原生的 JavaScript removeAttribute() 函數(shù),但是它的優(yōu)點(diǎn)是可以直接在一個(gè) jQuery 對(duì)象上調(diào)用該方法，并且它解決了跨瀏覽器的屬性名不同的問(wèn)題。
$('div').removeAttr('id');

增加/刪除DOM元素

  • 創(chuàng)建元素
    只需要把DOM字符串傳入$方法即可返回一個(gè)jQuery對(duì)象
var obj = $('<div class="test"><p><span>Done</span></p></div>');
  • 添加元素

.append(content[,content]) / .append(function(index,html))
可以一次添加多個(gè)內(nèi)容，內(nèi)容可以是DOM對(duì)象、HTML string、 jQuery對(duì)象。
如果參數(shù)是function，function可以返回DOM對(duì)象、HTML string、 jQuery對(duì)象，參數(shù)是集合中的元素位置與原來(lái)的html值
如：

$( ".inner" ).append( "<p>Test</p>" );
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).append( "<strong>Hello</strong>" );
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) );

.appendTo(target)
把對(duì)象插入到目標(biāo)元素尾部，目標(biāo)元素可以是selector, DOM對(duì)象, HTML string, 元素集合, jQuery對(duì)象;

$( "h2" ).appendTo( $( ".container" ) );
$( "<p>Test</p>" ).appendTo( ".inner" );

.prepend(content[,content]) / .prepend(function(index,html))
向?qū)ο箢^部追加內(nèi)容，用法和append類(lèi)似，內(nèi)容添加到最開(kāi)始

$( ".inner" ).prepend( "<p>Test</p>" );

.prependTo(target)
把對(duì)象插入到目標(biāo)元素頭部，用法和prepend類(lèi)似

$( "<p>Test</p>" ).prependTo( ".inner" );

.before([content][,content]) / .before(function)
在對(duì)象前面(不是頭部，而是外面，和對(duì)象并列同級(jí))插入內(nèi)容，參數(shù)和append類(lèi)似

$( ".inner" ).before( "<p>Test</p>" );
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).before( "<b>Hello</b>" );
$( "p" ).before( document.createTextNode( "Hello" ) );

.insertBefore(target)
把對(duì)象插入到target之前（同樣不是頭部，是同級(jí)）

$( "h2" ).insertBefore( $( ".container" ) );

.after([content][,content]) / .after(function（index）)
和before相反，在對(duì)象后面(不是尾部，而是外面，和對(duì)象并列同級(jí))插入內(nèi)容，參數(shù)和append類(lèi)似

$( ".inner" ).after( "<p>Test</p>" );
$( "p" ).after( document.createTextNode( "Hello" ) );

.insertAfter(target)
和insertBefore相反，把對(duì)象插入到target之后（同樣不是尾部，是同級(jí)）

$( "<p>Test</p>" ).insertAfter( ".inner" );
$( "p" ).insertAfter( "#foo" );
  • 刪除元素

.remove([selector])
刪除被選元素（及其子元素）

 $("#div1").remove();
$('div').remove('.test');//過(guò)濾匹配的元素

.empty()
清空被選擇元素內(nèi)所有子元素

$('body').empty();

.detach()
detach() 方法移除被選元素，包括所有文本和子節(jié)點(diǎn)。這個(gè)方法會(huì)保留 jQuery 對(duì)象中的匹配的元素，因而可以在將來(lái)再使用這些匹配的元素。
detach() 會(huì)保留所有綁定的事件、附加的數(shù)據(jù)，這一點(diǎn)與 remove() 不同。

由于.detach的上述特性，衍生出以下用法

普通用法，刪除元素

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").detach();
  });
});
</script>
<p>This is a paragraph.</p>
<button>刪除 p 元素</button>

916-26.gif

特別用法：移動(dòng)元素

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").detach());
  });
});
</script>
<p>This is a paragraph.</p>
<button>移動(dòng) p 元素</button>

916-27.gif

特別用法：恢復(fù)元素

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var x;
  $("#btn1").click(function(){
    x=$("p").detach();
  });
  $("#btn2").click(function(){
    $("body").prepend(x);
  });
});
</script>
<p>這是一個(gè)段落。</p>
<button id="btn1">刪除 p 元素</button>
<button id="btn2">恢復(fù) p 元素</button>

916-28.gif

特別用法：并保留其事件綁定

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").detach());
  });
 $("p").click(function(){
    $(this).toggleClass("bg")
  });
});
</script>
<style>.bg{background:red}</style>
<p>在本段落移動(dòng)之后，試著點(diǎn)擊該段落，請(qǐng)注意它保留了 click 事件。</p>
<button>移動(dòng) p 元素</button>
916-29.gif
  • 包裹元素

wrap(wrappingElement) / .wrap(function(index))
為每個(gè)對(duì)象包裹一層HTML結(jié)構(gòu)，可以是selector, element, HTML string, jQuery object

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
//包裹元素
$( ".inner" ).wrap( "<div class='new'></div>" );
//結(jié)果
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapAll(wrappingElement)
把所有匹配對(duì)象包裹在同一個(gè)HTML結(jié)構(gòu)

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
//包裹元素
$( ".inner" ).wrapAll( "<div class='new' />");
//結(jié)果
    <div class="container">
      <div class="new">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
      </div>
    </div>

.wrapInner(wrappingElement) / .wrapInner(function(index))
用選中的元素包裹指定的HTML

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
//包裹元素
$( ".inner" ).wrapInner( "<div class='new'></div>");
//結(jié)果
<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

.unwrap()
把DOM元素的parent移除

pTags = $( "p" ).unwrap();

代碼展示

8、tab

9、事件綁定

10、事件代理

11、tab切換/滑動(dòng)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,493評(píng)論 0贊 2
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,262評(píng)論 0贊 1
  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點(diǎn)的復(fù)制與替換 （1）DOM拷貝clone() 克隆節(jié)點(diǎn)是DOM的常...
    凜0_0閱讀 1,499評(píng)論 0贊 8
  • 題目1： jQuery 能做什么？ 選擇網(wǎng)頁(yè)元素 改變結(jié)果集 元素的操作：取值和賦值 元素的操作：移動(dòng) 元素的操作...
    cheneyzhangch閱讀 463評(píng)論 0贊 1
  • 題目1：jQuery 能做什么？ jQuery是一個(gè)豐富的js庫(kù), 內(nèi)部對(duì)js的很多復(fù)雜的方法進(jìn)行了封裝和加工, ...
    cctosuper閱讀 257評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容