你必須知道的JQuery

1、 jQuery 能做什么？

jquery是一個豐富的js庫，內部對js的很多復雜的方法進行了封裝和加工，比如js很多方法名很冗長，jquery封裝后方法就變得簡便了，也考慮到了跨瀏覽器兼容問題，這樣我們用js時需要考慮的很多問題它都幫我們解決了，這樣我們使用時就比js代碼要方便，高效的多。

JQuery對js的優化包括：
選擇網頁元素
改變結果集
元素的操作：取值和賦值
元素的操作：移動
元素的操作：復制、刪除和創建
工具方法
事件操作
特殊效果
AJAX
English：http://devdocs.io/jquery/
　　　：https://api.jquery.com/
中文：http://www.jquery123.com/

方便快捷獲取DOM元素
　　如果使用純JavaScript的方式來遍歷DOM以及查找DOM的某個部分編寫很多冗余的代碼，而使用jQuery只需要一行代碼就足夠了。例如，找到所有應用了.content class樣式的div中所有的P標簽，只需要下面的一行代碼：

$('div.content').find('p');

動態修改頁面樣式
　　使用jQuery我們可以動態的修改頁面的CSS，即使在頁面呈現以后，jQuery仍然能夠改變文檔中某個部分的類或者個別的樣式屬性。例如，找到頁面所有的ul標簽的第一個li子標簽，然后為它們增加名為active的樣式，代碼如下：

$('ul > li:first').addClass('active');

.動態改變DOM內容
　　使用jQuery我們可以很容易地對頁面DOM進行修改，例如，為ID為"container"的元素添加一個鏈接：

$('#container').append('<a href="more.html">more</a>');

響應用戶的交互操作
　　jQuery提供了截獲形形色色的頁面事件（比如用戶單擊某個鏈接）的適當方式，而不需要使用事件處理程序拆散HTML代碼。此外，它的事件處理API也消除了經常困擾Web開發人員瀏覽器的不一致性。

$('button.show-details').click(function() {
  $('div.details').show();
});

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

為頁面添加動態效果
　　jQuery中內置的一批淡入、擦除之類的效果，以及制作新效果的工具包，為此提供了便利。

$(function () {
  $("#btnShow").click(function () {
    $("#msubject").hide("slow");
  });
});

.統一Ajax操作
　　jQuery統一了多種瀏覽器的Ajax操作，使得開發人員更多的專注服務器端開發。

function (data, type) {
    // 對Ajax返回的原始數據進行預處理
    return data  // 返回處理后的數據
}

7.簡化常見的JavaScript任務。
　　除了這些完全針對文檔的特性之外，jQuery也改進了對基本的JavaScript數據結構（例如迭代和數組操作等）。

$.each(obj, function(key, value) {
  total += value;
});

2、 jQuery 對象和 DOM 原生對象有什么區別？如何轉化？

區別：

DOM原生對象：
是對象；
擁有原生對象的屬性和方法；
JQuery對象：
是DOM元原生對象經過包裝之后，擁有jQuery的屬性和方法（對原生DOM對象的封裝）；
是類數組；

轉化方法：

JQuery對象是一個數據對象，可以通過[index]的方法，來得到相應的DOM對象。如：

var $a =$("#a") ; //jQuery對象
var a=$a[0]; //DOM對象

反之，用$()方法把原生對象轉化為JQuery對象，如：

* var a=document.getElementById("a"); //DOM對象
var $a=$(a); //jQuery對象

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

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

綁定事件：bind、on、live、delegate、keyup(<function>)；

觸發事件：trigger('keyup')、keyup()；

解綁事件：unbind、off、die、undelegate。

JQuery中如何綁定事件

bind

$(selector).bind(event,data,function)參數含義
event:事件類型，如click、change、mouseover等;
data:傳入監聽函數的參數，通過event.data取到。可選;
function:監聽函數，可傳入event對象，這里的event是jQuery封裝的event對象，與原生的event對象有區別，使用時需要注意。

用法一：基本用法：$(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>請點擊這里</button>

916-01.gif

這種基本用法可以簡化為：$(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>請點擊這里</button>

916-02.gif

用法三：綁定多個類型事件：$(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>請點擊這里</button>

916-03.gif

delegate
可以用來實現事件代理；它將事件處理函數綁定在指定的根元素上，由于事件會冒泡，它用來處理指定的子元素上的事件。

$(selector).delegate(childSelector,event,data,function)參數：
childSelector:必須。附加事件處理程序的一個或多個子元素。
event:必須。附加到元素的一個或多個事件。
data:可選。規定傳遞到函數的額外數據。
function:必需。當事件發生時運行的函數。

用法一：基本用法$(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>這是一個段落。</p>
<button>請點擊這里</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>這是一個段落。</p>
<button>請點擊這里</button>
</div>

916-05.gif

用法三：向尚未創建的元素添加事件

<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>這是一個新段落。</p>").insertAfter("button");
  });
});
</script>
<div style="background-color:yellow">
<p>這是一個段落。</p>
<p>請點擊任意一個 p 元素，它會消失。包括本段落。</p>
<button>在本按鈕后面插入一個新的 p 元素</button>
</div>
<p><b>
注釋：</b>通過使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素會受到影響。</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稍顯復雜，但它的功能非常強大：
自動綁定動態添加的元素。因為事件處理函數綁定在#root上，新加的子元素事件也會冒泡到#root。
性能好于.bind()。只綁定一個事件處理函數，綁定速度相當快。

live

$(selector).live(event,data,function)參數含義
event:事件類型，如click、change、mouseover等;
data:傳入監聽函數的參數，通過event.data取到。可選;
function:監聽函數，可傳入event對象

用法一：基本用法$(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>這是一個段落。</p>
<button>請點擊這里</button>

916-07.gif

用法二：向尚未創建的元素添加事件

<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>這是一個段落。</p>
<p>點擊任意 p 元素會令其消失。包括本段落。</p>
<button>在本按鈕后面插入新的 p 元素</button>
<p><b>注釋：</b>通過使用 live() 方法而不是 bind() 方法，新的 p 元素同樣會在點擊時消失。</p>

916-08.gif

$(selector).on( events ,selector ,data ,function )
events（必需）：一個或多個空格分隔的事件類型和可選的命名空間，或僅僅是命名空間，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
selector（可選）：一個選擇器字符串，用于過濾出被選中的元素中能觸發事件的后代元素。如果選擇器是 null 或者忽略了該選擇器，那么被選中的元素總是能觸發事件
data（可選）：當一個事件被觸發時，要傳遞給事件處理函數的event.data
function（必需）：事件被觸發時，執行的函數。若該函數只是要執行return false的話，那么該參數位置可以直接簡寫成 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>這是個h3</h3>
    <p>這是一個段落。</p>
    <p>點擊任意 p 元素會令其消失。包括本段落。</p>
  </div>
  <button>在div尾部插入新的 p 元素</button>
  <p><b>注釋：</b>與使用 live() 方法、 bind() 方法相似，新的 p 元素同樣會在點擊時消失。</p>

916-10.gif

JQuery中如何解除綁定事件

unbind（解除unbind綁定的事件）

$(selector).unbind( )刪除選中元素所有事件
$(selector).unbind(eventObj)規定要刪除的事件對象。
$(selector).unbind(event,function)規定從指定事件上刪除一個或多個事件處理程序。

用法一：刪除某個事件$(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>這是一個段落。</p>
<input type="button" value="click me"></input>
<button>刪除 input 元素的click事件處理器</button>

916-11.gif

用法二：刪除某個事件上的處理程序$(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>這是一個段落。</p>
<p>這是另一個段落。</p>
<button>從 p 元素的 click 事件刪changColor框函數</button>

916-12.gif

die（用法和unbind相似，用來解除live綁定的事件）

$(selector).die( )刪除選中元素所有事件
$(selector).die(eventObj)規定要刪除的事件對象。
$(selector).die(event,function)規定從指定事件上刪除一個或多個事件處理程序。

undelegate（移除delegate綁定的事件）

$(selector).undelegate(selector,event,function)的參數：
selector 可選。規定需要刪除事件處理程序的選擇器。
event 可選。規定需要刪除處理函數的一個或多個事件類型。
function 可選。規定要刪除的具體事件處理函數。

用法一：$(selector).undelegate()刪除所有事件
用法二：$(selector).undelegate(selector)刪除滿足過濾條件的元素的所有事件
用法三：$(selector).undelegate(event)刪除某個事件
用法四：$(selector).undelegate(event,function)刪除某個事件的某個函數

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

$(selector).off( event , selector , function )參數
event 可選。規定需要刪除處理函數的一個或多個事件類型。
selector 可選。規定需要刪除事件處理程序的選擇器。
function 可選。規定要刪除的具體事件處理函數。

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

事實上，.on()才是jQuery事件的提供者。其他的事件綁定方法都是通過.on()來實現的，請看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事件機制，其他的事件綁定都可以用.on()來實現：

// 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:為一個元素綁定一個事件處理程序，在jQuery 3.0版本中，標記為棄用。
unbind:用來解除bind方法綁定的事件。同樣，在jQuery 3.0版本中，標記為棄用。
live：附加一個事件處理器到匹配目前選擇器的所有元素，現在和未來。
這種方法是將頁面的document元素作為事件代理元素，太消耗資源，已經過時。在新版本中推薦用.on()方法，即時在舊版本中，也推薦使用.delegate()方法來取代.live()方法。
delegate：為所有匹配選擇器（selector參數）的元素綁定一個處理器到一個或多個事件，現在或將來，基于根元素的一個特定的組。
在jQuery 3.0中，.delegate()也已被標記為棄用。
delegate方法比live方法好在能指定事件代理元素。。
on：在選定的元素上綁定一個或多個事件處理函數。
從jQuery1.7開始，.on()方法提供了事件處理的所有功能。所以，為了統一和方便，推薦使用.on()方法作為綁定事件的方法。
off:用來移除用.on()方法綁定的事件。

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

基礎的展示/隱藏

.hide(duration ,easing, complete)

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

舉例：

<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>點擊我，我會消失。</p>

916-13.gif

.show( [duration, easing , complete )
用于顯示元素，用法和hide類似，舉例：

<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>點擊我，我會消失。</p>

916-14.gif

.toggle( duration , easing , complete )

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

舉例：

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

916-15.gif

漸變的展示/隱藏 fade

.fadeIn( duration , easing, complete)
通過淡入的方式顯示匹配元素，參數含義和上面相同
.fadeOut( duration , easing , complete )
通過淡出的方式隱藏匹配元素
.fadeTo( duration, opacity , easing, complete )
調整匹配元素的透明度，方法通過匹配元素的不透明度做動畫效果。
第一、二個參數必須，第一個參數設置無意義時會取默認時間；第二個參數設置透明度。

以上三個綜合舉例：

<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 )
通過匹配的元素的不透明度動畫，來顯示或隱藏它們，方法執行匹配元素的不透明度動畫。當被可見元素調用時，元素不透明度一旦達到0，display樣式屬性設置為none ，所以元素不再影響頁面的布局。舉例：

<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

滑動的展示/隱藏 slide

.slideDown( duration , easing , complete )
用滑動動畫顯示一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式
.slideUp(duration , easing , complete )
用滑動動畫隱藏一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑上去，當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局。 display 樣式屬性將被設置為none，以確保該元素不再影響頁面布局。
.slideToggle( duration , easing , complete )
用滑動動畫顯示或隱藏一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面中，在這個元素下面的內容往下或往上滑。display屬性值保存在jQuery的數據緩存中，所以display可以方便以后可以恢復到其初始值。
如果一個元素的display屬性值為inline，然后是隱藏和顯示，這個元素將再次顯示inline。當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局。

綜合舉例

<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 動畫如何使用？

jQuery .animate()方法用于創建自定義動畫：

.animate( properties , duration , easing ，step, complete )
其中后四個為可選參數
properties是一個CSS屬性和值的對象,動畫將根據這組對象移動。
duration (default: 400)：一個字符串或者數字決定動畫將運行多久。默認值: "normal"，三種預定速度的字符串("slow", "normal", 或 "fast"或表示動畫時長的毫秒數值(如：1000) ）
easing (default: swing)：一個字符串，表示過渡使用哪種緩動函數。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
step：每個動畫元素的每個動畫屬性將調用的函數。這個函數為修改Tween 對象提供了一個機會來改變設置中得屬性值。
complete：在動畫完成時執行的函數

簡單用法：

<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>開始動畫</button>
<p>默認情況下，所有 HTML 元素的位置都是靜態的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。</p>
<div id="div" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

916-19.gif

jQuery animate() - 使用相對值

<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>開始動畫</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

916-20.gif

jQuery animate() - 使用預定義的值
甚至可以把屬性的動畫值設置為 "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() - 使用隊列功能
默認地，jQuery 提供針對動畫的隊列功能。
這意味著如果您在彼此之后編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的“內部”隊列。然后逐一運行這些 animate 調用。

<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>開始動畫</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>開始動畫</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

916-23.gif

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

6、如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？

HTML內容與內部文本內容的區別，相當于原生 JS 中的innerText與innerHTML的區別。
innerText返回元素內包含的文本內容，在多層次的時候會按照元素由淺到深的順序拼接其內容。
innerHTML回元素的HTML結構，在寫入的時候也會自動構建DOM。
JQuery與之對應的兩個方法是text() 和 html()

獲取內容

$(".box").html() //獲取元素內部的html內容，類似于innerHTML
$(".box").text() //獲取元素內部的text文本，類似于innerText

設置內容

$(".box").html("<p>設置了一個段落</p>")//設置了元素內部的html內容,標簽生效
$(".box").text("設置了一個文本")//設置了元素內部的text文本，標簽不生效

text()、html() 的回調函數
上面的兩個 jQuery 方法：text()、html() （以及下邊提到的val())，擁有回調函數?；卣{函數由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數新值返回您希望使用的字符串。如：

<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

注意第二次點擊把新增的<b></b>丟掉了

7、如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？

設置/獲取表單內容

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

如：

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

與上邊 text()、html()類似 val()同樣可擁有回調函數

設置/獲取元素屬性

.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"
  });

回調函數用法.attr( attributeName, function(index, attr) )
jQuery 方法 attr()，也提供回調函數。回調函數由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數新值返回您希望使用的字符串。

<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()
為匹配的元素集合中的每個元素中移除一個屬性（attribute）
.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函數,但是它的優點是可以直接在一個 jQuery 對象上調用該方法，并且它解決了跨瀏覽器的屬性名不同的問題。

$('div').removeAttr('id');

增加/刪除DOM元素

創建元素
只需要把DOM字符串傳入$方法即可返回一個jQuery對象

var obj = $('<div class="test"><p><span>Done</span></p></div>');

添加元素

.append(content[,content]) / .append(function(index,html))
可以一次添加多個內容，內容可以是DOM對象、HTML string、 jQuery對象。
如果參數是function，function可以返回DOM對象、HTML string、 jQuery對象，參數是集合中的元素位置與原來的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)
把對象插入到目標元素尾部，目標元素可以是selector, DOM對象, HTML string, 元素集合, jQuery對象;

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

.prepend(content[,content]) / .prepend(function(index,html))
向對象頭部追加內容，用法和append類似，內容添加到最開始

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

.prependTo(target)
把對象插入到目標元素頭部，用法和prepend類似

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

.before([content][,content]) / .before(function)
在對象前面(不是頭部，而是外面，和對象并列同級)插入內容，參數和append類似

$( ".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)
把對象插入到target之前（同樣不是頭部，是同級）

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

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

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

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

$( "<p>Test</p>" ).insertAfter( ".inner" );
$( "p" ).insertAfter( "#foo" );

刪除元素

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

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

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

$('body').empty();

.detach()
detach() 方法移除被選元素，包括所有文本和子節點。這個方法會保留 jQuery 對象中的匹配的元素，因而可以在將來再使用這些匹配的元素。
detach() 會保留所有綁定的事件、附加的數據，這一點與 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

特別用法：移動元素

<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>移動 p 元素</button>

916-27.gif

特別用法：恢復元素

<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>這是一個段落。</p>
<button id="btn1">刪除 p 元素</button>
<button id="btn2">恢復 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>在本段落移動之后，試著點擊該段落，請注意它保留了 click 事件。</p>
<button>移動 p 元素</button>

916-29.gif

包裹元素

wrap(wrappingElement) / .wrap(function(index))
為每個對象包裹一層HTML結構，可以是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>" );
//結果
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapAll(wrappingElement)
把所有匹配對象包裹在同一個HTML結構

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
//包裹元素
$( ".inner" ).wrapAll( "<div class='new' />");
//結果
    <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>");
//結果
<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

JQuery：https://zh-yang.github.io/resume/task2-14/taskII-14-8.html
純CSS：https://zh-yang.github.io/resume/task2-14/taskII-14-8(1).html

9、事件綁定

JQuery：https://zh-yang.github.io/resume/task2-14/taskII-14-9.html

10、事件代理

JQuery：https://zh-yang.github.io/resume/task2-14/taskII-14-10.html

11、tab切換/滑動

JQuery：https://zh-yang.github.io/resume/task2-14/taskII-14-11.html

最后編輯于：2017.12.10 11:22:59

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 230,825評論 6贊 546
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 99,814評論 3贊 429
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
開封第一講書人閱讀 178,980評論 0贊 384
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 64,064評論 1贊 319
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,779評論 6贊 414
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 56,109評論 1贊 330
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 44,099評論 3贊 450
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 43,287評論 0贊 291
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,799評論 1贊 338
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,515評論 3贊 361
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,750評論 1贊 375
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 39,221評論 5贊 365
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,933評論 3贊 351
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,327評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,667評論 1贊 296
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,492評論 3贊 400
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,703評論 2贊 380

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

你必須知道的JQuery

你必須知道的JQuery

1、 jQuery 能做什么？

2、 jQuery 對象和 DOM 原生對象有什么區別？如何轉化？

區別：

轉化方法：

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

JQuery中如何綁定事件

JQuery中如何解除綁定事件

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

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

基礎的展示/隱藏

漸變的展示/隱藏 fade

滑動的展示/隱藏 slide

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

5、 jQuery 動畫如何使用？

6、如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？

7、如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？

設置/獲取表單內容

設置/獲取元素屬性

增加/刪除DOM元素

代碼展示

8、tab

9、事件綁定

10、事件代理

11、tab切換/滑動

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

你必須知道的JQuery

1、 jQuery 能做什么？

2、 jQuery 對象和 DOM 原生對象有什么區別？如何轉化？

區別：

轉化方法：

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

JQuery中如何綁定事件

JQuery中如何解除綁定事件

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

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

基礎的展示/隱藏

漸變的展示/隱藏 fade

滑動的展示/隱藏 slide

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

5、 jQuery 動畫如何使用？

6、如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？

7、如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？

設置/獲取表單內容

設置/獲取元素屬性

增加/刪除DOM元素

代碼展示

8、tab

9、事件綁定

10、事件代理

11、tab切換/滑動

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

1、 jQuery 能做什么？

2、 jQuery 對象和 DOM 原生對象有什么區別？如何轉化？

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

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

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

5、 jQuery 動畫如何使用？

6、如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？

7、如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？

8、tab

9、事件綁定

11、tab切換/滑動