- Trang chủ
- Hướng dẫn học
- Hướng dẫn học jQuery
- .show[]
Định nghĩa và sử dụng
$['p'].show["fast"];1 hiện thành phần phù hợp.- Thành phần sẽ được hiện giống như được sử dụng
$['p'].show["fast"];2.
Cấu trúc
.show[Độ bền]Độ bền]
Độ bền có thể bằng số hoặc bằng chữ: slow, fast.
$['p'].show[300];$['p'].show["fast"];Bài học chỉ muốn cho bạn hiểu cách sử dụng
$['p'].show["fast"];1, 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:
Tiêu đề
div {
background-color: blue;
height: 100px;
width: 100px;
}
$[function[]{
$['div'].hide[];
$['button'].click[function[]{
$['div'].show[];
}];
}];
Click
Đây là thành phần được hiện
Hiển thị trình duyệt:
Thành phần đã được hiện bởi
$['p'].show["fast"];1.So sánh code HTML trước và sau khi có jQuery:
Click Đây là thành phần được hiện Đây là thành phần được hiện
| Click Đây là thành phần được hiện Đây là thành phần được hiện
|
.show[Độ bền]Độ bền]
Html viết:
Tiêu đề
div {
background-color: blue;
display: none;
float: left;
margin-right: 20px;
height: 100px;
width: 100px;
}
p {
clear: both;
}
$[function[]{
$['button'].click[function[]{
$['.test03'].show[2000];
$['.test02'].show['slow'];
$['.test01'].show[];
}];
}];
Click
show[2000]
show['slow']
show[]
Hiển thị trình duyệt:
Thành phần đã được hiện bởi
$['p'].show["fast"];1.So sánh code HTML trước và sau khi có jQuery:
Click Đây là thành phần được hiện show[2000] show['slow'] show[]
| Click Đây là thành phần được hiện show[2000] show['slow'] show[]
|
Click vào từng $['p'].show["fast"];5 để thấy hiệu ứng.Độ bền,function[]{...}]
Html viết:
Tiêu đề
div {
background-color: blue;
display: none;
height: 100px;
width: 100px;
}
p {
clear: both;
}
$[function[]{
$['button'].click[function[]{
$['div'].show[2000,function[]{
alert['Kết thúc.'];
}];
}];
}];
Click
Thành phần div
Hiển thị trình duyệt:
Thành phần đã được hiện bởi
$['p'].show["fast"];1.So sánh code HTML trước và sau khi có jQuery:
Click Đây là thành phần được hiện Thành phần div
| Click Đây là thành phần được hiện Thành phần div
|
- Html viết:
- Hiển thị trình duyệt:
- Ta thấy thành phần p có class="test" đã được thêm width với giá trị cộng thêm 300 [+=300].
- .css['thuộc tính']
- .css[]
.css[height] đã lấy giá trị chiều cao của thành phần ul.
- list 01 list 02 list 03 Thành phần ul có chiều cao: style cho thành phần.
- list 01 list 02 list 03 Thành phần ul có chiều cao: 60pxstyle của thành phần.
.css[{'thuộc tính 01','thuộc tính 02'}]
Sau khi có jQuery - click thành phần listyle cho thành phần:
- list 01 list 02 list 03
- list 01 list 02 list 03 Click từng phần tử li để xem kết quả: width: 80px height: 40px color: rgb[51, 51, 51] background-color: rgb[255, 255, 0]
Trang chủstyle của thành phần:
- list 01 list 02 list 03
list 01 list 02 list 03 Click từng phần tử li để xem kết quả: width: 80px height: 40px color: rgb[51, 51, 51] background-color: rgb[255, 255, 0]thuộc tính','giá trị']
Html viết:
Tiêu đề
$[function[]{
$['p.test'].css['color','red'];
}];
Thành phần p có class
Thành phần p
Hiển thị trình duyệt:
Ta thấy thành phần p có class="test" đã được thêm width với giá trị cộng thêm 300 [+=300].style="color:red".
So sánh code HTML trước và sau khi có jQuery:
Thành phần p có class Thành phần p | Thành phần p có class Thành phần p Thành phần p |
.css['thuộc tính','function']thuộc tính 01':'giá trị 01','thuộc tính 02':'giá trị 02',...}]
Html viết:
Tiêu đề
$[function[]{
$['p.test'].css[{'color':'blue','border':'1px dashed red'}];
}];
Thành phần p có class
Thành phần p
Hiển thị trình duyệt:
Ta thấy thành phần p có class="test" đã được thêm width với giá trị cộng thêm 300 [+=300].style="color:red".
So sánh code HTML trước và sau khi có jQuery:
Thành phần p có class Thành phần p | Thành phần p có class Thành phần p Thành phần p |
.css['thuộc tính','function']thuộc tính',function[index,giá trị]{}]
Html viết:
Tiêu đề
p {
background: yellow;
width: 200px;
}
$[function[]{
$['p.test'].css['width', function[index,value]{
return parseFloat[ value ] * 2;
}];
}];
Thành phần p có class
Thành phần p
Hiển thị trình duyệt:
Ta thấy thành phần p có class="test" đã được thêm width với giá trị cộng thêm 300 [+=300].class="test" đã được thêm width với giá trị nhân 2 [*2].
So sánh code HTML trước và sau khi có jQuery:
Thành phần p có class Thành phần p | Thành phần p có class Thành phần p Thành phần p |
.css['thuộc tính','function']thuộc tính','function']
Html viết:
Tiêu đề
p {
background: yellow;
width: 200px;
}
$[function[]{
$['p.test'].css['width', '+=300'];
}];
Thành phần p có class
Thành phần p
Hiển thị trình duyệt:
Ta thấy thành phần p có class="test" đã được thêm width với giá trị cộng thêm 300 [+=300].class="test" đã được thêm width với giá trị cộng thêm 300 [+=300].
So sánh code HTML trước và sau khi có jQuery:
Thành phần p có class Thành phần p | Thành phần p có class Thành phần p Thành phần p |
.css['thuộc tính','function']thuộc tính']
Html viết:
Tiêu đề
$[function[]{
var ulHeight = $['ul'].css['height'];
$['span'].text[ulHeight];
}];
- list 01
- list 02
- list 03
Thành phần ul có chiều cao:
Hiển thị trình duyệt:
Ta thấy thành phần p có class="test" đã được thêm width với giá trị cộng thêm 300 [+=300].
So sánh code HTML trước và sau khi có jQuery:
Thành phần p có class Thành phần p Thành phần ul có chiều cao: | .css['thuộc tính','function'] Thành phần ul có chiều cao: 60px |
Html viết:thuộc tính 01','thuộc tính 02'}]
Html viết:
$['p'].show["fast"];0Hiển thị trình duyệt:
Ta thấy thành phần p có class="test" đã được thêm width với giá trị cộng thêm 300 [+=300].
So sánh code HTML trước và sau khi có jQuery:
Thành phần p có class Thành phần p | .css['thuộc tính','function'] Click từng phần tử li để xem kết quả: |