jQuery學習筆記詳解--(一）

概念

jQuery是一個JavaScript函式庫，jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫，
就是一堆JavaScript代碼
jQuery庫包含以下功能：
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函式
JavaScript 特效和影片
HTML DOM 遍歷和修改
AJAX
Utilities
提示： 除此之外，jQuery還提供了大量的插件，
目前網路上有大量開源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，還提供了大量擴展，

jQuery的版本

jQuery版本有很多，分為1.x 2.x 3.x
1.x版本：能夠兼容IE678瀏覽器
2.x版本：不兼容IE678瀏覽器
1.x和2.x版本jquery都不再更新版本了，現在只更新3.x版本，
3.x版本：不兼容IE678，更加的精簡（在國內不流行，因為國內使用jQuery的主要目的就是
兼容IE678） 國內多數網站還在使用1.x
jQuery有兩個版本：
生成環境使用的和開發測驗環境使用的，
Production version - 用于實際的網站中，已被精簡和壓縮，沒有空格和換行
Development version - 用于測驗和開發（未壓縮，是可讀的代碼）
jQuery的使用：
jQuery 庫是一個 JavaScript 檔案，我們可以直接在 HTML頁面中通過script 標簽參考
它，跟參考自己的 外部JavaScript腳本檔案一樣的語法，

jQuery語法結構

jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作（actions），

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

說明：美元符號定義 jQuery
選擇符（selector）“查詢"和"查找” HTML 元素
jQuery 的 action() 執行對元素的操作

檔案就緒事件

檔案就緒事件，實際就是檔案加載事件，
這是為了防止檔案在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成后才可以
對 DOM 進行操作，
如果在檔案沒有完全加載之前就運行函式，操作可能失敗，
所以我們盡可能將所有的操作都在檔案加載完畢之后實作，
寫法1：
$(document).ready(function(){
// 開始寫 jQuery 代碼...
});
寫法2：
簡介寫法-推薦
$(function(){
// 開始寫 jQuery 代碼...
});
jQuery的ready方法與JavaScript中的onload相似，但是也有區別：

jQuery選擇器:

jQuery 選擇器基于元素的 id、類、型別、屬性、屬性值等"查找"（或選擇）HTML 元素， 它基于
已經 存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器，
jQuery 中所有選擇器都以美元符號開頭：$()，

元素/標簽選擇器

jQuery 元素選擇器基于元素/標簽名選取元素，
$(標簽名稱)

id 選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素，
頁面中元素的 id 應該是唯一的，所以在頁面中選取唯一的元素需要通過 #id 選擇器，
通過 id 選取元素語法如下：
$("#p1")

. class 選擇器

jQuery 類選擇器可以通過指定的 class 查找元素，
$(".mydiv")
全域選擇器
匹配所有元素
$("*")

并集選擇器

將每一個選擇器匹配到的元素合并后一起回傳，
$(“div,ul,li,.mydiv”)

后代選擇器

在給定的祖先元素下匹配所有的后代元素
$(“form input”)

子選擇器

在給定的父元素下匹配所有的子元素
$(“form > input”)

相鄰選擇器

匹配所有緊接在 prev 元素后的 next 元素
$(“label + input”)

同輩選擇器

匹配 prev 元素之后的所有 siblings 元素
$(“form ~ input”)

屬性選擇器

匹配包含給定屬性的元素

可見性選擇器

匹配所有的可見或不可見的元素
$(“div:visible”);
$(“input:hidden”);

jQuery常用函式

與標簽內容相關函式

用到函式匹配的都是第一個匹配的元素
括號里面有內容，就是修改
var str1 = $("div").html();
獲取的是圍堵標簽在內的所有元素，包括了嵌套在內的標簽
var str1 = $("div").text();
獲取的是圍堵標簽在內的所有文本，不包括標簽內容
var str1 = $("div").val();
只能用在表單元素中，獲取的是標簽的內容，例如輸入框里的文本

與標簽屬性相關函式

var img = $("img");
var src = img.attr("src");
獲取指定的屬性
img.attr("src","新的屬性值")；
給指定的屬性設定新值
img.removeAttr("title");
移除指定屬性

var list=$("input[type='radio']"); 
for(var i=0;i<list.length;i++){
	var flag=$(list[i]).prop("checked");
	console.log("checked="+flag);
}

獲取checked屬性使用prop函式，獲取到的值是boolean型別，表示是否被選中

與標簽樣式相關函式

.redbg(){
	background-color:red;
}
$("div").addClass("redbg");

添加提前定義好的樣式
添加多個中間用空格隔開
$("input").css("屬性名"，“值”)；
添加多個是屬性名：值 中間用逗號隔開
添加樣式
注意：取出時，去除的只是第一個匹配的元素，而添加和修改時，修改的是所有
$("input").removeClass("樣式名/屬性名")
移除樣式，為空時，移除所有樣式
$("input").toggleClass("樣式")；
切換樣式：如果有這個樣式，就洗掉，如果沒有這個樣式，就添加

jQuery與js物件的轉換