Tìm hiểu về Jquery và Ajax (phần 1)

PhongPX
Oct 14, 2020
4 min read

Đối với những ai theo ngành lập trình viên Web thì 2 khái niệm Jquery và Ajax là những thứ thường xuyên phải tiếp xúc và tìm hiểu ngay từ những ngày đầu tiên bước vào nghề. Bài viết hôm nay chúng ta sẽ tìm hiểu 2 khái niệm tưởng đơn giản nhưng lại vô cùng quan trọng này.

I, Jquery ?

Khái niệm:

Mình xin được trích nguyên khái niệm lấy lên từ trang chủ jquery như sau:

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Qua khái niệm trên chúng ta rút ra được vài ý quan trọng như sau:

Nó là một thư viện của JS, có kích thước nhỏ, nhưng hỗ trợ xử lý rất nhanh và có nhiều tính năng trong đó.
Những việc mà thư viện này có thể làm bao gồm những việc như: Xử lý sự kiện, tạo animation, gọi Ajax (chúng ta sẽ nói sau) trên một trang HTML.
Vô cùng dễ dàng, dễ học, giúp cho việc viết code bằng JS dễ dàng hơn.

Cách gọi và sử dụng:

Để có thể sử dụng Jquery thì phổ biến có 2 cách chính:

- Cách đầu tiên là sử dụng đường dẫn CDN đặt vào thể Head của trang HTML. Phiên bản Jquery mới nhất là 3.5.1 ( tính đến ngày 13/10/2020). Nên đường dẫn CDN nó sẽ như thế này:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

- Cách thứ 2 là download về bỏ vào một folder trong Project rồi gọi theo đường dẫn. Ví dụ trong ASP.NET MVC thì được bỏ trong thư mục Content. Vậy cách gọi đó như sau:

<head>
<script src="~/Content/js/jquery-3.5.1.min.js"></script>
</head>

Các tính năng chính:

Thao tác với các phần tử của DOM, ví dụ như thêm thuộc tính CSS cho một thẻ nào đó.
Xử lý sự kiện, những sự kiện này có thể là Click, Onchange, Mouse Event...
Hỗ trợ công nghệ Ajax.

Ví dụ:

Cùng xem một số ví dụ mình có thu lượm được sau:

- Ví dụ như sử dụng lệnh SlideDown(), SlideUp() và SlideToogle().

$("#flip").click(function(){ 
$("#panel").slideDown();
});

- Ẩn HTML element bằng lệnh Hide() và Show() .

$("#hide").click(function(){
   $("p").hide();
});

$("#show").click(function(){
   $("p").show();
});

- Ví dụ hiệu ứng animation:

$("button").click(function(){
   $("div").animate({
       left: '250px',
       height: '+=150px',
       width: '+=150px'
 });
});

- Thay đổi CSS

$("button").click(function(){
   $("h1, h2, p").toggleClass("blue");
});

Viết sự kiện cho các đối tượng trên HTML bằng Jquery

cú pháp chung như sau:

$ (selector).sự_kiện(Mã_thực_thi)

Phân loại các sự kiện như 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.

Cách lấy phần tử HTML trong Jquery

$(This) : Lấy phần tử hiện tại.

$("h2") : Lấy các phần tử thẻ H2.
$(".pogpog") : Lấy các phần tử có class “pogpog“.
$("# pogpog") : Lấy phần tử có ID là “pogpog“.
$("*") : Lấy tất cả phần tử.
$("p.sumo") : Lấy các phần tử p có class là “sumo“
$("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.

Ưu điểm của Jquery:

Là một thư việc vô cùng phổ biến, giúp cho việc xử lý giao diện mà không cần load lại trang. Nó tương thích với hầu hết trình duyệt, code nhẹ nhưng mang lại hiệu quả vô cùng tốt.
Hỗ trợ gọi Ajax một cách nhanh chóng.

Nhược điểm của Jquery:

Theo mình rút ra trong quá trình sử dụng thì chính ưu điểm của Jquery lại dẫn đến những điều bất cập khi sử dụng Jquery. Cụ thể đó chính là việc các lập trình viên sử dụng một cách tràn lan và không suy xét. Mình luôn được dạy là giao diện phải đi với giao diện, xử lý sự kiện thì phải đi với xử lý sự kiện, khi mà sử dụng Jquery vô tình ta trộn lẫn chúng vào nhau, khi mà một trang đòi hỏi nhiều thay đổi, việc cứ đua theo viết Jquery lại dẫn đến code lộn xộn, khó fix và đọc code vô cùng phức tạp.

Lấy cụ thể như trường hợp sau:

Các bạn có thể thấy trường Password, thay vì sử dụng trình duyệt Edge Dev, có hỗ trợ xem lại mật khẩu đã nhập, thì mình lại phải làm thêm một Eye Icon, sau đó viết Jquery cho nó để người dùng có thể xem mật khẩu.

Ví dụ trên cho thấy rằng có nhiều cách xử lý sự kiện mà trình duyệt web có thể xử lý được rồi, không cần lạm dụng viết Jquery nếu không cần thiết.

Lời kết

Bài viết tiếp theo mình sẽ nói tiếp về 1 kỹ thuật xử lý đọc và gửi dữ liệu lên server hay ho có tên là Ajax, hi vọng được mọi người ủng hộ.

PEACE

Write for these memories

Tìm hiểu về Jquery và Ajax (phần 1)

I, Jquery ?

Recent Posts

Comments