JavaScript Tutorial/jQuery/children
Содержание
Append SPAN one after another
<source lang="javascript">
<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" />
Add text -
</body>
</html></source>
Attaches a change event to the select that gets the text for each selected option
<source lang="javascript">
<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>
</body>
</html></source>
children(expr): filter with an optional expression
<source lang="javascript">
<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>
asdf
</body>
</html></source>
Children from DIV
<source lang="javascript">
<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>
spandiv
</body>
</html></source>
Get target children length
<source lang="javascript">
<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>
This is the way we write the demo,
</body>
</html></source>