JavaScript Tutorial/jQuery/show
Содержание
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").show()
}); </script> </head> <body> <body>
</body>
</html></source>
Pass arguments.callee to show function
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#showHandler").click(function () {
$("div:eq(0)").show("fast", function () {
$(this).next().show("fast", arguments.callee);
});
});
$("#hideHandler").click(function () {
$("div").hide(2000);
});
});
</script>
</head>
<body>
<body>
<button id="showHandler">Show</button>
<button id="hideHandler">Hide</button>
A
B
C
D
</body>
</html></source>
Show fast
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").show("fast")
}); </script> </head> <body> <body>
</body>
</html></source>
<source lang="javascript">
<html>
<head>
<style>
div { width:50px; height:40px; margin: 5px; float:left;background:red; }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$("div:hidden").show("fast");
});
});
</script>
</head>
<body>
<button>Show</button>
</body>
</html></source>
<source lang="javascript">
<html>
<head>
<style>
div { width:50px; height:40px; margin: 5px; float:left;background:red; }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$("div:hidden").show("slow");
});
});
</script>
</head>
<body>
<button>Show</button>
</body>
</html></source>
<source lang="javascript">
<html>
<head>
<style>
.test{ border: 1px solid red; }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:hidden").show(3000);
});
</script>
</head>
<body>
Hider!
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
</body>
</html></source>
Show in millisecond
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").show(2000)
}); </script> </head> <body> <body>
</body>
</html></source>
Show normal
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").show("normal")
}); </script> </head> <body> <body>
</body>
</html></source>
Shows all paragraphs.
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").show()
}); </script> </head> <body> <body>
</body>
</html></source>
