JavaScript DHTML/jQuery/children
Содержание
Add class to all children from UL
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
var tmpExample = {
ready : function() {
$("ul").children().addClass("tmpChild");
}
}; $(document).ready(tmpExample.ready);
</script> <style type="text/css">
ul {
list-style: none; margin: 0; padding: 0;
} ul li {
margin: 1px; padding: 3px;
} li.tmpChild {
background: #cf0c35; color: white;
}
</style> </head> <body>
- A
- B
- C
- D
- E
- F
</body>
</html>
</source>
Append SPAN one after another
<source lang="html4strict">
<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="html4strict">
<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="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 $kids = $(e.target).children();
alert($kids.length);
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<body>
asdf
</body>
</html>
</source>
Children from DIV
<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").children().css("border", "3px double red");
}); </script> </head> <body> <body>
spandiv
</body>
</html>
</source>
Get target children length
<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();
alert($ch.length);
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<body>
This is the way we write the demo,
</body>
</html>
</source>
