JQuery là gì? Hướng dẫn sử dụng jquery cơ bản

Để hạn chế việc lập trình nhiều, nhưng vẫn đảm bảo các yêu cầu, các ngôn ngữ lập trình thường được xây dựng và phát triển theo hướng thư viện. Thư viện là tập hợp những phần mã thường xuyên được sử dụng, được gói gọn trong một hàm, hay đối tượng. Javascript cũng có nhiều thư viện, phổ biến nhất đó là JQuery. Trong bài viết này mình sẽ giới thiệu đến thư viện JQuery và cách sử dụng JQuery cơ bản trong thiết kế website.

Thư viện JQuery là gì?

JQuery là một thư viện tuyệt vời kiểu mới của Javascript. Ra đời vào năm 2006 bởi John Resig. Nó đã trở thành một thành phần không thể thiếu trong các website có sử dụng Javascript. Với phương châm “Write less – Do more” (viết ít hơn – làm nhiều hơn) nó đã giúp nhiều nhà lập trình viên, tiết kiệm được rất nhiều thời gian và công sức trong việc thiết kế website. JQuery cung cấp các phương thức xử lý sự kiện, hiệu ứng, tương tác tuyệt vời hơn chỉ với những dòng lệnh đơn giản.

Nếu bạn đã nắm được kiến thức cơ bản về Javascript thì việc sử dụng JQuery không có gì quá khó. Dưới đây là một ví dụ về đoạn mã JQuery.

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});

Đoạn mã trên được xử lý khi người dùng click và các thẻ “p”. Các thẻ “p” này sau đó sẽ được ẩn đi sau khi click.

Tuy nhiên đoạn mã sẽ không thể chạy được nếu như bạn không thêm thư viện JQuery và tài liệu HTML. Bạn có thể tải thư viện JQuery tại : http://jquery.com/download/ Hoặc sử dụng JQuery tại CDN của Google tại https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js. hoặc của Microsoft tại: https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js.

Để chèn JQuery bạn khai báo như sau: <script src="Đường_dẫn_đến_JQuery"></script>

Theo khuyến nghị thì bạn nên sử dụng các CDN của Google hoặc Microsoft để có thời gian tải nhanh hơn việc sử dụng trực tiếp.

Cú pháp của JQuery

Lấy phần tử trong HTML

Trong Javascript thuần, muốn lấy một phần tử trong HTML bạn sẽ có cú pháp document.getElementBy{Id|Class|Tagname}("Tên_element")… Quá dài và rất tốn thời gian. Trong JQuery để lấy ra một phần tử trong HTML bạn chỉ cần sử dụng $ (selector)Ví dụ:

• $ (This) : Lấy phần tử hiện tại.
• $ ("h1") : Lấy các phần tử thẻ H1.
• $ (".Test") : Lấy các phần tử có class “Test“.
• $ ("# Test") : Lấy phần tử có ID là “Test“.
• $ ("*") : Lấy tất cả phần tử.
• $("p.intro") : Lấy các phần tử p có class là “intro“
• $("p:first") : Lấy phần tử p đầu tiên trong tài liệu HTML.
• $("p:last") : Lấy phần tử p cuối cùng trong tài liệu HTML.
• $("ul li:first") : Lấy phần tử li đầu tiên trong phần tử ul
• $("[href]") : Lấy các phần tử có thuộc tính href.
• $("a[target='_blank']") :  Lấy các phần tử a có thuộc tính target='_blank'
• $("a[target!='_blank']") :  lấy các phần tử a có thuộc tính target nhưng không phải là '_blank'
• $(":button") : Lấy các phần tử button hoặc các phần tử input có loại là button.
• $("tr:even") : Lấy các phần tử tr chẵn trong bảng.
• $("tr:odd") :   Lấy các phần tử tr lẽ trong bảng.

Sự kiện sẵn sàng

Để đảm bảo các đoạn mã JQuery không chạy trước khi trang đã được tải xong, bạn cần sử dụng một sự kiện xác định sẵn tài liệu sẵn sàng. Cú pháp:

$(document).ready(function(){
   // Các đoạn JQuery
});

Tại sao cần sử dụng sự kiện này? ví dụ trong trường hợp đoạn mã JQuery của bạn có tác động đến một class có tên”ABC” nhưng class này chưa được tải xong thì hành động của JQuery là thất bại. Bạn có thể đưa các đoạn mã và cuối trang để khắc phục nhưng với sự kiện sẵn sàng bạn có thể để nó ở đầu trang.

Ngoài ra sự kiện này còn có cú pháp ngắn gọn hơn như sau:

$(function(){
   // Các đoạn JQuery
});

Mặc dù ngắn nhưng cú pháp này không khuyến khích bạn sử dụng. Vì nó sẽ làm khó hiểu hơn khi đọc mã.

Sự kiện cho các phần tử trong JQuery

Sự kiện là một hành động đến từ người dùng hoặc trình duyệt. Cú pháp sử dụng sự kiện: $ (selector).sự_kiện(Mã_thực_thi)  JQuery có những sự kiện sau:

• Các sự kiện đến từ hành động của “chuột”
  • click: khi click vào đối tượng.
  • dblclick: khi double click vào đối tượng.
  • mouseenter: khi rê chuột vào đối tượng.
  • mouseleave: khi đưa chuột rời khỏi đối tượng.
• Các sự kiện đến từ hành động của bàn phím
  • keypress: khi phím được nhấn vào đối tượng.
  • keydown: khi phím được nhấn xuống và giữ nguyên.
  • keyup: khi phím được thả ra.
• Các sự kiện đến từ form
  • submit: khi nhấn gửi dữ liệu đi (loại button với type submit).
  • change: khi thay đổi giá trị trong thẻ input.
  • focus: khi người dùng nhấn vào thẻ input hoặc dùng nut tab chuyển đến thẻ input khác.
  • blur: khi rời khỏi thẻ input.
• Các sự kiện đến từ trình duyệt
  • load: khi trang đang tải.
  • resize: khi trang thay đổi kích thước tổng thể.
  • scroll: khi trang đang cuộn lên xuống.
  • unload: khi trang đang được load lại.

Ví dụ:

<script>
$(document).ready(function(){
  $("input").focus(function(){
    alert("Hãy nhập vào nội dung.");
  });
});
</script>