This time I will show you how to operate JQuery elements and what are the precautions for operating JQuery elements. The following is a practical case, let's take a look.

First, let’s take a look at how to find the desired node in jquery.

Step one: sizzle selector

"Find" (or select) HTML elements based on the element's id, class, type, attribute, attribute value, etc., simple It is said to be based on css selectors, in addition to some specific selectors.

Step 2: Query ancestors

parent()

Returns the direct parent element of the selected element. This method will only go up one level. DOM tree traversal

parents()

Optional parameters can be used to filter the search for parent elements
Returns all ancestor elements of the selected element, all the way up to the root of the document Element

parentsUntil()

Returns all ancestor elements between two given elements. The following is an example:

$(document).ready(function(){
??//會(huì)返回span開始到p為止的祖先元素
??$("span").parentsUntil("p");
});

Step 3: Query Descendants

children()

You can use optional parameters to filter the search for child elements

Returns all direct child elements of the selected element. This method only The DOM tree will be traversed to the next level

find()

You can use optional parameters to filter the search for elements

Returns the descendant elements of the selected element. All the way down to the last descendant

Step 4: Query siblings

siblings()

Return all sibling elements of the selected element

next()

Returns the next sibling element of the selected element

nextAll()

Returns all sibling elements after the selected element

nextUntil()

Returns all following sibling elements between the two given arguments

$(document).ready(function(){
??//返回介于?<h2>與<h6>元素之間的所有同胞元素
??$("h2").nextUntil("h6");
});

prev(), prevAll() and prevUntil()

The prev(), prevAll() and prevUntil() methods work similarly to the above methods, except in the opposite direction: they return the previous sibling elements (traversing along the previous sibling elements in the DOM tree, and Not after element traversal).

Step 5: Add filtering when querying

first()

Return the first element among the selected elements

last()

Returns the last element among the selected elements

eq()

Returns the element with the specified index number among the selected elements. This is easy to understand. , an example is: $(element[flag]) has the same result as element.eq(flag)

filter()

Filters the query results, similar to not() below, but has the opposite effect

not()

Return all elements that do not match the standard

$(document).ready(function(){
??//返回不帶有類名"target"的所有p元素
??$("p").not(".target");
});

After the element is found, we then need to operate on the found node according to the requirements.

Step 6: text(), html(), val() and attr()

text(), html(), val() and attr (), has a callback function. The callback function takes two parameters: the index of the current element in the selected element list, and the original (old) value. Then return the string you wish to use as the function's new value

1.text() - Sets or returns the text content of the selected element

2.html() - Sets or returns the selected element The content of the element (including HTML tags)

3.val() - Sets or returns the value of a form field

4.attr() - Sets or returns the value of an attribute

$("#btn1").click(function(){
??$("#test1").text(function(i,origText){
??
????return?"舊文本:?"?+?origText?+?"?新文本:?index:?"?+?i;
????
??});
??
});

Step 7: Add elements

append() - Insert content at the internal end of the selected element

prepend() - Insert content at the internal beginning of the selected element Content

after() - Insert content after the selected element

before() - Insert content before the selected element

Step 8: Delete the element

remove() accepts one parameter, allowing you to filter deleted elements. empty() cannot

remove() - delete the selected element (and its sub-elements) )

empty() - removes child elements from the selected elements

//等同于$("p.target").remove();
$("p").remove(".target");

第九步：替換元素

replaceAll()和replaceWith()功能類似，但是目標(biāo)和源相反

replaceWith() - 用提供的內(nèi)容替換集合中所有匹配的元素并且返回被刪除元素的集合

replaceAll() - 用集合的匹配元素替換每個(gè)目標(biāo)元素

第十步：class操作

addClass() - 向被選元素添加一個(gè)或多個(gè)類

removeClass() - 從被選元素刪除一個(gè)或多個(gè)類

toggleClass() - 對被選元素進(jìn)行添加/刪除類的切換操作

hasClass() - 判斷一個(gè)元素是否存在該class

第十一步：css()方法

設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性

css("propertyname"); - 返回propertyname屬性的值

css("propertyname","value"); - 設(shè)置propertyname屬性的值

css({"propertyname":"value","propertyname":"value",...}); - 設(shè)置多個(gè)值

第十二步：元素尺寸

width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）

height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）

innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）

innerHeight() 方法返回元素的高度（包括內(nèi)邊距）

outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）

outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

怎樣使用Angular打開Font-Awesome

Vue做出彈窗功能（附代碼）

The above is the detailed content of How to operate JQuery elements. For more information, please follow other related articles on the PHP Chinese website!