- 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:
- Trang chủ
- Tham khảo
- jQuery
- Hướng dẫn cài đặt và sử dụng
Nội dung chính ShowShow
- Hướng dẫn cài đặt
- Hướng dẫn sử dụng
- Ví dụ đơn giản sử dụng jquery
- Thành phần p nằm trong div Thành phần p
- Định nghĩa và sử dụngbộ chọn]
- Thành phần div
- .add[html]html]
- .add[Object]Object]
- .add[bộ chọn,context]bộ chọn,context]
Hướng dẫn cài đặt
- Hướng dẫn sử dụng
Ví dụ đơn giản sử dụng jquery
Tiêu đề
Thành phần p nằm trong div Thành phần p
//Code html viết ở đây...
jQuery chắc các bạn cũng đã nghe nhiều về nó, nhất là trong việc làm các hiệu ứng đẹp trên website. Vậy chính xác nó là cái gì? Hy vọng đọc xong bài này bạn sẽ hiểu ra được phần nào. Trước hết, để hiểu rõ tốt bài này bạn cần có kiến thức Javascript căn bản. chắc các bạn cũng đã nghe nhiều về nó, nhất là trong việc làm các hiệu ứng đẹp trên website. Vậy chính xác nó là cái gì? Hy vọng đọc xong bài này bạn sẽ hiểu ra được phần nào. Trước hết, để hiểu rõ tốt bài này bạn cần có kiến thức Javascript căn bản.
Trước hết, Jquery là một thư viện của javascript nên nó cũng là một file js thông thường, do đó trước khi làm việc với mọi thứ, hãy nhúng thư viện jquery lên website của mình. Có 2 cách để làm việc này:
Cách 1 – Chèn file jQuery trực tiếp từ host
Cách này là bạn tự host bằng cách vào trang //jquery.com tải file mới nhất về và load file này mỗi lần sử dụng jquery.
Cách 2 – Chèn file jQuery từ CDN của Google
Cách này thay vì bạn upload plugin jQuery lên host thì bạn chỉ cần việc nhúng thẻ chèn jQuery từ file jQuery có sẵn trên máy chủ CDN của Google. Ưu điểm cách này là tiết kiệm băng thông.
Tuy nhiên nếu bạn đang thực hành code trên localhost thì nên sử dụng cách 1 để tránh trường hợp máy chúng ta không có kết nối mạng mà web vẫn có thể hoạt động được.
Tài liệu học jQuery
Trong bài này mình không thể nào dạy hết cho các bạn jQuery từ A tới Z được nên cách tốt nhất là bạn nên tự học, bài này chỉ mang tính chất giới thiệu và giúp bạn làm quen với jQuery mà thôi. Dưới đây là những nguồn học jQuery miễn phí tốt nhất, dĩ nhiên là yêu cầu bạn có kiến thức Javascript căn bản.
- jQuery Documentation
- Học jQuery tại W3Schools
- jQuery căn bản của izWebz
- Serie video học jQuery của Hoctudau
Mình nghĩ với những nguồn đó bạn có thể thành “master” jQuery rồi đó. Hãy nhớ rằng jQuery rất dễ học nên bạn không cần quá lo lắng về nó.
Cách viết đoạn jQuery đầu tiên
Để bắt đầu minh sẽ chuẩn bị một ví dụ minh họa dưới đây.
Chuẩn bị 1 tài liệu HTML mẫu như sau:
[html]
Serie video học jQuery của Hoctudau
Jquery cho newbie
Cách viết đoạn jQuery đầu tiên
Serie video học jQuery của Hoctudau
Serie video học jQuery của Hoctudau
Jquery cho newbie
Cách viết đoạn jQuery đầu tiên
Serie video học jQuery của Hoctudau
Jquery cho newbie
[/html]
Cách viết đoạn jQuery đầu tiên
$[document].ready[function[handler ] {$[“#button”].click[function[handler] {
$[“p”].fadeOut[];
}];
}];
click meclick me” thì đoạn văn bản ở sau nó sẽ bị mờ dần và ẩn đi. Các bạn có thể xem kết quả ở //jsfiddle.net/Michael_Nguyen/LcPuF/14
Chào các bạn, Jquery học thật dễ đúng không?
[/html]DOM [Document Object Model] của tài liệu html. Bạn làm điều đó bằng cách sử dụng hàm $[ ] [hoặc hàm Jquery[ ] ]. Hàm $[ ] là một Jquery Object, trong cặp [ ] là một chuỗi tham số, có thể là CSS Selector.
Kế tiếp mình sẽ chèn thêm đoạn jQuery này vào tài liệu HTML trên, chèn trong cặp thẻ nhé.
Kết quả của đoạn mã trên là khi bạn click vào button “click me” thì đoạn văn bản ở sau nó sẽ bị mờ dần và ẩn đi. Các bạn có thể xem kết quả ở //jsfiddle.net/Michael_Nguyen/LcPuF/14
Các sự kiện như click, blur, focus…. Cũng như những hiệu ứng fadeOut, hide, fadeIn,… các bạn sẽ được tiếp xúc nhiều khi làm việc với Jquery và không nên bận tâm nhiều về nó bây giờ.
Lời kết
Nếu như bạn nào đã biết về javascript có thể dễ dàng nhận ra rằng bộ mã của Jquery đơn giản và dễ sử dụng hơn Javascript rất nhiều. Điều này làm giảm thời gian cũng như công sức của lập trình viên một cách đáng kể. Và đó cũng chính là 1 lý do khiến Jquery trở thành một trong những thư viện của javascript được yêu thích nhất.bộ mã của Jquery đơn giản và dễ sử dụng hơn Javascript rất nhiều. Điều này làm giảm thời gian cũng như công sức của lập trình viên một cách đáng kể. Và đó cũng chính là 1 lý do khiến Jquery trở thành một trong những thư viện của javascript được yêu thích nhất.
Những gì Jquery có thể làm còn rất nhiều như lấy thông tin từ server mà không cần tải lại trang web [AJAX] cũng như một thư viện plugins đồ sộ và hữu ích mà mình sẽ đề cập ở những bài sau. Hẹn gặp lại các bạn ở những bài hướng dẫn tiếp theo.
Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.