Định nghĩa và sử dụng
- .show(): Hiện thành phần phù hợp.
- Thành phần sẽ được hiện giống như được sử dụng style="display: block;".
Cấu trúc
- Đã được thêm vào từ phiên bản 1.0
$('p').show();
Độ bền có thể bằng số hoặc bằng chữ: slow, fast.
$('p').show(300);
$('p').show("fast");
Độ bền có thể bằng số hoặc bằng chữ: slow, fast.
$('p').show(300,function(){
$('span').show(100);
});
- Đã được thêm vào từ phiên bản 1.4.3
.show(Độ bền,'easing',function(){...})
Độ bền có thể bằng số hoặc bằng chữ: slow, fast.
Easing có thể sử dụng swing hoặc linear
$('p').show(300,'swing',function(){
$('span').show(100);
});
.show()
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
background-color: blue;
height: 100px;
width: 100px;
}
</style>
<script>
$(function(){
$('div').hide();
$('button').click(function(){
$('div').show();
});
});
</script>
</head>
<body>
<p><button>Click</button></p>
<div>Đây là thành phần được hiện</div>
</body>
</html>
Hiển thị trình duyệt:
Thành phần đã được hiện bởi .show().
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery - trước khi click |
|---|---|
<p><button>Click</button></p> |
<p><button>Click</button></p> |
.show(Độ bền)
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
background-color: blue;
display: none;
float: left;
margin-right: 20px;
height: 100px;
width: 100px;
}
p {
clear: both;
}
</style>
<script>
$(function(){
$('button').click(function(){
$('.test03').show(2000);
$('.test02').show('slow');
$('.test01').show();
});
});
</script>
</head>
<body>
<p><button>Click</button></p>
<div class="test03">show(2000)</div>
<div class="test02">show('slow')</div>
<div class="test01">show()</div>
</body>
</html>
Hiển thị trình duyệt:
Click vào từng button để thấy hiệu ứng.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<p><button>Click</button></p> |
<p><button>Click</button></p> |
.show(Độ bền,function(){...})
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
background-color: blue;
display: none;
height: 100px;
width: 100px;
}
p {
clear: both;
}
</style>
<script>
$(function(){
$('button').click(function(){
$('div').show(2000,function(){
alert('Kết thúc.');
});
});
});
</script>
</head>
<body>
<p><button>Click</button></p>
<div>Thành phần div</div>
</body>
</html>
Hiển thị trình duyệt:
Click vào từng button để thấy hiệu ứng.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<p><button>Click</button></p> |
<p><button>Click</button></p> |
.show(Độ bền,'easing',function(){...})
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
background-color: blue;
display: none;
float: left;
margin-right: 20px;
height: 100px;
width: 100px;
}
p {
clear: both;
}
</style>
<script>
$(function(){
$('button').click(function(){
$('.swing').show(2000,'swing',function(){
$('span.txtSwing').text('Đã hiện - swing');
});
$('.linear').show(2000,'linear',function(){
$('span.txtLinear').text('Đã hiện - linear');
});
});
});
</script>
</head>
<body>
<p><button>Click</button></p>
<p><span class="txtSwing"></span></p>
<p><span class="txtLinear"></span></p>
<div class="swing">show swing</div>
<div class="linear">show linear</div>
</body>
</html>
Hiển thị trình duyệt:
Click vào từng button để thấy hiệu ứng.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<p><button>Click</button></p> |
<p><button>Click</button></p> |