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

Viết chương trình "Cá Bơi Trên DeskTop"

Trong bài viết ngày hôm nay chứng từ vừa học vừa chơi 1 xíu. Mình sẽ giới thiệu với các bạn viết chương trình để có 1 con cá bơi qua bơi lại trên màn hình máy tính. ​ Với chương trình này các bạn sẽ làm quen với các hàm về đồ họa GDI+. Các bạn tham khảo demo ...

Trần Trung Dũng viết 2 tuần trước

Viết chương trình máy tính cá nhân đơn giản

Hôm nay mình sẽ giới thiệu đến các bạn ứng dụng máy tính cá nhân đơn giản. Nói nó đơn giản thì cũng đơn giản đấy, nhưng nếu không hiểu thì quả cũng khá phức tạp. Bạn theo dõi đọc code và tự tìm hiểu nhé. - Trước tiên bạn thiết kế form như trên Các ...

Bùi Văn Nam viết 2 tuần trước

Cách viết chương trình Python 3 đầu tiên của bạn

Giới thiệu Chương trình “Hello, World!” Là một truyền thống cổ điển và được vinh danh trong lập trình máy tính. Phục vụ như một chương trình đơn giản và hoàn chỉnh đầu tiên cho người mới bắt đầu, cũng như một chương trình tốt để kiểm tra hệ thống và môi trường lập trình, â € œHello, ...

Trịnh Tiến Mạnh viết 16:43 ngày 18/09/2018

Tìm hiểu chương trình Python đầu tiên

Trước khi đọc tiếp bạn hãy chắc chắn là mình không bỏ lỡ bất kỳ bài viết nào về Python tại đây nhé. Trong bài viết này chúng ta cùng tìm hiểu một chương trình Python đơn giản để có cái nhìn rõ hơn một chút về Python, trước khi bắt đầu học về các thành phần ...

Trịnh Tiến Mạnh viết 10:57 ngày 22/08/2018

Chương trình Java đầu tiên Hello World

Chương này, chúng ta sẽ học cách viết một chương trình Java đơn giản. Trước khi viết chương trình Hello World, bạn nên cài đặt trước JDK. Để tạo một chương trình Java đơn giản, bạn cần tạo một lớp chứa phương thức main. Để thực thi bất cứ chương trình Java nào, bạn cần: Platform: Bất cứ ...

Bùi Văn Nam viết 13:25 ngày 14/08/2018
0