jQuery基礎語法
#不管找什么標簽，用什么選擇器，都必須要寫$("")，引號里面再寫選擇器，通過jQuery找到的標簽對象就是一個jQuery對象，用原生JS找到的標簽對象叫做DOM對象。二者可以相互轉換。$('')[0]:就是jQuery對象轉DOM對象，$(DOM對象)：就是DOM對象轉jQuery對象。
查找標簽
基本選擇器（同css）
id選擇器：
$("#id") 標簽選擇器：
$("tagName") class選擇器：
$(".className") 配合使用：
$("div.c1") // 找到有c1 class類的div標簽 所有元素選擇器：
$("*") 組合選擇器：
$("#id, .className, tagName") 層級選擇器：（同css）
x和y可以為任意選擇器
$("x y");// x的所有后代y（子子孫孫）
$("x > y");// x的所有兒子y（兒子）
$("x + y")// 找到所有緊挨在x后面的y
$("x ~ y")// x之后所有的兄弟y 基本篩選器（選擇之后進行過濾）：
:first // 第一個 :last // 最后一個 :eq(index)// 索引等于index的那個元素 :even // 匹配所有索引值為偶數的元素，從 0 開始計數 :odd // 匹配所有索引值為奇數的元素，從 0 開始計數 :gt(index)// 匹配所有大于給定索引值的元素 :lt(index)// 匹配所有小于給定索引值的元素 :not(元素選擇器)// 移除所有滿足not條件的標簽 :has(元素選擇器)// 選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找)
例：$("div:has(h1)")// 找到所有后代中有h1標簽的div標簽，意思是首先找到所有div標簽，把這些div標簽的后代中有h1的div標簽篩選出來
$("div:has(.c1)")// 找到所有后代中有c1樣式類（類屬性class='c1'）的div標簽
$("li:not(.c1)")// 找到所有不包含c1樣式類的li標簽
$("li:not(:has(a))")// 找到所有后代中不含a標簽的li標簽 屬性選擇器：
[attribute] [attribute=value]// 屬性等于 [attribute!=value]// 屬性不等于
例子：
// 示例,多用于input標簽
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標簽
$("input[type!='text']");// 取到類型不是text的input標簽
表單篩選器（多用于找form表單里面出現的input標簽，當然通過屬性選擇器找肯定也是沒問題的，這樣就是寫著簡單一些）：
:text :password :file :radio :checkbox :submit :reset :button
例子：
$(":checkbox") // 找到所有的checkbox 表單對象屬性:
:enabled :disabled :checked //只用checked篩選，不僅會選中點選的form表單的結果，還會選中select的結果。 :selected
篩選器方法
下一個元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id為i2的標簽就結束查找，不包含它
上一個元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2") 父親元素：
$("#id").parent()
$("#id").parents() // 查找當前元素的所有的父輩元素（爺爺輩、祖先輩都找到）
$("#id").parentsUntil('body') // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止，這里直到body標簽，不包含body標簽，基本選擇器都可以放到這里面使用。 兒子和兄弟元素：
$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們，不包含自己，.siblings('#id')，可以在添加選擇器進行進一步篩選 查找：
搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。
$("div").find("p") //等價于$("div p") 篩選：
篩選出與指定表達式匹配的元素集合。這個方法用于縮小匹配的范圍。用逗號分隔多個表達式。
$("div").filter(".c1") // 等價于 $("div.c1")，從結果集中過濾出有c1樣式類的，從所有的div標簽中過濾出有class='c1'屬性的div，和find不同，find是找div標簽的子子孫孫中找到一個符合條件的標簽 補充（和前面使用冒號的一樣 ?:first等，只不過冒號的那個是寫在選擇器里面的，而下面的這幾個是方法，如此而已，就不說啦）：
.first() // 獲取匹配的第一個元素 .last() // 獲取匹配的最后一個元素 .not() // 從匹配元素的集合中刪除與指定表達式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
操作標簽：
樣式操作：
樣式類：（添加刪除class類的值來修改樣式）
addClass();// 添加指定的CSS類名。 removeClass();// 移除指定的CSS類名。 hasClass();// 判斷樣式存不存在 toggleClass();// 切換CSS類名，如果有就移除，如果沒有就添加。
CSS：（直接修改css的屬性來修改樣式）
css("color","red")//DOM操作：tag.style.color="red" 位置操作：
offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置 position()// 獲取匹配元素相對父元素的偏移，不能設置位置 $(window).scrollTop() //滾輪向下移動的距離 $(window).scrollLeft() //滾輪向左移動的距離
尺寸：
height() //盒子模型content的大小，就是我們設置的標簽的高度和寬度 width() innerHeight() //內容content高度 + 兩個padding的高度 innerWidth() outerHeight() //內容高度 + 兩個padding的高度 + 兩個border的高度，不包括margin的高度，因為margin不是標簽的，是標簽和標簽之間的距離 outerWidth()
文本操作：
設置HTML：
html()// 取得第一個匹配元素的html內容，包含標簽內容 html(val)// 設置所有匹配元素的html內容，識別標簽，能夠表現出標簽的效果
設置文本：
text()// 取得所有匹配元素的內容，只有文本內容，沒有標簽 text(val)// 設置所有匹配元素的內容，不識別標簽，將標簽作為文本插入進去
查詢，設置值：
val()// 取得第一個匹配元素的當前值 val(val)// 設置所有匹配元素的值 val([val1, val2])// 設置多選的checkbox、多選select的值
屬性操作
attr全稱attribute(屬性)?
prop全稱property(屬性)
雖然都是屬性，但他們所指的屬性并不相同，attr所指的屬性是HTML標簽屬性，而prop所指的是DOM對象屬性，可以認為attr是顯式的，而prop是隱式的。
attr用于自帶屬性等或自定義屬性：
attr(attrName)// 返回第一個匹配元素的屬性值
attr(attrName, attrValue)// 為所有匹配元素設置一個屬性值
attr({k1: v1, k2:v2})// 為所有匹配元素設置多個屬性值
removeAttr()// 從每一個匹配的元素中刪除一個屬性 prop主要用于checkbox和radio：返回一個狀態True和False
prop() // 獲取屬性狀態
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
總結一下：
1.對于標簽上有的能看到的屬性和自定義屬性都用attr
2.對于返回布爾值的比如checkbox、radio和option的是否被選中或者設置其被選中與取消選中都用prop。
? 具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
文檔處理
添加到指定元素內部的后面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B
添加到指定元素內部的前面
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 從DOM中刪除所有匹配的元素。 empty()// 刪除匹配的元素集合中所有的子節點，包括文本被全部刪除，但是匹配的元素還在
替換
replaceWith() replaceAll()
克隆
clone()// 參數，看下面的示例
事件
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...}) //內容發生變化，input，select等
keyup(function(){...})
mouseover 和 mouseenter的區別是：mouseover事件是如果該標簽有子標簽，那么移動到該標簽或者移動到子標簽時會連續觸發，mmouseenter事件不管有沒有子標簽都只觸發一次，表示鼠標進入這個對象 事件綁定
對象.on(?events?[,?selector?],function(){})
1.events： 事件
2.selector: 選擇器（可選的）
3.function: 事件處理函數
移除事件
對象.off(?events?[,?selector?][,function(){}])
off()?方法移除用?.on()綁定的事件處理程序。
$("li").off("click")；就可以了
1.events： 事件
2.selector: 選擇器（可選的）
3.function: 事件處理函數
阻止后續事件執行
1.?return?false;?// 常見阻止表單提交等，如果input標簽里面的值為空就組織它提交，就可以使用這兩種方法
2. e.stopPropagation();
事件委托
事件委托是通過事件冒泡的原理，利用父標簽去捕獲子標簽的事件，將未來添加進來的某些子標簽自動綁定上事件。
示例：
表格中每一行的編輯和刪除按鈕都能觸發相應的事件。回去完善一下咱們上面的那個作業吧，添加一行數據的那個作業，然后我們在學習一下上面的那些綁定事件。
$("table").on("click", ".delete", function () { //中間的參數是個選擇器，前面這個$('table')是父級標簽選擇器，選擇的是父級標簽，意思就是將子標簽（子子孫孫）的點擊事件委托給了父級標簽
//但是這里注意一點，你console.log(this)；你會發現this還是觸發事件的那個子標簽，這個記住昂// 刪除按鈕綁定的事件
}) 頁面載入
兩種寫法：
$(document).ready(function(){
// 在這里寫你的JS代碼...
}) 簡寫：
$(function(){
// 你在這里寫你的代碼
}) 與window.onload的區別
1.window.onload()函數有覆蓋現象，必須等待著圖片資源加載完成之后才能調用
2.jQuery的這個入口函數沒有函數覆蓋現象，文檔加載完成之后就可以調用（建議使用此函數）
動畫效果
// 基本
show([s,[e],[fn]]) $('.c1').show() //show(5000),就是5秒之后顯示出來這個標簽，并且有一個動畫效果，（搞個img圖片看看效果），后面兩個參數先不用管
hide([s,[e],[fn]]) $('.c1').hide()
toggle([s],[e],[fn])//這幾個toggle的意思就是你原來是什么效果，我就反著來 // 滑動（拉窗簾一樣）
slideDown([s],[e],[fn])
//使用的時候別忘了給標簽設置一個高度和寬度，其實就是控制你的標簽高度，如果你寫$('#di').slideUp(5000)；意思就是5秒內把你的高度變為0
//還有如果你直接操作的是img標簽和操作img標簽的父級標簽，兩個的效果是不同的 slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn])
// 淡入淡出（控制透明度）
fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) o參數是透明度，0-1的區間，意思是淡入或者淡出到一個多大的透明讀 fadeToggle([s,[e],[fn]])
// 自定義（了解即可）
animate(p,[s],[e],[fn])
協議)
