JavaScript Tutorial/jQuery/children
Версия от 18:52, 25 мая 2010; (обсуждение)
Содержание
Append SPAN one after another
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keypress(function (e) {
var c = String.fromCharCode(e.which);
$("p").append($("<span/>")).children(":last").append(document.createTextNode(c));
$("div").text(e.which);
});
});
</script>
</head>
<body>
<body>
<input type="text" />
<p>Add text - </p>
<div></div>
</body>
</html>
Attaches a change event to the select that gets the text for each selected option
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
});
</script>
</head>
<body>
<body>
<select name="sweets" multiple="multiple">
<option>A</option>
<option selected="selected">B</option>
<option>C</option>
<option selected="selected">D</option>
<option>E</option>
<option>F</option>
</select>
<div></div>
</body>
</html>
children(expr): filter with an optional expression
<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 $kids = $(e.target).children();
alert($kids.length);
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<body>
<div id="container">
<div>
asdf
</div>
</div>
</body>
</html>
Children from DIV
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").children().css("border", "3px double red");
});
</script>
</head>
<body>
<body>
<div><span>span</span>div</div>
</body>
</html>
Get target children length
<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();
alert($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>
</body>
</html>