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.
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.
<script type=”text/javascript” src=”path/…./jquery-latest.js”></script>
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.
<script type=”text/javascript” src=”code.jquery.com/jquery-2.0.3.min.js”></script>
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.
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>
<head>
<title>jquery cho newbie</title>
<script type=”text/javascript” src=”path/…/jquery-latest.js”></script>
</head>
<body>
<button id=”button” href=”#”>click me</button>
<p class=”para”>Chào các bạn, jquery học thật dễ đúng không?</p>
</body>
</html>
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ẻ <head> nhé.
<script type=”text/javascript”>
$(document).ready(function(handler ) {
$(“#button”).click(function(handler) {
$(“p”).fadeOut();
});
});
</script>
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 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ờ.
Đầu tiên, thao tác cơ bản nhất của jquery là chọn một một phần tử trong cấu trúc 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.
Ở ví dụ trên chính là $(document), $(“#button”), $(“p”). Rõ ràng bạn có thể hướng tới các thành phần trong tài liệu html một cách thật dễ dàng bằng cách tận dụng kiến thức về CSS vì các jquery Selector có cùng cấu trúc và cú pháp như CSS Selector. Và bằng cách đó bạn hoàn toàn có thể định dạng và thay đổi giao diện của một trang web giống như cách mà CSS đã làm và yên tâm rằng nó hiển thị tôt trên tất cả các trình duyệt. Đây cũng là một ưu điểm của jquery so với CSS.
Hàm fadeOut() trong ví dụ trên tạo hiệu ứng ẩn mờ dần cho thành phần được chọn. Chi tiết về những hàm tạo hiệu ứng cũng như những hàm khác các bạn có thể xem đầy đủ tại trang chủ của nó api.jquery.com/ và tra cứu khi cần.
Một điều chú ý nữa đó là hàm $(document ).ready() ở trên. Hàm này đảm bảo cho tất cả mã jquery đặt trong nó được thực thi sau khi toàn bộ tài liệu html được load xong. Và thường thì chúng ta vẫn làm như vậy.
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.
Add to Cart
Thứ Bảy, 7 tháng 3, 2015
Lập trình jQuery căn bản
Đăng ký:
Đăng Nhận xét (Atom)
Product Category
- 3dmax
- ai
- chien luoc seo
- chiến lược seo
- chinh chi b
- cong nghe
- corel
- CorelDraw
- dien thoai thong minh
- e-learning
- flash animation
- giai de thi worldskill
- giải đề thi worldskill
- he thong hoc truc tuyen
- he thong thong tin
- hệ thống học trực tuyến
- hệ thống thông tin
- hoc nghe nhanh
- học nghề nhanh
- hoc truc tuyen
- học trực tuyến
- HTML la gi
- huong dan lap trinh java
- hướng dẫn lập trình java
- illustrator
- jack ma alibaba
- java nâng cao
- khai thac tai nguyen internet
- khai thác tài nguyên internet
- khoa hoc
- Khoa hoc mien phi
- khoa hoc y tuong kinh doanh thoi @
- kiem nhieu tien
- kiem tien google adsense
- kiem tien online
- kiem tien youtube
- kien truc noi that
- kiếm nhiều tiền
- kinh doanh online
- Kinh doanh ten mien
- ky thuat SEO
- kỹ thuật SEO
- lap trinh android
- lap trinh ASP.net
- lap trinh C#
- lap trinh css
- lap trinh dien thoai
- lap trinh html
- lap trinh html css
- lap trinh java
- lap trinh jquery
- lap trinh PHP
- lap trinh ung dung
- lap trinh vien
- lap trinh vien chuyen nghiep
- lap trinh website
- lập trình android
- lập trình ASP.NET
- lập trình C#
- lập trình điện thoại
- lập trình html css
- lập trình java
- lập trình trên thiết bị di động
- lập trình viên
- lập trình viên chuyên nghiệp
- lập trình website
- lien thong dai hoc
- liên thông đại học
- Mang xa hoi
- microsoft access
- microsoft excel
- microsoft word
- Mua sam truc tuyen
- nghe 1 von 4000 loi
- nghe chat xam
- nghe webdesign
- nghề chất xám
- nghề đang hot
- nghề webdesign
- phan mem quan ly
- phầm mềm quản lý
- phầm mềm quản lý bán hàng
- phần mềm quản lý
- phần mềm quản lý bán hàng bằng mã vạch
- phân tích thiết kế
- phân tích thiết kế hệ thống thông tin
- phi tin bat phu
- phi tin bất phú
- photoshop
- php framework yii
- quản lý đào tạo
- quản lý kế toán
- quản lý kinh doanh
- seo hieu qua
- seo hiệu quả
- seo website
- smartphone
- tai nguyen internet
- tài nguyên internet
- thanh toan dien tu
- thanh toán điện tử
- thiet bi di dong
- thiet ke in an
- thiet ke layout web
- thiet ke noi that
- thiet ke web
- thiet ke web bang joomla
- thiet ke web bang wordpress
- thiet ke website
- thiet ke wen tin tuc
- thiết bị di động
- thiết kế web
- thiết kế web tin tức
- thiết kế website
- thuat toan google
- thuật toán google
- thuong mai dien tu
- thương mại điện tử
- tin hoc can ban
- tin hoc van phong
- top google
- truong dao tao lien thong dai hoc
- trường đào tạo liên thông đại học
- ung dung quang cao
- ứng dụng quảng cáo
- website lên top
- website lên top google
- worldskills 2013
- xu ly anh
- y tuong kinh doanh
Labels
- 3dmax
- ai
- chien luoc seo
- chiến lược seo
- chinh chi b
- cong nghe
- corel
- CorelDraw
- dien thoai thong minh
- e-learning
- flash animation
- giai de thi worldskill
- giải đề thi worldskill
- he thong hoc truc tuyen
- he thong thong tin
- hệ thống học trực tuyến
- hệ thống thông tin
- hoc nghe nhanh
- học nghề nhanh
- hoc truc tuyen
- học trực tuyến
- HTML la gi
- huong dan lap trinh java
- hướng dẫn lập trình java
- illustrator
- jack ma alibaba
- java nâng cao
- khai thac tai nguyen internet
- khai thác tài nguyên internet
- khoa hoc
- Khoa hoc mien phi
- khoa hoc y tuong kinh doanh thoi @
- kiem nhieu tien
- kiem tien google adsense
- kiem tien online
- kiem tien youtube
- kien truc noi that
- kiếm nhiều tiền
- kinh doanh online
- Kinh doanh ten mien
- ky thuat SEO
- kỹ thuật SEO
- lap trinh android
- lap trinh ASP.net
- lap trinh C#
- lap trinh css
- lap trinh dien thoai
- lap trinh html
- lap trinh html css
- lap trinh java
- lap trinh jquery
- lap trinh PHP
- lap trinh ung dung
- lap trinh vien
- lap trinh vien chuyen nghiep
- lap trinh website
- lập trình android
- lập trình ASP.NET
- lập trình C#
- lập trình điện thoại
- lập trình html css
- lập trình java
- lập trình trên thiết bị di động
- lập trình viên
- lập trình viên chuyên nghiệp
- lập trình website
- lien thong dai hoc
- liên thông đại học
- Mang xa hoi
- microsoft access
- microsoft excel
- microsoft word
- Mua sam truc tuyen
- nghe 1 von 4000 loi
- nghe chat xam
- nghe webdesign
- nghề chất xám
- nghề đang hot
- nghề webdesign
- phan mem quan ly
- phầm mềm quản lý
- phầm mềm quản lý bán hàng
- phần mềm quản lý
- phần mềm quản lý bán hàng bằng mã vạch
- phân tích thiết kế
- phân tích thiết kế hệ thống thông tin
- phi tin bat phu
- phi tin bất phú
- photoshop
- php framework yii
- quản lý đào tạo
- quản lý kế toán
- quản lý kinh doanh
- seo hieu qua
- seo hiệu quả
- seo website
- smartphone
- tai nguyen internet
- tài nguyên internet
- thanh toan dien tu
- thanh toán điện tử
- thiet bi di dong
- thiet ke in an
- thiet ke layout web
- thiet ke noi that
- thiet ke web
- thiet ke web bang joomla
- thiet ke web bang wordpress
- thiet ke website
- thiet ke wen tin tuc
- thiết bị di động
- thiết kế web
- thiết kế web tin tức
- thiết kế website
- thuat toan google
- thuật toán google
- thuong mai dien tu
- thương mại điện tử
- tin hoc can ban
- tin hoc van phong
- top google
- truong dao tao lien thong dai hoc
- trường đào tạo liên thông đại học
- ung dung quang cao
- ứng dụng quảng cáo
- website lên top
- website lên top google
- worldskills 2013
- xu ly anh
- y tuong kinh doanh
0 nhận xét:
Đăng nhận xét