JavaScript Tutorial/jQuery/Span — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Текущая версия на 11:25, 26 мая 2010
Содержание
- 1 30. Animates all span and input elements to show normally
- 2 30. Animates span to hide fastly
- 3 30. Append to another tag
- 4 30. Click to change span text
- 5 30. Convert data from span, parse and update
- 6 30. Finds the first span in each matched div to underline and add a hover state.
- 7 30. Finds the last span in each matched div and adds some css plus a hover state.
- 8 30. Set span color
- 9 30. Span click event
- 10 30. Wraps a newly created tree of objects around the spans
30. Animates all span and input elements to show normally
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function doIt() {
$("span,div").show("normal");
}
$("button").click(doIt);
$("form").submit(function () {
$("p").show(4000, function () {
$(this).text("DONE!");
});
$("span,div").hide("normal");
return false;
});
});
</script>
</head>
<body>
<body>
<button>Do</button>
<form> <input type="text" /> </form>
</body>
</html></source>
30. Animates span to hide fastly
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#hideHandler").click(function () { $("span:first-child").hide("fast", function () { $(this).prev().hide("show", arguments.callee); }); }); $("#showHandler").click(function () { $("span").show(6000); }); }); </script> </head> <body> <body> <button id="hideHandler">Hide</button> <button id="showHandler">Show</button>
A B C D E F G H
</body>
</html></source>
30. Append to another tag
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("span").appendTo("#foo");
});
</script>
</head>
<body>
<body>
span
FOO!
</body>
</html></source>
30. Click to change span text
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("span").click(function () { $("span").text("changed"); }); }); </script> </head> <body> <body>
Hello
</body>
</html></source>
30. Convert data from span, parse and update
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button:first").click(function () { update($("span:first")); }); $("button:last").click(function () { $("button:first").trigger("click"); update($("span:last")); }); function update(j) { var n = parseInt(j.text(), 0); j.text(n + 1); }
}); </script> </head> <body> <body> <button>1</button> <button>2</button> 0 / 0 </body>
</html></source>
30. Finds the first span in each matched div to underline and add a hover state.
<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 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>
A, B, C
D, E, F
</body>
</html></source>
30. Finds the last span in each matched div and adds some css plus a hover state.
<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 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>
A, B, C
D, E, F
</body>
</html></source>
30. Set span color
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("span").click(function () { $("span").css("color", "red"); }); }); </script> </head> <body> <body>
Hello
</body>
</html></source>
30. Span click event
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("span").click(function () { alert("span clicked"); }); }); </script> </head> <body> <body>
Hello
</body>
</html></source>
30. Wraps a newly created tree of objects around the spans
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){$("span").wrapAll("
});
</script>
<style>
div { border:2px blue solid; margin:2px; padding:2px; }
p { background:yellow; margin:2px; padding:2px; }
strong { color:red; }
</style>
</head>
<body>
<body>
Span Text
</body>
</html></source>