http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FjQuery%2FSelector_first_last
JavaScript Tutorial/jQuery/Selector first last - История изменений
2026-04-04T12:20:02Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Selector_first_last&diff=9495&oldid=prev
Admin: 1 версия
2010-05-26T08:25:05Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:25, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Selector_first_last&diff=9494&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>== firstChild(): One for each parent.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div span:first-child")<br />
.css("text-decoration", "underline")<br />
.hover(function () {<br />
$(this).addClass("red");<br />
}, function () {<br />
$(this).removeClass("red");<br />
});<br />
});<br />
</script><br />
<style><br />
<br />
span { color:#008; }<br />
span.red { color:red; font-weight: bolder; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<div><br />
<span>A,</span><br />
<span>B,</span><br />
<span>C</span><br />
</div><br />
<div><br />
<span>D,</span><br />
<span>E,</span><br />
<span>F</span><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== first() matches only a single element==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("tr:first").css("background-color", "red");<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<table border="1"><br />
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr><br />
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr><br />
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr><br />
</table><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Get first child ID==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("#container").click(function (e) {<br />
var $ch = $(e.target).children();<br />
<br />
$("#results span:first").text($ch.length);<br />
<br />
e.preventDefault();<br />
return false;<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div id="container"><br />
<div><br />
<p>This <span>is the <em>way</em> we</span> <br />
write <em>the</em> demo,</p><br />
</div><br />
<br />
</div><br />
<span id="results">Found <span>0</span> children in <span>TAG</span>.</span><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Get first paragraph==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var str = $("p:first").text()+"added";<br />
$("p:last").html(str);<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p>asdf</p><br />
<p>asdf</p><br />
<p>asdf</p><br />
<p>asdf</p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Get last paragraph==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var str = $("p:first").text()+"added";<br />
$("p:last").html(str);<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p>asdf</p><br />
<p>asdf</p><br />
<p>asdf</p><br />
<p>asdf</p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== lastChild() : One for each parent.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div span:last-child")<br />
.css("text-decoration", "underline")<br />
.hover(function () {<br />
$(this).addClass("red");<br />
}, function () {<br />
$(this).removeClass("red");<br />
});<br />
});<br />
</script><br />
<style><br />
<br />
span { color:#008; }<br />
span.red { color:red; font-weight: bolder; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<div><br />
<span>A,</span><br />
<span>B,</span><br />
<span>C</span><br />
</div><br />
<div><br />
<span>D,</span><br />
<span>E,</span><br />
<span>F</span><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== last() matches the last selected element.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("tr:last").css({backgroundColor: "yellow", fontWeight: "bolder"});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<table><br />
<tr><td>First</td></tr><br />
<tr><td>Middle</td></tr><br />
<tr><td>Last</td></tr><br />
</table><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Matches the first selected element==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("tr:first").css("font-style", "italic");<br />
});<br />
</script><br />
</head><br />
<body><br />
<table><br />
<tr><td>Row 1</td></tr><br />
<tr><td>Row 2</td></tr><br />
<tr><td>Row 3</td></tr><br />
</table><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Matches the last selected element==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("tr:last").css("font-style", "italic");<br />
});<br />
</script><br />
</head><br />
<body><br />
<table><br />
<tr><td>Row 1</td></tr><br />
<tr><td>Row 2</td></tr><br />
<tr><td>Row 3</td></tr><br />
</table><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Select first span==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<style><br />
.test{ border: 1px solid red; }<br />
</style><br />
<br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("span:first").text($(":hidden", document.body).length + " hidden elements.");<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<span></span><br />
<div></div><br />
<div style="display:none;">Hider!</div><br />
<div></div><br />
<div></div><br />
<form><br />
<input type="hidden" /><br />
<input type="hidden" /><br />
<input type="hidden" /><br />
</form><br />
<span></span><br />
</body><br />
</html></source></div>