JavaScript Tutorial/jQuery/Selector children
Содержание
- 1 Finds all children of the element with id "main"
- 2 Finds all p elements that are children of a div element
- 3 Is it the first child
- 4 Matches all child elements specified by child of elements specified by parent
- 5 nthChild(index)
- 6 onlyChild(): If the parent has other child elements, nothing is matched.
- 7 Select n-th child
Finds all children of the element with id "main"
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#main > *").css("border", "3px solid red");
});
</script>
</head>
<body>
<body>
asdf
<button>Child</button>
A Span
</body>
</html></source>
Finds all p elements that are children of a div element
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div > p").css("border", "1px solid gray");
}); </script> </head> <body> <body>
asdf
</body>
</html></source>
Is it the first child
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").one("click", function () { if ($(this).is(":first-child")) { $("p").text("It"s the first div."); }else{ $("p").text("It"s NOT the first div."); } $("p").hide().slideDown("slow"); }); }); </script> <style> div { border:2px white solid;} </style> </head> <body> <body> Press each to see the text.
asdf
asdf
asdf
asdf
asdf
asdf
</body>
</html></source>
Matches all child elements specified by child of elements specified by parent
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#main > *").css("border", "1px solid red");
});
</script>
</head>
<body>
<button>Child</button>
<form>
<button>grand child</button>
</form>
</body>
</html></source>
nthChild(index)
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li:nth-child(2)").append(" - 2nd!");
});
</script>
</head>
<body>
<body>
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
</body>
</html></source>
onlyChild(): If the parent has other child elements, nothing is matched.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div ul:only-child").text("only has ul").css("border", "2px blue solid"); }); </script> </head> <body> <body>
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
</body>
</html></source>
Select n-th child
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li:nth-child(2)").append("*");
});
</script>
</head>
<body>
- A
- B
- C
</body>
</html></source>