Shulou(Shulou.com)06/01 Report--

This article mainly introduces what is the relationship search method in jQuery, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

1. JQuery relation search method

$(this): in native DOM operations, there is a this keyword inside the event function that points to the event source that triggers the event; pass the this keyword to the $() method in jQuery, and you get your own jQuery object, so you can use the jQuery method.

Parent () parent: all jQuery objects have a parent () method, which gets their own parent, and the parent also gets a jQuery object, which can directly continue to call jQuery methods and properties.

Children () child: you can get a jQuery object composed of all its own child elements; the resulting child jQuery object can continue to call jQuery methods and properties

Children () can pass parameters, the parameters are string format selector, when all the children are selected, keep the part that satisfies the selector, and make a secondary selection.

Siblings () Brothers: jQuery objects can get jQuery objects composed of all sibling elements (brothers) except themselves by calling the siblings () method. You can only find siblings, not siblings (uncles).

The jQuery object reached by the siblings () method can be selected again, and the selector can be obtained by passing the string format to the parameter.

* {margin: 0; padding: 0;} .box {width: 400px; height: 60px; border: 1px solid # 000; margin-top: 2px;} .box pcent. Box h3 {float: left; width: 60px; height: 60px Margin-right: 20px; background-color: rgb (164,247233);}

H3

H3

H3

H3 var $p = $("p") Var $box = $(".box") $p.click (function () {/ / Click on yourself to change the color / / wrap the this,this from pointing to the native js object that triggered the event to point to the jQuery object itself $(this) .css ("background-color", "pink") / / $(this) .parent () finds the parent element of the event source $(this) .parent () .css ("background-color", "skyblue"); / / siblings () / / $(this) .siblings () .css ("background-color", "purple") / / except for those clicked, its brothers turn purple / / after adding parameters, they will make a second selection of $(this) .siblings ("h3") .css ("background", "purple") in the child according to the specified selector. / / sibling element is also a good tag}) / / get its child element $box.click (function () {/ / get child / / $(this). Children (). Css ("background", "pink") by clicking div / / after adding the parameter, the child will select $(this) .children ("h3") .css ("background", "orange") twice according to the specified selector;}) / / find the sibling element sinblings () / / write in the $P method II. JQuery other relationship search methods.

Find () descendant element: passes a specified selector as a parameter, looking for all descendants of the jQuery object

Brotherly element

Adjacent sibling element method:

Next () next brother

The former brother of prev ()

Multiple selection method:

All the brothers behind nextAll ()

All brothers in front of preAll ()

* {margin: 0; padding: 0;} .box {border: 1px solid # 000; background-color: white; width: 500px; height: 50px; margin-left: 4px; margin-top: 4px;} p {width: 50px; height: 50px; background-color: rgb (185,185,185); float: left; margin-right: 8px } span {float: left; width: 50px; height: 50px; margin-right: 8px; background-color: pink;}

Var $box = $(".box") var $p = $("p") / / make it red by clicking on a child tab, making the brother in front of it purple and the brother behind var $child = $box.children () $child.click (function () {$(this) .css ("background-color", "red") .roomAll () .css ("background-color", "purple") $(this) .css ("background-color", "red") .nextAll () .css ("background-color", "orange")

Secondary selection can be made by passing parameters, which are selectors in string format that meet the requirements of the selector in the preceding or subsequent siblings.

Parents () ancestor

The jQuery object composed of all ancestral elements, including body, of the specified object is obtained by this method.

The second selection is made by passing parameters, and the parameter position is a selector in string format.

Code example:

/ / Click on a child tab, turn itself red, and make its ancestor turn blue / / parents () find the ancestor / / $(this) .css ("background-color", "red") / / .notify (). Css ("background-color", "skyblue") / / parents () pass parameters You can filter out the non-div elements $(this) .css ("background-color", "red") .destroy ("div"). Css ("background-color", "skyblue")}) Thank you for reading this article carefully. I hope the article "what is the method of finding relationships in jQuery" shared by the editor will be helpful to you. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.