Пример выбора дочерних и родительских элементов в jQuery

Селектор потомков-предков jQuery использует вложенную реляционную структуру DOM для точного поиска веб-элементов. Существует четыре типа таких селекторов, которые рассмотренны ниже. Каждое выражение содержит два селектора: первый селектор и второй селектор. В разных случаях селектор представляют разные веб-элементы иерархии.
1. Введение в средство выбора иерархии jQuery.
предок-потомок: найти все дочерние веб-элементы предка. предок - это допустимый селектор родительских веб-элементов, потомок - это селектор дочерних веб-элементов, которые существуют под предком. Например, $ («ввод формы») будет соответствовать всем вводимым веб-элементам в форме html.
parent> child: найти все прямые дочерние веб-элементы в указанном родительском элементе. Например, $ («form> input») будет соответствовать только прямым (дочерним уровням первого уровня) входным веб-элементам html-формы.
prev + next: найти первый соседний веб-элемент (указанный селектором next) в веб-элементе, заданном селектором prev. $ («Div + img») будет соответствовать только первому соседнему веб-элементу img после div.
prev ~ siblings: сопоставить все соседние веб-элементы веб-элемента, указанного в селекторе prev. $ («Div ~ img») вернет все изображения того же уровня, что и div. Но если img помещается перед div, он не возвращается.
2. Пример выбора иерархии jQuery.
2.1 Селектор потомков предков.
selector-ancestor-descendant.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Ancestor Descendant Selector Example</title> <script src="../lib/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // Get all input web element exist under form. var input_array = $("form input"); // Get user name input dom object. var user_name_input = input_array.get(0); // Transform dom object to jquery object. user_name_input = $(user_name_input); // Set user name web element css style through jquery object css method. user_name_input.css({color:'yellow', background:'blue'}); // Get password input dom object. var password_input = input_array[1]; // Transform dom object to jquery object. password_input = $(password_input); // Set password web element style through jquery object css method. password_input.css({border:'red 2px solid'}); }) </script> </head> <body> <form> <fieldset> <!--The first input exist under form / fieldset.--> User Name : <input type="text"/><br/> <fieldset> <!-- The second input exist under form / fieldset / fieldset. --> Password : <input type="password"/><br/> </fieldset> <button>Login</button> </fieldset> </form> </body> </html>
2.2 Селектор родительского и дочернего элемента.
selector-parent-child.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Parent Child Selector Example</title> <script src="../lib/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // Change the direct child img ( image one and three ) css style with selector "div > img". $("div > img").css({border:'red solid 10px', width:'100px'}); // Change the second level child img ( image two ) css style with "div > fieldset > img" selector. $("div > fieldset > img").css({border:'green solid 10px', width:'80px'}); }) </script> </head> <body> <div> <img src="../images/green_button.jpg"/> <fieldset> <img src="../images/green_button.jpg"/> </fieldset> <img src="../images/green_button.jpg"/> </div> </body> </html>
2.3 Селектор «Предыдущий Следующий
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Previous Next Selector Example</title> <script src="../lib/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // Change the first next img css style with selector "div + img". $("div + img").css({border:'red solid 10px', width:'100px'}); // Change the second next img css style with selector "div + img + img". $("div + img + img").css({border:'green solid 10px', width:'80px'}); }) </script> </head> <body> <div> <img src="../images/green_button.jpg"/> </div> <img src="../images/green_button.jpg"/> <img src="../images/green_button.jpg"/> </html>
2.4 Селектор предыдущих братьев и сестер.
selector-prev-siblings.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Previous Siblings Selector Example</title> <script src="../lib/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // Change the sibling img to div's css style with selector "div ~ img". $("div ~ img").css({border:'green solid 10px', width:'80px'}); // Get all siblings image. var all_sibling = $("div ~ img"); /* Display div sibling image count in an alert. Please note the image placed before div is not sibling image.*/ alert("Will change div " + all_sibling.length + " sibling images css style."); // When click the first button. $("#change_first_sibling_image").click(function () { // Get and cast first sibling dom object to jquery object. var firstImage = all_sibling[0]; firstImage = $(firstImage); // Change first image css style. firstImage.css({border:'red solid 15px', width:'60px'}); }); // When click the second button. $("#change_second_sibling_image").click(function () { // Get and cast second sibling dom object to jquery object. var secondImage = all_sibling[1]; secondImage = $(secondImage); // Change second image style with jquery css method. secondImage.css({border:'blue solid 25px', width:'100px'}); }); }) </script> </head> <body> <img src="../images/green_button.jpg"/> <div> </div> <img src="../images/green_button.jpg"/> <img src="../images/green_button.jpg"/> <br/><br/> <button id="change_first_sibling_image">Change First Sibling Image</button> <button id="change_second_sibling_image">Change Second Sibling Image</button> </body> </html>