jquery 基礎(chǔ) 詳細(xì)
jquery筆記會(huì)隨著時(shí)間進(jìn)行更正
再次更新:2019/10/14 13:57
寫(xiě)完這篇jquery之后,以后不再寫(xiě)jquery專題的文章了,不多說(shuō),請(qǐng)看
jquery
- 選擇器名1+選擇器名2
- 獲取選擇器1的下一個(gè)兄弟選擇器2
- 選擇器名1~選擇器名2
- 獲取選擇器1之后的所有兄弟
- :first
- 獲取第一個(gè)選定的標(biāo)簽
- 例如: $("p:first") 獲取第一個(gè)p標(biāo)簽
- :last
- 獲取最后一個(gè)選定的標(biāo)簽
- 例如: $("p:last") 獲取第一個(gè)p標(biāo)簽
- :not(選擇器名)
- 獲取不滿足not里指定條件的標(biāo)簽
- 例如: $("p:not('.class1')") 獲取第一個(gè)沒(méi)有class1類(lèi)名的p標(biāo)簽
- :even
- 獲取滿足條件的偶數(shù)的標(biāo)簽
- 注意,從0開(kāi)始計(jì)數(shù),例如:第一個(gè)標(biāo)簽是偶數(shù),會(huì)被選定
- :odd
- 獲取滿足條件的奇數(shù)的標(biāo)簽
- 注意,從0開(kāi)始計(jì)數(shù),例如:第二個(gè)標(biāo)簽是奇數(shù),會(huì)被選定
- :eq(數(shù)字)
- 獲取index下標(biāo)等于指定數(shù)字的標(biāo)簽
- 從0開(kāi)始計(jì)數(shù),例如:$(p:eq(0)) 會(huì)選定第一個(gè)p標(biāo)簽
- :focus
- 獲取當(dāng)前獲取到焦點(diǎn)的標(biāo)簽
- :header
- 獲取h1-h6的標(biāo)簽
- :animated
- 獲取正在播放動(dòng)畫(huà)的標(biāo)簽
- :root
- 獲取html根標(biāo)簽
- contains(文本)
- 獲取子元素包含指定文本的標(biāo)簽
- 例如:$("p:contains('特定文本')") 值獲取p標(biāo)簽中包含"特定文本"內(nèi)容的標(biāo)簽
- :empty
- 獲取空標(biāo)簽
- :parent
- 獲取具有內(nèi)容的標(biāo)簽
- :has(選擇器名)
- 獲取子元素含有指定選擇器子標(biāo)簽的標(biāo)簽
- :hidden
- 獲取看不見(jiàn)的標(biāo)簽
- :visible
- 獲取看得見(jiàn)的標(biāo)簽
- 屬性
-
[屬性名]- 獲取具有該屬性的標(biāo)簽
-
[屬性名=屬性值]- 獲取屬性名等于該屬性值的標(biāo)簽
-
[屬性名*=屬性值]- 獲取屬性名含有該屬性值的標(biāo)簽
-
[屬性名^=屬性值]- 獲取屬性名以該屬性值開(kāi)頭的標(biāo)簽
-
[屬性名$=屬性值]- 獲取屬性名以該屬性值結(jié)尾的標(biāo)簽
-
[屬性名!=屬性值]- 獲取屬性名不等于該屬性值的標(biāo)簽
-
- :first-child
-
獲取指定選擇器的父標(biāo)簽的第一個(gè)子標(biāo)簽
例如: <div> <p>我是第一個(gè)子標(biāo)簽</p> <span>我是span標(biāo)簽</span> <span>我是span標(biāo)簽</span> <span>我是span標(biāo)簽</span> <span>我是span標(biāo)簽</span> </div> $("div>span:first-child") 獲取到p標(biāo)簽
-
- :first-of-type
-
獲取指定選擇器的父標(biāo)簽的第一個(gè)指定的標(biāo)簽
例如: <div> <p>我是第一個(gè)子標(biāo)簽</p> <span class="first">我是span標(biāo)簽</span> <span>我是span標(biāo)簽</span> <span>我是span標(biāo)簽</span> <span>我是span標(biāo)簽</span> </div> $("div>span:first-child") 獲取到了類(lèi)名為first的span標(biāo)簽
-
- :last-child
- 獲取指定選擇器的父標(biāo)簽的最后一個(gè)子標(biāo)簽
- :last-of-type
- 獲取指定選擇器的父標(biāo)簽的最后一個(gè)指定的子標(biāo)簽
- :nth-child(下標(biāo)值)
- 獲取指定選擇器的父標(biāo)簽的指定下標(biāo)值的子標(biāo)簽
- 下標(biāo)值從0開(kāi)始計(jì)數(shù)
- :nth-of-type(下標(biāo)值)
- 獲取指定選擇器的父標(biāo)簽的指定下標(biāo)值的指定的標(biāo)簽
- 下標(biāo)值從0開(kāi)始計(jì)數(shù)
- :only-child
- 如果某個(gè)元素是父元素中唯一的子元素,那將會(huì)被匹配
- 下標(biāo)值從0開(kāi)始計(jì)數(shù)
- :only-of-type
- 如果某個(gè)元素是父元素中唯一的指定的元素,那將會(huì)被匹配
- 下標(biāo)值從0開(kāi)始計(jì)數(shù)
- :input
- 獲取類(lèi)別為input, textarea, select 和 button的標(biāo)簽
- :text
- 獲取input標(biāo)簽里type類(lèi)別為text的標(biāo)簽
- :password
- 獲取input標(biāo)簽里type類(lèi)別為password的標(biāo)簽
- :file
- 獲取input標(biāo)簽里type類(lèi)別為file的標(biāo)簽
- :image
- 獲取input標(biāo)簽里type類(lèi)別為image的標(biāo)簽
- :reset
- 獲取input標(biāo)簽里type類(lèi)別為reset的標(biāo)簽
- :button
- 獲取input標(biāo)簽里type類(lèi)別為button的標(biāo)簽
- :checkout
- 獲取input標(biāo)簽里type類(lèi)別為checkout的標(biāo)簽
- :radio
- 獲取input標(biāo)簽里type類(lèi)別為radio的標(biāo)簽
- :enabled
- 獲取可以被使用的標(biāo)簽
- :disabled
- 獲取不能被使用的標(biāo)簽
- :checked
- 獲取被選中的標(biāo)簽
- :selected
- 獲取被select標(biāo)簽選中的標(biāo)簽
- each(函數(shù))
- 遍歷標(biāo)簽
- 函數(shù)第一個(gè)參數(shù)是標(biāo)簽組里的每個(gè)id值,第二個(gè)參數(shù)是對(duì)應(yīng)的dom對(duì)象
- length
- 獲取標(biāo)簽組里的數(shù)目長(zhǎng)度
- selector
- 獲取$()中填寫(xiě)的名稱
- 例如:$("p:first").selector 返回值是字符串"p:first"
- context
- 獲取對(duì)應(yīng)的dom對(duì)象
- 例如:$("p:first").context 返回值是第一個(gè)p標(biāo)簽的dom
- get(下標(biāo)值)
- 獲取jquery對(duì)象組里對(duì)應(yīng)下標(biāo)的dom
- 例如:$("p:first").get(0) 返回值是眾多p標(biāo)簽中的第一個(gè)p標(biāo)簽的dom對(duì)象
- index()
- 獲取對(duì)應(yīng)的下標(biāo)值
- offset()
- 返回當(dāng)前元素相對(duì)于視窗的偏移量對(duì)象,
{left: left值,top: top值}
- 返回當(dāng)前元素相對(duì)于視窗的偏移量對(duì)象,
- position()
- 返回當(dāng)前元素相對(duì)于最近具有position的祖先元素的偏移量對(duì)象,
{left: left值,top: top值}
- 返回當(dāng)前元素相對(duì)于最近具有position的祖先元素的偏移量對(duì)象,
- height()
- 獲取當(dāng)前元素的height值,不是實(shí)際高度
- width()
- 獲取當(dāng)前元素的width值,不是實(shí)際寬度
- innerHeight()
- 獲取當(dāng)前元素的height+padding值
- innerWidth()
- 獲取當(dāng)前元素的width+padding值
- outerHeight()
- 獲取當(dāng)前元素的height+padding+border值
- 參數(shù)是布爾值,默認(rèn)false,不包含margin值,當(dāng)參數(shù)是true時(shí),要加上border值
- outerWidth()
- 獲取當(dāng)前元素的width+padding+border值
- 參數(shù)是布爾值,默認(rèn)false,不包含margin值,當(dāng)參數(shù)是true時(shí),要加上border值
- on(事件名稱,函數(shù))
- 綁定事件,函數(shù)在觸發(fā)對(duì)應(yīng)事件后自動(dòng)執(zhí)行,函數(shù)的參數(shù)是event對(duì)象,通過(guò)event.target可以選定當(dāng)前元素
- off(事件名稱)
- 清除指定元素上綁定的事件
- one(事件名稱,函數(shù))
- 與on同用法,區(qū)別在于只執(zhí)行一次
- trigger(事件名,函數(shù)參數(shù))
- 手動(dòng)觸發(fā)對(duì)應(yīng)事件,第二個(gè)參數(shù)是傳遞觸發(fā)事件執(zhí)行的函數(shù)的參數(shù)
- triggerHandle(事件名,函數(shù)參數(shù))
- 不會(huì)觸發(fā)瀏覽器默認(rèn)事件,例如submit使用trigger觸發(fā)會(huì)自動(dòng)跳轉(zhuǎn),而triggerHandle不會(huì)
- 返回的是函數(shù)處理的值而不是jquery對(duì)象,也就是不能鏈?zhǔn)绞褂?,例如?("p>li").trigger("click").find("div")這樣是不可以的
- 只會(huì)觸發(fā)符合條件的第一個(gè)元素
- hover(移入事件函數(shù),移出事件函數(shù))
- 同時(shí)設(shè)置鼠標(biāo)移入移出的觸發(fā)函數(shù)
- toggle(第一次點(diǎn)擊事件觸發(fā)函數(shù),第二次點(diǎn)擊事件觸發(fā)函數(shù))
- 第一次點(diǎn)擊會(huì)觸發(fā)第一個(gè)函數(shù),第二次點(diǎn)擊會(huì)觸發(fā)第二個(gè)函數(shù)
- blur(函數(shù))
- 失去焦點(diǎn)觸發(fā)該函數(shù)
- focus(函數(shù))
- 獲取焦點(diǎn)觸發(fā)該函數(shù)
- change(函數(shù))
- 標(biāo)簽值變化時(shí)會(huì)觸發(fā)該函數(shù)
- click(函數(shù))
- 點(diǎn)擊該標(biāo)簽時(shí)會(huì)觸發(fā)該函數(shù)
- dbclick(函數(shù))
- 兩次點(diǎn)擊該標(biāo)簽會(huì)觸發(fā)該函數(shù)
- focusin(函數(shù))
- 父元素會(huì)監(jiān)測(cè)子元素的焦點(diǎn)獲取情況,當(dāng)子元素獲取時(shí),該函數(shù)被觸發(fā)
- focusout(函數(shù))
- 父元素會(huì)監(jiān)測(cè)子元素的焦點(diǎn)丟失情況,當(dāng)子元素丟失焦點(diǎn)時(shí),該函數(shù)被觸發(fā)
- keypress(函數(shù))
- 監(jiān)控所有按鍵按下來(lái)觸發(fā)該函數(shù)
- keydown(函數(shù))
- 監(jiān)控部分按鍵按下來(lái)觸發(fā)該函數(shù)
- keyup(函數(shù))
- 監(jiān)控部分按鍵松開(kāi)來(lái)觸發(fā)該函數(shù)
- mousedown(函數(shù))
- 當(dāng)鼠標(biāo)點(diǎn)下觸發(fā)該函數(shù)
- mouseup(函數(shù))
- 當(dāng)鼠標(biāo)松開(kāi)觸發(fā)該函數(shù)
- mouseenter(函數(shù))
- 當(dāng)鼠標(biāo)移入觸發(fā)該函數(shù)
- 與mouseover的區(qū)別是,當(dāng)移入子元素時(shí),mouseover會(huì)被觸發(fā),而mouseenter不會(huì)被觸發(fā)
- mouseleave(函數(shù))
- 當(dāng)鼠標(biāo)移出觸發(fā)該函數(shù)
- 與mouseout的區(qū)別是,當(dāng)移出子元素時(shí),mouseout會(huì)被觸發(fā),而mouseleave不會(huì)被觸發(fā)
- resize(函數(shù))
- 當(dāng)瀏覽器窗口大小改變時(shí)會(huì)觸發(fā)該函數(shù)
- scroll(函數(shù))
- 當(dāng)滾動(dòng)時(shí)會(huì)觸發(fā)該函數(shù)
- submit(函數(shù))
- 當(dāng)點(diǎn)擊提交時(shí)會(huì)觸發(fā)該函數(shù)
- select(函數(shù))
- 當(dāng)鼠標(biāo)選擇元素時(shí)會(huì)觸發(fā)該函數(shù)
- attr(參數(shù))
- 當(dāng)參數(shù)為一個(gè)字符串時(shí),獲取該字符串對(duì)應(yīng)的屬性值
- 當(dāng)參數(shù)為一個(gè)對(duì)象時(shí),改變對(duì)象名對(duì)應(yīng)的屬性值
- 當(dāng)?shù)谝粋€(gè)參數(shù)是字符串,第二個(gè)參數(shù)為一個(gè)函數(shù)時(shí),函數(shù)的參數(shù)是字符串對(duì)應(yīng)的屬性值,返回值是修改后的新屬性值
- removeAttr(屬性名)
- 移除該屬性
- prop(參數(shù))
- 用來(lái)修改checked等的狀態(tài)值,同上可以是對(duì)象或者第一個(gè)參數(shù)是字符串,第二個(gè)參數(shù)是函數(shù)
- removeProp(參數(shù))
- 用來(lái)刪除checked等的屬性
- addClass(函數(shù))
- 用來(lái)給元素添加類(lèi)名
- 當(dāng)參數(shù)是字符串時(shí)直接添加對(duì)應(yīng)類(lèi)名,多個(gè)用空格隔開(kāi),當(dāng)參數(shù)是函數(shù)時(shí),返回需要添加的類(lèi)名,多個(gè)用空格隔開(kāi)
- removeClass(函數(shù))
- 用來(lái)刪除對(duì)應(yīng)元素類(lèi)名
- 當(dāng)參數(shù)是字符串時(shí)直接刪除對(duì)應(yīng)類(lèi)名,多個(gè)用空格隔開(kāi),當(dāng)參數(shù)是函數(shù)時(shí),返回需要?jiǎng)h除的類(lèi)名,多個(gè)用空格隔開(kāi)
- toggleClass(類(lèi)名)
- 切換類(lèi)名,一個(gè)是去掉該類(lèi)名,一個(gè)是新添該類(lèi)名
- html()
- 當(dāng)沒(méi)有參數(shù)時(shí),用來(lái)獲取標(biāo)簽下子元素的所有內(nèi)容
- 當(dāng)有參數(shù)時(shí),用對(duì)應(yīng)參數(shù)來(lái)替換標(biāo)簽下子元素的html內(nèi)容
- 當(dāng)參數(shù)是一個(gè)函數(shù),函數(shù)返回值是需要設(shè)置替換html的值
- text()
- 當(dāng)沒(méi)有參數(shù)時(shí),用來(lái)獲取標(biāo)簽下子元素的所有文本內(nèi)容
- 當(dāng)有參數(shù)時(shí),用對(duì)應(yīng)參數(shù)來(lái)替換標(biāo)簽下子元素的文本內(nèi)容
- 當(dāng)參數(shù)是一個(gè)函數(shù),函數(shù)返回值是需要設(shè)置替換文本的值
- val()
- 當(dāng)沒(méi)有參數(shù)時(shí),用來(lái)獲取input標(biāo)簽的文本內(nèi)容
- 當(dāng)有參數(shù)時(shí),用對(duì)應(yīng)參數(shù)來(lái)替換input標(biāo)簽的文本內(nèi)容
- 當(dāng)參數(shù)是一個(gè)函數(shù),函數(shù)返回值是需要設(shè)置替換input標(biāo)簽的文本內(nèi)容
- append(元素1)
- 為指定元素的最后一個(gè)子元素追加元素1
- appendTo(元素1)
- 將指定元素添加到元素1的最后一個(gè)子元素的后面
- prepend(元素1)
- 為指定元素的第一個(gè)一個(gè)子元素追加元素1
- prependTo(元素1)
- 將指定元素添加到元素1的最后一個(gè)子元素的后面
- after(元素1)
- 將指定元素1添加到指定元素后面
- before(元素1)
- 將指定元素1添加到指定元素前面
- insertAfter(元素1)
- 將指定元素添加到元素1后面
- insertBefore(元素1)
- 將指定元素1添加到元素1前面
- replaceWith(元素1)
- 用元素1替換掉當(dāng)前指定元素
- replaceAll(元素1)
- 用當(dāng)前指定元素替換掉元素1
- empty()
- 清空當(dāng)前指定元素的子元素
- remove()
- 刪除當(dāng)前元素,并將其被綁定的方法和數(shù)據(jù)清空,將其返回
- detach()
- 刪除當(dāng)前元素,將其完整返回
- clone(布爾值)
- 布爾值默認(rèn)false,不復(fù)制綁定事件
- 布爾值為true,復(fù)制綁定事件,完整返回
- show()
- 顯示動(dòng)畫(huà)
- 第一個(gè)參數(shù)是動(dòng)畫(huà)時(shí)間,可以是數(shù)字,單位為秒,可以使字符串,有三個(gè)值,slow,normal,fast,默認(rèn)是normal
- 第二個(gè)參數(shù)是動(dòng)畫(huà)運(yùn)動(dòng)狀態(tài),swing,可以指定為linear勻速
- 第三個(gè)是動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)
- hide()
- 隱藏動(dòng)畫(huà)
- 第一個(gè)參數(shù)是動(dòng)畫(huà)時(shí)間,可以是數(shù)字,單位為毫秒,可以使字符串,有三個(gè)值,slow,normal,fast,默認(rèn)是normal
- 第二個(gè)參數(shù)是動(dòng)畫(huà)運(yùn)動(dòng)狀態(tài),swing,可以指定為linear勻速
- 第三個(gè)是動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)
- toggle()
- 顯示(隱藏)轉(zhuǎn)換動(dòng)畫(huà)
- 第一個(gè)參數(shù)是動(dòng)畫(huà)時(shí)間,可以是數(shù)字,單位為秒,可以使字符串,有三個(gè)值,slow,normal,fast,默認(rèn)是normal
- 第二個(gè)參數(shù)是動(dòng)畫(huà)運(yùn)動(dòng)狀態(tài),swing,可以指定為linear勻速
- 第三個(gè)是動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)
- slideDown()
- 高度動(dòng)畫(huà),從高度為0->正常
- slideUp()
- 高度動(dòng)畫(huà),從高度為正常->0
- slideToggle()
- 高度(0<-->正常)轉(zhuǎn)換動(dòng)畫(huà)
- fadeIn()
- 淡入動(dòng)畫(huà)
- fadeTo()
- 參數(shù)是指定的不透明度,淡出到該值
- fadeOut()
- 淡出動(dòng)畫(huà)
- fadeToggle()
- 淡入淡出轉(zhuǎn)換動(dòng)畫(huà)
- animate()
- 制作元素的動(dòng)畫(huà)效果
- 第一個(gè)參數(shù)是個(gè)對(duì)象,指定元素變化到的css樣式
- 第二個(gè)參數(shù)是動(dòng)畫(huà)時(shí)間
- 第三個(gè)參數(shù)是動(dòng)畫(huà)速度狀態(tài),ease減速,easeIn加速,linear勻速
- 第四個(gè)參數(shù)是個(gè)函數(shù),動(dòng)畫(huà)執(zhí)行完成后執(zhí)行,可以在里面加入下一個(gè)動(dòng)畫(huà)
- stop()
- 用來(lái)調(diào)整動(dòng)畫(huà)隊(duì)列顯示效果
- 第一個(gè)參數(shù)為true,清空隊(duì)列
- 第二個(gè)參數(shù)為true,立即展示動(dòng)畫(huà)效果,為false的時(shí)候,結(jié)束動(dòng)畫(huà)效果
- 不填參數(shù),默認(rèn)兩個(gè)參數(shù)都為false
- delay(數(shù)字)
- 延遲動(dòng)畫(huà)時(shí)間,單位毫秒
- finish()
- 清空所有隊(duì)列,停止所有動(dòng)畫(huà)
- eq(數(shù)字)
- 返回匹配到的下標(biāo)為數(shù)字的jquery對(duì)象,從0開(kāi)始計(jì)數(shù)
- first()
- 返回匹配到的第一個(gè)jquery對(duì)象,從0開(kāi)始計(jì)數(shù)
- last()
- 返回匹配到的最后一個(gè)jquery對(duì)象,從0開(kāi)始計(jì)數(shù)
- hasClass(類(lèi)名)
- 判斷指定元素是否具有該類(lèi),若有返回布爾值true,否則返回false
- filter(選擇器名)
- 返回匹配到指定選擇器名的元素
- is(選擇器名)
- 指定選擇器至少有一個(gè)滿足該選擇器名條件,返回true,否則返回false
- map(函數(shù))
- 遍歷jquery對(duì)象,函數(shù)返回值構(gòu)成數(shù)組
- has()
- 參數(shù)是dom或者字符串,返回滿足子元素具有該參數(shù)的該元素的jquery對(duì)象
- not()
- 參數(shù)是dom或者字符串,返回不滿足該參數(shù)條件的元素的jquery對(duì)象
- slice(開(kāi)始下標(biāo),結(jié)束下標(biāo))
- 獲取元素中指定下標(biāo)值到結(jié)束下標(biāo)值的對(duì)象們,不包含結(jié)束下標(biāo)
- children()
- 用來(lái)獲取子元素集合,不是后代集合
- 參數(shù)為空,獲取指定元素的全部子元素
- 參數(shù)不為空,獲取滿足條件的子元素集合
- find()
- 匹配所有滿足參數(shù)條件的后代元素
- closest()
- 從當(dāng)前元素開(kāi)始向祖先查找滿足條件的元素,找到一個(gè)就停止,找不到返回空jquery對(duì)象
- 不同與parents()后者是從父元素開(kāi)始查找
- parents()
- 匹配所有滿足參數(shù)條件的祖先元素
- parent()
- 若參數(shù)為空,返回父親元素
- 若參數(shù)不為空,返回滿足指定條件的父親元素
- next()
- 返回下一個(gè)兄弟元素
- nextAll()
- 若參數(shù)為空,向下匹配,返回所有兄弟元素
- 若參數(shù)不為空,向下匹配,返回滿足指定條件的兄弟元素
- nextUntil()
- 向下匹配,直至找到滿足條件的兄弟元素
- prev()
- 返回上一個(gè)兄弟元素
- prevAll()
- 若參數(shù)為空,向上匹配,返回所有兄弟元素
- 若參數(shù)不為空,向上匹配,返回滿足指定條件的兄弟元素
- prevUntil()
- 向上匹配,直至找到滿足條件的兄弟元素
- offsetParent()
- 返回用于當(dāng)前元素css定位的節(jié)點(diǎn),position為相對(duì)定位或絕對(duì)定位
- siblings()
- 若參數(shù)為空則返回所有兄弟節(jié)點(diǎn)
- 若參數(shù)不為空返回滿足條件的所有兄弟節(jié)點(diǎn)
- add(元素)
- 將參數(shù)元素添加到指定元素列表中返回,沒(méi)有添加到dom中,而是返回了個(gè)列表
- addBack()
-
添加堆棧中元素集合到當(dāng)前集合
$("ul").children("li:lt(3)").addBack().css("background-color","red") // 將ul和滿足條件的li標(biāo)簽的背景顏色變紅
-
- end
-
將當(dāng)前對(duì)象調(diào)整為上一次調(diào)用的對(duì)象
$("ul").find("li").eq(0).end() // 當(dāng)前的jquery對(duì)象返回到的ul,即現(xiàn)在的jquery對(duì)象為$("ul")
-
- contents()
- 匹配元素內(nèi)部所有的子節(jié)點(diǎn),包括文本節(jié)點(diǎn)
隨手點(diǎn)個(gè)贊,謝謝大家
更多文章 我的github