jQuery

jQuery就是JS的一個擴展庫，工具庫，提供很多方便快捷的方法，所以將JS對象轉(zhuǎn)換為jQuery對象后，能更方便地操作這個對象。

jQuery 能做什么？

選擇網(wǎng)頁元素（HTML 元素選?。?/li>
改變結(jié)果集（HTML 元素操作、CSS 操作）

工具方法（HTML DOM 遍歷和修改）

事件操作（HTML 事件函數(shù)）

特殊效果（特效和動畫）

AJAX

http://devdocs.io/jquery/

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

聯(lián)系

jQuery對象：通過jQuery包裝DOM對象后產(chǎn)生的對象；
兩者之間可以相互轉(zhuǎn)換；

區(qū)別

jquery選擇器得到的jquery對象和標準的 javascript中的document.getElementById()取得的dom對象是兩種不同的對象類型，兩者不等價；
jQuery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery里的方法. 亂使用會報錯；

聯(lián)系

jQuery對象：通過jQuery包裝DOM對象后產(chǎn)生的對象；
兩者之間可以相互轉(zhuǎn)換；

相互轉(zhuǎn)換：

jQuery對象轉(zhuǎn)成DOM對象---兩種轉(zhuǎn)換方式：[index]和.get(index)

jQuery對象是一個數(shù)據(jù)對象，通過[index]的方法

如：var $v = $("#v") ;    //jQuery對象
var v = $v[0]; //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中

jQuery本身提供，通過.get(index)方法

如：var $v = $("#v"); //jQuery對象
var v = $v.get(0); //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中

DOM對象轉(zhuǎn)成jQuery對象:

對于DOM對象，只需用$()把DOM對象包裝起來，就可得到jQuery對象
如：var v=document.getElementById("v"); //DOM對象
var $v=$(v); //jQuery對象

jQuery中如何綁定事件？(bind、unbind、delegate、live、on、off)

以下為綁定事件方法的優(yōu)選排序

1. on(events,[selector],[data],fn)

events:一個或多個用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。
selector:一個選擇器字符串用于過濾器的觸發(fā)事件的選擇器元素的后代。如果選擇的< null或省略，當它到達選定的元素，事件總是觸發(fā)。
data:當一個事件被觸發(fā)時要傳遞event.data給事件處理函數(shù)。
fn:該事件被觸發(fā)時執(zhí)行的函數(shù)。 false 值也可以做一個函數(shù)的簡寫，返回false。

在選擇元素上綁定一個或多個事件的事件處理函數(shù)。

//Display a paragraph's text in an alert when it is clicked:
$("p").on("click", function(){
alert( $(this).text() );
});

2 off(events,[selector],[fn])

events:一個或多個空格分隔的事件類型和可選的命名空間，或僅僅是命名空間，比如"click", "keydown.myPlugin", 或者 ".myPlugin".
selector:一個最初傳遞到.on()事件處理程序附加的選擇器。
fn:事件處理程序函數(shù)以前附加事件上，或特殊值false.

在選擇元素上移除一個或多個事件的事件處理函數(shù)。
off() 方法移除用.on()綁定的事件處理程序。
特定的事件處理程序可以被移除元素上提供事件的名稱，命名空間，選擇器，或處理函數(shù)名稱的組合。當有多個過濾參數(shù)，所提供的參數(shù)都必須匹配的事件處理程序被刪除。

//Remove all event handlers from all paragraphs:
$("p").off()

//Remove all delegated click handlers from all paragraphs:
$("p").off( "click", "**" )

//Remove just one previously bound handler by passing it as the third argument:
var foo = function () {
  // code to handle some kind of event
};

// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);


// ... foo will no longer be called.
$("body").off("click", "p", foo);

jQuery中on綁定事件使用事件代理

$("div>ul">.on("click","li",function(){
  console.log($this.text())
})

3. bind(type,[data],fn)

type: 含有一個或多個事件類型的字符串，由空格分隔多個事件。比如"click"或"submit"，還可以是自定義事件名。
data:作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象
fn:綁定到每個匹配元素的事件上面的處理函數(shù)

為每個匹配元素的特定事件綁定事件處理函數(shù)。
jQuery 3.0中已棄用此方法，請用on()代替。

//當每個段落被點擊的時候，彈出其文本。
$("p").bind("click", function(){
  alert( $(this).text() );
});

//同時綁定多個事件類型
$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

4. unbind(type,[data|fn]])

type:刪除元素的一個或多個事件,由空格分隔多個事件值。
fn:要從每個匹配元素的事件中反綁定的事件處理函數(shù)

bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。
jQuery 3.0中已棄用此方法，請用off()代替。
如果沒有參數(shù)，則刪除所有綁定的事件。

//把所有段落的所有事件取消綁定
$("p").unbind()

//將段落的click事件取消綁定
$("p").unbind( "click" )

//刪除特定函數(shù)的綁定，將函數(shù)作為第二個參數(shù)傳入
var foo = function () {
  // 處理某個事件的代碼
};

$("p").bind("click", foo); // ... 當點擊段落的時候會觸發(fā) foo

5. delegate(selector,[type],[data],fn)

selector:選擇器字符串，用于過濾器觸發(fā)事件的元素。
type:附加到元素的一個或多個事件。由空格分隔多個事件值。必須是有效的事件。
fn:當事件發(fā)生時運行的函數(shù)

指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數(shù)。
jQuery 3.0中已棄用此方法，請用on()代替。
使用 delegate() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創(chuàng)建的新元素）。

//HTML :
<div style="background-color:red">
<p>這是一個段落。</p>
<button>請點擊這里</button>
</div>

//jQuery :
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

6. live(type, [data], fn)

type:一個或多個事件類型，由空格分隔多個事件。
fn:要從每個匹配元素的事件中反綁定的事件處理函數(shù)
jQuery 給所有匹配的元素附加一個事件處理函數(shù)，即使這個元素是以后再添加進來的也有效。
從 jQuery 1.7 開始，不再建議使用 .live() 方法。請使用 .on() 來添加事件處理。使用舊版本的用戶，應該優(yōu)先使用 .delegate() 來替代 .live()。


<p>Click me!</p>

//點擊生成的p依然據(jù)有同樣的功能
$("p").live("click", function(){
    $(this).after("<p>Another paragraph!</p>");
});

//阻止默認事件行為和事件冒泡，返回 false
$("a").live("click", function() { return false; });

//僅僅阻止默認事件行為
$("a").live("click", function(event){
  event.preventDefault();
});

delegate這個方法可作為live()方法的替代，使得每次事件綁定到特定的DOM元素。
以下兩段代碼是等同的:

$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
});


$("table").each(function(){
    $("td", this).live("hover", function(){
          $(this).toggleClass("hover");
    });
    
});

jQuery 展示/隱藏元素

1. hide([speed,[easing],[fn]])

speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數(shù)"linear"
fn:在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

隱藏顯示的元素

//隱藏所有段落
$("p").hide()

//用600毫秒的時間將段落緩慢的隱藏
$("p").hide("slow");

//用200毫秒將段落迅速隱藏，之后彈出一個對話框。
$("p").hide("fast",function(){
   alert("Animation Done.");
 });

2. show([speed,[easing],[fn]])

speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數(shù)"linear"
fn:在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

顯示隱藏的匹配元素。無論這個元素是通過hide()方法隱藏的還是在CSS里設置了display:none;，這個方法都將有效。

//將隱藏的段落用將近4秒的時間顯示出來。。。并在之后執(zhí)行一個反饋。。。
<p style="display: none">Hello</p>

$("p").show(4000,function(){
   $(this).text("Animation Done...");
 });

3. toggle([speed],[easing],[fn])

speed: 隱藏/顯示效果的速度。默認是 "0"毫秒?？赡艿闹担簊low，normal，fast。"
easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數(shù)"linear"
fn:在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

用于綁定兩個或多個事件處理器函數(shù)，以響應被選元素的輪流的 click 事件。
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。

//用200毫秒將段落迅速切換顯示狀態(tài)，之后彈出一個對話框。
jQuery 代碼:
$("p").toggle("fast",function(){
   alert("Animation Done.");
 });

//如果這個參數(shù)為true ，那么匹配的元素將顯示;如果false ，元素是隱藏的

jQuery 代碼:
$('#foo').toggle(showOrHide);

//相當于
if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}

jQuery 動畫demo

1. 淡入淡出

1. fadeIn([speed],[easing],[fn])

speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數(shù)"linear"
fn:在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

通過不透明度的變化來實現(xiàn)所有匹配元素的淡入效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。
這個動畫只調(diào)整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發(fā)生變化。

//用200毫秒快速將段落淡入，之后彈出一個對話框
jQuery 代碼:
("p").fadeIn("fast",function(){
   alert("Animation Done.");
 });

2. fadeOut([speed],[easing],[fn])

通過淡出的方式隱藏匹配元素,參數(shù)和用法同上

$('#book').fadeOut('slow', function() {
// Animation complete.
});

3. fadeTo([[speed],opacity,[easing],[fn]])

speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
opacity:一個0至1之間表示透明度的數(shù)字。
easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數(shù)"linear"
fn:在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

含義同上，用法如下

//用200毫秒快速將段落的透明度調(diào)整到0.25，大約1/4的可見度，之后彈出一個對話框

$("p").fadeTo("fast", 0.25, function(){
   alert("Animation Done.");
 });

4. fadeToggle([speed,[easing],[fn]])

設置淡入淡出開關(guān)，用法和含義同上

2. 滑動

1. slideDown([speed],[easing],[fn])

speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數(shù)"linear"
fn在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

通過高度變化（向下增大）來動態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)。
這個動畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。

//用200毫秒快速將段落滑下，之后彈出一個對話框

$("p").slideDown("fast",function(){
   alert("Animation Done.");
 });

2. slideUp([speed,[easing],[fn]]).

含義方法同上

用滑動動畫隱藏一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑上去，當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性將被設置為none，以確保該元素不再影響頁面布局。

3. slideToggle([speed],[easing],[fn])

設置滑動開關(guān)，含義方法同上

//用200毫秒快速將段落滑上或滑下，之后彈出一個對話框

$("p").slideToggle("fast",function(){
   alert("Animation Done.");
 });

動畫隊列

//回調(diào)地獄
$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('動畫執(zhí)行完畢')
           })
         })
       })
     })
   })
})
//等價于   鏈式調(diào)用
$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
        console.log('真的完畢了')
    })

自定義動畫

上面幾個簡單的動畫不能滿足需求的時候，jquery提供了自定義動畫行為的方法

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

官方文檔

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

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

.clearQueue

清除動畫隊列中未執(zhí)行的動畫

.finish

停止當前動畫，并清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最后一幀的最終狀態(tài)

.stop( [clearQueue ] [, jumpToEnd ] )

停止當前正在運行的動畫

clearQueue(default: false)
jumpToEnd(default: false)

設置和獲取元素內(nèi)部 HTML 內(nèi)容

.html([val|fn])

//返回p元素的內(nèi)容。
$('p').html();

//設置所有 p 元素的內(nèi)容
$("p").html("Hello <b>world</b>!");

設置和獲取元素內(nèi)部文本

.val([val|fn|arr])

獲得匹配元素的當前值。

//獲取文本框中的值
$("input").val();

//設定文本框的值
$("input").val("hello world!");

.text([val|fn])

取得所有匹配元素的內(nèi)容。
結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來的文本。這個方法對HTML和XML文檔都有效。

//返回p元素的文本內(nèi)容。
$('p').text();

//設置所有 p 元素的文本內(nèi)容
$("p").text("Hello world!");

//使用函數(shù)來設置所有匹配元素的文本內(nèi)容。
$("p").text(function(n){
    return "這個 p 元素的 index 是：" + n;
    });

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

//獲取input text輸入的內(nèi)容
$('input[type=text]').val()
//獲取radio的值
$('input[type=radio]').val()
//獲取select的值
$('select').val()
//獲取select name 屬性
$('select').attr('name')
//設置select name屬性
$('select').attr("name", "test")
$('select').attr({name: 'test'})

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

jQuery 入門