關(guān)聯(lián)查找

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

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

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

4)$dom.contents()：找$dom的所有子節(jié)點 相當(dāng)于dom.childNodes

5)$dom.children()：找$dom的所有元素節(jié)點 相當(dāng)于dom.children

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

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

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

表單域過濾

查找單選框? ??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集合或者一個常規(guī)數(shù)據(jù)的集合，它是對for和for...in的再封裝。

作為數(shù)組或者一個偽數(shù)組對象（擁有l(wèi)ength），該方法會返回編號部分的數(shù)據(jù)值；如果遍歷的是對象，則提取屬性值。

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

$.each()方法中，除了指定源數(shù)組或?qū)ο笸?#xff0c;還需要傳入一個回調(diào)函數(shù)作為循環(huán)執(zhí)行動作，類似于數(shù)組的forEach()方法,回調(diào)函數(shù)調(diào)用時會將每次遍歷出的元素下標(biāo)（或?qū)ο髮傩詋ey）以及元素值（或?qū)ο髮傩灾祐al）作為參數(shù)傳遞。

屬性操作

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

attr()方法

通用的attr()方法用來操作$dom設(shè)置的標(biāo)準(zhǔn)屬性或者自定義屬性，既可以讀取也可以設(shè)置，相當(dāng)于原生js中的getAtribute()

若要檢索和更改DOM的狀態(tài)屬性，比如元素的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設(shè)置value屬性值，如果$dom是含有多個dom的集合，那么會統(tǒng)一設(shè)置它們的屬性

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

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

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

使用匿名函數(shù)設(shè)置value屬性值

html()和text()

使用html()方法獲取節(jié)點的內(nèi)容相當(dāng)于innerHTML屬性，text()方法獲取文本 相當(dāng)于innerText

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

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

3)? $dom.html("值")? 重置節(jié)點的內(nèi)容

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

prop()

使用prop方法給$dom設(shè)置屬性 首先==存放于內(nèi)存中== 其中的標(biāo)準(zhǔn)屬性會作用于DOM上 而非標(biāo)準(zhǔn)屬性則不顯示。

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

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

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

$dom.removeProp("屬性") 刪除使用prop定義的非標(biāo)準(zhǔn)屬性

樣式設(shè)置

css方法

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

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

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

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

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

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

快速樣式

1）$dom.height()

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

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

2）$dom.width()

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

設(shè)置每個匹配的元素的寬度

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

獲取匹配元素中第一個元素的當(dāng)前坐標(biāo)，相對于offset parent的坐標(biāo)。==它是DOM設(shè)置的坐標(biāo)值==，和實際坐標(biāo)值一般不等。

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

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

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

綁定類

原生js中添加樣式:

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

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

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

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

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

DOM 節(jié)點操作

添加節(jié)點

$parent.append($child)

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

$child.appendTo($parent)

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

$parent.prepend($child)

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

$child.prependTo($parent)

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

$node.after()

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

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

$node.before()

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

節(jié)點替換

$node1.replaceAll($node2)

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

$node1.replaceWith($node2)

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

刪除節(jié)點

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

$node.remove() 刪除當(dāng)前選中的所有節(jié)點

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

克隆節(jié)點

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

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

$node.clone(false) 只給復(fù)制節(jié)點本身(包括節(jié)點內(nèi)部信息)

事件綁定

jQuery事件機制

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

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

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

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

* 1、事件方法，多數(shù)事件有它相應(yīng)的方法：

* "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不在支持的方法范圍內(nèi)

總結(jié)

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

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