jQuery基礎(chǔ)語法

#不管找什么標(biāo)簽，用什么選擇器，都必須要寫$("")，引號里面再寫選擇器，通過jQuery找到的標(biāo)簽對象就是一個jQuery對象，用原生JS找到的標(biāo)簽對象叫做DOM對象。二者可以相互轉(zhuǎn)換。$('')[0]:就是jQuery對象轉(zhuǎn)DOM對象，$(DOM對象)：就是DOM對象轉(zhuǎn)jQuery對象。

查找標(biāo)簽

基本選擇器（同css）

id選擇器：

$("#id")

標(biāo)簽選擇器：

$("tagName")

class選擇器：

$(".className")

配合使用：

$("div.c1") // 找到有c1 class類的div標(biāo)簽

所有元素選擇器：

$("*")

組合選擇器：

$("#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 // 匹配所有索引值為偶數(shù)的元素，從 0 開始計數(shù) :odd // 匹配所有索引值為奇數(shù)的元素，從 0 開始計數(shù) :gt(index)// 匹配所有大于給定索引值的元素 :lt(index)// 匹配所有小于給定索引值的元素 :not(元素選擇器)// 移除所有滿足not條件的標(biāo)簽 :has(元素選擇器)// 選取所有包含一個或多個標(biāo)簽在其內(nèi)的標(biāo)簽(指的是從后代元素找)

例：$("div:has(h1)")// 找到所有后代中有h1標(biāo)簽的div標(biāo)簽，意思是首先找到所有div標(biāo)簽，把這些div標(biāo)簽的后代中有h1的div標(biāo)簽篩選出來 $("div:has(.c1)")// 找到所有后代中有c1樣式類（類屬性class='c1'）的div標(biāo)簽 $("li:not(.c1)")// 找到所有不包含c1樣式類的li標(biāo)簽 $("li:not(:has(a))")// 找到所有后代中不含a標(biāo)簽的li標(biāo)簽

屬性選擇器：

[attribute] [attribute=value]// 屬性等于 [attribute!=value]// 屬性不等于

例子：

// 示例,多用于input標(biāo)簽 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox類型的input標(biāo)簽 $("input[type!='text']");// 取到類型不是text的input標(biāo)簽

表單篩選器（多用于找form表單里面出現(xiàn)的input標(biāo)簽，當(dāng)然通過屬性選擇器找肯定也是沒問題的，這樣就是寫著簡單一些）：

:text :password :file :radio :checkbox :submit :reset :button

例子：

$(":checkbox") // 找到所有的checkbox

表單對象屬性:

:enabled :disabled :checked　　　　//只用checked篩選，不僅會選中點選的form表單的結(jié)果，還會選中select的結(jié)果。 :selected

篩選器方法

下一個元素：

$("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") #直到找到id為i2的標(biāo)簽就結(jié)束查找，不包含它

上一個元素：

$("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2")

父親元素：

$("#id").parent() $("#id").parents() // 查找當(dāng)前元素的所有的父輩元素（爺爺輩、祖先輩都找到）
$("#id").parentsUntil('body') // 查找當(dāng)前元素的所有的父輩元素，直到遇到匹配的那個元素為止，這里直到body標(biāo)簽，不包含body標(biāo)簽，基本選擇器都可以放到這里面使用。

兒子和兄弟元素：

$("#id").children();// 兒子們 $("#id").siblings();// 兄弟們，不包含自己，.siblings('#id')，可以在添加選擇器進行進一步篩選

查找：

搜索所有與指定表達式匹配的元素。這個函數(shù)是找出正在處理的元素的后代元素的好方法。

$("div").find("p") //等價于$("div p")

篩選：

篩選出與指定表達式匹配的元素集合。這個方法用于縮小匹配的范圍。用逗號分隔多個表達式。

$("div").filter(".c1") // 等價于 $("div.c1")，從結(jié)果集中過濾出有c1樣式類的，從所有的div標(biāo)簽中過濾出有class='c1'屬性的div，和find不同，find是找div標(biāo)簽的子子孫孫中找到一個符合條件的標(biāo)簽

補充（和前面使用冒號的一樣 ?:first等，只不過冒號的那個是寫在選擇器里面的，而下面的這幾個是方法，如此而已，就不說啦）：

.first() // 獲取匹配的第一個元素 .last() // 獲取匹配的最后一個元素 .not() // 從匹配元素的集合中刪除與指定表達式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素

操作標(biāo)簽：

樣式操作：

樣式類：（添加刪除class類的值來修改樣式）

addClass();// 添加指定的CSS類名。 removeClass();// 移除指定的CSS類名。 hasClass();// 判斷樣式存不存在 toggleClass();// 切換CSS類名，如果有就移除，如果沒有就添加。

CSS：（直接修改css的屬性來修改樣式）

css("color","red")//DOM操作：tag.style.color="red"

位置操作：

offset()// 獲取匹配元素在當(dāng)前窗口的相對偏移或設(shè)置元素位置 position()// 獲取匹配元素相對父元素的偏移，不能設(shè)置位置 $(window).scrollTop() //滾輪向下移動的距離 $(window).scrollLeft() //滾輪向左移動的距離

　尺寸：

height() //盒子模型content的大小，就是我們設(shè)置的標(biāo)簽的高度和寬度 width() innerHeight() //內(nèi)容content高度 + 兩個padding的高度 innerWidth() outerHeight() //內(nèi)容高度 + 兩個padding的高度 + 兩個border的高度，不包括margin的高度，因為margin不是標(biāo)簽的，是標(biāo)簽和標(biāo)簽之間的距離 outerWidth()

文本操作：

設(shè)置HTML：

html()// 取得第一個匹配元素的html內(nèi)容，包含標(biāo)簽內(nèi)容 html(val)// 設(shè)置所有匹配元素的html內(nèi)容，識別標(biāo)簽，能夠表現(xiàn)出標(biāo)簽的效果

設(shè)置文本：

text()// 取得所有匹配元素的內(nèi)容，只有文本內(nèi)容，沒有標(biāo)簽 text(val)// 設(shè)置所有匹配元素的內(nèi)容，不識別標(biāo)簽，將標(biāo)簽作為文本插入進去

查詢，設(shè)置值：

val()// 取得第一個匹配元素的當(dāng)前值 val(val)// 設(shè)置所有匹配元素的值 val([val1, val2])// 設(shè)置多選的checkbox、多選select的值

屬性操作

attr全稱attribute(屬性)?

prop全稱property(屬性)

雖然都是屬性，但他們所指的屬性并不相同，attr所指的屬性是HTML標(biāo)簽屬性，而prop所指的是DOM對象屬性，可以認(rèn)為attr是顯式的，而prop是隱式的。

attr用于自帶屬性等或自定義屬性：

attr(attrName)// 返回第一個匹配元素的屬性值 attr(attrName, attrValue)// 為所有匹配元素設(shè)置一個屬性值 attr({k1: v1, k2:v2})// 為所有匹配元素設(shè)置多個屬性值 removeAttr()// 從每一個匹配的元素中刪除一個屬性

prop主要用于checkbox和radio：返回一個狀態(tài)True和False

prop() // 獲取屬性狀態(tài) $("#i1").attr("checked") // checked $("#i1").prop("checked") // true

總結(jié)一下：

　　　　　　　　1.對于標(biāo)簽上有的能看到的屬性和自定義屬性都用attr

　　　　　　　　2.對于返回布爾值的比如checkbox、radio和option的是否被選中或者設(shè)置其被選中與取消選中都用prop。

?　　　　　　　　具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

文檔處理

添加到指定元素內(nèi)部的后面

$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B

添加到指定元素內(nèi)部的前面

$(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()// 刪除匹配的元素集合中所有的子節(jié)點，包括文本被全部刪除，但是匹配的元素還在

替換

replaceWith() replaceAll()

克隆

clone()// 參數(shù)，看下面的示例

事件

　　常用事件

click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) //內(nèi)容發(fā)生變化，input，select等 keyup(function(){...})
mouseover 和 mouseenter的區(qū)別是：mouseover事件是如果該標(biāo)簽有子標(biāo)簽，那么移動到該標(biāo)簽或者移動到子標(biāo)簽時會連續(xù)觸發(fā)，mmouseenter事件不管有沒有子標(biāo)簽都只觸發(fā)一次，表示鼠標(biāo)進入這個對象

事件綁定

對象.on(?events?[,?selector?],function(){})

1.events： 事件

2.selector: 選擇器（可選的）

3.function: 事件處理函數(shù)

移除事件

對象.off(?events?[,?selector?][,function(){}])

off()?方法移除用?.on()綁定的事件處理程序。

$("li").off("click")；就可以了

1.events： 事件

2.selector: 選擇器（可選的）

3.function: 事件處理函數(shù)

阻止后續(xù)事件執(zhí)行

1.?return?false;?// 常見阻止表單提交等，如果input標(biāo)簽里面的值為空就組織它提交，就可以使用這兩種方法

2. e.stopPropagation();

事件委托

事件委托是通過事件冒泡的原理，利用父標(biāo)簽去捕獲子標(biāo)簽的事件，將未來添加進來的某些子標(biāo)簽自動綁定上事件。

　　　　示例：

　　　　表格中每一行的編輯和刪除按鈕都能觸發(fā)相應(yīng)的事件?；厝ネ晟埔幌略蹅兩厦娴哪莻€作業(yè)吧，添加一行數(shù)據(jù)的那個作業(yè)，然后我們在學(xué)習(xí)一下上面的那些綁定事件。

$("table").on("click", ".delete", function () { //中間的參數(shù)是個選擇器，前面這個$('table')是父級標(biāo)簽選擇器，選擇的是父級標(biāo)簽，意思就是將子標(biāo)簽（子子孫孫）的點擊事件委托給了父級標(biāo)簽
//但是這里注意一點，你console.log(this)；你會發(fā)現(xiàn)this還是觸發(fā)事件的那個子標(biāo)簽，這個記住昂// 刪除按鈕綁定的事件
})

頁面載入

兩種寫法：

$(document).ready(function(){
// 在這里寫你的JS代碼... })

簡寫：

$(function(){ // 你在這里寫你的代碼 })

與window.onload的區(qū)別

　　　　1.window.onload()函數(shù)有覆蓋現(xiàn)象，必須等待著圖片資源加載完成之后才能調(diào)用

　　　　2.jQuery的這個入口函數(shù)沒有函數(shù)覆蓋現(xiàn)象，文檔加載完成之后就可以調(diào)用（建議使用此函數(shù)）

動畫效果

// 基本

show([s,[e],[fn]]) $('.c1').show() //show(5000),就是5秒之后顯示出來這個標(biāo)簽，并且有一個動畫效果，（搞個img圖片看看效果），后面兩個參數(shù)先不用管 hide([s,[e],[fn]]) $('.c1').hide() toggle([s],[e],[fn])//這幾個toggle的意思就是你原來是什么效果，我就反著來

// 滑動（拉窗簾一樣）

slideDown([s],[e],[fn])
//使用的時候別忘了給標(biāo)簽設(shè)置一個高度和寬度，其實就是控制你的標(biāo)簽高度，如果你寫$('#di').slideUp(5000)；意思就是5秒內(nèi)把你的高度變?yōu)?
//還有如果你直接操作的是img標(biāo)簽和操作img標(biāo)簽的父級標(biāo)簽，兩個的效果是不同的 slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn])

// 淡入淡出（控制透明度）

fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) o參數(shù)是透明度，0-1的區(qū)間，意思是淡入或者淡出到一個多大的透明讀 fadeToggle([s,[e],[fn]])

// 自定義（了解即可）

animate(p,[s],[e],[fn])

轉(zhuǎn)載于:https://www.cnblogs.com/NoteBook3013/p/10567702.html

總結(jié)

以上是生活随笔為你收集整理的前端jQuery基本语法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。