Tìm hiểu JQuery (Bài 1)

jQuery là một thư viện Javascript kiểu mới, giúp chúng ta đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web. Để thực hiện một chức năng nào đó, thay vì viết vài chục dòng lệnh DOM JavaScript chán ngắt cũ kỹ, với jQuery chỉ cần vài dòng.

jQuery làm được những gì?

   1. Truy cập (access) các phần tử (elements) trong nội dung trang web (document)
   2. Thay đổi hình thức/giao diện (appearance) của trang web: Thay đổi class hoặc style riêng lẽ...
   3. Thay đổi nội dung (content) trang web.
   4. Tương tác với người dùng.
   5. Hiệu ứng động: fades, wipes, ...
   6. Lấy thông tin từ Server mà không cần load lại trang web (AJAX)
   7. Đơn giản hoá tác vụ của JavaScript

Ví dụ đầu tiên sử dụng jQuery:
Download jQuery tại http://jquery.com (phiên bản hiện tại là 1.3.2)
Tạo file HTML với nội dung sau để xem ví dụ:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>Ví dụ đầu tiên về sử dụng jQuery</title>

        <style type="text/css">
          .author {
             color:gray;
            
          }
          .title {
             color:red;
             font-weight:bold;
          }
          .content {
             color:blue;
          }
          .highlight {
             border: 1px solid red;
             background-color: #CCFF99;
          }
       </style>

        <script src="jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
          $(document).ready(function() {
             $('.content').addClass('highlight');
          });
       </script>
      </head>

      <body>
        <h1>Ví dụ đầu tiên về sử dụng jQuery</h1>
        <div class="author" id="author">Biên soạn: <b>pn2design</b></div>
       <div class="title">Một tiêu đề gì gì đấy</div>
       <div class="content">Nội dung nội dung nội dungNội dung nội dung nội dungNội dung nội dung nội dungNội dung nội dung nội dungNội dung nội dung nội dungNội dung nội dung nội dungNội dung nội dung nội dung</div>
       <div class="title">Một tiêu đề nữa nè</div>
       <div class="content">Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè Nội dung nữa nè.</div>
      </body>
    </html>

Chú ý đường dẫn file jquery.js và các code trong thẻ script
Bạn có thể xóa đoạn này ra khỏi file HTML để xem sự khác biệt:

<script src="jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
          $(document).ready(function() {
             $('.content').addClass('highlight');
          });
        </script>

Giải thích:
Công việc cơ bản nhất của jQuery là chọn một thành phần của document để thao tác. Điều này được thực hiện dựa vào cấu trúc $() . Xem $() như 1 hàm nhận một tham số kiểu string có thể là biểu thức chọn CSS. Trong ví dụ trên, chúng ta đã chọn tất cả các thành phần của document có class là content. Và .addClass() là phương thức inject một class mới vào đối tượng.

Một số cách chọn:
    * Chọn theo tên Tag, ví dụ: $('p')
    * Chọn theo ID, ví dụ: $('#author')
    * Chọn theo class, ví dụ: $('.content')
    * Chọn các phần tử con ta dùng thêm > , ví dụ: $('#select-id > li') (chọn tất cả các phần tử trong list)
    * Chọn và loại trừ một số phần tử, ví dụ: $('#select-id > li:not(.current)') (loại bỏ phần tử có class current trong tập hợp chọn được)
    * Chọn theo thuộc tính của Tag, ví dụ: $('img[alt]') hoặc $('a[href^=mailto:]') hoặc $('a[href$=.pdf]') (chú ý: dấu ^ có nghĩa là bắt đầu bằng, dấu $ có nghĩa là kết thức bằng)
    * Chọn kết hợp, ví dụ: $('a[href^=http][href*=zend]') (chọn tất cả các Tag a có thuộc tính href bắt đầu bằng http và chứa chữ zend
    * Chọn phần tử theo Index trong tập hợp chọn được, ví dụ: $('#select-id > li:eq(2)') (chọn phần tử thứ 3 _ vì index tính từ 0)
    * Chọn tất cả các div là con đầu tiên của div chứ nó, ví dụ: $('div:nth-child(1)') hoặc $('div:first-child')
    * Chọn các phần tử có index là số lẽ, ví dụ: $('#select-id > li:odd') hoặc $('#select-id > li:nth-child(even)')
    * Chọn theo nội dung bên trong, ví dụ: $('.content:contains(nữa nè)')
    * Chọn các thành phần trong Form
      Mặt dù bạn vẫn có thể chọn bằng một số cách đã trình bày trên, jQuery cung cấp cho bạn cách chọn ngắn gọn hơn khi làm việc với Form
          o :text, :checkbox, :radio, :image, :submit, :reset, :password, :file (từ khóa tương ứng với giá trị của thuộc tính type trong tag <input ...>. Chẳng hạn :text chọn <input type="text"> )
          o :input (Chọn input, textarea, select, và button)
          o :button (Button và input nào có thuộc tính type="button")
          o :enabled, :disabled (phần tử đã enabled, disabled)
          o :checked (Radio buttons hoặc checkboxes đã được chọn (checked))
          o :selected (Option đã được chọn (selected))
      Một số ví dụ:
      $(':radio:checked') - Chọn tất cả các radio button đã được check
      $(':password, :text:disabled') - Chọn tất cả các password input và các disabled text input

bởi Vũ Mạnh Báu

Ngày 05/05/2012 vào lúc 10:16:53

Quá bổ ích cho newbie.
Thank you so much!

Bài cùng chuyên mục

Phản hồi mới nhất
Video
Top Rate
Xem nhiều nhất

Chủ đề đang thảo luận trong diễn đàn

Xem tiếp