DESIGN WEB: Jquery

Hiển thị các bài đăng có nhãn Jquery. Hiển thị tất cả bài đăng

Chủ Nhật, 17 tháng 10, 2010

Ajax trong JQuery (P9) - Xử lý toàn diện những sự kiện Ajax

Nhãn: Jquery

Bạn có thể xử lý những sự kiện Ajax như một sự kiện thành công hoặc có lỗi cục bộ trong hàm $.ajax(), nhưng jQuery cũng cung cấp những chức năng để kết nối đến hàm phản hồi để bất kỳ sự kiện toàn cục nào đó cũng được xử lý tất cả qua Ajax của bạn. Những hàm xử lý toàn diện như AjaxStart (), AjaxSend (), AjaxSuccess (), AjaxError (), AjaxComplete (), và AjaxStop ().

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
           $(document).ready(function(  ){
        $("#starting").hide(  );
        $("#sending").hide(  );
        $("#success").hide(  );
        $("#complete").hide(  );
        $("#starting").bind("ajaxStart", 
          function(  ){
            $(this).show(  );
          });
        $("#sending").bind("ajaxSend", 
          function(  ){
           $(this).show(  );
         });
        $("#success").bind("ajaxSuccess",  
          function(  ){
            $(this).show(  );
          });
       ("#complete").bind("ajaxComplete", 
          function(  ){
            $(this).show(  );
          });
        $.ajax({
        type: "GET",
        url: "poster.php",
        data: {data: 1},
        success: callback
      });
     });
      function callback(data, status)
      {
        $("#results").text(data);
      }
</script>
</head>

<body>
    <h1>Handling Ajax events</h1>
    <fiv id="starting">Starting...</div>
    <fiv id="sending">Sending...</div>
    <fiv id="success">Successful...</div>
    <fiv id="complete">Complete...</div>
    Got this in response: <div id="results"></div>
</body>
</html>

Tập tin poster.php

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

<body>
<?php
if ($_POST["data"] == "1") {
 echo 'You sent the server a value of 1';
}

if ($_POST["data"] == "2") {
 echo 'You sent the server a value of 2';
}
?>

</body>
</html>

(Nguồn: ZendVN group - www.zend.vn)

Ajax trong JQuery (P8) - Xử lý XML

Nhãn: Jquery

Ajax là cách viết tắt của Asynchronous Javascript And XML, do đó bây giờ chúng ta xem làm thể nào để xử lý một tài liệu XML.

Tập tin sandwiches.xml

<?xml version="1.0"?>
<sandwiches>
<sandwich>ham</sandwich>
<sandwich>turkey</sandwich>
<sandwich>cheese</sandwich>
</sandwiches>

Chúng ta có thể chỉ định kiểu dữ liệu xml trong hàm $.ajax() để lấy một đối tượng XML, cái mà đã làm rõ bằng cách gọi đến các hàm khác. Ví dụ chúng ta hiển thị các loại bánh sandwich trong selectbox

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
      $(document).ready(function(){
        $.ajax({
            type: "GET",
    url: "sandwiches.xml",
    dataType: "xml",
    success: callback
          });
        });
   
      function callback(data, status)
      {
       var sandwiches = data.getElementsByTagName("sandwich");
        listSandwiches(sandwiches);
      }
   
   function listSandwiches(sandwiches)
      {
        var loopIndex;
        var selectControl = document.getElementById('sandwichList');
        for (loopIndex = 0; loopIndex < sandwiches.length; loopIndex++)
        {
           selectControl.options[loopIndex] = new Option(sandwiches[loopIndex].firstChild.data);
        }
      }
   
   function err(xhr, reason, ex)
      {
        $("div").text(reason);
      }
</script>
</head>

<body>
      <h1>Using $.ajax(  ) to get XML</h1>
       <form>
         <select size="1" id="sandwichList">
           <option>Select a sandwich</option>
         </select>
       </form>
</body>
</html>

(Nguồn: ZendVN group - www.zend.vn)

Ajax trong JQuery (P7) - Xử lý Ajax timeouts

Nhãn: Jquery

Đôi khi, bạn có thể không muốn chờ một quá trình Ajax hoàn thành nếu nó diễn ra qua lâu, ví dụ: nguồn tài nguyên của bạn đang cố gắn lấy từ máy chủ không hề tồn tại

Bạn có thể thiết lập một thời gian chờ trong vài giây với thuộc tính timeout của hàm $.ajax(). Ví dụ, chỉ đợi trong vòng 10s

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
      $(document).ready(function(){
        $.ajax({
            type: "POST",
            url: "poster1.php",
            data: {data: 1},
            success: callback,
   timeout: 10,
   error: err
          });
        });
   
      function callback(data, status)
      {
        $("div").text(data);
      }
   
   function err(xhr, reason, ex)
      {
        $("div").text(reason);
      }
</script>
</head>

<body>
    <h1>Using the jQuery $.post()function</h1>
    Got this from the server: <div></div>
</body>
</html>

Tập tin poster.php

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

<body>
<?php
if ($_POST["data"] == "1") {
 echo 'You sent the server a value of 1';
}

if ($_POST["data"] == "2") {
 echo 'You sent the server a value of 2';
}
?>

</body>
</html>

(Nguồn: ZendVN group - www.zend.vn)

Ajax trong JQuery (P6) - Xử lý lỗi của Ajax

Nhãn: Jquery

Thỉnh thoàng, một vài điều gì đó gây ra lỗi khi chúng ta làm việc với Ajax. Ví dụ, tài nguyên bạn cố gắng tải về từ máy chủ không có hoặc không kết nối được với internet

Hàm $.ajax cho phép chúng ta xử lý những lỗi đó bằng cách gọi một hàm khác, cái mà sẽ được gọi khi một lỗi xảy ra.

Hàm phản hồi error được truyền qua 3 phần: đối tượng XMLHttpRequest một chuỗi có chứa mô tả lỗi và một đối tượng ngoại lệ

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
      $(document).ready(function(){
        $.ajax({
            type: "POST",
            url: "poster1.php",
            data: {data: 1},
            success: callback,
   error: err
          });
        });
   
      function callback(data, status)
      {
        $("div").text(data);
      }
   
   function err(xhr, reason, ex)
      {
        $("div").text(reason);
      }
</script>
</head>

<body>
    <h1>Using the jQuery $.post()function</h1>
    Got this from the server: <div></div>
</body>
</html>

Tập tin poster.php

Tập tin poster.php

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

<body>
<?php
if ($_POST["data"] == "1") {
 echo 'You sent the server a value of 1';
}

if ($_POST["data"] == "2") {
 echo 'You sent the server a value of 2';
}
?>

</body>
</html>

(Nguồn: ZendVN group - www.zend.vn)

Ajax trong JQuery (P5) - Sử dụng toàn bộ sức mạnh của Ajax

Nhãn: Jquery

Trong phần trước, chúng ta đã thấy một ví dụ trong một số hàm có sẵn của jQuery như load(), get(), post(). Những hàm này tốt cho giải pháp Ajax ngắn gọn nhưng chúng không đáp ứng được đầy đủ. Cái gì nếu bạn muốn thiết lập khoảng thời gian chờ nhận yêu của Ajax. Cài gì nếu bạn muốn kiểm sóat được đối tượng XMLHttpRequest. Điều gì nếu bạn muốn xử lý bất kỳ lỗi nào trả lại do không hoạt động

Để thực hiện điều này và nhiều hơn, jQuery cung cấp đầy đủ trong hàm $.ajax(). Hàm này cho phép bạn truy cập toàn bộ sức mạnh của Ajax trong khi bạn vẫn còn sử dựng jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
      $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "files/message.txt",
            success: callback
          });
        });
   
      function callback(data, status)
      {
        $("div").text(data);
      }
</script>
</head>

<body>
    <h1>Using the jQuery $.post()function</h1>
    Got this from the server: <div></div>
</body>
</html>

Tập tin poster.php

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

<body>
<?php
if ($_POST["data"] == "1") {
 echo 'You sent the server a value of 1';
}

if ($_POST["data"] == "2") {
 echo 'You sent the server a value of 2';
}
?>

</body>
</html>

Cũng giống như phần 3 chúng ta sẽ sử dụng phương thức gửi dữ liệu đến máy chủ bằng phương thức POST. Lúc này chúng ta truyền vào hàm $.ajax() một tham số có tên là ‘data’ để chứa dữ liệu truyền lên server

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
      $(document).ready(function(){
        $.ajax({
            type: "POST",
            url: "poster.php",
            data: {data: 1},
            success: callback
          });
        });
   
      function callback(data, status)
      {
        $("div").text(data);
      }
</script>
</head>

<body>
    <h1>Using the jQuery $.post()function</h1>
    Got this from the server: <div></div>
</body>
</html>

Chúng ta thực hiện tương tự như vậy với phương thức GET của hàm $.ajax()

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
      $(document).ready(function(){
        $.ajax({
            type: "POST",
            url: "poster.php",
            data: {data: 1},
            success: callback
          });
        });
   
      function callback(data, status)
      {
        $("div").text(data);
      }
</script>
</head>

<body>
    <h1>Using the jQuery $.post()function</h1>
    Got this from the server: <div></div>
</body>
</html>

(Nguồn: ZendVN group - www.zend.vn)

Ajax trong JQuery (P4) - Sử dụng $.get( ) để gửi dữ liện đến Server

Nhãn: Jquery

Bạn có thể muốn kiểm soát nhiều hơn khi phương thức POST hoặc GET được sử dụng, và bạn có thể muốn lấy bằng tay dữ liệu được tải về thoát khỏi sự tải về không cần thiết. Để làm điều này, jQuery cung cấp 2 phương thức $.get và $.post. Các chức năng này cho phép bạn giao tiếp với máy chủ sử dụng phương thức POST và GET. Và chúng cho phép bạn truy cập mà không tự động nạp nó vào phần tử nào hết

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
    $(document).ready(function(  ){
       $.get("poster.php", {data: 1},
       function(data){
         $("div").text(data);
       }); 
     });
</script>
</head>

<body>
    <h1>Using the jQuery $.post(  ) function</h1>
    Got this from the server: <div></div>
</body>
</html>

Tập tin poster.php

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

<body>
<?php
if ($_POST["data"] == "1") {
 echo 'You sent the server a value of 1';
}

if ($_POST["data"] == "2") {
 echo 'You sent the server a value of 2';
}
?>

</body>
</html>

(Nguồn: ZendVN group - www.zend.vn)

Ajax trong JQuery (P3) - Sử dụng $.post( ) để gửi dữ liện đến Server

Nhãn: Jquery

Hàm load() thì hữu ích cho việc lấy dữ liệu từ quá trình Ajax đưa vào trong các phần tử. Nó sử dụng phương thức GET để giao tiếp với máy chủ, trừ khi bạn ép nó chuyển dữ liệu vào bằng phương thức POST

Bạn có thể muốn kiểm soát nhiều hơn khi phương thức POST hoặc GET được sử dụng, và bạn có thể muốn lấy bằng tay dữ liệu được tải về thoát khỏi sự tải về không cần thiết. Để làm điều này, jQuery cung cấp 2 phương thức $.get và $.post. Các chức năng này cho phép bạn giao tiếp với máy chủ sử dụng phương thức POST và GET. Và chúng cho phép bạn truy cập mà không tự động nạp nó vào phần tử nào hết

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
    $(document).ready(function(  ){
       $.post("poster.php", {data: 1},
       function(data){
         $("div").text(data);
       }); 
     });
</script>
</head>

<body>
    <h1>Using the jQuery $.post(  ) function</h1>
    Got this from the server: <div></div>
</body>
</html>

Tập tin poster.php

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

<body>
<?php
if ($_POST["data"] == "1") {
 echo 'You sent the server a value of 1';
}

if ($_POST["data"] == "2") {
 echo 'You sent the server a value of 2';
}
?>

</body>
</html>

(Nguồn: ZendVN group - www.zend.vn)

Ajax trong JQuery (P2) - Gửi dữ liệu từ Form đến Server

Nhãn: Jquery

jQuery có một hàm đặc biệt nó giúp bạn đưa dữ liệu từ Form đến máy chủ qua hàm load() đó là hàm serializeArray()

Hàm này sẽ không có các tham số, nó tạo ra một đối tượng lưu trữ các thuộc tính của Form sau khi các bạn đã cung cấp tên Form cho nó. Hàm serializeArray() giúp bạn dể dàng gửi toàn bộ dữ liệu của form đến server.

Ví dụ 4: Trong ví dụ này chúng ta sẽ để người sử dụng nhập giá trị 1 hay 2 vào ô textbox và sau đó gửi dữ liệu này đến trang poster.php trên server. Và sau đó chúng ta sẽ nhận được giá trị trả về

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
      function checker()
      {
    $("div").load("poster.php",  
    $("#targetForm").serializeArray(  ));
      }
</script>
</head>

<body>
  <h1>Using the jQuery serializeArray(  ) function</h1>
  <form id="targetForm">
  Enter a 1 or 2: 
  <input type="text" name="data" id="data"></input>
   <input type="text" name="data1" id="data1"></input>
  <input type = "button" value="Check data" onclick="checker(  )"></input>
  </form>
  <br>
  Got this from the server: <div></div>
</body>
</html>

Tập tin poster.php

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

<body>
<?php
if ($_POST["data"] == "1") {
 echo 'You sent the server a value of 1';
}

if ($_POST["data"] == "2") {
 echo 'You sent the server a value of 2';
}
?>

</body>
</html>

(Nguồn: ZendVN group - www.zend.vn)

Ajax trong JQuery (P1) - phương thức load()

Nhãn: Jquery

1. load(url, parameters, callback)

Jquery có một số chức năng để thực thi kỹ thuật Ajax. Một trong những hàm phổ biến nhất là hàm load().Bạn sử dụng hàm load() để hiện thị những dữ liệu tải xuống trong một tập hợp các phần tử trực tiếp.

Hàm load() hoạt động như sau:
load(url, parameters, callback)

Url: là địa chỉ của trang nguồn bạn đang cần lấy
Parameters: là một đối tượng lưu giữ các giá trị mà bạn muốn gửi đến máy chủ
Callback: là một hàm cái mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành

Ví dụ 1: Trong ví dụ này, chúng ta sẽ sử dụng hàm load () để tải tập tin message.txt từ máy chủ và hiển thị nội dung của nó trong thẻ <div>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
    $(document).ready(function(  ){
        $("div").load("files/message.txt");
    });
</script>
</head>

<body>
<h1>Sử dụng hàm load()</h1>
Lấy nội dung từ server 
<div></div>

</body>
</html>

Ví dụ 2: Trong ví dụ này chúng ta sẽ sử dụng tham số callback. Sau khi hiển thị dữ liệu xong chúng ta sẽ hiện một câu thông báo ‘Tải dữ liệu thành công’

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
    $(document).ready(function(  ){
        $("div").load("files/message.txt",callback);
    });
 
 function callback(){
  $("#targetDiv").text("Tải dữ liệu thành công.");
 }
</script>
</head>

<body>
<h1>Sử dụng hàm load()</h1>
Lấy nội dung từ server 
<div></div>
<div id="targetDiv"></div>

</body>
</html>

Nếu bạn gồm nhiều tham số, và muốn gửi những dữ liệu được lưu trong các tham số đó đến máy chủ thì hàm load() sẽ sử dụng phương thức POST, nếu bạn không có tham số nào thì hàm load() sẽ sử dụng phương thức GET

Ví dụ 3: Trong ví dụ này chúng ta sẽ sử dụng tham số parameters và chúng ta sẽ truyền cho nó một tham số có tên data và tham số data có giá trị bằng 1. Trang này sẽ gửi giá trị data = 1 qua một trang khác có tên là poster.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.4.js" type="text/javascript"></script>
<script>
    $(document).ready(function(  ){
       $("div").load("poster.php", 
             {data: 1});
    });
</script>
</head>

<body>
<h1>Sử dụng hàm load()</h1>
Lấy nội dung từ server 
<div></div>
</body>
</html>

Tập tin poster.php

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

<body>
<?php
if ($_POST["data"] == "1") {
 echo 'You sent the server a value of 1';
}

if ($_POST["data"] == "2") {
 echo 'You sent the server a value of 2';
}
?>

</body>
</html>

(Nguồn: ZendVN group - www.zend.vn)

Thứ Tư, 13 tháng 10, 2010

Giới thiệu cơ bản về jquery

Nhãn: Jquery

Cơ bản

Đây là bài hướng dẫn cơ bản, nhằm giúp bạn có những kiến thức căn bản để sử dụng jQuery. Nếu bạn chưa tạo một trang thí nghiệm, hãy tạo một tài liệu HTML với nội dung như sau:

<html>
  <head>
   <script type="text/javascript" src="path/to/jquery.js"></script>
   <script type="text/javascript">
   // Your code goes here
   </script>
  </head>
  <body>
   <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>

Sửa thuộc tính src trong thẻ script để trỏ tới jquery.js Ví dụ, nếu jquery.js ở cùng thư mục với tệp HTML, bạn có thể dùng:

<script type="text/javascript" src="jquery.js"></script>

Bạn có thể tải bản jQuery mới nhất tại trang Downloading jQuery.

Chạy mã lúc Document Ready (trang đã sẵn sàng)

Có thể thấy rằng hầu hết các lập trình viên Javascript kết thúc mã thực thi bằng cách thêm các dòng mã vào script, tương tự như sau:

window.onload = function(){ ... }

Các mã bên trong đó sẽ được thực thi khi trang được tải xong. Không còn gì phải bàn, tuy nhiên, mã Javascript không chạy cho đến khi tất cả các hình ảnh trong trang được tải xong (kể cả banner quảng cáo). Lý do cho việc sử dụng window.onload là để chắc chắn rằng HTML 'document' phải được tải xuống hết, sau đó mới chạy mã kia.

Để giải quyết, jQuery có câu lệnh đơn giản, được biết như ready event:

$(document).ready(function(){
   // Mã của bạn
});

Mã này kiểm tra document và đợi cho đến khi nó sẵn sàng để sử dụng - theo ý bạn muốn. Hãy lấy đoạn mã mẫu ở trên và cho vào tài liệu HTML của bạn. Các ví dụ còn lại của jQuery sẽ được đặt bên trong phần callback của hàm này, chúng sẽ được thực thi khi tài liệu sẵn sàng.

Chuyện gì xảy ra với sự kiện Click

Đầu tiên, chúng ta sẽ thử thực hiện động tác click với clicked. Bên trong ready function (từ ví dụ ở trên), thêm mã như sau:

$("a").click(function(){
   alert("Cảm ơn đã ghé thăm!");
});

Lưu tệp HTML và tải lại trang thử nghiệm trên trình duyệt (Ctrl+F5). Bấm vào link nào đó trên trang và trình duyệt sẽ hiện ra một thông báo pop-up.

Đối với sự kiện click và hầu hết các sự kiện khác events, bạn có thể can thiệp vào hành động mặc định - ở đây, sau đây là link dẫn tới jquery.com - bằng cách trả về giá trị false từ điều khiển sự kiện:

$("a").click(function(){
   alert("Cảm ơn đã ghé thăm!");
   return false;
});

Nếu không dùng các đoạn mã trên, nếu bạn nhấn link tới jquery.com trong trang, thì trình duyệt sẽ duyệt tới. Nhưng ở đây, trình duyệt sẽ hiện thông báo và không chuyển đi đâu cả.

Thêm một Class (lớp với CSS)

Đây là tác vụ dùng để thêm vào (hoặc bỏ đi) các class từ phần tử nào đó, ví dụ:

$("a").addClass("test");

Nếu bạn đặt đoạn mã trên vào phần script trong header của trang HTML, thì mã tự động sinh ra sẽ là:

<style type="text/css">a.test { font-weight: bold; }
</style>

và sau đó addClass được gọi - tất cả những phần từ A sẽ được làm đậm. Để bỏ class, bạn có thể sử dụng removeClass

Các hiệu ứng khác

Trong jQuery, có cung cấp các thành phần effects, để làm cho website của bạn thật sự nổi bật. Để chạy thử, hãy thay đoạn mã như sau:

$("a").click(function(){
   $(this).hide("slow");
   return false;
});

Bây giờ, nếu bạn nhấn vào liên kết có trong trang, bạn sẽ thấy nó biến mất một cách từ từ.

Khả năng liên kết thành chuỗi (một phép thuật jQuery)

jQuery cung cấp cho bạn một cách viết mã đơn giản và ngắn gọn. Nó tương tự như cách thức lập trình hướng đối tượng (object-oriented programming), nói đúng hơn đây là cách viết thẳng một hàng.

Tóm lại: Mỗi phương thức trong jQuery trả về câu truy vấn đối tượng của chính nó, nó cho phép bạn 'xích' chúng lại với nhau, ví dụ:

$("a").addClass("test").show().html("foo");

Câu lệnh này chứa những phương thức cá thể (addClass, show, và html) trả về đối tượng jQuery, nó cho phép bạn có thể tiếp dụng sử dụng phương thức để đặt cho phần tử hiện tại.

Bạn có thể dùng xa hơn nữa, bằng cách thêm hoặc bỏ phần tử từ vùng chọn, thay đổi các phần tử này và sau đó trả giá trị lại cho vùng chọn trước, ví dụ:

$("a")
   .filter(".clickme")
   .click(function(){
   alert("You are now leaving the site.");
   })
   .end()
   .filter(".hideme")
   .click(function(){
   $(this).hide();
   return false;
   })
   .end();

Bạn tạo thêm đoạn mã HTML như sau:

<a href="http://google.com/" class="clickme">I give a message when you leave</a>
<a href="http://yahoo.com/" class="hideme">Click me to hide!</a>
<a href="http://microsoft.com/">I'm a normal link</a>

Các phương thức thay đổi vùng chọn của jQuery, có thể hoàn lại với end(), nó cho biết sự kết thúc của vùng lựa chọn đó và bắt đầu áp dụng lựa chọn mới:

   * add(),
   * children(),
   * eq(),
   * filter(),
   * find(),
   * gt(),
   * lt(),
   * next(),
   * not(),
   * parent(),
   * parents() and
   * siblings().

Đọc thêm Traversing API documentation để biết thêm chi tiết về các phương thức này.

Hàm hồi quy, Hàm, và 'this'

Hàm hồi quy là một hàm được truyền như là một thông số cho một hàm khác (hàm gọi/hàm bao ngoài) và sẽ được thực thi sau khi hàm gọi hoàn tất. Điều đáng lưu ý về hàm hồi quy là tất cả những hàm xuất hiện sau "hàm gọi" có thể thực thi trước hàm hồi quy.

Một điều quan trọng khác cần lưu ý là làm thế nào dùng đúng hàm hồi quy. Đây là điều mà tôi thường hay quên cú pháp câu lệnh.

Dùng hàm hồi quy không thông số

Đối với một hàm hồi quy không thông số, bạn có thể gọi theo cách sau:

$.get('myhtmlpage.html', myCallBack);

Lưu ý thông số thứ hai chỉ đơn giản là tên hàm (không truyền như một giá trị chuỗi ký tự và không có dấu ngoặc đơn). Các hàm trong Javascript được xem là những 'khách hàng hạng sang' và vì vậy có thể truyền như một biến số và sẽ được thực thi sau đó.

Dùng hàm hồi quy có thông số

Bạn sẽ thắc mắc "Bạn sẽ phải gọi hàm hồi quy như thế nào nếu có thông số?".

Sai

Cách dùng sai (không hoạt động)

$.get('myhtmlpage.html', myCallBack(param1, param2));

Cách này không hoạt động vì bạn gọi myCallBack(param1, param2) sau đó lại truyền giá trị trả về như là một thông số mới cho hàm $.get().

Đúng

Cách dùng đúng

$.get('myhtmlpage.html', function(){
   myCallBack(param1, param2);
});

Lý do, bằng cách truyền một hàm vô danh (đoạn mã với...

function() {
/* hàm cần thực thi */
};

...sẽ tự động gọi hàm cần thực thi với những thông số cần thiết), bạn đã hoàn tất việc gọi hàm hồi quy.

Cách dùng này đúng vì bạn truyền hàm vô danh như thông số thứ hai cho hàm $.get() mà không phải thực thi hàm đó trước khi truyền.

Subscribe via email

Ajax trong JQuery (P9) - Xử lý toàn diện những sự kiện Ajax

Ajax trong JQuery (P8) - Xử lý XML

Ajax trong JQuery (P7) - Xử lý Ajax timeouts

Ajax trong JQuery (P6) - Xử lý lỗi của Ajax

Ajax trong JQuery (P5) - Sử dụng toàn bộ sức mạnh của Ajax

Ajax trong JQuery (P4) - Sử dụng $.get( ) để gửi dữ liện đến Server

Ajax trong JQuery (P3) - Sử dụng $.post( ) để gửi dữ liện đến Server

Ajax trong JQuery (P2) - Gửi dữ liệu từ Form đến Server

Ajax trong JQuery (P1) - phương thức load()

Giới thiệu cơ bản về jquery

DESIGN WEB

ARCHIVE

Followers

Resent Comments

Link

Recent Post

Sample Widget

TAGS

Sample Widget

Trang

My Gallery

Subscribe To Updates

Looking For Something?