Chủ đề nổi bật
03/08/2018, 10:07

jQuery là gì? Viết chương trình jquery đầu tiên

Trong công nghệ web 2.0 thì Javascript là một thành phần không thể thiếu bởi vì các hiệu ứng trên website hầu hết là kết quả của sự kết hợp ...

Trong công nghệ web 2.0 thì Javascript là một thành phần không thể thiếu bởi vì các hiệu ứng trên website hầu hết là kết quả của sự kết hợp Javascript và CSS. Để tạo các hiệu ứng đó thì ta phải lập trình những đoạn code Javascript khá là dài dòng nên rất khó bảo trì và phát triển, vì vậy jQuery đã ra đời nhằm giải quyết vấn đề này.

Trước khi bắt đầu học jQuery thì ta sẽ tìm hiểu khái niệm jQuery là gì đã nhé.

1. jQuery là gì?

jQuery là một thư viện được xây dựng từ Javascript nhằm giúp lập trình viên xây dựng những chức năng có sử dụng Javascript trở nên dễ dàng hơn. jQuery được tích hợp nhiều module khác nhau từ module hiệu ứng cho đến module truy vấn selector. jQuery được sử dụng đến 99% trên tổng số website trên thế giới (trừ những website sử dụng JS Framework).

Các module chính của jQuery bao gồm:

  • Ajax - xử lý Ajax
  • Atributes - Xử lý các thuộc tính của đối tượng HTML
  • Effect - xử lý hiệu ứng
  • Event - xử lý sự kiện
  • Form - xử lý sự kiện liên quan tới form
  • DOM - xử lý Data Object Model
  • Selector - xử lý luồng lách giữa các đối tượng HTML

Để xem danh sách đầy đủ thì bạn vào trang jQuery API nhé.

2. Viết chương trình jQuery đầu tiên

Bài tập: Bây giờ để các bạn dễ hình dung hơn thì tôi có một bài toán như sau: Tạo một textbox và một button, sau đó viết javascript cho sự kiện click vào button thì sẽ show nội dung của ô textbox.

Sử dụng javascript thuần

Nếu bạn chưa biết Javascript thì hãy xem serie Javascript căn bản này nhé.

Với bài toán này ta sẽ giải như sau: XEM DEMO

HTML
<input type="text" id="id-textbox" value=""/> <br/>
<input type="button" id="id-button" onclick="showTextVal()" value="Alert"/><br>
Javascript
function showTextVal(){
    var value = document.getElementById('id-textbox').value;
    alert(value);
}

Ở button tôi đã gắn hàm showTextVal() vào sự kiện click, sau đó tôi có định nghĩa một hàm showTextVal() với chức năng là hiển thị lên nội dung của textbox. Bây giờ ta sẽ tham khảo bài giải trong jQuery nhé. 

Sử dụng thư viện jQuery

Như tôi đã giới thiêu ở phần jQuery là gì thì jQuery là một thư viện viết bằng Javascript nên muốn sử dụng được nó ta phải download về, sau đó đặt trong project và dùng thẻ script để gọi file jquery ra với cú pháp:

<script language="javascript" src="duong_dan_toi_file_jquery.js"></script>

Bạn phải import file jQuery vào rồi thì mới sử dụng được các hàm của nó, nghĩa là tất cả các đoạn code nào có sử dụng thư viện jQuery đều phải nằm phía dưới đoạn code import script trên.

Các bước thực hiện như sau: XEM DEMO.

Bước 1: Download bộ thư viện jquery tại đây.

Bước 2: Tạo file index.html với nội dung như sau:

Code
<!DOCTYPE html>
<html>
    <head>
        <title>Chạy chương trình jquery đầu tiên</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
    </head>
    <body>
        <h1>jQuery</h1>
        
        <input type="text" id="id-textbox" value=""/> <br/>
        <input type="button" id="id-button" value="Alert"/>
        
        <script language="javascript">
            // Code jQuery tại đây
        </script>
    </body>
</html>

Trong file index.html mình đã import file jQuery vào và đồng thời tạo một thẻ script nằm phía dưới để code những đoạn mã jQuery. Điều này tuân thủ nguyên tắc phải import file jQuery rồi mới sử dụng được.

Bước 3: Viết sự kiện click với jQuery.

Ở bước này thì trước tiên ta tìm hiểu cú pháp của jQuery đã nhé. jQuery luôn bắt đầu bằng ký tự đô la $ hoặc dòng chữ jQuery.

Ví dụ
// Lấy đối tượng có id = id-button trong javascript
var object = document.getElementById('id-button');

// Lấy đối tượng có id = id-button trong jQuery
var object = $('#id-button');
//Hoặc
var object = jQuery('#id-button');

Rất rõ ràng rồi nhỉ cool bây giờ ta sẽ viết jQuery xử lý sự kiện click nhé. Bạn sửa lại file index.html tại phần xử lý jQuery mà mình đã đánh dấu như sau:

Code
// Khi click vào button có id = id-button
$('#id-button').click(function()
{
    // Cách 1: Khai báo biến và lấy giá trị
    var textbox = $('#id-textbox');
    alert(textbox.val());

    // Cách 2: Truy xuất trực tiếp
    alert($('#id-textbox').val());
});

Trong đó:

  • $('#id-button').click() có nghĩa là gán sự kiện click cho thẻ HTML có id="id-button", tham số truyền vào là một hàm xử lý chương trình khi xảy ra sự kiện click.
  • $('#id-textbox') có nghĩa là lấy thẻ HTML có id="id-textbox"
  • $('#id-textbox').val() có nghĩa lấy giá trị của thẻ input có id="id-textbox".

Nếu bạn thắc mắc tại sao các đoạn mã jQuery lại đặt ở phía dưới các thẻ HTML thì hãy xem ở bài tiếp theo nhé.

3. Lời kết

Qua ví dụ bài học này bạn đã hiểu được jQuery là gì và biết được cú pháp căn bản của jQuery. Bài này có sử dụng các kiến thức mà chúng ta chưa học nhưng mình có giải thích rất kỹ rồi nên hy vọng các bạn hiểu, nếu vẫn không hiểu thì bạn có thể xem các bài tiếp theo trong series này nhé.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

Hiệu ứng trong jQuery

jQuery cung cấp một giao diện đơn giản để thực hiện các loại hiệu ứng tuyệt vời đa dạng. Các phương thức jQuery cho phép chúng ta áp dụng nhanh chóng các hiệu ứng phổ biến với cấu hình tối thiểu. Chương này sẽ bàn luận tất cả phương thức jQuery quan trọng để tạo các Visual Effect. Hiển ...

Cơ bản về jQuery

jQuery là một Framework được xây dựng dựa trên các tính năng của JavaScript. Vì thế trong khi phát triển các ứng dụng sử dụng jQuery, bạn có thể sử dụng tất cả các hàm và các tính năng khác được bổ trợ trong JavaScript. Chương này sẽ giải thích hầu hết khái niệm cơ bản thường được sử dụng ...

jQuery Ajax

AJAX là từ viết tắt của Asynchronous JavaScript and XML và công nghệ này giúp chúng ta tải dữ liệu từ Server mà không cần Refresh trình duyệt. Nếu bạn cảm thấy mới mẻ với AJAX, mình đề nghị bạn nên truy cập trang: Ajax Tutorial trước khi theo dõi những gì được đề cập trong chương này. ...

Plugins trong jQuery

Plug-in là một phần của code được viết theo một JavaScript file chuẩn. Những file này cung cấp các phương thức jQuery hữu ích mà có thể được sử dụng cùng với các phương thức jQuery Library. Có rất nhiều jQuery plug-in có sẵn để bạn có thể tải về từ kho lưu tại: http://jquery.com/plugins. ...

Xử lý sự kiện trong jQuery

Chúng ta có khả năng tạo các trang web động bởi sử dụng các Sự kiện (Event). Các sự kiện là các hành động mà có thể được phát hiện bởi ứng dụng web của bạn. Sau đây ví dụ một số sự kiện: Khi các sự kiện này được kích hoạt, bạn có thể sử dụng các hàm custom để phản hồi bất kỳ những gì ...

Thao tác DOM trong jQuery

jQuery cung cấp các phương thức để thao tác với DOM một cách cực kỳ hiệu quả. Bạn không cần viết những đoạn code quá dài để sửa đổi giá trị thuộc tính của bất kỳ phần tử nào hoặc để trích (extract) các đoạn HTML code từ một thẻ p hoặc div. jQuery cung cấp các phương thức như .attr(), ...

Thuộc tính trong jQuery

Một số thành phần cơ bản nhất, chúng ta có thể thao tác với các phần tử DOM, là các đặc tính và các thuộc tính được gán cho các phần tử đó. Hầu hết những thuộc tính này là có sẵn thông qua JavaScript như là các thuộc tính DOM node. Một số thuộc tính phổ biến hơn là: Xem xét đoạn HTML ...

CSS Selector trong jQuery

Thư viện jQuery hỗ trợ gần như tất cả các Selector trong Cascading Style Sheet (CSS), khi đã được đề cập trên World Wide Web Consortium. Sử dụng thư viện jQuery, các nhà lập trình có thể nâng cấp các Website của họ mà không cần lo lắng về các trình duyệt và phiên bản của nó, miễn là các ...

jQuery là gì

jQuery là gì? jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm 2006 với một phương châm tuyệt vời: Write less, do more - Viết ít hơn, làm nhiều hơn . jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng động và tương tác Ajax. Với ...

Truy cập DOM trong jQuery

jQuery là một công cụ vô cùng mạnh mẽ. Nó cung cấp các phương thức đa dạng để truy cập DOM (DOM Traversal Method), giúp chúng ta chọn các phần tử trong một tài liệu một cách ngẫu nhiên hoặc theo phương thức liên tục. Hầu hết DOM Traversal Method không sửa đổi đối tượng jQuery và chúng được ...