jQuery

1、jQuery概述
一、什麼是jQuery
jQuery：是一門輕量的、免費開源的JS函數庫

document.getElementById("user").value
$("#user").val();
jQuery能夠極大地簡化JS代碼
jQuery核心思想: 寫的更少,但作的更多

輕量的：一個框架或者技術對咱們項目的侵入程度是很是低的（反過來講，咱們的項目或代碼對該技術的依賴程度是很是低的）

二、jQuery優點
1)能夠極大地簡化JS代碼
2)能夠像CSS選擇器同樣獲取元素
3)能夠經過修改CSS樣式來控制頁面的效果
oDiv.style.backgroundColor = "red";
$("div").css("background-color", "red");
4)能夠兼容經常使用瀏覽器(谷歌/火狐/蘋果/歐朋)

三、如何引入jQuery
jquery-1.8.3.js: 未壓縮的(262kb),學習或研究或在項目上線以前
jquery-1.8.3.min.js: 壓縮以後的(92kb),項目上線

在head或body標籤內部添加script標籤,經過script標籤引入jQuery的函數庫文件
<!-- 引入jQuery的函數庫文件 -->
<script src="js/jquery-1.8.3.min.js"></script>

在引入jQuery函數庫文件時，若是文件引入路徑錯誤，則會致使文件引入失敗

var oDiv = jQuery("#demo");
var oDiv = $("#demo");
jQuery == $，所以,調用jQuery()函數等價於調用$()函數

四、文檔就緒事件函數
文檔就緒事件函數: 該函數會在瀏覽器加載完全部的html元素後當即執行
一、JS提供的文檔就緒函數:
window.onload = function(){
//這裏的代碼會在瀏覽器加載完全部的html元素後當即執行
}

二、jQuery提供的文檔就緒函數:
簡寫形式:
$(function(){

//這裏的代碼會在瀏覽器加載完全部的html元素後當即執行

})
完整寫法:
$(document).ready(function(){

//這裏的代碼會在瀏覽器加載完全部的html元素後當即執行

});

三、何時該用文檔就緒事件函數?
若是要獲取元素,獲取元素的代碼執行時,元素尚未被瀏覽器加載,確定是獲取不到的!
此時,能夠將獲取元素的代碼放在文檔就緒事件函數中,由於這個函數是在瀏覽器加載完全部的html元素後當即執行,此時全部元素都已經被加載了,在這個函數中獲取任何元素均可以獲取到!

只要獲取元素的代碼是在元素加載後執行,就能夠獲取(無論使用什麼方式!)

JS的和jQuery的文檔就緒事件函數，在執行時，jQuery會更快，由於jQuery會在頁面元素自己加載完就執行，若是元素裏有內容，它是不加載的。jQuery這個文檔就緒事件函數能夠寫多個，可是JS的只能寫一個。

2、jQuery選擇器
0、爲元素綁定點擊事件的幾種方式：
方式一: 在元素上經過onclick屬性爲元素綁定點擊事件
只要點擊這個元素,就會觸發點擊事件,執行testFn()函數

方式二: (JS)經過代碼獲取元素,返回的是表示該元素的JS對象,
再經過【對象.onclick】屬性爲元素綁定點擊事件。
只要點擊這個元素,就會觸發點擊事件,執行後面的function函數
var oB1 = document.getElementById("b1");
oB1.onclick = function(){
alert("JS:b1按鈕被點擊了。。。");
}
方式三: (jQuery)經過選擇器獲取元素,返回的是表示該元素的jQuery對象,
再經過【對象.click】函數爲元素綁定點擊事件。
$("#b1").click( function(){
alert("jQuery:b1按鈕被點擊了。。。");
} );

一、基本選擇器

1)元素名選擇器
    $("div") -- 匹配全部的div元素
    $("span") -- 匹配全部的span元素
2)class選擇器
    $(".mini") -- 匹配全部class值爲mini的元素
    $("span.mini") -- 匹配全部class值爲mini的span元素
    <span class="mini">...</span>
    <span class="mini">...</span>
    <div class="mini">...</div>
    <div class="mini">...</div>

3)ID選擇器

$("#one") -- 匹配id值爲one的元素

4)多元素選擇器

$("div,span,.mini,#one") -- 匹配全部的div,全部的span,以及全部class爲mini,以及id值爲one的元素

二、層級選擇器
1)後代選擇器

$("div span") -- 匹配全部div內部的span元素
$("#box1 input") -- 匹配id值爲box1元素內部的全部input元素

2)相鄰兄弟選擇器
相鄰兄弟:若是兩個元素是緊挨着,而且具備相同的父元素,這兩個元素就是相鄰兄弟
能夠經過相鄰兄弟選擇器選中後面緊鄰的兄弟元素

$("#two+span") -- 匹配id值爲two的元素後面緊鄰的span兄弟元素
$("#two").next("span") -- 匹配id值爲two的元素後面緊鄰的span兄弟元素
$("#two").prev("span") -- 匹配id值爲two的元素前面緊鄰的span兄弟元素
-----------------------
<span>000</span>
<div id="#two"></div>
<span>111</span>
-----------------------
$("#two").nextAll() -- 匹配id爲two的元素後面全部的兄弟元素
$("#two").nextAll("div") -- 匹配id爲two的元素後面全部的div兄弟元素
$("#two").prevAll("div") -- 匹配id爲two的元素前面全部的div兄弟元素
$("#two").siblings("div") -- 匹配id爲two的元素前、後全部的div兄弟元素

三、基本過濾選擇器
根據下標匹配元素:

$("div").eq(n) -- 表示匹配全部div中的第n+1個div元素
$("div:eq(n)") -- 表示匹配全部div中的第n+1個div元素

$("div:first") -- 匹配全部div中的第一個div元素
$("div").eq(0) -- 匹配全部div中的第一個div元素

$("div:last") -- 匹配全部div中的最後一個div元素
$("div").eq( $("div").length-1 ) -- 匹配全部div中的最後一個div元素
$("div").eq( -1 ) -- 匹配全部div中的最後一個div元素

四、表單選擇器

$(":input") -- 匹配全部的表單項元素(包括input、select、textarea、button)
$(":text") -- 匹配全部普通文本輸入框
$(":password") -- 匹配全部密碼輸入框
$(":radio") -- 匹配全部單選框
$(":checkbox") -- 匹配全部複選框
$(":radio:checked") -- 匹配全部被選中的單選框
$(":checkbox:checked") -- 匹配全部被選中的複選框

調錯步驟:
1)按f12,看瀏覽器的控制檯(Console)窗口中有沒有錯誤提示
若是有,根據錯誤信息進行排查!
2)也能夠在程序中添加 debugger 斷點!

3、
一、html元素操做

(1)建立html元素
    $("<div></div>") -- 建立一個div元素,返回一個jQuery對象
    $("<div>這是一個div元素</div>") -- 建立一個包含內容的div元素,返回一個jQuery對象
    $("<input type='text'/>") -- 建立文本輸入框,返回一個jQuery對象

(2)添加子元素 -- append()

$("body").append("<table><tr><td>這是一個td元素</td></tr></table>");
-- 往body中添加一個表格元素

var $div = $("<div>這是一個div元素</div>");
$("body").append( $div ) -- 往body中添加一個div元素

(3)刪除元素 -- remove()

$("div").remove() -- 刪除全部匹配的div元素

(4)替換元素 -- replaceWith()

$("div").replaceWith("<p>我是來替換div的p元素!!</p>")

二、html內容 及 值的操做

<div>div111</div>
<input type="text"/>
<select>...</select>

html()函數 -- 獲取元素的全部內容(包裹在開始標籤和結束標籤中的全部內容)

若是經過選擇器匹配了多個元素,只能獲取第一個元素的內容
html()函還能夠設置元素的內容,若是經過選擇器匹配了多個元素,則會給全部元素設置內容
-- 在js中對應的是innerHTML屬性

text()函數 -- 獲取元素中的全部文本內容(值獲取文本,不獲取標籤)

若是經過選擇器匹配了多個元素,能夠將全部元素內部的文本都返回
text()函數還能夠爲元素的設置文本內容(只能設置文本)
-- 在js中對應的是innerText屬性(這個屬性在部分瀏覽器中不兼容)

val()函數 -- 獲取表單項元素的value值 或者是 爲表單項元素設置value值

表單項元素: input/select/option/textarea

三、html元素屬性 或者 css屬性操做

<div name="aaa" style="border:2px solid red"></div>

prop()函數 -- 獲取元素的某一個屬性值,或者爲元素設置屬性值
attr()函數 -- 能夠獲取元素的屬性值,或者爲元素設置屬性值
prop()和attr()的區別:
(1) prop函數是在jquery1.6版本以後纔出現,用於獲取或設置元素的屬性(固有屬性)值,

好比: input元素的id,class,name,type等屬性都是固有屬性
    好比: 爲input指定一個aaa屬性,這個叫作自定義屬性
attr函數是在jquery1.6版本以前就有的函數,用於獲取或設置元素的屬性(自定義屬性)值

css()函數 -- 能夠獲取或設置元素的css樣式

四、動畫函數
show() -- 設置元素爲顯示狀態\, 等價於 css("display"\, "block|inline");
hide() -- 設置元素爲隱藏狀態, 等價於 css("display", "none");
toggle() -- 切換元素的顯示狀態, 若是元素自己是顯示的,則會變成隱藏狀態,若是元素自己是隱藏的,則會變成顯示狀態

slideToggle() -- 切換元素的顯示狀態, 若是元素自己是顯示的,則會變成隱藏狀態,若是元素自己是隱藏的,則會變成顯示狀態

五、parent()/parents()/find()
parent() -- 獲取當前元素的父元素, 相似於js中的 parentNode 屬性
parents("tr") -- 獲取當前元素的全部的祖先元素
$(":checked").parent().parent();
$(":checked").parents("tr")

find() -- 獲取當前元素內部指定的後代元素$("div").find("span") -- 獲取全部div元素內部的span元素$("div span") -- 獲取全部div元素內部的span元素