這是我前段時間學習jquery的時候整理的課堂筆記，在這裏分享給大家，課程原地址在這裏。邊聽課邊看筆記效果更佳！
1.初始化函數
$(document).ready(function(){ })
簡化模式
$(function () { })
2.dom模型
將html,xml等翁當結構的標籤語言稱爲dom模型
三種類型
a.元素節點 <div> <body>
b.屬性節點 title,src
c.文本節點 text
dom對象：
以上三種節點類型具體對象就是dom對象
使用層面：凡是javascript能操作的對象就是dom對象
jQuery對象：
凡是jquery能直接操作的對象就是jQuery對象
dom對象只適用於js的各種語法（函數，屬性），jquery對象只用於jquery的各種語法
對象各自獨立
dom對象直接寫，jquery對象加上$
//通過js拿文本節點值
var title = document.getElementById("myTitle")
title.innerHTML();
var $title = $("#myTitle");
alert($title.html());
3.dom對象和jquery對象的轉換
dom對象 -> jQuery對象：jquery工廠 $(dom對象) $(title)
jQuery對象 -> dom對象
基礎：jquery對象默認是一個數組或者集合，dom對象默認是一個單獨的對象
數組：jquery對象[0] $title[0]
集合：jquery.get(0) $title.get(0)
4.jquery選擇器：根基*********************
a.基本選擇器
i. 標籤選擇器 直接寫標籤 $("標籤名")
i. 類選擇器 . $(".類名")
i. ID選擇器 # $("#ID名")
i. 並集選擇器 逗號 $(".類名,#ID名")
i. 交集選擇器 啥也不寫 $(".類名 #ID名") 注意避免歧義
i. 全局選擇器 * $("*")
b.層次選擇器 ---只取後面的那個元素
i. 相鄰選擇器 + $("#id名字+標籤名字")
i. 同輩選擇器 ~ $("#id名字~標籤名字")
i. 後代 空格
i. 子代 >
c.屬性選擇器 [...] $("[屬性名]") 選中全部元素中，有此屬性名的元素
i. $("[class]")
i. 等於此屬性值 $("[class = xxx]") $("[class = 'xxx']")
i. 不等於 $("[class != xxx]")
i. 以此屬性開頭 $("[class ^= xxx]")
i. 以此屬性結尾 $("[class $= xxx]")
i. 包含此屬性值 $("[class *= xxx]")
d.過濾選擇器 ：
基本過濾選擇器(從0開始)
:first ----最開頭那個
:last ----最後哪一個
:even ----偶數
:odd ----奇數
:eq(index) ----第index個
:gt(index) ----大於index的全部元素
:lt(index) ----小於index的全部元素
:not(選擇器) ----除了...以外
:header ----選中所有標題元素 h1,h2,h3
:focus ----獲取當前焦點的元素
e.可見性選擇器
:visible ----選中所有可見元素
:hidden ----選中所有隱藏元素
5.jquery事件
js:onXXX
onClick()
寫在<script>內，寫在ready()外面
jquery:沒有on
click()
寫在ready()內
a.示例：
$(function(){
//選中元素，設置事件
$("#hhh").click(function(){
alert("單擊事件");
});
})
b.事件類型
i. ready() windows事件
i. 鼠標事件----w3c官網搜一下就行
click(): 單擊事件
mouseover():
mouseenter():
mouseleave():
mouseout():
i. 鍵盤事件
keydown(): 從上往下壓的過程
keypress(): 壓到底
keyup(): 從下往上擡的過程
keycode用法，具體的keycode可以百度
$("body").keydown(function(e){
if(e.keyCode==13){
alert("按壓了回車");
}
});
i. 表單事件
focus(): 獲取焦點,有些元素好像沒有焦點
$("input").focus(function() {
//this是當前元素，是一個dom對象，再轉換爲jquery對象
$(this).css("color","red");
});
blur(): 失去焦點
i. 綁定事件與移出事件 好處: 通用
$(...).bind("事件名",[數據],函數);
$("input").bind("focus",function (params) {
alert("hello")
})
批量綁定：$(...).bind({"事件1":[數據1]:函數1,"事件2":[數據2]:函數2});
取消綁定:$(...).unbind("事件")
i.複合事件
hover(): mouseover()和mouseout()組合方法
$(".aaa").hover(function (params) {
//進入
alert("懸浮")
},function (params) {
//移出
alert("移出")
});
toggle():版本問題 多個click()事件，輪循 不支持，不用就ok
i. 顯示效果
ii. 隱藏與顯示
hide([速度],[回調函數]); 隱藏 速度可以試數字，也可以是單詞(fast normal slow,加雙引號)
show([速度],[回調函數]); 顯示
toggle(方法1，方法2); 切換隱藏與顯示
回調函數：回調函數一般作爲函數的參數體現
$(".aaa").click(function (params) {
$(this).hide(3000,myCallBack);
})
function myCallBack(params) {
alert("隱藏完畢！")
}
ii. 淡入淡出,改變透明度
fadeIn([速度],[回調函數]): 同理 顯示
fadeOut([速度],[回調函數]): 同理 消失
ii. 控制高度
slideDown([速度],[回調函數]) 下拉，顯示
slideUp[速度],[回調函數]() 上推，消失
6.操作DOM
a. 樣式操作
i. 設置css css()
jQuery對象.css("屬性名","屬性值") 單個
jQuery對象.css({"屬性名1":"屬性值1","屬性名2":"屬性值2",....}) 多個
i. 追加或移除樣式class
addClass("x x x"); addClass("x");
removeClass("x x x"); removeClass("x"); 啥也不寫移除全部
i. 切換樣式,移除或添加全部
toggleClass("x x x")
b.內容操作
i. html(): 獲取值，獲取的是元素的內容，包含了元素內部的各種標籤
html("xxxxxx") 賦值，可以添加標籤的文本，並渲染
i. text(): 獲取值，獲取文本值
text("xxxxxxx") 賦值，純文本，不渲染
i. val() 獲取，例如<input>標籤
val("xxxxxxx") 賦值
c.節點與屬性操作
i.節點操作
* 查詢節點 (jquery選擇器)
* 創建節點: $()
* 插入節點: 內部插入(插入子女)，外部插入(插入兄弟)
！內部插入(插入子女)
append(),appendTo(),prepend(),prependTo() 內部插入
//創建
var $myElement = $("<li>xxx</li>")
$("ul").append($myElement);//內部插入
$myElement.appendTo($("ul"));
！外部插入(插入兄弟)
after(),insertAfter(),before(),insertBefore()
* 替換節點
$A.replaceWith("xxxx") xxxx爲節點內容
$("xxxxxx").replaceAll("xxxxxx")
* 刪除節點
remove(): 徹底刪除
detach(): 將節點刪除，但是關聯的事件，數據不會刪除，不推薦使用
empty(): 只刪除內容
* 克隆節點
clone(true|false): true---連着事件一塊克隆
i. 屬性操作
* attr("屬性名") ----獲取屬性值
* attr("屬性名","屬性值") ----設置屬性值
* attr({"屬性名1":"屬性值1","屬性名2":"屬性值2"}) ----批量操作
* removeAttr("屬性值") ----刪除屬性值
d.獲取集合與遍歷集合
i. 子節點集合
$(..).children("li")
i. 後代集合
$(..).find("li")
i. 同輩集合
next(): 後一個 +
next("li") 後一個li
prev(): 前一個
同理
siblings(): 同輩，左邊右邊
同理
i. 前輩集合
parent(): 父輩
parents(): 所有祖先
parents("li"): 祖先的li
i. 過濾器
如上，() 也是一個過濾器
filter("...") 過濾器方法
i. 遍歷集合
$(...).each(function(index,element){
$(element).text();
//等價於
$(this).text();
});
7.CSS-dom操作
height()
width()
offset() 偏移量，元素左上角 返回對象屬性：left,top
offset(function(index,oldOffset){
var newOffset = new Object();
newOffset.left = oldOffset.left + 100;
newOffset.top = oldOffset.top + 100;
return newOffset;
})
offsetParent() 獲取已經定位的父元素 ：元素position屬性(默認爲static)被設置稱爲了relative absolute 或者fixed
scrollLet()
scrollTop()
8.表單校驗，可萬一減輕服務端的訪問次數
a.步驟
i. 獲取要校驗的元素值(選擇器) 用戶名，密碼
i. 通過字符串處理方法或者正則表達式等手段進行校驗
i. 觸發校驗的方法或事件(校驗時機)
blur(): 失去焦點
submit(): 當點擊表單的提交按鈕時觸發
submit()返回值會決定表單是否跳轉,true,false
b.正則表達式進行校驗：用於定義規則
正則表達式.test(email);
手機號碼規則：第一位 是 1,其餘10個是數字
/^1\d{10}$/
/^1[0-9]{10}$/
郵箱校驗: /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/
搜索一下