JavaScript Tutorial/jQuery/Span
Содержание
- 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>
