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
<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>
<span style="display:none;">asdf </span>
<div>
<form>
<input type="text" />
</form>
</div>
<p style="display:none;">I"m hidden...</p>
</body>
</html>
30. Animates span to hide fastly
<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>
<div>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>G</span>
<span>H</span>
</div>
</body>
</html>
30. Append to another tag
<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>span</span>
<div id="foo">FOO!</div>
</body>
</html>
30. Click to change span text
<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>
<div>
<div><span>Hello</span></div>
</div>
</body>
</html>
30. Convert data from span, parse and update
<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>
<span>0</span> /
<span>0</span>
</body>
</html>
30. Finds the first span in each matched div to underline and add a hover state.
<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>
<div>
<span>A,</span>
<span>B,</span>
<span>C</span>
</div>
<div>
<span>D,</span>
<span>E,</span>
<span>F</span>
</div>
</body>
</html>
30. Finds the last span in each matched div and adds some css plus a hover state.
<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>
<div>
<span>A,</span>
<span>B,</span>
<span>C</span>
</div>
<div>
<span>D,</span>
<span>E,</span>
<span>F</span>
</div>
</body>
</html>
30. Set span color
<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>
<div>
<div><span>Hello</span></div>
</div>
</body>
</html>
30. Span click event
<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>
<div>
<div><span>Hello</span></div>
</div>
</body>
</html>
30. Wraps a newly created tree of objects around the spans
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");
});
</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>Span Text</span>
</body>
</html>