Tổng quan về JQuery

Học JQuery 01/10/2015 07:00 546
Xin chào các bạn. Đây là bài viết đầu tiên trong loạt các bài viết về JQuery. Một Javascript Framework đang làm mưa làm gió trong việc xây dựng website động.

jQuery chắc các bạn cũng đã không ít thì nhiều đã nghe 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ì?

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 http://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=”http://code.jquery.com/jquery-2.0.3.min.js”></script>

Cách viết đoạn jQuery đầu tiên

Để bắt đầu mình sẽ chuẩn bị một ví dụ nho nhỏ minh họa dưới đây.

Các bạn sẽ chuẩn bị 1 tài liệu HTML mẫu như sau:

<html>
<head>
    <title>Quyery</title>
    <script type=”text/javascript” src=”http://code.jquery.com/jquery-2.0.3.min.js”></script>
</head>
<body>
    <button id=”button”>Click vào đây</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>

Xem kết quả

Kết quả của đoạn mã trên là khi bạn click vào button “click vào đây” 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 fadeIn, fadeOut, show, hide,… 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ó ngay 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 các 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ó http://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.

3. Tổng 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 thuần 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à một 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.

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.