04-JQuery
1、JQuery 基礎
JQuery：JavaScript 的一個類庫，對常用的方法和物件進行封裝，方便我們使用。
JQuery 是單獨的 js 檔案，通過 script 標籤的 src 屬性匯入即可。
獲取一個 jquery 物件，格式：$("選擇器") 或者 jQuery("選擇器")
dom 物件和 jquery 物件之間的轉換：
- dom 物件 ===> jquery 物件：
$(dom物件) - jquery 物件 ===> dom物件：①
jquery物件[index]、②jquery物件.get(index)
頁面載入：（認真看下）
JS 中：window.onload=function(){}
JQuery 在一個頁面中可以使用多次：方式①
$(function(){...})、方式② $(document).ready(function(){});
PS：$(document).ready() 和 window.onload 等幾個的區別？
1、JS 中，常見：window.onload 如：
window.onload = function(){
alert(“text1”);
}; 等同於JQuery中
$(window).load(function(){
alert("text1");
});他們都是用於當頁面的所有元素，包括外部引用檔案，圖片等都載入完畢時執行函式內的 alert 函式。load 方法只能執行一次，如果在 js 檔案裡寫了多個，只能執行最後一個。
2、另外：由於在 $(document).ready() 方法內註冊的事件，只要 DOM 就緒就會被執行，因此可能此時元素的關聯檔案未下載完，例如與圖片有關的HTML下載完畢，並且已經解析為 DOM 樹了，但很有可能圖片還未載入完畢，所以例如圖片的高度和寬度這樣的屬性此時不一定有效。
要解決這個問題，可以使用 JQuery 中另一個關於頁面載入的方法 load() 方法。load() 方法會在元素的 onload 事件中繫結一個處理函式。如果處理函式繫結在元素上，則會在元素的內容載入完畢後觸發。如：$(window).load(function(){ }) 等價於 window.onload = function(){ }…
3、在 JQuery 中，可以寫 $(document).ready(function(){ }) 等同於（簡化寫法為）：$(function(){ }) 他們都是用於當頁面的標準 DOM 元素被解析成 DOM 樹後就執行內程式碼。這個函式是可以在 js 檔案裡多次編寫的，對於多人共同編寫的js 就有很大的優勢，因為所有行為函式都會執行到。而 $(document).ready() 函式在 HMTL 結構載入完後就可以執行，不需要等大型檔案載入或者不存在的連線等耗時工作完成才執行，效率高。
派發事件：
$("選擇器").click(function(){...});相當於原生 JS 中dom物件.onclick=function(){....}掌握：focus、blur、submit、change、click
jquery 中效果：
- 隱藏或展示：show(毫秒數)、hide(毫秒數)
- 滑入或滑出：slideDown(毫秒數):向下滑入、slideUp(毫秒數):向上滑出
- 淡入或淡出：fadeIn(int):淡入、fadeOut(int):淡出
2、選擇器
基本選擇器：★
$("#id值")$(".class值")$("標籤名")
瞭解：$("*")
理解：獲取多個選擇器 用逗號隔開 $("#id值,.class值")
層次選擇器：★
a b:a的所有b後代a>b:a的所有b孩子a+b:a的下一個兄弟(大弟弟)a~b:a的所有弟弟
基本過濾選擇器：★
:frist第一個:last最後一個:odd索引奇數:even索引偶數:eq(index)指定索引:gt(index)>:lt(index)<
內容過濾：:has("選擇器") 包含指定選擇器的元素
可見過濾：
:hidden在頁面不展示元素 一般指input type="hidden"和 樣式中display:none:visible
屬性過濾器：★
- [屬性名]
- [屬性名=”值”]
表單過濾：:input 所有的表單子標籤 input select textarea button
表單物件屬性過濾選擇器：
:enabled可用的:disabled不可用:checked選中的(針對於單選框和複選框的)- ★
:selected選中的(針對於下拉選)
3、屬性與CSS的操作
對屬性的操作
attr()：設定或獲取元素的屬性（jquery1.6版本之前）
- 方式1：獲取
attr("屬性名稱") - 方式2：設定一個屬性
attr("屬性名稱","值"); 方式3：設定多個屬性
attr({ "屬性1":"值1", "屬性2":"值2" })
prop()和 attr 用法一致（jquery1.6版本之後）
移除屬性：removeAttr("屬性名稱")
addClass("指定的樣式值"); 相當於 attr("class","指定的樣式值");
removeClass("指定的樣式值"); 移除指定的樣式
對 CSS 操作
操作元素的 style 屬性。
css()： 獲取或設定 css 樣式
- 方式1：獲取
css("屬性名") - 方式2：設定一個屬性
css("屬性名","值") 方式3：設定多個
css({ "屬性1":"值1", "屬性2":"值2" });
獲取元素的尺寸：width()、height()
文件處理
內部插入：
- a.append(c):將c插入到a的內部(標籤體)後面
- a.prepend(c):將c插入到a的內部的前面
- appendTo
- prependTo
外部插入：
- a.after(c):將c放到a的後面
- a.before(c):將c放到a的前面
- a.insertAfter(c)
- a.insertBefore(c)
刪除：
- empty() 清空元素
- remove() 刪除元素
其他：val html text
- val：設定或者獲取 values 屬性
- html：獲取或者設定標籤體內容
text：獲取或設定標籤體內容，但只是標籤文字內容( 不帶樣式，有區別於 html )
例如：
<div id="d1"><a href="http://www.baidu.com/">百度</a></div>alert($("#d1").text());彈出的內容為百度
alert*($("#d1").text());彈出的內容為<a href="http://www.baidu.com/">百度</a>
遍歷陣列：
- 方式1：
jquery物件.each(function(){}); - 方式2：
$.each(jquery物件,function(){});
在 jquery 中建立元素：$("<標籤名>").prop(屬性).html(內容)