jQuery – Cơ bản về jQuery

Mặc dù là một thư viện javascript xuất hiện khá muộn, jQuery đã nhanh chóng trở nên phổ biến và được sử dụng bởi nhiều lập trình viên web trên thế giới. John Resig, người tạo ra jQuery, làm tạiCambridge, Mass, nói: “jQuery không phải là một framework cỡ lớn tốt nhất trong AJAX – mà cũng không phải là các cải tiến phức tạp vô ích – jQuery được thiết kế để thay đổi cách bạn viết JavaScript.”

Đúng vậy, jQuery ra đời nhằm thay đổi cách lập trình web bằng javascript, mã lệnh được viết bằng jQuery có thể thay thế hàng chục câu lệnh viết bằng javascript với chức năng tương đương. Và hơn nữa, việc sử jQuery khiến cho việc sử dụng javascript trở nên dễ dàng, đơn giản và súc tích, giảm bớt khá nhiều gánh nặng cho lập trình viên. Thay vì tập trung phần lớn thời gian vào việc xử lý các đoạn mã javascript, họ có thể tiết kiệm được thời gian khá nhiều để quan tâm và củng cố về những vấn đề khác như CSS, XHTML,… Có thể liệt kê một số ưu điểm chính mà jQuery đem lại:

  • Truy xuất các phần của trang: không cần một thư viện javascript nào, bạn có thể duyệt cây DOM (Document Object Model) và đến các vị trí đặc biệt  của cấu trúc tài liệu HTML. jQuery cung cấp một cơ chế chọn lựa hoàn hảo để lấy chính xác các thành phần của tài liệu để kiểm tra hoặc xử lý.
  • Tạo hiệu ứng và thay đổi sự hiển thị của trang: jQuery có thể thay đổi nội dung của tài liệu như văn bản, hình ảnh, danh sách,… đồng thời thêm những hiệu ứng giao diện như làm mờ dần, kéo nhỏ các thành phần,… chỉ với vài dòng lệnh đơn giản.
  • Lấy thông tin từ server theo cơ chế bất đồng bộ: đây chính là những hỗ trợ của jQuery để giúp các lập trình viên làm việc với Ajax dễ dàng hơn. Với jQuery bạn không còn cần phải quan tâm đến trình duyệt nào sẽ được sử dụng.

Trong chương này chúng ta sẽ chỉ đi sơ lược cách sử dụng jQuery để làm việc với Ajax, nếu cảm thấy hứng thú với thư viện này, bạn có thể tìm hiểu thêm trên trang http://docs.jquery.com , tại đây bạn có thể tìm thấy nhiều bài hướng dẫn và danh mục tra cứu các phương thức của thư viện này.

Tải jQuery

Bạn có thể vào trang http://jquery.com/  để tải về một trong các phiên bản của jQuery. Ngoài phiên bản đầy, jQuery còn có phiên bản rút gọn hạn chế một số chức năng. Khi tải về bạn sẽ nhận được tập tin jQuery có phần mở rộng là .js. Bạn không cần phải cài đặt vì đây chỉ là một tập tin javascript sẽ được nhúng vào trang web. Bất cứ trang nào cần đến jQuery, bạn chỉ cần tham chiếu đến tập tin .js này trong tài liệu tương tự như sau:

<script src=”http://code.jquery.com/jquery-latest.js” type=”text/javascript”></script>

Những vấn đề cơ bản

Trong cốt lõi của mình, jQuery tập trung vào việc lấy các thành phần từ trang HTML và cải thiện hiệu suất của chúng. Ngoài ra jQuery đặt ưu tiên cao trong việc bảo đảm rằng đoạn mã của bạn có thể làm việc được với hầu hết các trình duyệt thông dụng. Rất nhiều những vấn đề phức tạp của JavaScript được jQuery giải quyết một cách âm thầm và chúng ta không cần phải quan tâm về nó.

Để bắt đầu chúng ta cần có những hiểu biết căn bản về cách sử dụng jQuery, và vấn đề đầu tiên cần nói tới chính là DOM.

Tìm hiểu về Document Object Model (DOM)

Một trong những thế mạnh của jQuery là khả năng duyệt cây DOM dễ dàng. DOM là một cấu trúc cây dạng phả hệ, được sử dụng trong HTML và các ngôn ngữ đánh dấu khác để mô tả mối quan hệ giữa các thành phần trên một trang. Khi đề cập đến mối quan hệ này, ta dùng thuật ngữ tương tự như khi nói về mối quan hệ gia đình-cha mẹ, con cái,… Một ví dụ đơn giản có thể giúp bạn hiểu vấn đề này:

Listing 1: Một tài liệu HTML đơn giản minh họa cho DOM
<html><head><title>The title</title></head>

<body>

<div>

<p>

This is a paragraph.</p>

<p>

This is another paragraph.</p>

<p>

This is yet another paragraph.</p>

</div>

</body>

</html>

Ở đây, có thể gọi thẻ <html> là tổ tiên (ancestor) của tất cả các phần tử khác; một cách nói khác, tất cả các phần tử còn lại là con cháu (descendants) của <html>. Thẻ <head> và <body> là con của <html> và như vậy <html> là cha của là của hai thẻ này. Tương tự ,thẻ <p> là con của <div>, là con cháu của <body> và <html>, đồng thời là anh em với các thẻ khác.

Bộ chọn lọc (Selector) – Lấy những gì bạn muốn

Vấn đề căn bản nhất, trước khi có thể thực hiện được bất kì thao tác nào trên một tài liệu HTML, chúng ta phải xác định được thành phần nào cần xử lý. Không có vấn đề về kiểu của thành phần mà chúng ta muốn lấy về, với bất kì kiểu gì chúng ta đều sử dụng phương thức jQuery() hoặc thông dụng là bí danh của nó $() (dấu đôla và cặp ngoặc đơn). Cả hai cách này đều có tác dụng như nhau. Chúng ta có thể sử dụng một trong các cách sau tùy vào trường hợp cụ thể:

  • Dựa vào tên thẻ:        $(‘p’)

Lấy tất cả các đoạn văn trong tài liệu

  • Dựa vào ID:               $(‘#some-id’)

Lấy các thành phần đơn trong tài  liệu có ID là some-id.

  • Dựa vào class:            $(‘.some-class’)

Lấy tất cả thành phần trong tài liệu có class là some-class.

 

Phương thức $() trả về một đối tượng JavaScript đặc biệt chứa một mảng các thành phần DOM khớp với bộ chọn lọc. Đối tượng đặc biệt chứa rất nhiều phương thức được định nghĩa trước để giúp ta thao tác trên nhóm các thành phần này.

Thử làm một ví dụ đơn giản, ở đây chúng ta sẽ làm một button trên trang mờ dần và biến mất, phương thức cần sử dụng trong trường hợp này là fadeOut(). Bạn chỉ cần tạo một tài liệu HTML đơn giản với một button và nhớ tham chiếu đến tập tin jquery.

Listing 2 :Ví đụ đầu tiên về jQuery- làm mờ dần và biến mất một button
<html><head><title>Ví dụ về $()</title><script src=”jquery-1.3.2.js” type=”text/javascript”></script>

</head>

<body>

<button type=”button” id=”button1″ onclick=”$(‘#button1’).fadeOut();”>

Click me!</button>

</body>

</html>

Khi chạy thử, bạn click vào button, sự kiện onclick của button được kích hoạt và gọi phương thức $(‘#button1’).fadeOut(), ngay sau đó button sẽ mờ dần đi và biến mất.

Xử lý sau khi nạp tài liệu

Để trang web thực thi một hàm nào đó sau khi trang được tải về, bạn có thể dùng một trong ba cú pháp sau:

  $(document).ready(handler)

  $().ready(handler)

  $(handler)

Tham số handler là hàm sẽ thực thi sau khi DOM đã sẵn sang. Các phương thức của jQuery đều trả về chính nó, không ngoại lệ đối với phương thức này. Phương thức .ready() có công dụng tương tự như thuộc tính onload của thẻ <body> (<body onload=””>).

$(document).ready(function() {

  alert(‘Trang đã được nạp xong.’);

});

 

Tạo và xử lý event

Trong một trang web, trình duyệt sẽ quản lý cách thức hiển thị của trang tương ứng với các thẻ đánh dấu (HTML và CSS) mà chúng ta gửi cho nó. Phần mã kịch bản chúng ta thêm vào trang sẽ định nghĩa các hành vi của giao diện đó. Các mã kịch bản này là dạng event handler, hay còn được gọi là các listener. Chúng có nhiệm vụ lắng nghe và đáp ứng lại các sự kiện khác nhau trong suốt quá trình trang được hiển thị.  Các sự kiện này có thể được sinh ra bởi hệ thống nhưng hầu hết chúng thường là kết quả của các thao tác từ người dùng (như di chuyển hay nhấn chuột, gõ phím,…).

Mặc dù HTML tự nó đã định nghĩa sẵn một vài hành vi mà không cần bất kì mã kịch bản nào từ phía chúng ta (như tải trang khi nhấn một siêu liên kết, gửi một form khi nhấn nút submit), tuy nhiên để tạo ra được một trang web với đầy đủ những trình diễn và xử lý theo ý muốn thì bắt buộc bạn phải nắm bắt và quản lý các sự kiện khác nhau xảy ra trong quá trình người dùng thao tác trên trang.

Trong phần này chúng ta sẽ học cách đăng kí các hành vi trên trang thông qua jQuery.

Gắn kết Event Handler

  • .bind():

Gắn một handler vào sự kiện của phần tử:

.bind(eventType[, eventData], handler)

  • Tham số:

–          eventType: một chuỗi chứa kiểu sự kiện JavaScript,ví dụ như click hoặc submit.

–          ­eventData: (tùy chọn) danh sách dữ liệu sẽ truyền cho event hanlder.

–          handler: Một hàm để thực thi mỗi lần sự kiện xảy ra.

  • Giá trị trả về:

Đối tượng jQuery, dùng cho việc đích sử dụng liên tục các phương thức theo kiểu mắt xích

  • Mô tả:

Phương thức .bind() là cách thức chủ yếu để gắn kết các hành vi vào tài liệu. Tất cả kiểu sự kiện JavaScript được chấp nhận cho tham số eventType được liệt kê sau đây:

-          blur

-          change

-          click

-          dblclick

-          error

-          focus

-          keydown

-          keypress

-          keyup

-          load

-          mousedown

-          mousemove

-          mouseout

-          mouseover

-          mouseup

-          resize

-          scroll

-          select

-          submit

-          unload

 

Thư viện jQuery cung cấp các phương thức tắt để gắn kết mỗi loại sự kiện trên, như .click() thay cho .bind(‘click’).

Khi sự kiện xảy ra trên phần tử, tất cả handler đã gắn cho kiểu sự kiện của phần tử sẽ được kích hoạt. Nếu có nhiều handler được đăng kí, chúng sẽ được thực thi theo thứ tự khi chúng được gắn vào. Một ví dụ đơn giản của việc sử dụng .bind():

Listing 3: Ví dụ gắn sự kiện click cho button với phương thức .bind()
<script type=”text/javascript”>$(document).ready(function() {$(‘#button1’).bind(‘click’, function() {alert(‘button1 được click’);

});

});

</script>

 

Khi chạy thử trên trình duyệt và nhấn vào button1, một bảng thông báo sẽ hiện ra.

  • Đối tượng sự kiện

Đối tượng sự kiện thường không được sử dụng và phần tham số được bỏ qua. Trong một số trường hợp, đối tượng này cần thiết để lấy thêm thông tin về môi trường của người sử dụng tại thời điểm sự kiện xảy ra. JavaScript cung cấp thông tin như .shiftKey (phím shift có được nhấn hay không), .pageX (tọa độ tương đối x của con trỏ chuột với cạnh trái của trang) và .type (kiểu của sự kiện này).

Hãy xem ví dụ sau:

Listing 4 – Sử dụng đối tượng sự kiện
<script type=”text/javascript”>$(document).ready(function() {$(‘#button1’).bind(‘click’, function(event) {alert(‘Vị trí của con trỏ chuột là (‘ + event.pageX + ‘, ‘ + event.pageY + ‘)’);

});

});

</script>

  • Truyền dữ liệu cho sự kiện

Chúng ta có thể truyền dữ liệu cho tham số eventData như sau:

Listing 5  – Truyền dữ liệu cho hàm thực thi sự kiện
<script type=”text/javascript”>$(document).ready(function() {var message = ‘Welcome to jQuery!’;$(‘#button1’).bind(‘click’, {msg: message}, function(event) {

alert(event.data.msg);

});

});

</script>

Khi chạy thử và nhấn vào button1, một bảng thông báo sẽ hiện ra với nội dung của biến message.

https://yinyangit.wordpress.com

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s