JavaScript Tutorial/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.
<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>
<div>
<span>A,</span>
<span>B,</span>
<span>C</span>
</div>
<div>
<span>D,</span>
<span>E,</span>
<span>F</span>
</div>
</body>
</html>
first() matches only a single element
<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>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
</body>
</html>
Get first child ID
<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>
<div id="container">
<div>
<p>This <span>is the <em>way</em> we</span>
write <em>the</em> demo,</p>
</div>
</div>
<span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
</body>
</html>
Get first paragraph
<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>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
</body>
</html>
Get last paragraph
<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>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
</body>
</html>
lastChild() : One for each parent.
<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>
<div>
<span>A,</span>
<span>B,</span>
<span>C</span>
</div>
<div>
<span>D,</span>
<span>E,</span>
<span>F</span>
</div>
</body>
</html>
last() matches the last selected element.
<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>
<table>
<tr><td>First</td></tr>
<tr><td>Middle</td></tr>
<tr><td>Last</td></tr>
</table>
</body>
</html>
Matches the first selected element
<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>
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
</body>
</html>
Matches the last selected element
<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>
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
</body>
</html>
Select first span
<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>