JavaScript Tutorial/jQuery/Selector relation — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Текущая версия на 11:25, 26 мая 2010
Содержание
- 1 descendant(ancestor, descendant): Finds all input descendants of forms.
- 2 has(selector) matches the specified selector.
- 3 Match parents
- 4 next(prev, next): Finds all inputs that are next to a label.
- 5 parent() matches all elements that are parents
- 6 prev + next
- 7 prev ~ siblings
- 8 Remove all elements that have a descendant ol element
- 9 Select if DIV has another tag
- 10 Select inside body tag
descendant(ancestor, descendant): Finds all input descendants of forms.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("form input").css("border", "2px solid blue"); }); </script> </head> <body> <body> <form> <input name="name" /> <input name="newsletter" /> </form> </body>
</html></source>
has(selector) matches the specified selector.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("tr:has(td)").css("color","red"); }); </script> </head> <body> <body>
First |
asdf |
asdf |
</body>
</html></source>
Match parents
<source lang="javascript">
<html>
<head> <style> .test{ border: 1px solid red; } </style> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:parent").addClass("test"); }); </script>
</head> <body>
paragraph in div
div
</body>
</html></source>
next(prev, next): Finds all inputs that are next to a label.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("label + input").css("color", "blue").val("Labeled!") }); </script> </head> <body> <body> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Age:</label> <input name="age" /> </fieldset> </form> </body>
</html></source>
parent() matches all elements that are parents
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("td:parent").fadeTo(1500, 0.3); }); </script> </head> <body> <body>
Value 1 | |
Value 2 |
</body>
</html></source>
prev + next
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("label + input").css("color", "red").val("value") }); </script> </head> <body> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Address:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> </body>
</html></source>
prev ~ siblings
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("label ~ input").css("color", "red").val("value") }); </script> </head> <body> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Address:</label>
p
<input name="newsletter" /> </fieldset> </form> <input name="none" /> </body>
</html></source>
Remove all elements that have a descendant ol element
<source lang="javascript">
$("p").filter(function(index) {
return $("ol", this).length == 0; });</source>
Select if DIV has another tag
<source lang="javascript">
<html>
<head> <style> .test{ border: 1px solid red; } </style> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div:has(p)").addClass("test"); }); </script>
</head> <body>
paragraph in div
div
</body>
</html></source>
Select inside body tag
<source lang="javascript">
<html>
<head> <style> .test{ border: 1px solid red; } </style> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("span:first").text($(":hidden", document.body).length + " hidden elements."); }); </script>
</head> <body>
<form> <input type="hidden" /> <input type="hidden" /> <input type="hidden" /> </form> </body>
</html></source>