Detailed explanation of how to get html element with JQuery
1.1 JQuery selector
syntax:
jquery(selector, [context]);
selector parameter, selector.
The content parameter limits the selector selector to the context of the context.
By default, that is, without passing the second parameter, the selector searches the DOM from the root of the document ($() will find DOM elements in the current HTML document); if the second parameter is specified, such as a set of DOM elements or jquery object, it will look in this context.
Example:
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
Since we've bound the span selector to the this context, only the span in the clicked element will get the additional class.
1.2 JQuery method to obtain html
1.2.1 Example html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instance</title>
</head>
<body>
<ul class="level-1">
<li class="item-i fist-li">I</li>
<li class="item-ii">
II
<ul class="level-2">
<li class="item-a fist-li">A</li>
<li class="item-b">B</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<ul class="level-3">
<li class="item-1 fist-li">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
<ul class="level-4">
<li class="item-one fist-li">1</li>
</ul>
<!--[if !IE]><!-->
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<![endif]-->
</body>
</html>
1.2.2 Get the parent element
1.2.2.1 The parent([expr]) method
function: Get a set of elements that contains the unique parent element of all matching elements.
Example:
<script>
$(".fist-li").parent();
$(".fist-li").parent(".level-2");
</script>
1.2.2.2
The function of the parents([expr]) method: Get an element set (not limited to parent elements) that contains the ancestor elements of all matching elements.
Example:
<script>
$(".item-a").parents();
$(".item-a").parents(".level-1");
</script>
1.2.2.3 The closest([expr]) method
works: Start from the current element and go up the DOM tree to get the first ancestor element that matches the selector.
Note:
The closest method will first check whether the current element matches, and if it matches, it will directly return the element itself. If it doesn't match, look up the parent element, layer by layer, until you find an element that matches the selector. Returns an empty jquery object if nothing is found.
The closest method must pass in a selector expression parameter, otherwise, it will return an empty jquery object.
Example:
<script>
$(".item-a").closest(".item-a");
$(".item-a").closest(".level-1");
</script>
1.2.2.4 Extension - the difference between closest and parents The
former starts matching and searching from the current element, while the latter starts matching and searching from the parent element.
The former searches up level by level until it finds a matching element, and the latter searches up until the root element, then puts these elements into a temporary collection, and then uses the given selector expression to filter.
The former returns 0 or 1 elements, the latter may contain 0, 1, or more elements.
1.2.3 Get sibling element
1.2.3.1 next([expr]) method
function: Get the next sibling element of the specified element.
Example:
<script>
$(".item-a").next();
// The next method does not allow parameters to be passed in (you can pass in a selector to find the next sibling element of the element, but it is meaningless), otherwise, it will return an empty jquery object.
$(".item-a").next(".item-b");
</script>
1.2.3.2 The function of nextAll([expr]) method
: Get all sibling elements after the specified element.
Example:
<script>
$(".item-a").nextAll();
// The nextAll method allows incoming parameters, but the incoming parameter can only be the selector of an element among all the sibling elements behind the specified element, otherwise, an empty jquery object will be returned.
$(".item-a").nextAll(".item-b");
</script>
1.2.3.3 The function of prev() method
: Get the previous sibling element of the specified element.
Example:
<script>
$(".item-c").prev();
//same as next() method
$(".item-c").prev(".item-b");
</script>
1.2.3.4 The function of prevAll() method
: Get all the sibling elements in front of the specified element.
Example:
<script>
$(".item-c").prevAll();
//Same as nextAll() method
$(".item-c").prevAll(".item-b");
</script>
1.2.3.5
The function of siblings() method: Get the sibling nodes of the specified element, regardless of the front and rear.
Example:
<script>
$(".item-b").siblings();
$(".item-b").siblings(".item-a");
</script>
1.2.3.6 andSelf()[addBack()] method
function: add the previously matched element to the current matched element.
Note: This function was added in jQuery 1.2, but has been marked obsolete since 1.8. As of jQuery 1.8, use the addBack() function instead.
Example:
<script>
$(".item-a").nextAll().addBack();
</script>
1.2.4 Get child elements
1.2.4.1 children() method
function: Get all child elements (only children) of each element in the set of matched elements.
Example:
<script>
$(".level-1").children();
$(".level-1").children(".item-ii");
</script>
1.2.4.2
The function of the find() method: Get the descendants of each element in the set of matched elements (as long as they match, whether they are sons or grandchildren).
Note: only traverse in descendants, not including yourself.
Example:
<script>
//The selector expression is a required parameter for the find() method. If you need to return all descendant elements you can pass the wildcard selector "*".
$(".level-1").find("*");
$(".level-1").find(".item-b");
</script>
1.2.4.3 Extension - similarities and differences between children() and find()
:
Both are used to obtain the child elements of element.
Neither will return a text node.
The difference:
the former gets only the sub-elements of the element, namely: immediate children; the latter gets all the sub-elements, namely: descendants of these elements in the DOM tree .
The former parameter selector is optional and is used to filter child elements; the latter parameter selector method is mandatory.
The latter can actually be achieved by using jQuery( selector, context ), i.e. $('li.item-ii').find('li') is equivalent to $('li', 'li.item-ii') .
1.2.4.4 contents() method
function: Returns all the contents below, including nodes and text.
Example:
<script>
$(".level-1").contents();
$(".level-1").contents(".item-i");
</script>
1.2.4.5 Extension - the difference between contents() and children() The
biggest difference between the two is that the former includes text, and even blank text will be returned as a jQuery object, while the latter will only return nodes.
1.2.5 Find elements
1.2.5.1
The function of filter() method: filter the desired element from a series of matching elements.
Example 1: In a series of matching elements, get the elements matched by the filter() selector.
<script>
$("ul").filter(".level-2");
</script>
Example 2: From a series of matching elements, get the elements that pass the function test.
<script>
$('ul').filter(function(index){
//The parameter index represents the index of the matched element, which starts from 0.
if(index==1 || index==2){ return true; }
});
</script>
or
<script>
$('ul').filter(function(index) {
return $("li", this).length == 1;
});
</script>
1.2.5.2 Extension - The difference
between filter() and find() is completely different. The former is to filter out a part from the initial jQuery object collection, while the returned result of the latter will not have the content in the initial collection, such as $("p").find("span"), which starts from the element, which is equivalent to to $("p span").