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])

轉載于:https://www.cnblogs.com/NoteBook3013/p/10567702.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。