什么是 jQuery ？

jQuery是一個(gè)JavaScript函數(shù)庫(kù)。
jQuery是一個(gè)輕量級(jí)的"寫的少，做的多"的JavaScript庫(kù)。
jQuery庫(kù)包含以下功能：
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數(shù)
JavaScript 特效和動(dòng)畫
HTML DOM 遍歷和修改
AJAX
Utilities
提示： 除此之外，Jquery還提供了大量的插件。

jQuery 語法

jQuery 語法是通過選取 HTML 元素，并對(duì)選取的元素執(zhí)行某些操作

基礎(chǔ)語法： $(selector).action()

$ 美元符號(hào)定義 jQuery
選擇符（selector）"查詢"和"查找" HTML 元素
jQuery 的 action() 執(zhí)行對(duì)元素的操作

實(shí)例:

• $(this).hide() 隱藏當(dāng)前元素
• $("p").hide() 隱藏所有 <p> 元素
• $("p.test").hide() 隱藏所有 class="test" 的 <p> 元素
• $("#test").hide() 隱藏所有 id="test" 的元素

jQuery 入口函數(shù) 和 JavaScript 入口函數(shù)

jQuery 入口函數(shù)

$(document).ready(function(){
    // 執(zhí)行代碼
});
或者
$(function(){
    // 執(zhí)行代碼
});

JavaScript 入口函數(shù)

window.onload = function () {
    // 執(zhí)行代碼
}

兩者區(qū)別

• jQuery 的入口函數(shù)是在 html 所有標(biāo)簽(DOM)都加載之后，就會(huì)去執(zhí)行。

• JavaScript 的 window.onload 事件是等到所有內(nèi)容，包括外部圖片之類的文件加載完后，才會(huì)執(zhí)行。

  
  
  image.png

jQuery 選擇器

• jQuery 選擇器允許對(duì) HTML 元素組或單個(gè)元素進(jìn)行操作。
• jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它
  基于已經(jīng)存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。
• jQuery 中所有選擇器都以美元符號(hào)開頭：$()。

元素選擇器

jQuery 元素選擇器基于元素名選取元素。

在頁面中選取所有 <p> 元素:

$("p")

實(shí)例: 用戶點(diǎn)擊按鈕后，所有 <p> 元素都隱藏：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

#id 選擇器

• jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
• 頁面中元素的 id 應(yīng)該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
  通過 id 選取元素語法如下:

$("#test")

實(shí)例: 當(dāng)用戶點(diǎn)擊按鈕后，有 id="test" 屬性的元素將被隱藏：

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

.class 選擇器

• jQuery 類選擇器可以通過指定的 class 查找元素。
  語法如下：

$(".test")

實(shí)例: 用戶點(diǎn)擊按鈕后所有帶有 class="test" 屬性的元素都隱藏：

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

更多實(shí)例

| 語法                                | 描述
| $("*")                              | 選取所有元素
| $(this)                             | 選取當(dāng)前 HTML 元素
| $("p.intro")                        | 選取 class 為 intro 的 <p> 元素 
| $("p:first")                        | 選取第一個(gè) <p> 元素 
| $("ul li:first")                    | 選取第一個(gè) <ul> 元素的第一個(gè) <li> 元素
| $("ul li:first-child")              | 選取每個(gè) <ul> 元素的第一個(gè) <li> 元素
| $("[href]")                         | 選取帶有 href 屬性的元素 
| $("a[target='_blank']")             | 選取所有 target 屬性值等于 "_blank" 的 <a> 元素
| $("a[target!='_blank']")            | 選取所有 target 屬性值不等于 "_blank" 的 <a> 元素
| $(":button")                        | 選取所有 type="button" 的 <input> 元素 和 <button> 元素
| $("tr:even")                        | 選取偶數(shù)位置的 <tr> 元素
| $("tr:odd")                         | 選取奇數(shù)位置的 <tr> 元素 

jQuery 事件

什么是事件？

• 頁面對(duì)不同訪問者的響應(yīng)叫做事件。
• 事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時(shí)所調(diào)用的方法。

實(shí)例：

• 在元素上移動(dòng)鼠標(biāo)。
• 選取單選按鈕
• 點(diǎn)擊元素

常用的 jQuery 事件方法

click()

click() 方法是當(dāng)按鈕點(diǎn)擊事件被觸發(fā)時(shí)會(huì)調(diào)用一個(gè)函數(shù)。
該函數(shù)在用戶點(diǎn)擊 HTML 元素時(shí)執(zhí)行。
在下面的實(shí)例中，當(dāng)點(diǎn)擊事件在某個(gè) <p> 元素上觸發(fā)時(shí)，隱藏當(dāng)前的 <p> 元素：

$("p").click(function(){
  $(this).hide();
});

dblclick()

• 當(dāng)雙擊元素時(shí)，會(huì)發(fā)生 dblclick 事件。
  dblclick() 方法觸發(fā) dblclick 事件，或規(guī)定當(dāng)發(fā)生 dblclick 事件時(shí)運(yùn)行的函數(shù)：

$("p").dblclick(function(){
  $(this).hide();
});

mouseleave()

• 當(dāng)鼠標(biāo)指針離開元素時(shí)，會(huì)發(fā)生 mouseleave 事件。
  mouseleave() 方法觸發(fā) mouseleave 事件，或規(guī)定當(dāng)發(fā)生 mouseleave 事件時(shí)運(yùn)行的函數(shù):

$("#p1").mouseleave(function(){
    alert("再見，您的鼠標(biāo)離開了該段落。");
});

mousedown()

• 當(dāng)鼠標(biāo)指針移動(dòng)到元素上方，并按下鼠標(biāo)按鍵時(shí)，會(huì)發(fā)生 mousedown 事件。
  mousedown() 方法觸發(fā) mousedown 事件，或規(guī)定當(dāng)發(fā)生 mousedown 事件時(shí)運(yùn)行的函數(shù)：

$("#p1").mousedown(function(){
    alert("鼠標(biāo)在該段落上按下！");
});

mouseup()

• 當(dāng)在元素上松開鼠標(biāo)按鈕時(shí)，會(huì)發(fā)生 mouseup 事件。
  mouseup() 方法觸發(fā) mouseup 事件，或規(guī)定當(dāng)發(fā)生 mouseup 事件時(shí)運(yùn)行的函數(shù)：

$("#p1").mouseup(function(){
    alert("鼠標(biāo)在段落上松開。");
});

hover()

• hover()方法用于模擬光標(biāo)懸停事件。
  當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)(mouseenter);當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)(mouseleave)。

$("#p1").hover(
    function(){
        alert("你進(jìn)入了 p1!");
    },
    function(){
        alert("拜拜! 現(xiàn)在你離開了 p1!");
    }
);

focus()

• 當(dāng)元素獲得焦點(diǎn)時(shí)，發(fā)生 focus 事件。
• 當(dāng)通過鼠標(biāo)點(diǎn)擊選中元素或通過 tab 鍵定位到元素時(shí)，該元素就會(huì)獲得焦點(diǎn)。
  focus() 方法觸發(fā) focus 事件，或規(guī)定當(dāng)發(fā)生 focus 事件時(shí)運(yùn)行的函數(shù)：

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur()

• 當(dāng)元素失去焦點(diǎn)時(shí)，發(fā)生 blur 事件。
  blur() 方法觸發(fā) blur 事件，或規(guī)定當(dāng)發(fā)生 blur 事件時(shí)運(yùn)行的函數(shù)：

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

jQuery 獲取內(nèi)容和屬性

• jQuery 擁有可操作 HTML 元素和屬性的強(qiáng)大方法。

jQuery DOM 操作

• jQuery 中非常重要的部分，就是操作 DOM 的能力。
• jQuery 提供一系列與 DOM 相關(guān)的方法，這使訪問和操作元素和屬性變得很容易。

獲得內(nèi)容 - text()、html() 以及 val()

三個(gè)簡(jiǎn)單實(shí)用的用于 DOM 操作的 jQuery 方法：

• text() - 設(shè)置或返回所選元素的文本內(nèi)容
• html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
• val() - 設(shè)置或返回表單字段的值

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("值為: " + $("#test").val());
});

獲取屬性 - attr()

• jQuery attr() 方法用于獲取屬性值。
  下面的例子演示如何獲得鏈接中 href 屬性的值：

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

attr 和 prop 的區(qū)別介紹：

• 對(duì)于 HTML 元素本身就帶有的固有屬性，在處理時(shí)，使用 prop 方法。
• 對(duì)于 HTML 元素我們自己自定義的 DOM 屬性，在處理時(shí)，使用 attr 方法。

<a target="_self" class="btn">菜鳥教程</a>

• 以上這個(gè)例子里 <a> 元素的 DOM 屬性有: href、target 和 class，這些屬性就是 <a> 元素本身就帶有的屬性，也是 W3C 標(biāo)準(zhǔn)里就包含有這幾個(gè)屬性，或者說在 IDE 里能夠智能提示出的屬性，這些就叫做固有屬性。處理這些屬性時(shí)，建議使用 prop 方法。

<a href="#" id="link1" action="delete" rel="nofollow">刪除</a>

• 以上這個(gè)例子里 <a> 元素的 DOM 屬性有: href、id 和 action，很明顯，前兩個(gè)是固有屬性，而后面一個(gè) action 屬性是我們自己自定義上去的，<a> 元素本身是沒有這個(gè)屬性的。這種就是自定義的 DOM 屬性。處理這些屬性時(shí)，建議使用 attr 方法。

prop()函數(shù)的結(jié)果:

• 如果有相應(yīng)的屬性，返回指定屬性值。
• 2.如果沒有相應(yīng)的屬性，返回值是空字符串。

attr()函數(shù)的結(jié)果:

• 如果有相應(yīng)的屬性，返回指定屬性值。
• 如果沒有相應(yīng)的屬性，返回值是 undefined。

對(duì)于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。
對(duì)于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用 attr 方法。
具有 true 和 false 兩個(gè)屬性的屬性，如 checked, selected 或者 disabled 使用prop()

設(shè)置內(nèi)容 text()、html() 以及 val()

• text() - 設(shè)置或返回所選元素的文本內(nèi)容
• html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
• val() - 設(shè)置或返回表單字段的值

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

text()、html() 以及 val() 的回調(diào)函數(shù)

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "舊 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

設(shè)置屬性 - attr()

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

//同時(shí)設(shè)置多個(gè)值
$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

attr() 的回調(diào)函數(shù)

$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

jQuery - 添加元素

添加新的 HTML 內(nèi)容

• append() - 在被選元素的結(jié)尾插入內(nèi)容
• prepend() - 在被選元素的開頭插入內(nèi)容
• after() - 在被選元素之后插入內(nèi)容
• before() - 在被選元素之前插入內(nèi)容

jQuery append() 方法

//jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容（仍然該元素的內(nèi)部）。
$("p").append("追加文本");

jQuery prepend() 方法

//jQuery prepend() 方法在被選元素的開頭插入內(nèi)容。
$("p").prepend("在開頭追加文本");

//三個(gè)運(yùn)行的結(jié)果是一樣的
function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 標(biāo)簽創(chuàng)建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 創(chuàng)建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 創(chuàng)建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

區(qū)別

append/prepend 是在選擇元素內(nèi)部嵌入。
after/before 是在元素外面追加。

jQuery 刪除元素

• remove() - 刪除被選元素（及其子元素）
• empty() - 從被選元素中刪除子元素

remove() 方法

//jQuery remove() 方法刪除被選元素及其子元素。
$("#div1").remove();

empty() 方法

//jQuery empty() 方法刪除被選元素的子元素。
$("#div1").empty();

過濾被刪除的元素

• jQuery remove() 方法也可接受一個(gè)參數(shù)，允許您對(duì)被刪元素進(jìn)行過濾。
• 該參數(shù)可以是任何 jQuery 選擇器的語法。
  下面的例子刪除 class="italic" 的所有 <p> 元素：

$("p").remove(".italic");

jQuery 尺寸

jQuery 提供多個(gè)處理尺寸的重要方法：

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

jQuery width() 和 height() 方法

1、width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）。
2、height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）。
//下面的例子返回指定的 <div> 元素的寬度和高度：
//實(shí)例
$("button").click(function(){
  var txt="";
  txt+="div 的寬度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

jQuery innerWidth() 和 innerHeight() 方法

1、innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）。
2、innerHeight() 方法返回元素的高度（包括內(nèi)邊距）
//下面的例子返回指定的 <div> 元素的 inner-width/height：
//實(shí)例
$("button").click(function(){
  var txt="";
  txt+="div 寬度，包含內(nèi)邊距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含內(nèi)邊距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

jQuery outerWidth() 和 outerHeight() 方法

1、outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）。
2、outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）。
//下面的例子返回指定的 <div> 元素的 outer-width/height：
//實(shí)例
$("button").click(function(){
  var txt="";
  txt+="div 寬度，包含內(nèi)邊距和邊框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含內(nèi)邊距和邊框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});