A lot of jQuery selectors have been used recently, so let’s review and summarize:
(one)
Direct parent: .parent(); The method returns the direct parent element of the selected element
All parents: .parents(); The method returns all ancestor elements of the selected element, it goes all the way up to the root element html of the document
(2)
Same Level: The .siblings() method returns all siblings of the selected element
Example: $("h2").siblings("p"); Returns all <p> elements that are siblings of <h2>
All siblings: nextAll The () method returns all following sibling elements of the selected element.
Area siblings: the nextUntil() method returns all following sibling elements between the two given parameters
(3)
Direct child elements: the children() method returns the All direct children of the selected element
All children: The find() method returns the descendant elements of the selected element, all the way down to the last descendant
(example)
The previous element of the current element: $("").parent().prev().css("background","red")
The next element of the current element: $("").parent().next().css("background","red")
Current element parent element: $("").parent().css("background","red")
Current element child element: $("").children().css("background","red")
Style related: add style.addClass(); set/change style: $(".logo").css("border","none")
Attributes and styles of .attr() and .removeAttr(), through certain trigger events to add or delete some attributes on some elements
Examples: disable and activate buttons
$("#btnSendCode").attr("disabled", "true"); //禁用
$("#btnSendCode").removeAttr("disabled"); //Enable button, enable activation
.attr()：
1. Get the attributes of the matched element, for example: $("img").attr("src");
2. Set the attributes of the matched element, for example:
set a single attribute: $("img").attr("src ","test.jpg");
Multiple attribute settings: $("img").attr({ src: "test.jpg", alt: "Test Image" });
3. $("img") .attr("title", function() { return this.src });
.removeAttr()：
1. Remove the corresponding attribute from each matched element
Remove an attribute: $("img").removeAttr("src");
Remove multiple attributes: $("img").removeAttr("src alt") ;//img's src and alt will be deleted
2. In normal use, we can also delete it by the following method:
$("img").attr("src","");
$("img").attr({src:"",alt:""});
The difference between .removeAttr() and .attr() using these two methods is that the structure of the page html is different
removeAttr directly deletes this attribute, What you see in the page is this result <img>
attr will not delete this attribute, but set the value of this attribute to be empty, what you see in the page is <img src alt>, which is actually the same as <img src=" " alt=""> has the same effect