JavaScript DHTML/jQuery/Selector relation
Содержание
- 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.
<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>
has(selector) matches the specified selector.
<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>
<table>
<tr><td>First</td></tr>
<tr><td>asdf</td></tr>
<tr><td>asdf</td></tr>
</table>
</body>
</html>
Match parents
<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>
<div><p>paragraph in div</p></div>
<div>div</div>
</body>
</html>
next(prev, next): Finds all inputs that are next to a label.
<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>
parent() matches all elements that are parents
<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>
<table border="1">
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
</body>
</html>
prev + next
<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>
prev ~ siblings
<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>p</p>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
</body>
</html>
Remove all elements that have a descendant ol element
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
Select if DIV has another tag
<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>
<div><p>paragraph in div</p></div>
<div>div</div>
</body>
</html>
Select inside body tag
<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>
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
<div></div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<span></span>
</body>
</html>