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.
<source lang="html4strict">
<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="html4strict">
<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="html4strict">
<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="html4strict">
<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="html4strict">
<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="html4strict">
<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="html4strict">
<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="html4strict">
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
</source>
Select if DIV has another tag
<source lang="html4strict">
<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="html4strict">
<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>
