- Trang chủ
- Tham khảo
- jQuery
- Hướng dẫn cài đặt và sử dụng
Hướng dẫn cài đặt
- Chúng ta có thể download phiên bản mới nhất tại: //jquery.com/download/, sử dụng tag kết nối file jquery nội dung như sau:
Tiêu đề //Code jquery viết ở đây...
Tiêu đề
//Code jquery viết ở
đây...
//Code html viết ở đây...
//Code html viết ở đây...
Nếu không muốn download, chúng ta có thể kết nối file jquery tới file html thông qua một số cách sau:
- Kết nối trực tiếp từ trang web jquery với phiên bản mới nhất: //code.jquery.com/jquery-latest.js.
- Sử dụng CDN Google: tất cả phiên bản jquery có sẵn tại đây: //developers.google.com/speed/libraries/devguide?hl=vi#jquery
//developers.google.com/speed/libraries/devguide?hl=vi#jquery - Sử dụng CDN Microsoft: tất cả phiên bản jquery có sẵn tại đây: //www.asp.net/ajaxlibrary/cdn.ashx
//www.asp.net/ajaxlibrary/cdn.ashx
Hướng dẫn sử dụng
Có 2 cách viết một nội dung jquery:
- Viết nội dung jquery bên trong một
$[document].ready[]
, điều này sẽ giúp cho đoạn script chạy sau khi các đoạn code trong file html đã được load xong, không bao gồm việc load các liên kết ngoài như image, iframe, file css, file script,...
$[document].ready[function[]{//Nội dung jquery viết ở đây... }];
//Nội dung jquery viết ở đây...
}];
Chúng ta có thể viết gọn lại như sau:
$[function[]{//Nội dung jquery viết ở đây... }];
//Nội dung jquery viết ở đây...
}];
- Viết nội dung jquery bên trong $[window].load[], điều này sẽ giúp cho đoạn script chạy khi toàn bộ trang web đã được load xong, bao gồm tất cả image, iframe, và cả các liên kết ngoài.
$[window].load[function[]{//Nội dung jquery viết ở đây... }];
//Nội dung jquery viết ở đây...
}];
Ví dụ đơn giản sử dụng jquery
Html viết:
Tiêu đề $[document].ready[function[]{ $['p'].css['color','#ff0000']; }];
Tiêu đề
$[document].ready[function[]{
$['p'].css['color','#ff0000'];
}];
hocwebchuan
hocwebchuan
Hiển thị trình duyệt:
- Thêm thành phần p với một định dạng color="red" cùng với thành phần div được định dạng thêm với thuộc tính border.
- .add[bộ chọn,context]
- Click vào "p nằm trong div" thì thành phần p này và thành phần div cha của nó sẽ được thêm class="test".
- Sau khi có jQuery - sử dụng click
- .add[]
Thành phần p nằm trong div Thành phần p
- Trang chủ
- Tham khảo
jQuery
- jQuery - function
Định nghĩa và sử dụngbộ chọn]
$['div'].add['p'].css['color','red']; $['div'].add['.test, ul li'].css['color','red'];
.add[html]html]
$['div'].add['tag p
'].appendTo['body'];
- .add[]: Thêm thành phần vào thành phần đã có để cùng thực hiện một hành động.
.add[Object]Object]
$['div'].add[$['p'].css['color','red']].css['border','1px solid blue'];
- .add[]: Xây dựng một đối tượng jQuery mới [đối tượng này là sự kết hợp của thành phần ban đầu và các thành phần được thêm vào], cùng nhau thực hiện hành động cụ thể nào đó.
Định nghĩa và sử dụngbộ chọn]
Html viết:
Tiêu đề $[function[]{ $['div'].add['p'].css['border','1px solid blue']; }];Thành phần divThành phần p
Hiển thị trình duyệt:
Thêm thành phần p với class="test" cùng với thành phần div được thêm vào body.p tham gia vào một hành động chèn style cùng với thành phần div.
So sánh code HTML trước và sau khi có jQuery:
Thành phần div Thành phần p Thành phần p | Thành phần div Thành phần p Thành phần p |
Thành phần div
Html viết:
Tiêu đề $[function[]{ $['div'].css['background','#cccccc'].add['p'].css['border','1px solid blue']; }];Thành phần divThành phần p
Hiển thị trình duyệt:
Thêm thành phần p với class="test" cùng với thành phần div được thêm vào body.style với background="#cccccc" trước, sau đó thêm thành phần p tham gia vào định dạng style chung với div.
So sánh code HTML trước và sau khi có jQuery:
Thành phần div Thành phần p Thành phần p | Thành phần div Thành phần p Thành phần p |
.add[html]html]
Html viết:
Tiêu đề $[function[]{ $['div'].add['tag p có class test
'].appendTo['body']; }];Thành phần div
Hiển thị trình duyệt:
Thêm thành phần p với class="test" cùng với thành phần div được thêm vào body.p với class="test" cùng với thành phần div được thêm vào body.
So sánh code HTML trước và sau khi có jQuery:
Thành phần div | Thành phần div tag p có class test tag p có class test |
.add[Object]Object]
Html viết:
Tiêu đề $[function[]{ $['div'].add[$['p'].css['color','red']].css['border','1px solid blue']; }];Thành phần divdivThành phần p
Hiển thị trình duyệt:
Thêm thành phần p với class="test" cùng với thành phần div được thêm vào body.p với một định dạng color="red" cùng với thành phần div được định dạng thêm với thuộc tính border.
So sánh code HTML trước và sau khi có jQuery:
Thành phần div Thành phần p Thành phần p | Thành phần div Thành phần p Thành phần p |
.add[bộ chọn,context]bộ chọn,context]
Html viết:
Tiêu đề .test { background-color: blue; } $[function[]{ $['div'].click[function[] { $['div'].add['p',this].addClass['test']; }]; }];Thành phần p nằm trong div
Thành phần p
Hiển thị trình duyệt:
Click vào "p nằm trong div" thì thành phần p này và thành phần div cha của nó sẽ được thêm class="test".p nằm trong div" thì thành phần p này và thành phần div cha của nó sẽ được thêm class="test".
So sánh code HTML trước và sau khi có jQuery:
Thành phần p nằm trong div Thành phần p Thành phần p nằm trong div Thành phần p | Thành phần p nằm trong div Thành phần pclass="test"> Thành phần p nằm trong div Thành phần p |