NTM Solutions

Facebook Youtube Google+

Thứ Bảy, 21 tháng 1, 2017

Tự học Jquery – Cơ Bản - Bài 1 – Giới thiệu

Mục đích của jQuery để làm cho việc sử dụng JavaScript dễ dàng hơn trên trang web của bạn.
Những thứ cần thiết
Trước khi bắt đầu học jQuery, bạn cần những kiến thức cơ bản sau:

  • HTML
  • CSS
  • JavaScript
  • Bạn có thể xem các hướng dẫn của tôi trên website http://www.lophocvitinh.com
  • Jquery là gì?

jQuery là 01 thư viện JavaScript cực nhẹ với tiêu chí "write less, do more" (viết ít, được nhiều).
Mục đích của jQuery là làm cho việc sử dụng JavaScript trên trang web dễ dàng hơn.
jQuery có thể làm được nhiều thao tác thông dụng mà nếu viết bằng JavaScript sẽ tốn rất nhiều dòng lệnh, và đóng gói chúng thành các hàm để chúng ta có thể gọi chúng bằng 01 dòng lệnh ngắn.
jQuery cũng giúp đơn giản hóa rất nhiều thứ trong JavaScript, ví dụ gọi AJAX và xử lý DOM.
Thư viện jQuery gồm các tính năng sau:

  • Xử lý HTML/DOM
  • Xử lý CSS
  • Các hàm xử lý sự kiện HTML
  • Hiệu ứng và chuyển động.
  • AJAX
  • Các tiện ích khác.

Mẹo: Hơn nữa, jQuery có những plugins cho hầu hết các thao tác.

Tại sao dùng jQuery?

Có rất nhiều thư viện JavaScript, nhưng jQuery dường như được dùng phổ biến nhất,  và cũng được phát triển nhiều nhất.
Rất nhiều công ty lập trình Web lớn sử dụng jQuery:

  • Google
  • Microsoft
  • IBM
  • Netflix

jQuery chạy trên trình duyệt nào?


Nhóm phát triển jQuery đảm bảo nó chạy được từ Internet Explorer 6

Thêm thư viện jQuery vào trang web

Có nhiều cách để sử dụng jQuery trên trang web:

  1. Tải xuống thư viện jQuery từ trang web jQuery.com
  2. Tích hợp jQuery từ 01 CDN, ví dụ Google

Tải xuống jQuery

Có 02 phiên bản jQuery:

  1. Phiên bản Production – phiên bản này dùng tích hợp trên trang web bởi vì nó đã được nén và thu nhỏ lại.
  2. Phiên bản Development – dùng cho thử nghiệm và phát triển (chưa nén và có thể đọc MÃ)

Cả 02 phiên bản đều có thể tải xuống  từ trang jQuery.com.
Thư viện jQuerylà 01 file JavaScript, và bạn có thể tham khảo đến bằng thẻ <script> (đặt trong thẻ <head>):
<head>
<script src="jquery-1.12.4.min.js"></script>
</head>
Mẹo: Đặt FILE đã tải xuống cùng thư mục với trang mà bạn muốn sử dụng.
Có bao giờ bạn tự hỏi tại sao chúng ta không dùng type="text/javascript" bên trong thẻ <script> ?

Đó là vì trong HTML5, JavaScript là ngôn ngữ script mặc định trên mọi trình duyệt!
jQuery CDN
Nếu bạn không muốn tải xuống và đặt jQuery trên host, bạn có thể đính kèm trong CDN (Content Delivery Network).
Cả Google và Microsoft đều có chứa sẵn thư viện jQuery.Cách dùng như sau:
1. Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
2. Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
Ích lợi của việc sử dụng thư viện jQuery từ Google hoặc Microsoft:

Nhiều người sử dụng đã tải xuống thư viện jQuery từ Google hoặc Microsoft khi họ đến các trang web khác. Và như vậy, chúng đã có sẵn trong cache khi họ ghé thăm trang của bạn, làm cho nó không phải tải lại=> tiết kiệm thời gian hơn. Do đó CDN sẽ đảm bảo người dùng web chỉ tải xuống 01 lần và nó sẽ được đặt trên máy chủ gần họ nhất giúp giảm thời gian tải thư viện.