當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

04.jQuery 基本语法笔记

發布時間：2023/12/4 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 04.jQuery 基本语法笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery是什么

jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。

jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，能夠極大地簡化JavaScript編程。它的宗旨就是：“Write less, do more.“

jQuery引入到HTML

在HTML的body內，底部引入文件jquery-3.2.1.min.js

jQuery對象

jQuery對象就是通過jQuery包裝DOM對象后產生的對象。jQuery對象是 jQuery獨有的。如果一個對象是?jQuery對象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：獲取id值為?i1的元素的html代碼。其中?html()是jQuery里的方法。

相當于：?document.getElementById("i1").innerHTML;

一個約定，我們在聲明一個jQuery對象變量的時候在變量名前面加上$：

var $variable = jQuery對像 var variable = DOM對象 $variable[0]//jQuery對象轉成DOM對象

拿上面那個例子舉例，jQuery對象和DOM對象的使用：

$("#i1").html();//jQuery對象可以使用jQuery的方法 $("#i1")[0].innerHTML;// DOM對象使用DOM的方法

jQuery基礎語法

$(selector).action()

查找標簽

基本選擇器

id選擇器：

$("#id")

標簽選擇器：

$("tagName")

class選擇器：

$(".className")

配合使用：

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

所有元素選擇器：

$("*")

組合選擇器：

$("#id, .className, tagName")

層級選擇器：

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:has(.c1)")// 找到所有后代中有c1樣式類的div標簽 $("li:not(.c1)")// 找到所有不包含c1樣式類的li標簽 $("li:not(:has(a))")// 找到所有后代中不含a標簽的li標簽

屬性選擇器：

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

例子：

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

表單篩選器：

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

例子：

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

表單對象屬性:

:enabled :disabled :checked :selected

例子：

找到可用的input標簽

<form><input name="email" disabled="disabled" /><input name="id" /> </form>$("input:enabled") // 找到可用的input標簽

?找到被選中的option：

<select id="s1"><option value="beijing">北京市</option><option value="shanghai">上海市</option><option selected value="guangzhou">廣州市</option><option value="shenzhen">深圳市</option> </select>$(":selected") // 找到所有被選中的option

篩選器方法

下一個元素：

$("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2")

上一個元素：

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

父親元素：

$("#id").parent() $("#id").parents() // 查找當前元素的所有的父輩元素 $("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。

兒子和兄弟元素：

$("#id").children();// 兒子們 $("#id").siblings();// 兄弟們

查找

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

$("div").find("p")

等價于$("div p")

篩選

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

$("div").filter(".c1") // 從結果集中過濾出有c1樣式類的

等價于 $("div.c1")

補充：

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

操作標簽

樣式操作

樣式類

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

示例：開關燈和模態框

CSS

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

示例：

$("p").css("color", "red"); //將所有p標簽的字體設置為紅色

位置操作

offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置 position()// 獲取匹配元素相對父元素的偏移 scrollTop()// 獲取匹配元素相對滾動條頂部的偏移 scrollLeft()// 獲取匹配元素相對滾動條左側的偏移

.offset()方法允許我們檢索一個元素相對于文檔（document）的當前位置。

和?.position()的差別在于：?.position()是相對于相對于父級元素的位移。

尺寸：

height() width() innerHeight() innerWidth() outerHeight() outerWidth()

文本操作

HTML代碼：

html()// 取得第一個匹配元素的html內容 html(val)// 設置所有匹配元素的html內容

文本值：

text()// 取得所有匹配元素的內容 text(val)// 設置所有匹配元素的內容

值：

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

例如：

設置值：

$("[name='hobby']").val(['basketball', 'football']); $("#s1").val(["1", "2"])

示例：

獲取被選中的checkbox或radio的值：

可以使用：

$("input[name='gender']:checked").val()

屬性操作

用于ID等或自定義屬性：

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

用于checkbox和radio

prop() // 獲取屬性 removeProp() // 移除屬性

注意：

在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操作時會出bug，在3.x版本的jQuery中則沒有這個問題。為了兼容性，我們在處理checkbox和radio的時候盡量使用特定的prop()，不要使用attr("checked", "checked")。

<input type="checkbox" value="1"> <input type="radio" value="2"> <script>$(":checkbox[value='1']").prop("checked", true);$(":radio[value='2']").prop("checked", true); </script>

prop和attr的區別：

attr全稱attribute(屬性)?

prop全稱property(屬性)

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

舉個例子：

針對上面的代碼，

$("#i1").attr("checked") // undefined $("#i1").prop("checked") // false

可以看到attr獲取一個標簽內沒有的東西會得到undefined，而prop獲取的是這個DOM對象的屬性，因此checked為false。

如果換成下面的代碼：

再執行：

$("#i1").attr("checked") // checked $("#i1").prop("checked") // true

這已經可以證明attr的局限性，它的作用范圍只限于HTML標簽內的屬性，而prop獲取的是這個DOM對象的屬性，選中返回true，沒選中返回false。

接下來再看一下針對自定義屬性，attr和prop又有什么區別：

執行以下代碼：

$("#i1").attr("me") // "自定義屬性" $("#i1").prop("me") // undefined

可以看到prop不支持獲取標簽的自定義屬性。

總結一下：

對于標簽上有的能看到的屬性和自定義屬性都用attr

對于返回布爾值的比如checkbox、radio和option的是否被選中都用prop。

文檔處理

添加到指定元素內部的后面

$(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()// 參數

摘抄自:https://www.cnblogs.com/liwenzhou/p/8178806.html

總結

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

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

上一篇： Django03: django加入AP
下一篇： 04-1.jQuery事件与补充each