http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FjQuery%2FSpan
JavaScript Tutorial/jQuery/Span - История изменений
2026-04-04T21:47:22Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Span&diff=9741&oldid=prev
Admin: 1 версия
2010-05-26T08:25:22Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:25, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Span&diff=9740&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:57Z
<p></p>
<p><b>Новая страница</b></p><div>==30. Animates all span and input elements to show normally==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
function doIt() {<br />
$("span,div").show("normal");<br />
}<br />
$("button").click(doIt); <br />
$("form").submit(function () {<br />
$("p").show(4000, function () {<br />
$(this).text("DONE!");<br />
});<br />
<br />
$("span,div").hide("normal");<br />
return false;<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<button>Do</button><br />
<span style="display:none;">asdf </span><br />
<div><br />
<form><br />
<input type="text" /><br />
</form><br />
</div><br />
<p style="display:none;">I"m hidden...</p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Animates span to hide fastly==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("#hideHandler").click(function () {<br />
$("span:first-child").hide("fast", function () {<br />
$(this).prev().hide("show", arguments.callee); <br />
});<br />
});<br />
$("#showHandler").click(function () {<br />
$("span").show(6000);<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<button id="hideHandler">Hide</button><br />
<button id="showHandler">Show</button><br />
<br />
<div><br />
<span>A</span><br />
<span>B</span> <br />
<span>C</span> <br />
<span>D</span> <br />
<span>E</span> <br />
<span>F</span> <br />
<span>G</span> <br />
<span>H</span><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Append to another tag==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("span").appendTo("#foo");<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<span>span</span><br />
<div id="foo">FOO!</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Click to change span text==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("span").click(function () {<br />
$("span").text("changed");<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div><br />
<div><span>Hello</span></div><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Convert data from span, parse and update==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
<br />
$("button:first").click(function () {<br />
update($("span:first"));<br />
});<br />
$("button:last").click(function () {<br />
$("button:first").trigger("click");<br />
<br />
update($("span:last"));<br />
});<br />
<br />
function update(j) {<br />
var n = parseInt(j.text(), 0);<br />
j.text(n + 1);<br />
}<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<button>1</button><br />
<button>2</button><br />
<br />
<span>0</span> /<br />
<span>0</span> <br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Finds the first span in each matched div to underline and add a hover state.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div span:first-child")<br />
.css("text-decoration", "underline")<br />
.hover(function () {<br />
$(this).addClass("red");<br />
}, function () {<br />
$(this).removeClass("red");<br />
});<br />
});<br />
</script><br />
<style><br />
<br />
span { color:#008; }<br />
span.red { color:red; font-weight: bolder; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<div><br />
<span>A,</span><br />
<span>B,</span><br />
<span>C</span><br />
</div><br />
<div><br />
<span>D,</span><br />
<span>E,</span><br />
<span>F</span><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Finds the last span in each matched div and adds some css plus a hover state.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div span:last-child")<br />
.css("text-decoration", "underline")<br />
.hover(function () {<br />
$(this).addClass("red");<br />
}, function () {<br />
$(this).removeClass("red");<br />
});<br />
});<br />
</script><br />
<style><br />
<br />
span { color:#008; }<br />
span.red { color:red; font-weight: bolder; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<div><br />
<span>A,</span><br />
<span>B,</span><br />
<span>C</span><br />
</div><br />
<div><br />
<span>D,</span><br />
<span>E,</span><br />
<span>F</span><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Set span color==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("span").click(function () {<br />
$("span").css("color", "red");<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div><br />
<div><span>Hello</span></div><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Span click event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("span").click(function () {<br />
alert("span clicked");<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div><br />
<div><span>Hello</span></div><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Wraps a newly created tree of objects around the spans==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");<br />
<br />
<br />
});<br />
</script><br />
<style><br />
<br />
div { border:2px blue solid; margin:2px; padding:2px; }<br />
p { background:yellow; margin:2px; padding:2px; }<br />
strong { color:red; }<br />
<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<span>Span Text</span><br />
<br />
</body><br />
</html></source></div>