JQuery物件獲取各類節點操作詳解

在前面的《jquery的選擇器和過濾器彙總》中我總結了jq中直接獲取元素的幾種方式，但是在很多時候，都是某個元素的事件響應中，需要對另乙個元素進行操作。這個時候除了使用id或者class這種定死的方式，還可以在事件響應的元素上做相對的查詢。這一篇我們就來總結一下。

h5內容如下

"container"
>
"box1"
>
"span1"
>
span
>
div>
"box2"
>
"span2"
>
span
>
div>
"span3"
>
span
>
>
i am pp
>
div>

首先定位到其中id為span3的span元素，然後在此基礎上進行操作。

let $container=$(
'#container');
let $span=$container.
children
('span'
);

這裡沒有直接用id來查詢，而是使用了jq元素的children方法來查詢直接子元素。

父級元素查詢有如下兩種方式

其中前者返回最近一級父元素，而後者返回所有的父級元素

console.
log($span.
parent()
);console.
log($span.
parents()
);

返回如下

jquery.fn.init [div#container, prevobject: jquery.fn.init(1)]
jquery.fn.init(3) [div#container, body, html, prevobject: jquery.fn.init(1)]

可以前者只是返回了container元素，而後者將body和html也都返回了。

值得一提的是，兩種方法都可以帶引數做為選擇器來對返回的結果進行過濾。例如

$span.
parents
('#container'
)

就只會返回container元素。

子級元素也有兩種

前者是直接子元素，在上面用過了，後者是所有子元素。同樣也都可以帶引數做為選擇器。關於children和find方法在查詢子元素上的區別和用法可以參考《jquery利用find查詢子元素並修改其樣式和屬性》。

兄弟元素有如下六種例如

console.
log($span.
prev()
);console.
log($span.
prevall()
);console.
log($span.
prevuntil()
);console.
log($span.
next()
);

的返回結果為

jquery.fn.init [div#box2, prevobject: jquery.fn.init(1)]
jquery.fn.init(2) [div#box2, div#box1, prevobject: jquery.fn.init(1)]
jquery.fn.init(2) [div#box2, div#box1, prevobject: jquery.fn.init(1)]
jquery.fn.init [p, prevobject: jquery.fn.init(1)]

JQuery獲取 this 子節點物件的方法

相信很多剛接觸jquery的人，很多都會對 this 和this的區別模糊不清，那麼這兩者有什麼區別呢？首先來看看jquery中的這個符號，實際上這個符號在jquery中相當於jquery 即 this jquery 也就是說，這樣可以返回乙個jquery物件。那麼，當你在網頁中alert id ...

JQuery物件獲取各類節點操作詳解

JQuery獲取 this 子節點物件的方法

JQuery獲取 this 子節點物件的方法

JQuery獲取 this 子節點物件的方法

相關推薦