關聯查找

1)$dom.parent()：找$dom的父節點，相當于dom.parentNode屬性

2)$dom.first()：$dom集合中的第一個，平行關系 而不是父子關系 與parentNode.firstChild不一樣

3)$dom.last()：$dom集合中的最后一個 平行關系 而不是父子關系 與parentNode.lastChild不一樣

4)$dom.contents()：找$dom的所有子節點 相當于dom.childNodes

5)$dom.children()：找$dom的所有元素節點 相當于dom.children

6)$dom.siblings()：找$dom的所有兄弟元素 只要是平行關系就是兄弟

7)$dom.next()：找$dom的下一個兄弟，相當于dom.nextSibling

8)$dom.nextAll()：找$dom的接下來所有兄弟節點

表單域過濾

查找單選框? ??console.log($("input:radio"))

查找多選框? ??console.log($("input:checkbox"))

查找選中項? ? ?console.log($("input:radio:checked").val())

返回第一個的值? ?console.log($("input:checkbox:checked").val())

Select 選中項要通過option獲取? ?console.log($("select option:checked").val())

遍歷操作

each()方法

jQuery封裝的each方法用來遍歷$dom集合或者一個常規數據的集合，它是對for和for...in的再封裝。

作為數組或者一個偽數組對象（擁有length），該方法會返回編號部分的數據值；如果遍歷的是對象，則提取屬性值。

1) $.each(arr/obj, callback)

$.each()方法中，除了指定源數組或對象外，還需要傳入一個回調函數作為循環執行動作，類似于數組的forEach()方法,回調函數調用時會將每次遍歷出的元素下標（或對象屬性key）以及元素值（或對象屬性值val）作為參數傳遞。

屬性操作

由于jQuery選擇器獲取的是jQuery dom($dom)，因此需要專門的方法獲取相應的dom屬性值：

attr()方法

通用的attr()方法用來操作$dom設置的標準屬性或者自定義屬性，既可以讀取也可以設置，相當于原生js中的getAtribute()

若要檢索和更改DOM的狀態屬性，比如元素的checked, selected, 或disabled等，請使用==prop()==方法：??$("input:checkbox").prop("checked", true)

val()方法

對于表單控件常用的value屬性，可以通過val()方法單獨訪問,可以理解為$dom.attr("value")

1） $dom.val()

讀取$dom中的value屬性，如果$dom是含有多個dom的集合，則返回第一個dom的value值

2） $dom.val("屬性值")

給$dom設置value屬性值，如果$dom是含有多個dom的集合，那么會統一設置它們的屬性

3） $dom.val(["值1", "值2"])

給多選框（checkbox）、下拉框（select）同時設置多個選中項 這里的值1和值2 指代的是選框的value值，也就是給多個選項設置為checked

4） $dom.val(function (idx, val) {})

使用匿名函數設置value屬性值

html()和text()

使用html()方法獲取節點的內容相當于innerHTML屬性，text()方法獲取文本 相當于innerText

1） $dom.html()? ?獲取元素節點的內容（包含html內容）

2)? $dom.text()獲取元素節點的文本信息（去除了html標簽）,是==$dom集合中所有的內容==

3)? $dom.html("值")? 重置節點的內容

4) $dom.html(function (idx, html) {})

prop()

使用prop方法給$dom設置屬性 首先==存放于內存中== 其中的標準屬性會作用于DOM上 而非標準屬性則不顯示。

在jQuery中 它有一個重要的使用 就是用來設置表單控件的selected disabled checked。

$dom.prop("屬性")； 讀取$dom的prop屬性

$dom.prop("屬性"，"值") 設置$dom的prop屬性

$dom.removeProp("屬性") 刪除使用prop定義的非標準屬性

樣式設置

css方法

jQuery提供了css方法用來實現jQuery dom樣式化，本質上是對window.getComputedStyle()和dom.style的封裝,這樣保證它的樣式操作更具兼容性。

1)$dom.css("樣式") 讀取$dom的css樣式，返回帶單位的結果

2)$dom.css("樣式", "值")?設置一個樣式 樣式的寫法 既可以是駝峰 也可以是css-樣式，需要帶單位， jQuery的使用是比較靈活的：

$dom.css("backgroundColor") $dom.css("background-color")

1)$dom.css({樣式1:"值1", 樣式2:"值2"})

同時設置多個樣式? ?$dom.css("樣式"， function (idx, css) {})

快速樣式

1）$dom.height()

讀取匹配元素集合中的第一個元素的當前計算高度值：$dom.height();

給DOM集合中所有元素設置一個高度值：$dom.height(100)

2）$dom.width()

獲取匹配元素集合中的第一個元素的當前計算寬度值。

設置每個匹配的元素的寬度

3）$dom.position() => {left : , top : }

獲取匹配元素中第一個元素的當前坐標，相對于offset parent的坐標。==它是DOM設置的坐標值==，和實際坐標值一般不等。

4）$dom.offset() => {left : , top : }

在匹配的元素集合中，獲取的第一個元素的當前坐標，坐標相對于文檔。即元素在頁面中的==真實坐標位置==：定位坐標 + margin。

它和原生JS中的offsetLeft和offsetTop返回結果相等。

綁定類

原生js中添加樣式:

cont.className = "highlight"; base被覆蓋了

后來h5 擴展classList屬性 操作樣式，事實上 classList就是從jquery中偷師過去的

$dom.addClass() 給元素綁定樣式，它是追加一個樣式到元素中

$dom.removeClass() 給元素移除樣式，它移出指定的樣式

$dom.toggleClass() 切換類開關，如果沒有則綁定該類，如果有則清除類

DOM 節點操作

添加節點

$parent.append($child)

在$parent父節點的最后位置追加一個子節點 相當于JS中parent.appendChild(child)

$child.appendTo($parent)

將$node節點追加到$parent中，和append()顛倒父子關系

$parent.prepend($child)

在$parent父節點最前面插入一個子節點，相當于JS中parent.insertBefore(parent.firstChild, node);

$child.prependTo($parent)

將$node插入$parent的最前面，和prepend()顛倒父子關系。

$node.after()

$node.parentNode.insertBefore($node.nextSibling, 要插入的節點)

示例：$("ul li").last().after("<li></li>") 在ul最后一個li的后面插入一個節點

$node.before()

示例：$("ul li").first().before("<li></li>") 在ul第一個li的前面插入一個節點

節點替換

$node1.replaceAll($node2)

用$node1替換$node2集合中的所有節點，主動替換

$node1.replaceWith($node2)

$node1集合中的所有節點被$node2替換，被動替換

刪除節點

$parent.empty() 父節點清空子節點，相當于parent.innerHTML = "";

$node.remove() 刪除當前選中的所有節點

parentNode.removeChild() $node.parentNode.removeChild($node)

克隆節點

在JS中 使用dom.cloneNode([true]) 用來復制一個DOM節點；不同于原生dom節點的復制，jQuery dom復制時還包括其綁定的事件。

$node.clone(true) 節點和其身上的事件都給復制（jQuery事件）

$node.clone(false) 只給復制節點本身(包括節點內部信息)

事件綁定

jQuery事件機制

jQuery對常見類型事件封裝了相應的方法，如click()、mouseover()、focus()等。

jQuery會==自動遍歷==$dom集合中的元素 依次為它們綁定相應的事件。且綁定的事件 使用了事件監聽 也就是說可以為一個dom綁定多個事件處理程序。

// 1、如果給集合綁定事件，jquery會自動遍歷 統一設置 $('ul li').click(function (event) {// alert(1);console.log(event);// 事件函數中 this表示當前dom - 原生console.log(this);console.log($(this));// 2、可以通過index()方法獲取編號let index = $(this).index();alert(index)})// 3、jquery 事件內部是使用addEventListener()來綁定的 // 因此可以綁定多個事件函數

jquery中綁定事件有3中方式：

* 1、事件方法，多數事件有它相應的方法：

* "blur focus focusin focusout resize scroll click dblclick " +

"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +

"change select submit keydown keypress keyup contextmenu"

2、on方法綁定事件：$dom.on('類型', [代理的子元素], [data], function (event) {})

3、bind方法綁定事件，on的簡化版：$dom.on('類型', [data], function (event) {})

$('#uname').focus(function () {$(this).css('background-color', 'pink')}).blur(function () {$(this).css('background', 'none')}).change(function () {console.log($(this).val());}) // .input(); // input不在支持的方法范圍內

總結

以上是生活随笔為你收集整理的jQuery快速入门（2）--操作 2021.11.20的全部內容，希望文章能夠幫你解決所遇到的問題。

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