Пример выбора дочерних и родительских элементов в 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>
