JavaScript DHTML/jQuery/Selector first last
Содержание
- 1 firstChild(): One for each parent.
- 2 first() matches only a single element
- 3 Get first child ID
- 4 Get first paragraph
- 5 Get last paragraph
- 6 lastChild() : One for each parent.
- 7 last() matches the last selected element.
- 8 Matches the first selected element
- 9 Matches the last selected element
- 10 Select first span
firstChild(): One for each parent.
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div span:first-child") .css("text-decoration", "underline") .hover(function () { $(this).addClass("red"); }, function () { $(this).removeClass("red"); }); }); </script> <style> span { color:#008; } span.red { color:red; font-weight: bolder; } </style> </head> <body> <body>
A, B, C
D, E, F
</body>
</html>
</source>
first() matches only a single element
<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:first").css("background-color", "red"); }); </script> </head> <body> <body>
TD #0 | TD #1 | TD #2 |
TD #3 | TD #4 | TD #5 |
TD #6 | TD #7 | TD #8 |
</body>
</html>
</source>
Get first child ID
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#container").click(function (e) { var $ch = $(e.target).children(); $("#results span:first").text($ch.length); e.preventDefault(); return false; }); }); </script> </head> <body> <body>
This is the way we write the demo,
Found 0 children in TAG.
</body>
</html>
</source>
Get first paragraph
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var str = $("p:first").text()+"added"; $("p:last").html(str);
}); </script> </head> <body> <body>
asdf
asdf
asdf
asdf
</body>
</html>
</source>
Get last paragraph
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var str = $("p:first").text()+"added"; $("p:last").html(str);
}); </script> </head> <body> <body>
asdf
asdf
asdf
asdf
</body>
</html>
</source>
lastChild() : One for each parent.
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div span:last-child") .css("text-decoration", "underline") .hover(function () { $(this).addClass("red"); }, function () { $(this).removeClass("red"); }); }); </script> <style> span { color:#008; } span.red { color:red; font-weight: bolder; } </style> </head> <body> <body>
A, B, C
D, E, F
</body>
</html>
</source>
last() matches the last selected element.
<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:last").css({backgroundColor: "yellow", fontWeight: "bolder"}); }); </script> </head> <body> <body>
First |
Middle |
Last |
</body>
</html>
</source>
Matches the first selected element
<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:first").css("font-style", "italic"); }); </script> </head> <body>
Row 1 |
Row 2 |
Row 3 |
</body>
</html>
</source>
Matches the last selected element
<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:last").css("font-style", "italic"); }); </script> </head> <body>
Row 1 |
Row 2 |
Row 3 |
</body>
</html>
</source>
Select first span
<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>