.show()

Đị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

$('p').show();

.show(Độ bền)

Độ bền có thể bằng số hoặc bằng chữ: slow, fast.

$('p').show(300);

$('p').show("fast");

.show(Độ bền,function(){...})

Độ bền có thể bằng số hoặc bằng chữ: slow, fast.

$('p').show(300,function(){
    $('span').show(100);
});

Bài học chỉ muốn cho bạn hiểu cách sử dụng .show(), muốn biết chi tiết hơn, bạn có thể xem chi tiết thêm tại phần tham khảo.

.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:

Làm thử!

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> <div>Đây là thành phần được hiện</div>	<p><button>Click</button></p> <div style="display: block;">Đây là thành phần được hiện</div>

.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:

Làm thử!

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> <div class="test03">show(2000)</div> <div class="test02">show('slow')</div> <div class="test01">show()</div>	<p><button>Click</button></p> <div class="test03" style="display: block;">show(2000)</div> <div class="test02" style="display: block;">show('slow')</div> <div class="test01" style="display: block;">show()</div>

.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:

Làm thử!

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> <div>Thành phần div</div>	<p><button>Click</button></p> <div style="display: block;">Thành phần div</div>

.hide()

.animate()