你必須知道的JQuery

1拌阴、 jQuery 能做什么兽泣？

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

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

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

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

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

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

區(qū)別：

  • DOM原生對象：
    是對象；
    擁有原生對象的屬性和方法袱耽；
  • JQuery對象：
    是DOM元原生對象經(jīng)過包裝之后杀餐，擁有jQuery的屬性和方法（對原生DOM對象的封裝）；
    是類數(shù)組扛邑；

轉(zhuǎn)化方法：

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

3沥阳、jQuery中如何綁定事件跨琳？bind、unbind桐罕、delegate脉让、live、on功炮、off都有什么作用溅潜？推薦使用哪種？使用on綁定事件使用事件代理的寫法薪伏？

JQuery事件是DOM事件的封裝滚澜，同時支持自定義的擴展。在程序設(shè)計中嫁怀，事件和代理有著相似的作用： 它們提供了一種機制设捐，使得行為的實現(xiàn)方式和調(diào)用時機可以分離。
不談jQuery塘淑，DOM本身就提供了一系列的javascript事件萝招，例如click，keyup存捺，submit槐沼。
為實現(xiàn)相關(guān)業(yè)務(wù)邏輯，通常會為這些事件定義一系列的處理函數(shù)，處理函數(shù)定義了業(yè)務(wù)的實現(xiàn)方式母赵，而瀏覽器知道這些業(yè)務(wù)的調(diào)用時機逸爵。 Javascript事件就是這樣一種機制，使得行為的實現(xiàn)方式和調(diào)用時機可以動態(tài)地綁定凹嘲。
jQuery事件是通過封裝javascript事件來實現(xiàn)的师倔，例如.keyup()便onkeyup
的封裝。
除了封裝大多數(shù)的javascript事件周蹭，jQuery提供了統(tǒng)一的事件綁定和觸發(fā)機制：

  • 綁定事件：bind趋艘、on、live凶朗、delegate瓷胧、keyup(<function>)；
  • 觸發(fā)事件：trigger('keyup')棚愤、keyup()搓萧；
  • 解綁事件：unbind、off宛畦、die瘸洛、undelegate。

JQuery中如何綁定事件

  • bind

$(selector).bind(event,data,function)參數(shù)含義
event:事件類型次和，如click反肋、change、mouseover等;
data:傳入監(jiān)聽函數(shù)的參數(shù)踏施，通過event.data取到石蔗。可選;
function:監(jiān)聽函數(shù)畅形，可傳入event對象养距，這里的event是jQuery封裝的event對象，與原生的event對象有區(qū)別日熬，使用時需要注意棍厌。

用法一：基本用法：$(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
    可以用來實現(xiàn)事件代理碍遍；它將事件處理函數(shù)綁定在指定的根元素上， 由于事件會冒泡阳液，它用來處理指定的子元素上的事件怕敬。

$(selector).delegate(childSelector,event,data,function)參數(shù)：
childSelector:必須。附加事件處理程序的一個或多個子元素帘皿。
event:必須东跪。附加到元素的一個或多個事件。
data:可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)虽填。
function:必需丁恭。當事件發(fā)生時運行的函數(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>這是一個段落斋日。</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

用法三：向尚未創(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>這是一個新段落。</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稍顯復雜飒赃，但它的功能非常強大：
自動綁定動態(tài)添加的元素蜗帜。因為事件處理函數(shù)綁定在#root上涣雕，新加的子元素事件也會冒泡到#root。
性能好于.bind()荔烧。只綁定一個事件處理函數(shù)兑徘，綁定速度相當快刚盈。

  • live

$(selector).live(event,data,function)參數(shù)含義
event:事件類型，如click挂脑、change藕漱、mouseover等;
data:傳入監(jiān)聽函數(shù)的參數(shù)，通過event.data取到崭闲±吡可選;
function:監(jiān)聽函數(shù)，可傳入event對象

用法一：基本用法$(selector).live(event,function)
　　〉蠹蟆：data用法$(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

用法二：向尚未創(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>這是一個段落。</p>
<p>點擊任意 p 元素會令其消失牍戚。包括本段落侮繁。</p>
<button>在本按鈕后面插入新的 p 元素</button>
<p><b>注釋：</b>通過使用 live() 方法而不是 bind() 方法，新的 p 元素同樣會在點擊時消失如孝。</p>
916-08.gif
  • on

$(selector).on( events ,selector ,data ,function )
events（必需）：一個或多個空格分隔的事件類型和可選的命名空間宪哩，或僅僅是命名空間，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
selector（可選）：一個選擇器字符串第晰，用于過濾出被選中的元素中能觸發(fā)事件的后代元素锁孟。如果選擇器是 null 或者忽略了該選擇器彬祖，那么被選中的元素總是能觸發(fā)事件
data（可選）：當一個事件被觸發(fā)時，要傳遞給事件處理函數(shù)的event.data
function（必需）：事件被觸發(fā)時品抽，執(zhí)行的函數(shù)储笑。若該函數(shù)只是要執(zhí)行return false的話，那么該參數(shù)位置可以直接簡寫成 false

用法一：基本用法$(selector).on( events ,function )
　　≡残簟：data用法$(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)規(guī)定要刪除的事件對象窄陡。
$(selector).unbind(event,function)規(guī)定從指定事件上刪除一個或多個事件處理程序。

用法一：刪除某個事件$(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框函數(shù)</button>
916-12.gif
  • die（用法和unbind相似们镜，用來解除live綁定的事件）

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

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

$(selector).undelegate(selector,event,function)的參數(shù)：
selector 可選模狭。規(guī)定需要刪除事件處理程序的選擇器颈抚。
event 可選。規(guī)定需要刪除處理函數(shù)的一個或多個事件類型嚼鹉。
function 可選贩汉。規(guī)定要刪除的具體事件處理函數(shù)。

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

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

$(selector).off( event , selector , function )參數(shù)
event 可選锚赤。規(guī)定需要刪除處理函數(shù)的一個或多個事件類型匹舞。
selector 可選。規(guī)定需要刪除事件處理程序的選擇器线脚。
function 可選赐稽。規(guī)定要刪除的具體事件處理函數(shù)。

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

事實上浑侥，.on()才是jQuery事件的提供者姊舵。其他的事件綁定方法都是通過.on()來實現(xiàn)的，請看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()來實現(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:為一個元素綁定一個事件處理程序括丁，在jQuery 3.0版本中，標記為棄用零如。
  • unbind:用來解除bind方法綁定的事件躏将。同樣，在jQuery 3.0版本中考蕾，標記為棄用祸憋。
  • live：附加一個事件處理器到匹配目前選擇器的所有元素，現(xiàn)在和未來肖卧。
    這種方法是將頁面的document元素作為事件代理元素蚯窥，太消耗資源，已經(jīng)過時塞帐。在新版本中推薦用.on()方法拦赠，即時在舊版本中，也推薦使用.delegate()方法來取代.live()方法葵姥。
  • delegate：為所有匹配選擇器（selector參數(shù)）的元素綁定一個處理器到一個或多個事件荷鼠，現(xiàn)在或?qū)恚?基于根元素的一個特定的組。
    在jQuery 3.0中榔幸，.delegate()也已被標記為棄用允乐。
    delegate方法比live方法好在能指定事件代理元素。削咆。
  • on：在選定的元素上綁定一個或多個事件處理函數(shù)牍疏。
    從jQuery1.7開始，.on()方法提供了事件處理的所有功能拨齐。所以鳞陨，為了統(tǒng)一和方便，推薦使用.on()方法作為綁定事件的方法瞻惋。
  • off:用來移除用.on()方法綁定的事件厦滤。

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

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

  • .hide(duration ,easing, complete)

用于隱藏元素馁害，沒有參數(shù)時等同于設(shè)置display屬性.css('display', 'none')
duration（可選）：動畫持續(xù)多久
easing（可選）：表示過渡使用哪種緩動函數(shù)，jQuery自身提供"linear" 和 "swing"
complete（可選）：在動畫完成時執(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>點擊我蹂匹，我會消失碘菜。</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()方法履植。哪一個被調(diào)用取決于傳遞的參數(shù)的設(shè)置
用來切換元素的隱藏计雌、顯示，類似于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)
    通過淡入的方式顯示匹配元素翁脆，參數(shù)含義和上面相同

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

  • .fadeTo( duration, opacity , easing, complete )
    調(diào)整匹配元素的透明度眷蚓，方法通過匹配元素的不透明度做動畫效果。
    第一反番、二個參數(shù)必須沙热，第一個參數(shù)設(shè)置無意義時會取默認時間；第二個參數(shù)設(shè)置透明度罢缸。

以上三個綜合舉例：

<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 )
    通過匹配的元素的不透明度動畫篙贸，來顯示或隱藏它們，方法執(zhí)行匹配元素的不透明度動畫枫疆。當被可見元素調(diào)用時爵川，元素不透明度一旦達到0，display樣式屬性設(shè)置為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 樣式屬性被設(shè)置為none澡匪，以確保該元素不再影響頁面布局。 display 樣式屬性將被設(shè)置為none褒链，以確保該元素不再影響頁面布局唁情。

  • .slideToggle( duration , easing , complete )
    用滑動動畫顯示或隱藏一個匹配元素，方法將給匹配元素的高度的動畫甫匹，這會導致頁面中甸鸟，在這個元素下面的內(nèi)容往下或往上滑。display屬性值保存在jQuery的數(shù)據(jù)緩存中兵迅，所以display可以方便以后可以恢復到其初始值抢韭。
    如果一個元素的display屬性值為inline，然后是隱藏和顯示恍箭，這個元素將再次顯示inline刻恭。當一個隱藏動畫后，高度值達到0的時候扯夭，display 樣式屬性被設(shè)置為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()方法用于創(chuàng)建自定義動畫：

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

  • 簡單用法：
<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 元素的位置都是靜態(tài)的把兔，并且無法移動。如需對位置進行操作瓮顽，記得首先把元素的 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() - 使用相對值
<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() - 使用預(yù)定義的值
    甚至可以把屬性的動畫值設(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() - 使用隊列功能
    默認地缕贡，jQuery 提供針對動畫的隊列功能。
    這意味著如果您在彼此之后編寫多個 animate() 調(diào)用拣播，jQuery 會創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊列晾咪。然后逐一運行這些 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>開始動畫</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、如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容泪勒？如何設(shè)置和獲取元素內(nèi)部文本昼蛀？

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

  • 獲取內(nèi)容
$(".box").html() //獲取元素內(nèi)部的html內(nèi)容，類似于innerHTML
$(".box").text() //獲取元素內(nèi)部的text文本怕轿，類似于innerText
  • 設(shè)置內(nèi)容
$(".box").html("<p>設(shè)置了一個段落</p>")//設(shè)置了元素內(nèi)部的html內(nèi)容,標簽生效
$(".box").text("設(shè)置了一個文本")//設(shè)置了元素內(nèi)部的text文本偷崩，標簽不生效
  • text()辟拷、html() 的回調(diào)函數(shù)
    上面的兩個 jQuery 方法：text()、html() （以及 下邊提到的val())阐斜，擁有回調(diào)函數(shù)衫冻。回調(diào)函數(shù)由兩個參數(shù)：被選元素列表中當前元素的下標谒出，以及原始（舊的）值隅俘。然后以函數(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

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

7笤喳、如何設(shè)置和獲取表單用戶輸入或者選擇的內(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()類似 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ù)由兩個參數(shù)：被選元素列表中當前元素的下標膳凝，以及原始（舊的）值。然后以函數(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()
    為匹配的元素集合中的每個元素中移除一個屬性（attribute）
    .removeAttr() 方法使用原生的 JavaScript removeAttribute() 函數(shù),但是它的優(yōu)點是可以直接在一個 jQuery 對象上調(diào)用該方法蹬音，并且它解決了跨瀏覽器的屬性名不同的問題。
$('div').removeAttr('id');

增加/刪除DOM元素

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

.append(content[,content]) / .append(function(index,html))
可以一次添加多個內(nèi)容休玩，內(nèi)容可以是DOM對象祟绊、HTML string、 jQuery對象哥捕。
如果參數(shù)是function牧抽，function可以返回DOM對象、HTML string遥赚、 jQuery對象扬舒，參數(shù)是集合中的元素位置與原來的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))
向?qū)ο箢^部追加內(nèi)容凫佛，用法和append類似讲坎，內(nèi)容添加到最開始

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

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

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

.before([content][,content]) / .before(function)
在對象前面(不是頭部愧薛，而是外面晨炕，和對象并列同級)插入內(nèi)容，參數(shù)和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相反瓮栗，在對象后面(不是尾部，而是外面，和對象并列同級)插入內(nèi)容费奸，參數(shù)和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()
清空被選擇元素內(nèi)所有子元素

$('body').empty();

.detach()
detach() 方法移除被選元素愿阐，包括所有文本和子節(jié)點微服。這個方法會保留 jQuery 對象中的匹配的元素，因而可以在將來再使用這些匹配的元素缨历。
detach() 會保留所有綁定的事件以蕴、附加的數(shù)據(jù)，這一點與 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結(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)
把所有匹配對象包裹在同一個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切換/滑動

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末嗓蘑，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子匿乃，更是在濱河造成了極大的恐慌桩皿，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,311評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件幢炸，死亡現(xiàn)場離奇詭異泄隔，居然都是意外死亡，警方通過查閱死者的電腦和手機宛徊，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門佛嬉，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人闸天，你說我怎么就攤上這事暖呕。” “怎么了苞氮？”我有些...
    開封第一講書人閱讀 152,671評論 0贊 342
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵湾揽，是天一觀的道長。 經(jīng)常有香客問我，道長钝腺，這世上最難降的妖魔是什么抛姑？ 我笑而不...
    開封第一講書人閱讀 55,252評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮艳狐，結(jié)果婚禮上定硝，老公的妹妹穿的比我還像新娘。我一直安慰自己毫目，他們只是感情好蔬啡，可當我...
    茶點故事閱讀 64,253評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著镀虐，像睡著了一般箱蟆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上刮便，一...
    開封第一講書人閱讀 49,031評論 1贊 285
  • 城市分裂傳說
    那天空猜，我揣著相機與錄音，去河邊找鬼恨旱。 笑死辈毯，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的搜贤。 我是一名探鬼主播谆沃，決...
    沈念sama閱讀 38,340評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼仪芒！你這毒婦竟也來了唁影？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 36,973評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤掂名，失蹤者是張志新（化名）和其女友劉穎据沈，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體饺蔑，經(jīng)...
    沈念sama閱讀 43,466評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡卓舵，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了膀钠。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片掏湾。...
    茶點故事閱讀 38,039評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖肿嘲，靈堂內(nèi)的尸體忽然破棺而出融击，到底是詐尸還是另有隱情，我是刑警寧澤雳窟，帶...
    沈念sama閱讀 33,701評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布尊浪，位于F島的核電站匣屡，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏拇涤。R本人自食惡果不足惜捣作，卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望鹅士。 院中可真熱鬧券躁，春花似錦、人聲如沸掉盅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽趾痘。三九已至慢哈，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間永票，已是汗流浹背卵贱。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留侣集，地道東北人键俱。 一個月前我還...
    沈念sama閱讀 45,497評論 2贊 354
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像肚吏，于是被迫代替她去往敵國和親方妖。 傳聞我的和親對象是個殘疾皇子狭魂，可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2贊 345

推薦閱讀更多精彩內(nèi)容

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