JavaScript DHTML/jQuery/Span
Содержание
- 1 Animates all span and input elements to show normally
- 2 Animates span to hide fastly
- 3 Append to another tag
- 4 Click to change span text
- 5 Convert data from span, parse and update
- 6 Finds the first span in each matched div to underline and add a hover state.
- 7 Finds the last span in each matched div and adds some css plus a hover state.
- 8 Set span color
- 9 Span click event
- 10 Wraps a newly created tree of objects around the spans
Animates all span and input elements to show normally
<source lang="html4strict">
<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>
Animates span to hide fastly
<source lang="html4strict">
<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>
Append to another tag
<source lang="html4strict">
<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>
Click to change span text
<source lang="html4strict">
<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>
Convert data from span, parse and update
<source lang="html4strict">
<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>
Finds the first span in each matched div to underline and add a hover state.
<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 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>
Finds the last span in each matched div and adds some css plus a hover state.
<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 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>
Set span color
<source lang="html4strict">
<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>
Span click event
<source lang="html4strict">
<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>
Wraps a newly created tree of objects around the spans
<source lang="html4strict">
<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>