Tìm hiểu về jquery

Bài đăng này đã không được cập nhật trong 8 năm

JQuery

Là thư viện mã nguồn mở viết bằng ngôn ngữ javascript, giúp đơn giản cách viết javascript và tăng tốc độ xử lý các xự kiện trên trang web. Phát hành vào tháng 1 năm 2006 tại BarCamp NYC bởi John Resig. Được sử dụng bởi hơn 52% trong 10.000 truy cập nhiều nhất các trang web. Jquery không những có thể thay đổi giao diện(CSS) mà còn có thể thay đổi nội dung trang bên trong trang web. Vậy jquery có những ưu và nhược điểm gì?

1. Ưu điểm của jquery

Dễ sử dụng: Đây là lợi thế chính khi sử dụng jquery, nó dễ dàng hơn so với nhiều thư viện javascript chuẩn khác bởi cú pháp đơn giản và bạn chỉ phải viết ít dòng lệnh để tạo ra các chức năng tương tự. Chỉ với 10 dòng lệnh JQuery bạn có thể thay thế cả 20 chục dòng lệnh DOM javaScript, tiết kiệm thời gian của người lập trình.
Là một thư viện lớn của javascript: Thực thi được nhiều chức năng hơn so với các thư viện jascript khác
Cộng đồng mã nguồn mở mạnh mẽ (một số plugin jquery có sẵn): JQuery đang còn tương đối mới, có một cộng đồng dành thời gian của họ để phát triển các plugin của JQuery. Như vậy có hàng trăm plugin được viết trước đó có sẵn để tải về ngay lập tức để đẩy nhanh quá trình viết code của bạn. Một lợi thế khác đằng sau này là hiệu quả và an toàn của các script.
Có nhiều tài liệu và hướng dẫn chi tiết: Các trang web JQuery có một toàn bộ tài liệu và hướng dẫn để ngay cả một người mới bắt đầu lập trình cũng có thể làm được quả bóng lăn với thư viện jquery này.
Hỗ trợ ajax: JQuery cho phép bạn phát triển các template Ajax một cách dễ dàng. Ajax cho phép một giao diện kiểu dáng đẹp trên website, các chức năng có thể được thực hiện trên các trang mà không đòi hỏi toàn bộ trang được reload lại.

2. Nhược điểm của jquery

Dù ưu điểm của jquery rất nhiều nhưng cũng tồn tại một vài nhược điểm phải lưu ý

Làm client trở nên chậm chạp: Client không những phải chỉ mình hiển thị nữa mà còn phải xử lý nhiều chức năng được tạo thành từ jquery. Nếu lạm dụng quá nhiều jquery sẽ làm cho client trở nên chậm chạp, đặc biệt những client yếu. Chính vì vậy mà lập trình viên phải dùng thêm cache
Chức năng có thể không có: JQuery đã có rất nhiều chức năng, tùy thuộc vào yêu cầu trên trang web của bạn. Nhưng nhiều chức năng vẫn chưa được phát triển, do đó bạn vẫn phải sử dụng javascript thuần để xây dựng chức năng này.

3. Interactions

Sau đây mình xin giới thiệu một vài hiệu ứng trên Jquery để bạn có thể hình dung rõ hơn về điều kỳ diệu của jquery. Để sử dụng được jquery bạn phải cài đặt thư viện. Có 2 cách cài đặt: bạn có thể download jquery tại địa chỉ sau http://jquery.com/. Hoặc bạn có thể sử dụng thư viện online của jquery bằng cách thêm 2 dòng lệnh sau vào thẻ <head></head>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Draggable

Cho phép những phần tử có thể chuyển động khi di chuyển chuột

    <script>
      $(function() {
        $("#draggable").draggable();
      });
    </script>
    <div id="draggable" class="ui-widget-content">
      <p>Drag me around</p>
    </div>

Cụ thể thì $("#draggable") là để gọi đến thẻ div có id="draggable" và draggable() là hàm đã được viết sẵn trong jquery

Droppable

Tạo ra mục tiêu cho những phần tử có khản năng di chuyển

    <style>
     #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
     #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
    </style>
    <script>
      $(function() {
        $( "#draggable" ).draggable();
        $( "#droppable" ).droppable({
          drop: function(event, ui) {
            $( this )
              .addClass( "ui-state-highlight" )
              .find( "p" )
                .html( "Dropped!" );
          }
        });
      });
    </script>
    <div id="draggable" class="ui-widget-content">
      <p>Drag me to my target</p>
    </div>

    <div id="droppable" class="ui-widget-header">
      <p>Drop here</p>
    </div>

Ngoài hàm draggable() thì chúng ta phải sử dụng thêm hàm droppable() để bắt sự kiện. Khi thẻ div có id="draggable" nằm trong thẻ div có id="droppable" thì sẽ thêm class ui-state-highlight và đổi tên thẻ p thành "Dropped!"

Resizable

Thay đổi kích thước của phần tử khi sử dụng chuột

<style>
  #resizable {width: 150px; height: 150px; padding: 0.5em;}
  #resizable h3 {text-align: center; margin: 0;}
</style>
<script>
  $(function() {
    $("#resizable").resizable();
  });
</script>
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>

kích thước sẽ được cố định là width: 150px - height: 150px. Nhưng với hàm resizable bạn có thể co dãn kích thước tùy ý

Selectable

sử dụng chuột để lựa chọn phần tử, từng phần tử hoặc cả một nhóm các phần tử

<style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
  $(function() {
    $( "#selectable" ).selectable();
  });
</script>

<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>

Những thẻ li nào được chọn sẽ được thêm vào class "ui-selected" trong chính thẻ li đó bằng hàm selectable(). Class này sẽ làm cho thẻ chuyển sang màu da cam (#F39814)

Sortable

Sắp xếp lại những phần tử trong một danh sách khi sử dụng chuột

<style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });
</script>
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

Hàm sortable() giúp sắp xếp lại các thẻ li khi người dùng kéo thẻ li đến vị trí như ý muốn

4. Kết luận

Những gì mình trình bày ở trên chỉ là một phần kiến thức rất nhỏ trong thư viện jquery. Bạn có thể truy cập đến địa chỉ trang chủ http://jqueryui.com/ để tìm hiểu thêm về jquery. Ngoài ra mình còn tham khảo ở các trang tài liệu tiếng anh

http://www.jscripters.com/jquery-disadvantages-and-advantages/ https://en.wikipedia.org/wiki/JQuery

Rất mong nhận được sự đóng góp của các bạn để bài viết của mình có thể hoàn thiện hơn nữa

jQuery

JQuery

1. Ưu điểm của jquery

2. Nhược điểm của jquery

3. Interactions

4. Kết luận

Mục lục