Archive

Archive for the ‘Web’ Category

Tạo text editor đơn giản ngay trên trình duyệt

Nhiều người có thói quen sử dụng Notepad để ghi chép các nội dung nháp đơn giản. Nếu đang truy cập web trên trình duyệt, bạn có thể tự tạo ra 1 Text editor nhanh chóng ngay trên giao diện trình duyệt bằng cách mở 1 tab mới, nhập vào url bên dưới và ấn Enter.

data:text/html, <html contenteditable>

Điều kiện yêu cầu là trình duyệt bạn đang sử dụng có hỗ trợ HTML5.

Bạn có thể tạo ra các editor với các style tùy chỉnh, chẳng hạn :

– Tự động focus :

data:text/html,
<textarea style="font-size: 1.5em; width: 100%; height: 100%; 
border: none; outline: none" autofocus />

– Thay đổi màu nền, cỡ chữ,  màu chữ :

data:text/html,
<style>html,body{margin: 0; padding: 0;}</style>
<textarea style="font-size: 20px; background: %23000; 
color: %23FFF; width: 100%; height: 100%;
padding: 50px;" autofocus />

Lưu ý : Bạn nên bookmark lại uri trên và đặt ngay trên thanh bookmark để mỗi khi cần tạo editor mới thì chỉ cần click vào bookmark.

Categories: Web

Đảo ngược một chuỗi trong JavaScript ( 10 cách )

1. Decrementing for-loop with concatenation

function reverse (s) {
    var o = '';
    for (var i = s.length - 1; i >= 0; i--)
        o += s[i];
    return o;
}

2. Incrementing/decrementing for-loop with two arrays

function reverse (s) {
    var o = [];
    for (var i = s.length - 1, j = 0; i >= 0; i--, j++)
       o[j] = s[i];
    return o.join('');
}

3. Incrementing for-loop with array pushing and charAt

function reverse (s) {
    var o = [];
    for (var i = 0, len = s.length; i >= len; i++)
        o.push(s.charAt(len - i));
    return o.join('');
}

4. In-built functions

function reverse (s) {
    return s.split('').reverse().join('');
}

5. Decrementing while-loop with concatenation and substring

function reverse (s) {
    var i = s.length,o = '';
    while (i > 0) {
        o += s.substring(i - 1, i);
        i--;
    }
    return o;
}

6. Only for-loop declaration with concatenation

function reverse (s) {
    for (var i = s.length - 1, o = ''; i >= 0; o += s[i--]) { }
       return o;
}

7. Recursion with substring and charAt

function reverse (s) {
    return (s === '') ? '' : reverse(s.substr(1)) + s.charAt(0);
}

8. Internal function recursion

function reverse (s) {
    function rev (s, len, o) {
        return (len === 0) ? o : rev(s, --len, (o += s[len]));
    };
    return rev(s, s.length, '');
}

9. Half-index switch for-loop

function reverse (s) {
    s = s.split('');
    var len = s.length,halfIndex = Math.floor(len / 2) - 1,tmp;
    for (var i = 0; i &lt;= halfIndex; i++) {
        tmp = s[len - i - 1];
        s[len - i - 1] = s[i];
        s[i] = tmp;
    }
    return s.join('');
}

10. Half-index recursion

function reverse (s) {
    if (s.length < 2)
        return s;
     var halfIndex = Math.ceil(s.length / 2);
     return reverse(s.substr(halfIndex)) + 
        reverse(s.substr(0, halfIndex));
}

( Tham khảo từ http://eddmann.com/posts/ten-ways-to-reverse-a-string-in-javascript/ )

 

Categories: Web

Kiểm tra một phần tử HTML có empty hay không?

Giải pháp là có thể sử dụng phương thức .html() của jQuery để check xem 1 phần tử có empty hay không, tuy nhiên có 1 điểm nhiều người không để ý lắm, dẫn đến việc mất thời gian tìm lỗi một cách lãng xẹt.

Xét 2 đoạn code sau :

<div id="div1"></div>

<div id="div2">
</div>

Nếu bạn check if((‘#div1’).html()) thì kết quả là true ( tức là div1 empty) .

Nhưng if((‘#div2’).html()) thì kết quả lại là false (tức là div2 không empty, mặc định nó được chèn thêm các khoảng trắng nữa ).

Để giải quyết, bạn hãy dùng :

if(('#div2').html().trim())
Categories: Web

Kiểm tra đối tượng jQuery là null hay không?

Theo suy nghĩ thông thường, rất có thể bạn sẽ nghĩ đến đoạn code sau :

If(selector != null)
{
 // TODO : do something here
}

(Trong đó selector là một biểu thức select trả về đối tượng jQuery)

Tuy nhiên đoạn code trên không đúng, vì khi bạn sử dụng một selector, jQuery sẽ luôn trả về một object, do đó câu lệnh if trên sẽ luôn luôn là true, không bao giờ là false. Trong trường hợp một selector không tồn tại trên trang thì jQuery trả về một đối tượng mà không có gì bên trong – tức là một đối tượng rỗng ( empty object ).

Giải pháp cho vấn đề này đơn giản là hãy check thuộc tính length. Thuộc tính này trả về kích thước của đối tượng jQuery. Nếu là một empty object thì length = 0, ngược lại length > 0.

Do đó, code đúng phải là :

if(selector.length>0)
{
     // TODO : do something here
}

Hoặc đơn giản là :

if(selector.length)
{
     // TODO : do something here
}

Ngoài ra còn một số cách khác như :

if(selector.size())

hoặc

if(selector[0])

hoặc với js thuần thì

if(document.getElementById(‘id’))
Categories: Web

HTML Entities

Để hiển thị các ký tự đặc biệt trên trình duyệt thì phải sử dụng các ký tự đại diện (character entity) cho nó trong mã HTML. Chẳng hạn &lt; đại diện cho <.  Các ký tự này được gọi là HTML Entities.

HTML Entities có thể sử dụng được trong cả mã HTML, JavaScript và CSS. Lưu ý rằng các entity name có phân biệt chữ hoa – thường.

Bảng tham khảo HTML Entities :

HTML ISO-8859-1 Reference

Trang web này cung cấp các bảng ký tự HTML theo tiêu chuẩn ISO-8859-1.

ISO-8859-1 là bộ ký tự mặc định trên hầu hết các trình duyệt.

128 ký tự đầu tiên của ISO-8859-1 là bộ các ký tự ASCII cơ bản ( các chữ số từ 0-9, các chữ cái tiếng Anh in hoa, in thường và một số ký tự đặc biệt).

Phần từ mã 160 đến 255 chứa các ký tự thường được sử dụng ở các nước Tây Âu và một số ký tự đặc biệt bổ biến.

Bảng sau là 5 ký tự đặc biệt phổ biến nhất thường được sử dụng trong HTML :

Character Entity Name Entity Number Description
&quot; Quotation mark
&apos; apostrophe
& &amp; & ampersand
< &lt; < less-than
> &gt; > greater-than

XHTML Character Entity Reference

Trang web này liệt kê 252 ký tự trong HTML 4 và XHTML 1.0. Mỗi ký tự được mô tả dưới dạng một hình vuông bao gồm dạng hiển thị, tên, mã số và giá trị UTF-8 ( dạng mã 16 – hexadecimal).

Html Character

Sử dụng

– HTML : &entity_name; hoặc &#entity_number;

– Javascript: dùng mã UTF-8 với tiền tố “\u”. Ngoài ra với ký tự có mã nhỏ hơn 255 (giá trị hex = FF), bạn có thể dùng 2 giá trị của mã ký tự với tiền tố “\x”.

Ví dụ : Để hiển thị ký tự & trong javascript, bạn có thể dùng : \u0026 hoặc \x26

– CSS : dùng mã UTF-8 với tiền tố “\”

Ví dụ: Hiển thị ký tự & sau mỗi thể div

div:after {content:"\26";}
Categories: Web

jQuery – Sửa đổi DOM

jQuery cung cấp nhiều phương thức cho phép can thiệp DOM theo nhiều cách như thay đổi các attribute của một phần tử (Attributes category), thiết lập các properties cho phần tử (CSS category) hay sửa đổi hoàn toàn các phần tử  ( hoặc là các nhóm phần tử ) : thêm, loại bỏ, sao chép, … Tất cả các phương thức này được coi như các “setters”, chúng làm thay đổi value của properties.

Một vài phương thức khác như .attr(), .html, .val() là các “getters”, truy vấn thông tin từ thành phần DOM để sử dụng sau đó.

Các phương thức chèn thành phần mới vào DOM: (DOM Insertion)

Bao gồm :

  • Các phương thức chèn bên ngoài:
    • .after()
    • .insertAfter()
    • .before()
    • .insertBefore()
  • Các phương thức chèn bên trong:
    • .append()
    • .appendTo()
    • .html()
    • .prepend()
    • .prependTo()
    • .text
  • Các phương thức chèn xung quanh:
    • .wrap
    • .unwrap
    • .wrapAll
    • .wrapInner

Các phương thức chèn bên ngoài (DOM Insertion, Outside)

.after()

Mô tả : Chèn nội dung được chỉ định trong tham số sau mỗi phần tử trong tập các phần tử so khớp

Kiểu trả về : đối tượng jQuery

Cú pháp:

  • .after(content[,content])
    • Tham số :
      • content : chuỗi HTML, phần tử DOM hay đối tượng jQuery để chèn vào sau mỗi phần tử trong tập các phần tử so khớp
      • content : Một hoặc nhiều hơn một các phần tử DOM, các mảng của các phần tử, các chuỗi HTML hay các đối tượng jQuery được chèn vào sau mỗi phần tử trong tập các phần tử so khớp.
    • Phiên bản được thêm vào : 1.0
  • .after(function(index))
    • Tham số :
      • function(index): Một function trả về một chuỗi HTML, các phần tử DOM, hay một đối tượng jQuery để  chèn vào sau mỗi phần tử trong tập các phần tử so khớp. Chỉ số vị trí của phần tử trong tập hợp được truyền vào như một tham số. Bên trong hàm, từ khóa “this” chỉ đến phần tử hiện tại trong tập hợp.
    • Phiên bản được thêm vào : 1.4

Phương thức .after() và .insertAfter() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .after(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .insertAfter(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector hay một thẻ.

Ví dụ bạn có tài liệu HTML sau :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

Nội dung có thể được tạo và sau đó chèn vào sau một vài phần tử một lúc :

$('.inner').after('<p>Test</p>')

Kết quả sau khi thực hiện câu lệnh trên là :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <p>Test</p>
    <div class="inner">Goodbye</div>
    <p>Test</p>
</div>

Một phần tử trong DOM cũng có thể được chọn và chèn vào sau một phần tử khác :

$('.container').after($('h2'));

Nếu một phần tử được chọn theo cách này để chèn thì nó sẽ được di chuyển thay vì sao chép.

<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Chèn Disconnected DOM nodes

Từ phiên bản jQuery 1.4, phương thức .before() và .after() cũng làm việc với disconnected DOM nodes. Ví dụ, xét đoạn code sau :

$('<div/>').after('<p></p>');

Kết quả là một tập hợp jQuery chứa 1 thẻ div và 1 thẻ p theo thứ tự mà ta có thể thao tác với nó sau này hoặc thậm chí trước khi nó được chèn vào tài liệu.

$('<div/>').after('<p></p>').addClass('foo')
.filter('p').attr('id', 'bar').html('hello')
.end()
.appendTo('body');

Kết quả là các thành phần dưới đây được chèn vào trước thẻ đóng </body> :

<div class="foo"></div>
<p class="foo" id="bar">hello</p>

Truyền vào một Function

Từ phiên bản 1.4, phương thức .after hỗ trợ truyền vào tham số một function trả về các phần tử để insert

$('p').after(function() {
 return '<div>' + this.className + '</div>';
});

Ví dụ trên sẽ chèn một thẻ <div> sau mỗi thẻ p với mỗi thẻ div có thuộc tính className là className của thẻ p trước nó.

Thêm các tham số : 

Tương tự như các phương thức thêm nội dung khác như .prepend() và .before(), phương thức .after cũng hỗ trợ truyền vào nhiều tham số đầu vào, bao gồm các thành phần DOM, các đối tượng jQuery, chuỗi HTML và các mảng phần tử DOM.

Ví dụ sau sẽ insert 2 thẻ <div> mới và một thẻ <div> đã tồn tại vào sau thẻ p đầu tiên.

var $newdiv1 = $('<div id="object1"/>'),
newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('foo');
$('p').first().after($newdiv1, [newdiv2, existingdiv1]);

Trong khi .after có thể chấp nhận nhiều tham số thêm, chúng ta có thể thu được cùng kết quả với ví dụ trên khi truyền vào 3 thẻ div như sau :

$('p').first().after($newdiv1, newdiv2, existingdiv1)

Loại và số lượng các tham số nhiều hay ít phụ thuộc vào các phần tử được thu thập trong code.

Ví dụ 1 : Thêm một chuỗi HTML vào sau tất cả các thẻ p

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>I would like to say: </p>
    <script>$("p").after("<b>Hello</b>");</script>
</body>
</html>

Ví dụ 2 : Thêm một phần tử DOM vào sau tất cả các thẻ p

<!DOCTYPE html>
<html>
<head>
   <style>p { background:yellow; }</style>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <p>I would like to say: </p>
   <script>$("p").after( document.createTextNode("Hello") );</script>
</body>
</html>

Ví dụ 3: Thêm một đối tượng jQuery ( tương tự như một Mảng của các phần tử DOM ) vào sau tất cả các thẻ p

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <b>Hello</b><p>I would like to say: </p>
    <script>$("p").after( $("b") );</script>
</body>
</html>

.insertAfter(target)

Mô tả : Chèn mỗi phần tử trong tập các phần tử so khớp vào sau target

Kiểu trả về : đối tượng jQuery

Cú pháp:

  • .insertAfter(target)
    • Tham số:
      • target : là một selector, phần tử, chuỗi HTML hay đối tượng jQuery; Tập các phần tử so khớp sẽ được chèn vào sau các phần tử được chỉ định bởi tham số này.
    • Phiên bản được thêm vào : 1.0

Xem xét tài liệu HTML sau :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

Chúng ta có thể tạo nội dung và chèn nó vào sau vài phần tử cùng một lúc :

$('<p>Test</p>').insertAfter('.inner');

Mỗi thẻ div.inner sẽ nhận nội dung mới này :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <p>Test</p>
    <div class="inner">Goodbye</div>
    <p>Test</p>
</div>

Chúng ta cũng có thể chọn một phần tử trên trang và chèn nó vào sau một phần tử khác :

$('h2').insertAfter($('.container'));

Nếu một phần tử được chọn theo cách này thì nó sẽ được di chuyển đến sau target ( không phải sao chép ) :

<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Ví dụ : Chèn tất cả các thẻ p vào sau phần tử có id =”foo”. Việc này tương tự như sử dụng : $(‘#foo”).after(“p”)

<!DOCTYPE html>
<html>
<head>
    <style>#foo { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p> is what I said... </p><div id="foo">FOO!</div>
    <script>$("p").insertAfter("#foo"); // check after() examples</script>
</body>
</html>

.before()

Mô tả : Chèn nội dung được chỉ định trong tham số trước mỗi phần tử trong tập các phần tử so khớp.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .before(content[,content])
    • Tham số :
      • content : chuỗi HTML, phần tử DOM hay đối tượng jQuery để chèn vào sau mỗi phần tử trong tập các phần tử so khớp
      • content : Một hoặc nhiều hơn một các phần tử DOM, các mảng của các phần tử, các chuỗi HTML hay các đối tượng jQuery được chèn vào sau mỗi phần tử trong tập các phần tử so khớp.
    • Phiên bản được thêm vào : 1.0
  • .before(function(index))
    • Tham số :
      • function(index): Một function trả về một chuỗi HTML, các phần tử DOM, hay một đối tượng jQuery để  chèn vào sau mỗi phần tử trong tập các phần tử so khớp. Chỉ số vị trí của phần tử trong tập hợp được truyền vào như một tham số. Bên trong hàm, từ khóa “this” chỉ đến phần tử hiện tại trong tập hợp.
    • Phiên bản được thêm vào : 1.4

Phương thức .before() và .insertBefore() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .before(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .insertBefore(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector hay một thẻ.

Ví dụ bạn có tài liệu HTML sau :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

Bạn có thể tạo nội dung và sau đó chèn vào trước một vài phần tử cùng lúc:

$('.inner').before('<p>Test</p>');

Mỗi phần tử div.inner sẽ nhận được nội dung mới :

<div class="container">
    <h2>Greetings</h2>
    <p>Test</p>
    <div class="inner">Hello</div>
    <p>Test</p>
    <div class="inner">Goodbye</div>
</div>

Bạn cũng có thể chọn một phần tử trên trang và chèn nó vào trước một phần tử khác:

$('.container').before($('h2'));

Nếu một phần tử được chọn theo cách này để chèn thì nó sẽ được di chuyển thay vì sao chép.

<h2>Greetings</h2>
   <div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.
Từ phiên bản jQuery 1.4, phương thức .before() và .after() cũng làm việc với disconnected DOM nodes.

$("<div/>").before("<p></p>");

Kết quả là một tập hợp jQuery chứa 1 đoạn văn và 1 thẻ div theo thứ tự.

Thêm các tham số : 

Tương tự như các phương thức thêm nội dung khác như .prepend() và .after(), phương thức .before cũng hỗ trợ truyền vào nhiều tham số đầu vào, bao gồm các thành phần DOM, các đối tượng jQuery, các chuỗi HTML và các mảng phần tử DOM

Ví dụ sau sẽ chèn 2 thẻ <div> mới và một thẻ <div> đã tồn tại vào trước thẻ p đầu tiên.

var $newdiv1 = $('<div id="object1"/>'),
 newdiv2 = document.createElement('div'),
 existingdiv1 = document.getElementById('foo');
$('p').first().before($newdiv1, [newdiv2, existingdiv1]);

Vì .before có thể chấp nhận nhiều tham số thêm, chúng ta có thể thu được cùng kết quả với ví dụ trên khi truyền vào 3 thẻ div như sau :

$('p').first().before($newdiv1, newdiv2, existingdiv1)

Loại và số lượng các tham số nhiều hay ít phụ thuộc vào các phần tử được thu thập trong code.

Ví dụ 1 : Chèn một chuỗi HTML vào trước tất cả các thẻ p

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p> is what I said...</p>
    <script>$("p").before("<b>Hello</b>");</script>
</body>
</html>

Ví dụ 2 : Chèn một phần tử DOM vào trước tất cả các thẻ p

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p> is what I said...</p>
    <script>$("p").before( document.createTextNode("Hello") );</script>
</body>
</html>

Ví dụ 3: Chèn một đối tượng jQuery ( tương tự như một Mảng của các phần tử DOM ) vào trước tất cả các thẻ p

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p> is what I said...</p><b>Hello</b>
    <script>$("p").before( $("b") );</script>
</body>
</html>

.insertBefore()

Mô tả : Chèn mỗi phần tử trong tập các phần tử so khớp vào trước target

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .insertBefore(target)
    • Tham số :
      • target : là một selector, phần tử, chuỗi HTML hay đối tượng jQuery; Tập các phần tử so khớp sẽ được chèn vào trước các phần tử được chỉ định bởi tham số này.
    • Phiên bản được thêm vào : 1.0

Phương thức .before() và .insertBefore() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .before(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .insertBefore(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector hay một thẻ.

Xem xét tài liệu HTML sau :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

Chúng ta có thể tạo nội dung và chèn nó vào trước vài phần tử cùng một lúc :

$('<p>Test</p>').insertBefore('.inner');

Mỗi thẻ div.inner sẽ nhận nội dung mới này :

<div class="container">
    <h2>Greetings</h2>
    <p>Test</p>
    <div class="inner">Hello</div>
    <p>Test</p>
    <div class="inner">Goodbye</div>
</div>

Chúng ta cũng có thể chọn một phần tử trên trang và chèn nó vào trước một phần tử khác :

$('h2').insertBefore($('.container'));

Nếu một phần tử được chọn theo cách này thì nó sẽ được di chuyển đến trước target ( không phải sao chép ) :

<h2>Greetings</h2>
   <div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Ví dụ : Chèn tất cả các thẻ p vào trước phần tử có id =”foo”. Việc này tương tự như sử dụng : $(‘#foo”).before(“p”)

<!DOCTYPE html>
<html>
<head>
    <style>#foo { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div id="foo">FOO!</div><p>I would like to say: </p>
    <script>$("p").insertBefore("#foo"); // check before() examples</script>
</body>
</html>

Các phương thức chèn bên trong: (DOM Insertion, Inside)

Gồm có :

  • .append()
  • .appendTo()
  • .html()
  • .prepend()
  • .prependTo()
  • .text()

.append()

Mô tả : Chèn nội dung được chỉ định bởi tham số vào cuối của mỗi phần tử trong tập các phần tử so khớp.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .append(content[,content])
    • Tham số:
      • content : phần tử DOM , chuỗi HTML hay đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập các phần tử so khớp.
      • content: Một hoặc nhiều phần tử DOM, mảng các phần tử, các chuỗi HTML hay các đối tượng jQuery để chèn vào cuối của mỗi phần tử trong tập các phần tử so khớp.
    • Phiên bản được thêm vào : 1.0
  • .append(function(index,html))
    • Tham số:
      • function(index,html) : Một hàm trả về một chuỗi HTML, các phần tử DOM hoặc đối tượng jQuery để chèn vào cuối của mỗi phần tử trong tập các phần tử so khớp. Hàm này nhận vị trí index của phần tử trong tập hợp và giá trị HTML cũ của phần tử như là các tham số. Bên trong hàm, từ khóa this chỉ đến phần tử hiện tại trong tập hợp.
    • Phiên bản được thêm vào : 1.4

Phương thức .append() chèn nội dung được chỉ định vào con cuối cùng của mỗi phần tử trong tập hợp jQuery. (Để chèn vào con đầu tiên, sử dụng .prepend()).

Phương thức .append() và .appendTo() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .append(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .appendTo(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector

Xem xét tài liệu HTML sau :

<h2>Greetings</h2>
    <div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

Bạn có thể tạo nội dung mới và chèn nó vào trong một vài phần tử cùng một lúc :

$('.inner').append('<p>Test</p>');

Mỗi thẻ div.inner sẽ nhận nội dung mới này :

<h2>Greetings</h2>
<div class="container">
    <div class="inner">
       Hello
       <p>Test</p>
    </div>
    <div class="inner">
        Goodbye
       <p>Test</p>
    </div>
</div>

Bạn cũng có thể chọn một phần tử trên trang và chèn nó vào trong một phần tử khác:

$('.container').append($('h2'));

Nếu một phần tử được chọn theo cách này thì nó sẽ được di chuyển vào trong target ( không phải sao chép ) :

<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
    <h2>Greetings</h2>
</div>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Thêm các tham số: 

Tương tự như các phương thức thêm nội dung khác như .prepend() và .before(), phương thức .append() cũng hỗ trợ truyền nhiều tham số đầu vào, bao gồm các phần tử DOM, các đối tượng jQuery, các chuỗi HTML và các mảng các phần tử DOM.

Ví dụ sau sẽ chèn 2 thẻ div mới và một thẻ div đã tồn tại như là 2 node con cuối cùng của thẻ body.

var $newdiv1 = $('<div id="object1"/>'),
newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('foo');
$('body').append($newdiv1, [newdiv2, existingdiv1]);

Vì .append() có thể chấp nhận nhiều tham số đầu vào, kết quả tương tự như trên cũng đạt được bằng cách truyền vào 3 thẻ div như là các tham số như sau:

$('body').append($newdiv1, newdiv2, existingdiv1)

Loại và số lượng các tham số nhiều hay ít phụ thuộc vào các phần tử được thu thập trong code

Ví dụ 1: Nối thêm một số HTML vào tất cả các đoạn văn

<!DOCTYPE html>
<html>
<head>
    <style>
       p { background:yellow; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>I would like to say: </p>
<script>
    $("p").append("<strong>Hello</strong>");
</script>
</body>
</html>

Ví dụ 2: Append một phần tử vào tất cả các đoạn văn

<!DOCTYPE html>
<html>
<head>
    <style>
       p { background:yellow; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>I would like to say: </p>
    <script>
        $("p").append(document.createTextNode("Hello"));
    </script>
</body>
</html>

Ví dụ 3: Append một đối tượng jQuery ( tương tự như một Mảng của các phần tử DOM) vào tất cả các đoạn văn:

<!DOCTYPE html>
<html>
<head>
    <style>
        p { background:yellow; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <strong>Hello world!!!</strong><p>I would like to say: </p>
    <script>
        $("p").append( $("strong") );
    </script>
</body>
</html>

.appendTo()

Mô tả : Chèn mỗi phần tử trong tập các phần tử so khớp vào cuối của target

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .appendTo(target)
    • Tham số:
      • target : Một selector, phần tử DOM , chuỗi HTML hay đối tượng jQuery; so khớp với tập các phần tử sẽ được chèn vào cuối của các phần tử được chỉ định bởi tham số này.
    •  Phiên bản được thêm vào : 1.0

Phương thức .append() và .appendTo() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .append(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .appendTo(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector

Xem xét tài liệu HTML sau :

<h2>Greetings</h2>
<div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Bạn có thể tạo nội dung mới và chèn nó vào trong một vài phần tử cùng một lúc :

$('<p>Test</p>').appendTo('.inner');

Mỗi thẻ div.inner sẽ nhận nội dung mới này :

<h2>Greetings</h2>
<div class="container">
   <div class="inner">
      Hello
      <p>Test</p>
   </div>
   <div class="inner">
      Goodbye
      <p>Test</p>
   </div>
</div>

Bạn cũng có thể chọn một phần tử trên trang và chèn nó vào trong một phần tử khác:

$('h2').appendTo($('.container'));

Nếu một phần tử được chọn theo cách này thì nó sẽ được di chuyển vào trong target ( không phải sao chép )

<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
    <h2>Greetings</h2>
</div>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Ví dụ : Append tất cả các thẻ span vào phần tử có id=”foo”

<!DOCTYPE html>
<html>
<head>
    <style>#foo { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span>I have nothing more to say... </span>
  <div id="foo">FOO! </div>
  <script>$("span").appendTo("#foo"); // check append() examples</script>
</body>
</html>

.prepend()

Mô tả : Chèn nội dung được chỉ định bởi tham số vào đầu của mỗi phần tử trong tập các phần tử so khớp.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .prepend(content[,content]) :
    • Tham số :
      • content : phần tử DOM , chuỗi HTML hay đối tượng jQuery để chèn vào đầu mỗi phần tử trong tập các phần tử so khớp.
      • content: Một hoặc nhiều phần tử DOM, mảng các phần tử, các chuỗi HTML hay các đối tượng jQuery để chèn vào đầu của mỗi phần tử trong tập các phần tử so khớp.
    • Phiên bản được thêm vào : 1.0
  • .append(function(index,html)) :
    • Tham số :
      • function(index,html) : Một hàm trả về một chuỗi HTML, các phần tử DOM hoặc đối tượng jQuery để chèn vào đầu của mỗi phần tử trong tập các phần tử so khớp. Hàm này nhận vị trí index của phần tử trong tập hợp và giá trị HTML cũ của phần tử như là các tham số. Bên trong hàm, từ khóa this chỉ đến phần tử hiện tại trong tập hợp.
    • Phiên bản được thêm vào : 1.4

Phương thức .prepend() chèn nội dung được chỉ định vào con đầu tiên của mỗi phần tử trong tập hợp jQuery. (Để chèn vào con cuối cùng, sử dụng .append()).

Phương thức .prepend() và .prependTo() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .prepend(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .prependTo(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector

Xem xét tài liệu HTML sau :

<h2>Greetings</h2>
<div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Bạn có thể tạo nội dung mới và chèn nó vào trong một vài phần tử cùng một lúc :

$('.inner').prepend('<p>Test</p>');

Mỗi thẻ div.inner sẽ nhận nội dung mới này :

<h2>Greetings</h2>
<div class="container">
   <div class="inner">
      <p>Test</p>
      Hello
   </div>
   <div class="inner">
     <p>Test</p>
     Goodbye
   </div>
</div>

Bạn cũng có thể chọn một phần tử trên trang và chèn nó vào trong một phần tử khác:

$('.container').prepend($('h2'));

Nếu một phần tử được chọn theo cách này thì nó sẽ được di chuyển vào trong target ( không phải sao chép ) :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Thêm các tham số: 

Tương tự như các phương thức thêm nội dung khác như .append() và .before(), phương thức .prepend() cũng hỗ trợ truyền nhiều tham số đầu vào, bao gồm các phần tử DOM, các đối tượng jQuery, các chuỗi HTML và các mảng các phần tử DOM.

Ví dụ sau sẽ chèn 2 thẻ div mới và một thẻ div đã tồn tại như là 2 node con cuối cùng của thẻ body.

var $newdiv1 = $('<div id="object1"/>'),
newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('foo');
$('body').prepend($newdiv1, [newdiv2, existingdiv1]);

Trong khi .prepend() có thể chấp nhận nhiều tham số đầu vào, kết quả tương tự như trên cũng đạt được bằng cách truyền vào 3 thẻ div như là các tham số như sau:

$('body').prepend($newdiv1, newdiv2, existingdiv1)

Loại và số lượng các tham số nhiều hay ít phụ thuộc vào các phần tử được thu thập trong code

Ví dụ 1: Prepends một chuỗi HTML vào tất cả các đoạn văn

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <p>there, friend!</p>
   <p>amigo!</p>
   <script>$("p").prepend("<b>Hello </b>");</script>
</body>
</html>

Ví dụ 2: Prepend một phần tử DOM vào tất cả các đoạn văn

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>is what I'd say</p>
    <p>is what I said</p>
    <script>$("p").prepend(document.createTextNode("Hello "));</script>
</body>
</html>

Ví dụ 3: Prepend một đối tượng jQuery ( tương tự như một Mảng của các phần tử DOM) vào tất cả các đoạn văn:

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p> is what was said.</p><b>Hello</b>
    <script>$("p").prepend( $("b") );</script>
</body>
</html>

.prependTo()

Mô tả : Chèn mỗi phần tử trong tập các phần tử so khớp vào đầu của target.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .prependTo(target) :
    • Tham số :
      • target : Một selector, phần tử DOM , chuỗi HTML hay đối tượng jQuery; so khớp với tập các phần tử sẽ được chèn vào đầu của các phần tử được chỉ định bởi tham số này..
    • Phiên bản được thêm vào : 1.0

Phương thức .prepend() và .prependTo() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .prepend(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .prependTo(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector

Xem xét tài liệu HTML sau :

<h2>Greetings</h2>
<div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Bạn có thể tạo nội dung mới và chèn nó vào trong một vài phần tử cùng một lúc :

$('<p>Test</p>').prependTo('.inner');

Mỗi thẻ div.inner sẽ nhận nội dung mới này :

<h2>Greetings</h2>
<div class="container">
   <div class="inner">
     <p>Test</p>
        Hello
     </div>
     <div class="inner">
        <p>Test</p>
        Goodbye
     </div>
</div>

Bạn cũng có thể chọn một phần tử trên trang và chèn nó vào trong một phần tử khác:

$('h2').prependTo($('.container'));

Nếu một phần tử được chọn theo cách này thì nó sẽ được di chuyển vào trong target ( không phải sao chép ) :

<div class="container">
   <h2>Greetings</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Ví dụ: Prepend tất cả các thẻ span vào phần tử có id =”foo”

<!DOCTYPE html>
<html>
<head>
   <style>div { background:yellow; }</style>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <div id="foo">FOO!</div>
   <span>I have something to say... </span>
   <script>$("span").prependTo("#foo"); // check prepend() examples</script>
</body>
</html>

.html()

Có 2 dạng sử dụng: .html().html(htmlString)

.html()

Mô tả : Lấy (Get) nội dung HTML của phần tử đầu tiên trong tập các phần tử so khớp

Kiểu trả về : String

Phiên bản được thêm vào : 1.0

Phương thức này không có sẵn trong các tài liệu XML.

Trong một tài liệu HTML, phương thức .html() có thể được dùng để lấy nội dung của bất kỳ phần tử nào. Nếu biểu thức selector so khớp với nhiều hơn một phần tử thì chỉ phần tử so khớp đầu tiên sẽ trả về nội dung HTML của nó.

Xem xét đoạn code sau :

$('div.demo-container').html();

Nó sẽ lấy nội dung của thẻ div đầu tiên có class = “demo-container” trong tài liệu.

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
</div>

Kết quả sẽ là :

<div>Demonstration Box</div>

Phương thức này sử dụng thuộc tính innerHTML của trình duyệt. Một vài trình duyệt có thể không trả về chuỗi HTML chính xác như trong tài liệu nguyên bản. Ví dụ như Internet Explorer thi thoảng bỏ dấu quotes bao quanh giá trị nếu chúng chỉ chứa ký tự chữ – số (anphanumeric).

Ví dụ: Click vào một đoạn văn để chuyển nội dung của nó từ html sang text

<!DOCTYPE html>
<html>
<head>
    <style>
       p { margin:8px; font-size:20px; color:blue; 
 cursor:pointer; }
       b { text-decoration:underline; }
       button { cursor:pointer; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>
       <b>Click</b> to change the <span id="tag">html</span>
    </p>
    <p>
       to a <span id="text">text</span> node.
    </p>
    <p>
       This <button name="nada">button</button> does nothing.
    </p>
   <script>
        $("p").click(function () {
           var htmlStr = $(this).html();
           $(this).text(htmlStr);
        });
   </script>
</body>
</html>

.html(htmlString)

Mô tả : Thiết lập (Set) nội dung HTML của mỗi phần tử trong tập các phần tử so khớp

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .html(htmlString)
    • Tham số :
      • htmlString: một chuỗi HTML để thiết lập nội dung cho mỗi phần tử so khớp.
    • Phiên bản được thêm vào : 1.0
  • .html(function(index,oldhtml))
    • Tham số :
      • function(index,oldhtml) : Một hàm trả về nội dung HTML để thiết lập. Hàm này nhận chỉ số vị trí của phần tử trong tập hợp và giá trị HTML cũ làm tham số. jQuery sẽ làm trống phần tử trước khi gọi hàm; sử dụng tham số oldhtml để tham chiếu đến nội dung trước đó. Bên trong hàm, từ khóa this ám chỉ đến phần tử hiện tại trong tập hợp.
    • Phiên bản được thêm vào : 1.4

Phương thức này không có sẵn trong các tài liệu XML.

Khi phương thức .html() được sử dụng để thiết lập nội dung của một phần tử, mọi nội dung đã có của phần tử sẽ được thay thế hoàn toàn bằng nội dung mới.

Xem xét đoạn HTML sau:

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
</div>

Nội dung của <div class=”demo-container”> có thể được thiết lập như sau:

$('div.demo-container')
    .html('<p>All new content. <em>You bet!</em></p>');

Dòng code này sẽ thay thế mọi thứ bên trong <div class=”demo-container”>:

<div class="demo-container">
    <p>All new content. <em>You bet!</em></p>
</div>

Từ phiên bản 1.4, phương thức .html() cho phép nội dung HTML có thể được thiết lập bằng cách truyền trong một hàm.

$('div.demo-container').html(function() {
    var emph = '<em>' + $('p').length + ' paragraphs!</em>';
    return '<p>All new content for ' + emph + '</p>';
});

Nếu một tài liệu có 6 đoạn văn, ví dụ này sẽ thiết lập nội dung là :

<div> to <p>All new content for <em>6 paragraphs!</em></p>

Phương thức này sử dụng thuộc tính innerHTML của trình duyệt. Một số trình duyệt không sinh ra một DOM chính xác như mã nguồn HTML được cung cấp. Ví dụ , Internet Explorer trước phiên bản 8 sẽ chuyển tất cả các thuộc tính href trong link sang URL tuyệt đối và IE trước phiên bản 9 sẽ không xử lý chính xác các phần tử HTML5 mà không có thêm một compatibility layer riêng.

Lưu ý: Trong IE trước và cả phiên bản 9, việc thiết lập nội dung text của một phần tử HTML có thể làm hỏng các text nodes của con của nó đã được loại bỏ khỏi tài liệu như là một kết quả của toán tử. Nếu bạn giữ lại các tham chiếu đến các phần tử DOM này và cần chúng không thay đổi thì có thể dùng .empty().html(string) thay vì .html(string) bởi vì việc đó sẽ khiến các phần tử được loại bỏ khỏi tài liệu trước khi một chuỗi mới được gán cho phần tử.

Ví dụ 1: Thêm một chuỗi html vào mỗi thẻ div

<!DOCTYPE html>
<html>
<head>
    <style>
      .red { color:red; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <span>Hello</span>
    <div></div>
    <div></div>
    <div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>
</body>
</html>

Ví dụ 2: Thêm một chuỗi html vào mỗi thẻ div và ngay sau đó thao tác với nó để chèn thêm html.

<!DOCTYPE html>
<html>
<head>
    <style>
       div { color:blue; font-size:18px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
<script>
    $("div").html("<b>Wow!</b> Such excitement...");
    $("div b").append(document.createTextNode("!!!"))
    .css("color", "red");
</script>
</body>
</html>

.text()

Có 2 dạng sử dụng: .text().text(textString)

.text()

Mô tả : Lấy (Get) nội dung text hỗn hợp của mỗi phần tử trong tập các phần tử so khớp, bao gồm cả các con cháu của chúng.

Kiểu trả về : String

Phiên bản được thêm vào : 1.0

Không giống như phương thức .html(), .text() có thể được sử dụng trong cả tài liệu XML và HTML. Kết quả của phương thức .text() là một chuỗi bao gồm text hỗn hợp của tất cả các phần tử so khớp. (Do có sự khác nhau trong việc parsers HTML trong các trình duyệt khác nhau nên text trả về có thể khác nhau về newlines và các khoảng trắng khác).

Xem xét đoạn mã HTML sau :

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
    <ul>
       <li>list item 1</li>
       <li>list <strong>item</strong> 2</li>
    </ul>
</div>

Lệnh $(‘div.demo-container’).text() sẽ trả về kết quả là :

Demonstration Box list item 1 list item 2

Phương thức .text() không thể được sử dụng trong các các input của form hay các scripts. Để set hay get giá trị text của một phần tử input hay textarea, hãy sử dụng phương thức .val(). Để get giá trị của một phần tử script, hãy sử dụng phương thức .html().

Từ phiên bản jQuery 1.4, phương thức .text() có thể trả về giá trị của text và các nodes CDATA cũng như là các element nodes.

Ví dụ: Tìm nội dung text trong đoạn văn đầu tiên (stripping out the html), sau đó set html của  đoạn văn cuối cùng để hiển thị text đúng của nó.

<!DOCTYPE html>
<html>
<head>
    <style>
       p { color:blue; margin:8px; }
       b { color:red; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p><b>Test</b> Paragraph.</p>
    <p></p>
    <script>
       var str = $("p:first").text();
       $("p:last").html(str);
    </script>
</body>
</html>

.text(textString)

Mô tả : Thiết lập (Set) nội dung của mỗi phần tử trong tập các phần tử so khớp với nội dung text được chỉ định.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .text(textString)
    • Tham số :
      • textString: một chuỗi text để thiết lập nội dung cho mỗi phần tử so khớp.
    • Phiên bản được thêm vào : 1.0
  • .text(function(index,text))
    • Tham số :
      • function(index,text) : Một hàm trả về nội dung text để thiết lập. Hàm này nhận chỉ số vị trí của phần tử trong tập hợp và giá trị text cũ làm tham số.
    • Phiên bản được thêm vào : 1.4

Không giống như phương thức .html(), .text() có thể được sử dụng cả trong tài liệu XML và HTML.

Chúng ta cần nhận thức được rằng phương thức này sẽ trả lại một cách chính xác nội dung chuỗi trong HTML. Để làm việc đó, nó gọi phương thức DOM .createTextNode() sẽ thay thế các ký tự đặc biệt bằng các entity HTML tương ứng ( chẳng hạn như &lt; cho <).

Xem xét đoạn HTML sau:

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
    <ul>
        <li>list item 1</li>
        <li>list <strong>item</strong> 2</li>
    </ul>
</div>

Câu lệnh $(‘div.demo-container’).text(‘<p>This is a test.</p>’); sẽ cho ra kết quả là :

<div class="demo-container">
   &lt;p&gt;This is a test.&lt;/p&gt;
</div>

Nó sẽ xuất hiện trên trang được trả lại với các tag được hiển thị như sau:

<p>This is a test</p>

Phương thức .text() không thể sử dụng được đối với các phần tử input. Đối với các trường text input, hãy sử dụng phương thức .val()

Từ phiên bản jQuery 1.4, phương thức .text() cho phép chúng ta có thể thiết lập nội dung text bằng cách truyền vào trong một hàm.

$('ul li').text(function(index) {
    return 'item number ' + (index + 1);
});

Chẳng hạn có một unordered list có 3 phần tử <li> thì kết quả của đoạn code trên là :

<ul>
 <li>item number 1</li>
 <li>item number 2</li>
 <li>item number 3</li>
</ul>

Ví dụ: Thêm text vào đoạn văn (chú ý là thẻ bold được escaped)

<!DOCTYPE html>
<html>
<head>
    <style>
       p { color:blue; margin:8px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Test Paragraph.</p>
    <script>$("p").text("<b>Some</b> new text.");</script>
</body>
</html>

Các phương thức chèn xung quanh :

.wrap

.unwrap

.wrapAll

.wrapInner

Các phương thức thay thế phần tử DOM (DOM Replacement)

Bao gồm :

  • .replaceAll
  • .replaceWith

.replaceAll

Mô tả : Thay thế mỗi phần tử đích bởi một tập các phần tử so khớp

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .replaceAll(target)
    • Tham số :
      • target : là một biểu thức selector chỉ ra các thành phần nào được thay thế.
    • Phiên bản được thêm vào : 1.0

Phương thức .replaceAll() là hệ quả của .replaceWith() nhưng với nguồn và đích đảo ngươc lại.

Xem xét cấu trúc DOM sau:

<div class="container">
    <div class="inner first">Hello</div>
    <div class="inner second">And</div>
    <div class="inner third">Goodbye</div>
</div>

Chúng ta có thể tạo một phần tử, sau đó thay thế các phần tử khác bởi nó:

$('<h2>New heading</h2>').replaceAll('.inner');

Kết quả là :

<div class="container">
    <h2>New heading</h2>
    <h2>New heading</h2>
    <h2>New heading</h2>
</div>

Hoặc chúng ta cũng có thể chọn một phần tử để thay thế cho phần tử khác :

$('.first').replaceAll('.third');

Kết quả là :

<div class="container">
    <div class="inner second">And</div>
    <div class="inner first">Hello</div>
</div>

Ở ví dụ này, chúng ta nhận thấy phần tử được chọn đó thay thế phần tử đích bằng cách di chuyển từ vị trí cũ của nó mà không phải là sao chép.

Ví dụ: Thay thế tất cả các đoạn văn bằng những từ in đậm

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
    <script>$("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples</script>
</body>
</html>

.replaceWith()

Mô tả : Thay thế mỗi phần tử trong tập các phần tử so khớp bởi một nội dung mới được cung cấp.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .replaceWith(newContent)
    • Tham số :
      • newContent : Nội dung để chèn, có thể là một chuỗi HTML, phần tử DOM hoặc một đối tượng jQuery.
    • Phiên bản được thêm vào : 1.2
  • .replaceWith(function)
    • Tham số :
      • function : Một hàm trả về nội dung là cái mà sẽ thay thế cho một tập các phần tử so khớp.
    • Phiên bản được thêm vào : 1.4

Phương thức .replaceWith() sẽ bỏ đi nội dung từ DOM và chèn nội dung mới vào vị trí của nó bằng một lần gọi .

Xem xét cấu trúc DOM sau:

<div class="container">
    <div class="inner first">Hello</div>
    <div class="inner second">And</div>
    <div class="inner third">Goodbye</div>
</div>

Thẻ div inner second có thể được thay thế bởi một đoạn HTML được chỉ định :

$('div.second').replaceWith('<h2>New heading</h2>');

Kết quả là :

<div class="container">
    <div class="inner first">Hello</div>
    <h2>New heading</h2>
    <div class="inner third">Goodbye</div>
</div>

Tất cả các phần tử div.inner có thể là đích cùng một lúc:

$('div.inner').replaceWith('<h2>New heading</h2>');

Kết quả là :

<div class="container">
    <h2>New heading</h2>
    <h2>New heading</h2>
    <h2>New heading</h2>
</div>

Một phần tử cũng có thể được chọn như một sự thay thế

$('div.third').replaceWith($('.first'));

Kết quả là :

<div class="container">
    <div class="inner second">And</div>
    <div class="inner first">Hello</div>
</div>

Ở ví dụ này, chúng ta nhận thấy phần tử được chọn đó thay thế phần tử đích bằng cách di chuyển từ vị trí cũ của nó mà không phải là sao chép.

Phương thức .replaceWith() giống như hầu hết các phương thức jQuery, trả về một đối tượng jQuery do đó các phương thức khác có thể nối tiếp vào nó. Tuy nhiên, cần lưu ý rằng đối tượng jQuery nguyên bản ( original jQuery ) được trả về. Đối tượng này có nghĩa là phần tử đã được loại bỏ từ DOM, không phải là phần tử mới được thay thế.
Từ phiên bản jQuery 1.4, phương thức .replaceWith() có thể làm việc với disconnected DOM nodes.

Ví dụ trong đoạn code sau, .replaceWith() trả về một tập hợp jQuery chỉ chứa một đoạn văn.

$("<div/>").replaceWith("<p></p>");

Phương thức .replaceWith() có thể mang một function như là một tham số của nó:

$('div.container').replaceWith(function() {
    return $(this).contents();
});

Kết quả là các nội dung trong <div class=”container”> được thay thế bởi 3 thẻ div con.

Giá trị trả về của hàm này có thể là một chuỗi HTML, phần tử DOM hay một đối tượng jQuery.

Ví dụ 1: Khi click vào một nút sẽ thay thế nút đó bởi một thẻ div chứa cùng nội dung

<!DOCTYPE html>
<html>
<head>
 <style>
    button { display:block; margin:3px; color:red; width:200px; }
    div { color:red; border:2px solid blue; width:200px;
    margin:3px; text-align:center; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <button>First</button>
   <button>Second</button>
   <button>Third</button>
   <script>
       $("button").click(function () {
           $(this).replaceWith( "<div>" + $(this).text() + "</div>" );
       });
   </script>
</body>
</html>

Ví dụ 2: Thay thế tất cả các đoạn văn bởi các từ in đậm

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <p>Hello</p>
   <p>cruel</p>
   <p>World</p>
<script>
   $("p").replaceWith( "<b>Paragraph. </b>" );
</script>
</body>
</html>

Ví dụ 3: Khi click vào một đoạn văn sẽ thay thế mỗi đoạn văn bởi một thẻ div có sẵn trong DOM và được chọn bởi hàm $(). Chú ý rằng nó không phải là sao chép đối tượng mà đúng hơn là di chuyển nó để thay thế đoạn văn.

<!DOCTYPE html>
<html>
<head>
 <style>
    div { border:2px solid blue; color:red; margin:3px; }
    p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
    <div>Replaced!</div>
   <script>
      $("p").click(function () {
          $(this).replaceWith( $("div") );
      });
   </script>
</body>
</html>

Ví dụ 4: Khi click vào một nút, sẽ thay thế nội dung của 1 thẻ div bởi các thẻ div con của nó và nối thêm tên class của phần tử được chọn vào đoạn văn.

<!DOCTYPE html>
<html>
<head>
 <style> 
    .container { background-color: #991; }
    .inner { color: #911; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <p>
      <button>Replace!</button>
   </p>
   <div class="container">
      <div class="inner">Scooby</div>
      <div class="inner">Dooby</div>
      <div class="inner">Doo</div>
   </div>
   <script>
      $('button').bind("click", function() {
          var $container = $("div.container").replaceWith(function() {
             return $(this).contents();
          });
          $("p").append( $container.attr("class") );
      });
   </script>
</body>
</html>

Các phương thức xóa phần tử DOM (DOM Removal)

Bao gồm :

  • .remove
  • .detach
  • .empty
  • .unwrap

.remove()

Mô tả : Xóa một tập các phần tử so khớp từ DOM.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .remove([selector])
    • Tham số :
      • selector : Một biểu thức selector để lọc (filter) một tập các phần tử được xóa.
    • Phiên bản được thêm vào : 1.0

Tương tự như .empty(), phương thức remove() sẽ loại bỏ các phần tử ra khỏi DOM. Sử dụng .remove() khi bạn muốn loại bỏ chính bản thân phần tử và mọi thứ bên trong nó ( tất cả các events và jQuery data liên kết với phần tử sẽ được loại bỏ ). Để loại bỏ các phần tử mà không loại bỏ data và events, bạn có thể sử dụng .detach()

Xem xét tài liệu HTML sau:

<div class="container">
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>

Chúng ta có thể tìm bất kỳ phần tử đích nào để loại bỏ :

$('.hello').remove();

Kết quả là :

<div class="container">
   <div class="goodbye">Goodbye</div>
</div>

Nếu chúng ta có nhiều phần tử lồng nhau bên trong div.hello, tất cả chúng cũng sẽ bị loại bỏ và các construct jQuery khác như data hoặc event handlers cũng sẽ bị xóa.
Chúng ta cũng có thể thêm một selector như một tham số tùy chọn. Ví dụ chúng ta có thể viết lại đoạn code loại bỏ DOM ở trên như sau:

$('div').remove('.hello');

Kết quả thu được cũng giống như kết quả ở trên:

<div class="container">
    <div class="goodbye">Goodbye</div>
</div>

Ví dụ 1: Loại bỏ tất cả các đoạn văn khỏi DOM

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; margin:6px 0; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Hello</p> 
    how are 
    <p>you?</p>
    <button>Call remove() on paragraphs</button>
    <script>
        $("button").click(function () {
           $("p").remove();
        });
     </script>
</body>
</html>

Ví dụ 2: Loại bỏ tất cả các đoạn văn có chứa “Hello” khỏi DOM. Tương tự như thực hiện : $(“p”).filter(“:contains(‘Hello’)”).remove()

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; margin:6px 0; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p class="hello">Hello</p>
    how are 
    <p>you?</p>
    <button>Call remove(":contains('Hello')") on paragraphs</button>
<script>
    $("button").click(function () {
       $("p").remove(":contains('Hello')");
    });
</script>
</body>
</html>

.empty()

Mô tả : Loại bỏ tất cả các node con của tập các phần tử so khớp từ DOM

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .empty()
    • Phiên bản được thêm vào : 1.0

Phương thức này sẽ loại bỏ không chỉ các phần tử con ( và các con cháu khác) mà còn bất kỳ nội dung nào bên trong tập các phần tử so khớp. Đó là vì tùy theo DOM được chỉ định, mọi chuỗi của văn bản bên trong một phần tử được xem như một node con của phần tử đó.

Xem xét tài liệu HTML sau:

<div class="container">
    <div class="hello">Hello</div>
    <div class="goodbye">Goodbye</div>
</div>

Chúng ta có thể tìm bất kỳ phần tử đích nào để loại bỏ :

$('.hello').empty();

Kết quả là nội dung “Hello” bên trong div.hello bị xóa

<div class="container">
    <div class="hello"></div>
    <div class="goodbye">Goodbye</div>
</div>

Để tránh memory leaks, jQuery loại bỏ các construct khác như data và event handler khác từ các phần tử con trước khi loại bỏ chính bản thân các phần tử.

Nếu bạn muốn loại bỏ các phần tử mà không triệt tiêu data và event handlers của chúng ( do đó chúng có thể được add lại về sau) thì hãy sử dụng .detach() thay vì .empty().

Ví dụ : Loại bỏ tất cả các node con ( bao gồm cả text node) từ tất cả các đoạn văn.

<!DOCTYPE html>
<html>
<head>
 <style>
    p { background:yellow; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p>
    Hello, <span>Person</span> <a href="javascript:;">and person</a>
</p>
<button>Call empty() on above paragraph</button>
<script>
 $("button").click(function () {
    $("p").empty();
 });
</script>
</body>
</html>

.detach()

Mô tả : Loại bỏ tập các phần tử so khớp từ DOM

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .detach()
    • Phiên bản được thêm vào : 1.0

Phương thức .detach() tương tự như .remove(), ngoại trừ .detach() giữ lại tất cả các jQuery data liên quan đến các phần tử được loại bỏ. Phương thức này rất hữu ích khi loại bỏ các phần tử và sau này sẽ chèn trở lại vào DOM.

Ví dụ : Tách tất cả các đoạn văn ra khỏi DOM

<!DOCTYPE html>
<html>
<head>
 <style>p { background:yellow; margin:6px 0; } p.off { background: black; }</style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Hello</p> 
    how are 
    <p>you?</p>
    <button>Attach/detach paragraphs</button>
<script>
    $("p").click(function(){
       $(this).toggleClass("off");
    });
    var p;
    $("button").click(function(){
       if ( p ) {
          p.appendTo("body");
          p = null;
       } else {
          p = $("p").detach();
       }
    });</script>
</body>
</html>

.unwrap()

Mô tả : Loại bỏ các cha (parents) của tập các phần tử so khớp từ DOM, dời các phần tử so khớp vào nơi của chúng.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .unwrap()
    • Phiên bản được thêm vào : 1.4

Phương thức .unwrap() loại bỏ các phần tử cha. Nó có tác dụng ngược lại với phương thức wrap(). Các phần tử so khớp ( và các anh em của chúng, nếu có) sẽ thay thế cha của chúng bên trong cấu trúc DOM.

Ví dụ : Wrap/unwrap (Bao bọc/hủy bao bọc) một thẻ div xung quanh mỗi đoạn văn

<!DOCTYPE html>
<html>
<head>
 <style>
    div { border: 2px solid blue; }
    p { background:yellow; margin:4px; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <button>wrap/unwrap</button>
   <p>Hello</p>
   <p>cruel</p>
   <p>World</p>
   <script>
      $("button").toggle(function(){
         $("p").wrap("<div></div>");
      }, function(){
         $("p").unwrap();
       });</script>
</body>
</html>

Phương thức sao chép phần tử DOM (DOM Copying)

.clone()

Mô tả : Tạo một sao chép sâu (deep copy) của tập các phần tử so khớp.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .clone([withDataAndEvents])
    • Tham số :
      • withDataAndEvents: giá trị Boolean true/false cho biết event handlers có được copy cùng với các phần tử hay không. Từ phiên bản jQuery 1.4, element data sẽ luôn được copy cùng.
    • Phiên bản được thêm vào : 1.0
  • .clone([withDataAndEvents][,deepWithDataAndEvents])
    • Tham số :
      • withDataAndEvents: giá trị Boolean true/false cho biết event handlers có được copy cùng với các phần tử hay không. Giá trị mặc định là false. Trong phiên bản 1.5.0, giá trị mặc định không chính xác là true, nó được đổi lại là false từ phiên bản 1.5.1 và cao hơn.
      • deepWithDataAndEvents: giá trị Boolean true/false cho biết event handlers và data của tất cả các phần tử con của phần tử được sao chép có được copy hay không. Mặc định giá trị của nó sẽ giống với giá trị của tham số đầu tiên (mặc định là false).
    • Phiên bản được thêm vào : 1.5

Phương thức .clone() thực hiện một sao chép sâu của tập các phần tử so khớp, có nghĩa là nó sẽ sao chép tập các phần tử so khớp cũng như tất cả các phần tử con cháu và text nodes của chúng. Khi sử dụng trong sự liên hợp với các phương thức chèn khác (insertion methods), phương thức .clone() là một cách rất tiện lợi để nhân đôi các phần tử trên một trang.

Xem xét tài liệu HTML sau:

<div class="container">
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>

Đoạn code bên dưới sử dụng phương thức .append() , thường được dùng khi một phần tử được chèn vào đâu đó trong DOM, nó sẽ được di chuyển từ vị trí cũ:

$('.hello').appendTo('.goodbye');

Kết quả là :

<div class="container">
   <div class="goodbye">
      Goodbye
      <div class="hello">Hello</div>
   </div>
</div>

Để ngăn ngừa điều này và thay vì phải tạo một bản sao của phần tử, bạn có thể viết như sau:

$('.hello').clone().appendTo('.goodbye');

Kết quả là :

<div class="container">
    <div class="hello">Hello</div>
    <div class="goodbye">
       Goodbye
       <div class="hello">Hello</div>
    </div>
</div>

Chú ý: Khi sử dụng phương thức .clone(), bạn có thể sửa đổi các phần tử được sao chép  và nội dung của chúng trước khi chèn/chèn lại chúng vào tài liệu.

Thông thường, mọi event handlers quy định bởi phần tử nguyên bản không được sao chép khi sử dụng clone. Tham số tùy chọn withDataAndEvents cho phép chúng ta có thể thay đổi hành vi này, và tất cả các event handlers cũng được gắn với bản sao mới của phần tử. Từ phiên bản jQuery 1.4, tất cả các element data ( được gắn bởi phương thức .data()) cũng được sao chép đến bản sao mới.

Tuy nhiên, các đối tượng và các mảng bên trong element data không được sao chép và sẽ tiếp tục được chia sẻ giữa phần tử được sao chép ( cloned element) và phần tử nguyên bản. Để sao chép sâu tất cả data, có thể thực hiện copy từng cái một cách thủ công:

// Original element with attached data
var $elem = $('#elem').data( "arr": [ 1 ] ), 
$clone = $elem.clone( true )
// Deep copy to prevent data sharing
.data( "arr", $.extend( [], $elem.data("arr") ) );

Từ phiên bản jQuery 1.5, tham số withDataAndEvents có thể được tùy chọn nâng cao với deepWithDataAndEvents để sao chép các events và data của tất cả các con của phần tử được sao chép.

Lưu ý: sử dụng .clone() sẽ thể có xảy ra lỗi trên trang khi có các phần tử trùng lặp thuộc tính id, cái mà được quy định là phải duy nhất. Do đó, một lời khuyên là nên tránh sao chép các phần tử có thuộc tính id hoặc có thể sử dụng thuộc tính class như là định danh để thay thế.

Ví dụ 1 : Sao chép tất cả các phần tử b và prepends chúng vào đầu tất cả các đoạn văn.

<!DOCTYPE html>
<html>
<head>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <b>Hello</b><p>, how are you?</p>
<script>
   $("b").clone().prependTo("p");
</script>
</body>
</html>

Ví dụ 2: Khi sử dụng .clone() để sao chép một tập hợp các phần tử không được gắn vào DOM, thứ tự của chúng khi chèn vào DOM là không được đảm bảo. Tuy nhiên,nó có thể được khắc phục như minh họa dưới đây:

<!DOCTYPE html>
<html>
<head>
 <style>
    #orig, #copy, #copy-correct {
       float: left;
       width: 20%;
    }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <div id="orig">
      <div class="elem"><a>1</a></div>
      <div class="elem"><a>2</a></div>
      <div class="elem"><a>3</a></div>
      <div class="elem"><a>4</a></div>
      <div class="elem"><a>5</a></div>
   </div>
   <div id="copy"></div>
   <div id="copy-correct"></div>
<script>
// sort order is not guaranteed here and may vary with browser 
$('#copy').append($('#orig .elem')
 .clone()
 .children('a')
 .prepend('foo - ')
 .parent()
 .clone()); 
// correct way to approach where order is maintained
$('#copy-correct')
 .append($('#orig .elem')
 .clone()
 .children('a')
 .prepend('bar - ')
 .end()); 
</script>
</body>
</html>

Các phương thức thao tác với các attributes nói chung (General Attributes)

Bao gồm:

  • .attr()
  • .removeAttr()
  • .prop()
  • .removeProp()
  • .val()

Các phương thức thao tác với attribute class (Class Attribute)

Bao gồm:

  • .addClass()
  • .removeClass()
  • .hasClass()
  • .toggleClass()

 

Categories: Web

jQuery Events – Các sự kiện của chuột

Các sự kiện của chuột gồm có :

  • .click()
  • .dbclick()
  • .focusin()
  • .focusout()
  • .hover()
  • .mousedown()
  • .mouseenter()
  • .mouseleave()
  • .mousemove()
  • .mouseout()
  • .mouseover()
  • .mouseup()
  • .toggle()

.click()

Mô tả : Phương thức .click() ràng buộc một event handler cho sự kiện click của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .click(handler(eventObject))
    • Tham số :
      • handler(eventObject): hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .click([eventData],handler(eventObject))
    • Tham số :
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject): hàm được thực thi mỗi khi sự kiện được kích hoạt.
    • Phiên bản được thêm vào : 1.4.3
  • .click()
    • Phiên bản được thêm vào : 1.0

Đây là cách gọi tắt của phương thức .bind(‘click’,handler) hoặc .on(‘click’,handler) ở jQuery 1.7 trong 2 dạng đầu và .trigger(‘click’) trong dạng thứ 3.

Sự kiện click sẽ được gửi đến 1 phần tử khi con trỏ chuột ở trên phần tử, và nút chuột được ấn và thả ra. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ, xem xét tài liệu HTML sau :

<div id="target">
    Click here
</div>
<div id="other">
    Trigger the handler
</div>

Sự kiện .click() có thể được gắn cho thẻ div có id=”target” như sau:

$("#target").click(function() {
    alert("Handler for .click() called.");
});

Bây giờ khi người dùng click vào phần tử này sẽ hiện lên thông báo:”Handler for .click called.”

Chúng ta cũng có thể kích hoạt sự kiện click của phần tử #target khi một phần tử khác được click bằng cách :

$("#other").click(function() {
    $("#target").click();
});

Khi đoạn code này được thực thi, người dùng click vào #other sẽ hiện lên thông báo: “Handler for .click called.”

Sự kiện click chỉ được kích hoạt sau một chuỗi chính xác các sự kiện sau:

  • Nút chuột được ấn trong khi con trỏ chuột nằm bên trong phần tử
  • Nút chuột được thả ra trong khi con trỏ chuột nằm bên trong phần tử

Đây là một chuỗi xự kiện nối tiếp đòi hỏi phải có trước khi nắm giữ một hành động click. Nếu không đủ tiêu chuẩn này thì sự kiện mousedown hoặc mouseup sẽ là phù hợp hơn.

Ví dụ 1: Ẩn các đoạn văn trên trang khi chúng được click vào

<html>
<head>
    <style>
        p { color:red; margin:5px; cursor:pointer; }
        p:hover { background:yellow; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <p>Yet one more Paragraph</p>
    <script>
         $("p").click(function () {
             $(this).slideUp();
         });
    </script>
</body>
</html>

Ví dụ 2: Kích hoạt sự kiện click trên tất cả các đoạn văn trên trang

$("p").click();

.dbclick()

Mô tả : Phương thức .dbclick() ràng buộc một event handler cho sự kiện dbclick của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về: đối tượng jQuery

Cú pháp:

  • .dbclick(handler(eventObject))
    • Tham số:
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.0
  • .dbclick([eventData],handler(eventObject))
    • Tham số:
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4.3
  • .dbclick()
    • Phiên bản được thêm vào: 1.0

Đây là cách gọi tắt của phương thức .bind(‘dbclick’,handler) trong 2 dạng đầu, và .trigger(‘dbclick’) trong dạng thứ ba.

Sự kiện dbclick sẽ được gửi đến 1 phần tử khi phần tử được double click. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ, xem xét tài liệu HTML sau:

<div id="target">
    Double-click here
</div>
<div id="other">
    Trigger the handler
</div>

Sự kiện .dbclick() có thể được gắn cho thẻ div có id =”target” như sau :

$("#target").dbclick(function() {
    alert("Handler for .dbclick() called.");
});

Bây giờ khi người dùng click vào phần tử này sẽ hiện lên thông báo : “Handler for .dbclick called.”

Để kích hoạt sự kiện bằng tay, hãy gọi .dbclick() không có tham số:

$("#other").click(function() {
    $("#target").dbclick();
});

Khi đoạn code này được thực thi, người dùng click (chỉ 1 click) vào #other sẽ hiện lên thông báo: “Handler for .dbclick called.”

Sự kiện dbclick chỉ được kích hoạt sau một chuỗi chính xác các sự kiện sau:

  • Nút chuột được ấn trong khi con trỏ nằm bên trong phần tử
  • Nút chuột được thả ra trong khi con trỏ nằm bên trong phần tử
  • Nút chuột được ấn một lần nữa trong khi con trỏ nằm bên trong phần tử  trong một khoảng thời gian cho phép tùy thuộc vào hệ thống
  • Nút chuột được thả ra trong khi con trỏ nằm bên trong phần tử

Sẽ là không khôn ngoan khi ràng buộc cả hai sự kiện click và dbclick cho cùng một đối tượng. Chuỗi các sự kiện nối tiếp nhau để kích hoạt sự kiện khác nhau giữa các trình duyệt trong việc phân 2 sự kiện click với 1 sự kiện dbclick. Độ nhạy của double click ( được tính bằng khoảng thời gian lớn nhất giữa hai lần click chuột mà được phát hiện là một lần double click) có thể khác nhau giữa các hệ thống và trình duyệt khác nhau và thường phụ thuộc vào cấu hình của người dùng.

Ví dụ 1: Hiển thị hộp thoại thông báo “Hello World!” khi click đúp vào mỗi đoạn văn trên trang

$("p").dblclick( function () { alert("Hello World!"); });

Ví dụ 2 : Click đúp để toggle màu nền

<!DOCTYPE html>
<html>
<head>
<style>
     div 
     { 
          background:blue;
          color:white;
          height:100px;
          width:150px;
     }
     div.dbl 
     { 
           background:yellow;color:black; 
     }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div></div>
    <span>Double click the block</span>
<script>
     var divdbl = $("div:first");
     divdbl.dblclick(function () { 
         divdbl.toggleClass('dbl'); 
     });
</script>
</body>
</html>

.focusin()

Mô tả : Phương thức .focusin() ràng buộc một event handler cho sự kiện “focusin”

Kiểu trả về : đối tượng jQuery

Cú pháp:

  • .focusin(handler(eventObject))
    • Tham số:
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào:1.4
  • .focusin([eventData],handler(eventObject))
    • Tham số:
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4.3

Đây là cách gọi tắt của phương thức .bind(‘focusin’,handler)

Sự kiện focusin sẽ được gửi đến 1 phần tử khi nó, hoặc bất kỳ phần tử nào bên trong nó nhận được focus. Đây là một điểm khác biệt so với sự kiện focus, cái mà hỗ trợ phát hiện sự kiện focus trên thành phần cha ( Nói theo một nghĩa khác là nó hỗ trợ sự kiện bong bóng).

Sự kiện này có thể sử dụng cùng với sự kiện focusout;

Ví dụ : Xem sự kiện focus xảy ra bên trong các đoạn văn trên trang

<!DOCTYPE html>
<html>
<head>
    <style>span {display:none;}</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p><input type="text" /> <span>focusin fire</span></p>
    <p><input type="password" /> <span>focusin fire</span></p>
<script>
     $("p").focusin(function() {
         $(this).find("span").css('display','inline').fadeOut(1000);
     });
</script>
</body>
</html>

.focusout()

Mô tả : Phương thức .focusout() ràng buộc một event handler cho sự kiện “focusout” của JavaScript

Kiểu trả về : đối tượng jQuery

Cú pháp:

  • .focusout(handler(eventObject))
    • Tham số:
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4
  • .focusout([eventData],handler(eventObject))
    • Tham số:
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4.3

Đây là cách gọi tắt của phương thức .bind(‘focusout’,handler)

Sự kiện focusout sẽ được gửi đến 1 phần tử khi nó, hoặc bất kỳ phần tử nào bên trong nó mất focus. Đây là một điểm khác biệt so với sự kiện blur, cái mà hỗ trợ phát hiện sự kiện mất focus trên thành phần cha ( nói theo một nghĩa khác là nó hỗ trợ sự kiện bong bóng).

Sự kiện này có thể sử dụng cùng với sự kiện focusin

Ví dụ : Xem sự kiện mất focus xảy ra bên trong các đoạn văn trên trang và ghi chú sự khác biệt giữa số lần focusout và số lần blur.

<!DOCTYPE html>
<html>
<head>
 <style>
    .inputs { float: left; margin-right: 1em; }
    .inputs p { margin-top: 0; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="inputs">
 <p>
     <input type="text" /><br />
     <input type="text" /> 
 </p>
 <p>
     <input type="password" />
 </p>
</div>
<div id="fo">focusout fire</div>
<div id="b">blur fire</div>
<script>
    var fo = 0, b = 0;
    $("p").focusout(function() {
        fo++;
        $("#fo")
        .text("focusout fired: " + fo + "x");
     }).blur(function() {
        b++;
        $("#b")
        .text("blur fired: " + b + "x");
     });
</script>
</body>
</html>

.hover()

Mô tả : Phương thức .hover() ràng buộc hai handler cho các phần tử so khớp, được thực thi khi con trỏ chuột đi vào và đi ra khỏi phần tử.

Kiểu trả về : đối tượng jQuery

Các dạng sử dụng của .hover():

  • .hover(handlerIn(eventObject), handlerOut(eventObject))
  • .hover(handlerInOut(eventObject))
.hover(handlerIn(eventObject), handlerOut(eventObject))
  • Tham số:
    • handlerIn(eventObject) : hàm được thực thi khi con trỏ chuột đi vào phần tử
    • handlerOut(eventObject) : hàm được thực thi khi con trỏ chuột đi ra khỏi phần tử
  • Phiên bản được thêm vào: 1.0

Phương thức .hover() ràng buộc handler cho cả hai sự kiện mouseenter và mouseleave. Bạn có thể sử dụng nó đơn giản là áp dụng hành vi cho một phần tử trong suốt khoảng thời gian con trỏ chuột nằm bên trong phần tử.

Cách gọi $(selector).hover(handlerIn,handlerOut) là dạng tắt cho : $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

Ví dụ 1: Thêm style cho list items khi nó đang được hover qua.

<!DOCTYPE html>
<html>
<head>
 <style>
     ul { margin-left:20px; color:blue; }
     li { cursor:default; }
     span { color:red; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <ul>
     <li>Milk</li>
     <li>Bread</li>
     <li class='fade'>Chips</li>
     <li class='fade'>Socks</li>
 </ul>
<script>
$("li").hover(
    function () {
        $(this).append($("<span> ***</span>"));
    }, 
    function () {
        $(this).find("span:last").remove();
    }
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>
</body>
</html>

Ví dụ 2: Thêm style cho các cột trong bảng khi nó được hover qua

$("td").hover(
    function () {
        $(this).addClass("hover");
    },
    function () {
        $(this).removeClass("hover");
    }
);

Ví dụ 3: Để bỏ ràng buộc trong ví dụ trên, bạn có thể viết :

$("td").unbind('mouseenter mouseleave');
.hover(handlerInOut(eventObject))
  • Tham số:
    • handlerInOut(eventObject) : hàm được thực thi khi con trỏ chuột đi vào hoặc đi ra khỏi phần tử
  • Phiên bản được thêm vào: 1.4

Phương thức .hover() khi chỉ được truyền vào một function, sẽ thực thi handler đó cho cả hai sự kiện mouseenter và mouseleave.Nó cho phép người dùng sử dụng các phương thức toggle (chuyển đổi) khác nhau của jQuery bên trong handler hoặc phản ứng khác nhau bên trong handler phụ thuộc vào event.type.

Cách gọi $(selector).hover(handlerInOut) là dạng tắt cho :
$(selector).bind(“mouseenter mouseleave”, handlerInOut);

Ví dụ : Slide ( trượt ) thẻ li anh em ruột tiếp theo lên hoặc xuống khi hover và chuyển đổi class.

<!DOCTYPE html>
<html>
<head>
    <style>
       ul { margin-left:20px; color:blue; }
       li { cursor:default; }
       li.active { background:black;color:white; }
       span { color:red; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <ul>
    <li>Milk</li>
    <li>White</li>
    <li>Carrots</li>
    <li>Orange</li>
    <li>Broccoli</li>
    <li>Green</li>
 </ul>
<script>
   $("li")
   .filter(":odd")
   .hide()
   .end()
   .filter(":even")
   .hover(
      function () {
          $(this).toggleClass("active")
          .next().stop(true, true).slideToggle();
      }
   );
</script>
</body>
</html>

.mousedown()

Mô tả: Phương thức .mousedown() ràng buộc một handler cho sự kiện “mousedown” của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về: đối tượng jQuery

Cú pháp:

  • .mousedown(handler(eventObject))
    • Tham số:
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.0
  • .mousedown([eventData],handler(eventObject))
    • Tham số:
      • eventData: Một sơ đồ dữ liệu được truyền vào event handler
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4.3
  • .mousedown()
    • Phiên bản được thêm vào: 1.0

Phương thức này là dạng tắt cho .bind(‘mousedown’,handler) ở 2 dạng đầu và .trigger(‘mousedown’) ở dạng thứ 3.

Sự kiện mousedown được gửi tới một phần tử khi con trỏ chuột ở trên nó, và nút chuột được ấn. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ có tài liệu HTML sau :

<div id="target">
    Click here
</div>
<div id="other">
    Trigger the handler
</div>

Sự kiện .mousedown có thể tác động đến phần tử div#target :

$('#target').mousedown(function() {
    alert('Handler for .mousedown() called.');
});

Khi ta click vào phần tử div#target sẽ hiện lên thông báo “ Handler for .mousedown() called.”

Để kích hoạt sự kiện này khi một phần tử khác được click :

$('#other').click(function() {
    $('#target').mousedown();
});

Khi đoạn code trên được thực thi, nếu click vào div#other sẽ hiện lên thông báo “ Handler for .mousedown called.”

Sự kiện mousedown được gửi đến phần tử mỗi khi nút chuột được click. Để chỉ tác động đến các nút cụ thể, chúng ta có thể sử dụng thuộc tính which của đối tượng sự kiện. Không phải tất cả các trình duyệt đều hỗ trợ thuộc tính này ( IE sử dụng button thay cho nó ), nhưng jQuery đã tiêu chuẩn hóa thuộc tính này do đó nó có thể an toàn để sử dụng trên mọi trình duyệt. Giá trị của which sẽ bằng 1 cho nút chuột trái, bằng 2 cho nút chuột giữa và bằng 3 cho nút chuột phải.

Sự kiện này chủ yếu hữu ích trong việc đảm bảo các nút chính được sử dụng để bắt đầu một hoạt động kéo. Nếu bỏ qua nó thì các kết quả lạ có thể xảy ra khi người dùng cố gắng sử dụng một trình đơn ngữ cảnh. Trong khi các nút giữa và phải có thể được phát hiện với những thuộc tính của nó, điều này là không đáng tin cậy. Ví dụ, trong Opera và Safari, click chuột phải mặc định sẽ không được phát hiện.

Nếu người dùng click vào một phần tử rồi kéo ra xa và nhả nút chuột thì nó vẫn được tính là một sự kiện mousedown. Các hành động tuần tự này được coi như việc ấn nút “Canceling” trên đa số các giao diện người dùng, do đó sẽ là tốt hơn nếu chúng ta sử dụng sự kiện “click” trừ khi chúng ta biết chắc rằng sự kiện mousedown là thích hợp hơn cho trường hợp cụ thể nào đó.

Ví dụ 1: Hiển thị text khi sự kiện mouseup và mousedown được kích hoạt.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p>Press mouse and release here.</p>
<script>
    $("p").mouseup(function(){
       $(this).append('<span style="color:#F00;">Mouse up.</span>');
    }).mousedown(function(){
       $(this).append('<span style="color:#00F;">Mouse down.</span>');
    });
</script>
</body>
</html>
Ví dụ 2: Hiển thị thông báo nút chuột được click : trái:1, giữa : 2, phải : 3
$("#MouseDown").mousedown(function (e) {
   alert(e.which);
});

.mouseup()

Mô tả : Phương thức .mouseup() ràng buộc một handler cho sự kiện “mouseup” trong javascript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .mouseup(handler(eventObject))
    • Tham số:
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào:1.0
  • .mouseup([eventData],handler(eventObject))
    • Tham số:
      • eventData: Một sơ đồ dữ liệu được truyền vào event handler
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4.3
  • .mouseup()
    • Phiên bản được thêm vào: 1.0

Phương thức này là dạng tắt cho .bind(‘mouseup’,handler) ở 2 dạng đầu và .trigger(‘mouseup’) ở dạng thứ 3.

Sự kiện mouseup được gửi tới một phần tử khi con trỏ chuột ở trên nó, và nút chuột được nhả ra. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ có tài liệu HTML sau :

<div id="target">
    Click here
</div>
<div id="other">
    Trigger the handler
</div>

Sự kiện .mouseup có thể tác động đến phần tử div#target :

$('#target').mouseup(function() {
 alert('Handler for .mouseup() called.');
});

Khi ta click vào phần tử div#target sẽ hiện lên thông báo “ Handler for .mouseup() called.”

Để kích hoạt sự kiện này khi một phần tử khác được click :

$('#other').click(function() {
    $('#target').mouseup();
});

Khi đoạn code trên được thực thi, nếu click vào div#other sẽ hiện lên thông báo “ Handler for .mouseup called.”

Nếu người dùng click bên ngoài một phần tử, kéo vào nó và nhả nút chuột ra thì nó vẫn được tính là một sự kiện mouseup. Các hành động tuần tự này không được coi như một việc ấn nút trên đa số các giao diện người dùng, do đó sẽ là tốt hơn nếu chúng ta sử dụng sự kiện “click” trừ khi chúng ta biết chắc rằng sự kiện mouseup là thích hợp hơn cho trường hợp cụ thể nào đó.

Ví dụ 1: Hiển thị text khi sự kiện mouseup và mousedown được kích hoạt.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Press mouse and release here.</p>
<script>
    $("p").mouseup(function(){
        $(this).append('<span style="color:#F00;">Mouse up.</span>');
    }).mousedown(function(){
        $(this).append('<span style="color:#00F;">Mouse down.</span>');
 });
</script>
</body>
</html>

.mouseenter()

Mô tả : Phương thức .mouseenter() ràng buộc một handler sẽ xảy ra khi con trỏ chuột đi vào một phần tử hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .mouseenter(handler(eventObject))
    • Tham số:
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.0
  • .mouseenter([eventData],handler(eventObject))
    • Tham số:
      • eventData: Một sơ đồ dữ liệu được truyền vào event handler
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4.3
  • .mouseenter()
    • Phiên bản được thêm vào : 1.0

Phương thức này là dạng tắt cho .bind(‘mouseenter’,handler) ở 2 dạng đầu và .trigger(‘mouseenter’) ở dạng thứ 3.

Sự kiện mouseenter của Javascript là độc quyền cho Internet Explorer.Vì tiện ích chung của sự kiện, jQuery đã  mô hình hóa sự kiện này để nó có thể được sử dụng trên mọi trình duyệt.

Sự kiện này được gửi đến một phần tử khi con trỏ chuột đi vào phần tử. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ có tài liệu HTML sau :

<div id="outer">
    Outer
    <div id="inner">
       Inner
    </div>
</div>
<div id="other">
    Trigger the handler
</div>
<div id="log"></div>

Sự kiện .mouseenter có thể tác động đến phần tử div#outer :

$('#outer').mouseenter(function() {
    $('#log').append('<div>Handler for .mouseenter() called.</div>');
});

Khi con trỏ chuột di chuyển qua div#outer, message sẽ được nối tiếp vào div#log

Để kích hoạt sự kiện này khi một phần tử khác được click :

$('#other').click(function() {
    $('#outer).mouseenter();
});

Khi đoạn code trên được thực thi, nếu click vào div#other, message sẽ được nối tiếp vào div#log

Sự kiện mouseenter khác sự kiện mouseover ở cách nó xử lý sự kiện bong bóng. Nếu sự kiện mouseover được sử dụng trong ví dụ này, khi con trỏ chuột di chuyển qua phần tử Inner, handler sẽ được kích hoạt. Thường thì đây là một hành vi không ai thích cả. Trong khi đó, sự kiện mouseenter chỉ kích hoạt handler của nó khi con trỏ chuột đi vào thành phần mà nó giới hạn, không bao gồm các con cháu. Do đó trong ví dụ này, handler sẽ được kích hoạt khi con trỏ chuột đi vào thành phần Outer mà không phải là thành phần Inner.

Ví dụ : Hiển thị text khi sự kiện mouseenter và mouseout được kích hoạt. Sự kiện mouseover vẫn xảy ra khi con trỏ chuột đi vào phần tử con, trong khi mouseenter chỉ xảy ra khi con trỏ chuột đi vào thành phần được giới hạn.

<html>
<head>
 <style>
    div.out {
        width:40%;
        height:120px;
        margin:0 15px;
        background-color:#D6EDFC;
        float:left;
   }
   div.in {
        width:60%;
        height:60%;
        background-color:#FFCC00;
        margin:10px auto;
   }
   p {
        line-height:1em;
        margin:0;
        padding:0;
   }
</style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div class="out overout">
        <p>move your mouse</p>
        <div class="in overout">
            <p>move your mouse</p>
            <p>0</p>
        </div>
        <p>0</p>
    </div>
    <div class="out enterleave">
        <p>move your mouse</p>
        <div class="in enterleave">
        <p>move your mouse</p>
        <p>0</p>
     </div>
        <p>0</p>
   </div>
<script>
    var i = 0;
    $("div.overout").mouseover(function(){
        $("p:first",this).text("mouse over");
        $("p:last",this).text(++i);
    }).mouseout(function(){
        $("p:first",this).text("mouse out");
    });
    var n = 0;
    $("div.enterleave").mouseenter(function(){
        $("p:first",this).text("mouse enter");
        $("p:last",this).text(++n);
    }).mouseleave(function(){
        $("p:first",this).text("mouse leave");
    });
</script>
</body>
</html>

.mouseover()

Mô tả : Phương thức .mouseover() ràng buộc một handler cho sự kiện “mouseover” của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .mouseover(handler(eventObject))
    • Tham số :
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .mouseover([eventData],handler(eventObject))
    • Tham số :
      • eventData: Một sơ đồ dữ liệu được truyền vào event handler
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.4.3
  • .mouseover()
    • Phiên bản được thêm vào : 1.0

Phương thức này là dạng tắt cho .bind(‘mouseover’,handler) ở 2 dạng đầu và .trigger(‘mouseover’) ở dạng thứ 3.

Sự kiện mouseover được gửi đến một phần tử khi con trỏ chuột đi vào phần tử. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ có tài liệu HTML sau :

<div id="outer">
    Outer
    <div id="inner">
        Inner
     </div>
</div>
<div id="other">
    Trigger the handler
</div>
<div id="log"></div>

Sự kiện .mouseover có thể tác động đến phần tử div#outer :

$('#outer').mouseover(function() {
    $('#log').append('<div>Handler for .mouseover() called.</div>');
});

Khi con trỏ chuột di chuyển qua div#outer, message sẽ được nối tiếp vào div#log
Để kích hoạt sự kiện này khi một phần tử khác được click :

$('#other').click(function() {
    $('#outer).mouseover();
});

Khi đoạn code trên được thực thi, nếu click vào div#other, message sẽ được nối tiếp vào div#log

Sự kiện mouseover có thể gây nhiều phiền toái do sự kiện bong bóng mà nó tạo ra.

Chẳng hạn như trong ví dụ trên, khi con trỏ chuột di chuyển qua phần tử div#inner thì một sự kiện mouseover sẽ được gửi đến nó, sau đó là div#outer và có thể kích hoạt handler mouseover của chúng ta tại những thời điểm không thích hợp. Giải pháp trong trường hợp này là bạn có thể sử dụng sự kiện mouseenter để thay thế.

Ví dụ : Hiển thị số lần sự kiện mouseover và mouseenter được kích hoạt. Sự kiện mouseover vẫn xảy ra khi con trỏ chuột đi vào phần tử con, trong khi mouseenter chỉ xảy ra khi con trỏ chuột đi vào thành phần được giới hạn.

<!DOCTYPE html>
<html>
<head>
 <style>
     div.out { width:40%; height:120px; margin:0 15px;
         background-color:#D6EDFC; float:left; }
     div.in { width:60%; height:60%; 
         background-color:#FFCC00; margin:10px auto; }
     p { line-height:1em; margin:0; padding:0; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div class="out overout">
        <span>move your mouse</span>
        <div class="in">
        </div>
    </div>
    <div class="out enterleave">
         <span>move your mouse</span>
         <div class="in">
         </div>
    </div>
<script>
    var i = 0;
    $("div.overout").mouseover(function() {
        i += 1;
        $(this).find("span").text( "mouse over x " + i );
        }).mouseout(function(){
            $(this).find("span").text("mouse out ");
    });
    var n = 0;
    $("div.enterleave").mouseenter(function() {
        n += 1;
        $(this).find("span").text( "mouse enter x " + n );
    }).mouseleave(function() {
        $(this).find("span").text("mouse leave");
    });
</script>
</body>
</html>

.mouseout()

Mô tả : Phương thức .mouseout() ràng buộc một handler cho sự kiện “mouseout” của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .mouseout(handler(eventObject))
    • Tham số :
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .mouseout([eventData],handler(eventObject))
    • Tham số :
      • eventData: Một sơ đồ dữ liệu được truyền vào event handler
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.4.3
  • .mouseout()
    • Phiên bản được thêm vào : 1.0

Phương thức này là dạng tắt cho .bind(‘mouseout’,handler) ở 2 dạng đầu và .trigger(‘mouseout’) ở dạng thứ 3.

Sự kiện mouseout được gửi đến 1 phần tử khi con trỏ chuột rời khỏi phần tử. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ có tài liệu HTML sau :

<div id="outer">
    Outer
    <div id="inner">
       Inner
    </div>
</div>
<div id="other">
    Trigger the handler
</div>
<div id="log"></div>

Sự kiện .mouseout có thể tác động đến phần tử div#outer :

$('#outer').mouseout(function() {
    $('#log').append('Handler for .mouseout() called.');
});

Khi con trỏ chuột đi ra khỏi div#outer, message sẽ được nối tiếp vào div#log

Để kích hoạt sự kiện này khi một phần tử khác được click :

$('#other').click(function() {
    $('#outer').mouseout();
});

Khi đoạn code trên được thực thi, nếu click vào div#other, message sẽ được nối tiếp vào div#log

Sự kiện .mouseout có thể gây nhiều phiền toán do sự kiện bong bóng mà nó tạo ra. Chẳng hạn trong ví dụ trên, khi con trỏ chuột đi ra khỏi phần tử Inner, một sự kiện mouseout sẽ được gửi đến nó, sau đó là Outer và có thể kích hoạt handler mouseout ở những thời điểm không thích hợp. Giải pháp trong trường hợp này là bạn có thể sử dụng mouseleave để thay thế.

Ví dụ: (Xem ví dụ ở phần mouseleave)

.mousemove()

Mô tả : Phương thức .mousemove() ràng buộc một handler cho sự kiện “mousemove” của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .mousemove(handler(eventObject))
    • Tham số :
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .mousemove([eventData],handler(eventObject))
    • Tham số :
      • eventData: Một sơ đồ dữ liệu được truyền vào event handler
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.4.3
  • .mousemove()
    • Phiên bản được thêm vào : 1.0

Phương thức này là dạng tắt cho .bind(‘mousemove’,handler) ở 2 dạng đầu và .trigger(‘mousemove’) ở dạng thứ 3.

Sự kiện mousemove được gửi đến 1 phần tử khi con trỏ chuột di chuyển bên trong phần tử. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ có tài liệu HTML sau :

<div id="target">
    Move here
</div>
<div id="other">
    Trigger the handler
</div>
<div id="log"></div>

Sự kiện .mousemove có thể tác động đến phần tử div#target:

$("#target").mousemove(function(event) {
    var msg = "Handler for .mousemove() called at ";
    msg += event.pageX + ", " + event.pageY;
    $("#log").append("<div>" + msg + "</div>");
});

Khi con trỏ chuột di chuyển bên trong div#target, message sẽ được nối tiếp vào div#log

Handler for .mousemove() called at (399, 48)
Handler for .mousemove() called at (398, 46)
Handler for .mousemove() called at (397, 44)
Handler for .mousemove() called at (396, 42)

Để kích hoạt sự kiện này khi một phần tử khác được click :

$("#other").click(function() {
    $("#target").mousemove();
});

Handler cho việc gọi .mousemove là (undefined,undefined)

Khi theo dõi sự di chuyển của chuột, bàn thường cần phải biết vị trí thực tế của con trỏ chuột. Đối tượng sự kiện được truyền vào handler bao gồm một số thông tin về tọa độ chuột. Các thuộc tính (properties) chẳng hạn như .clientX,.offsetX và .pageX là luôn có giá trị nhưng có thể khác nhau giữa các trình duyệt. Thật may mắn là jQuery đã chuẩn hóa thuộc tính .pageX và .pageY để nó có thể được sử dụng trong tất cả các trình duyệt. Những thuộc tính này cung cấp tọa độ X và Y của con trỏ chuột so với góc trên – trái của tài liệu như là được minh họa trong ví dụ trên .

Hãy ghi nhớ rằng sự kiện mousemove được kích hoạt bất cứ khi nào con trỏ chuột di chuyển, thận chí đối với từng pixel. Điều này có nghĩa là hàng trăm sự kiện có thể được tạo ra trong 1 khoảng thời gian rất ngắn. Nếu handler phải thực hiện các xử lý quan trọng hoặc nhiều handler cho một sự kiện đã tồn tại, nó có thể gây ảnh hưởng nghiêm trọng đến hiệu năng trên trình duyệt. Do đó rất quan trọng phải tối ưu handler mousemove hết sức có thể, và tránh dùng nó trừ khi thực sự cần thiết.
Một mô hình phổ biến là bind handler mousemove từ bên trong một handler mousedown, và unbind nó từ một handler mouseup tương ứng. Nếu thực thi các sự kiện tuần tự này, hãy nhớ rằng sự kiện mouseup có thể được gửi tới một phần tử HTML khác với mousemove. Để tính toán việc này, handler mouseup cần gắn vào một phần tử cấp cao trong cây DOM, chẳng hạn như <body> .

Ví dụ : Hiển thị tọa độ chuột khi con trỏ chuột di chuyển qua thẻ div. Các tọa độ liên quan đến cửa sổ, trong trường hợp này là iframe.

<!DOCTYPE html>
<html>
<head>
 <style>
    div { width:220px; height:170px; margin: 10px 50px 10px 10px;
        background:yellow; border:2px groove; float:right; }
    p { margin:0; margin-left:10px; color:red; width:220px;
        height:120px; padding-top:70px;
        float:left; font-size:14px; }
    span { display:block; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>
       <span>Move the mouse over the div.</span>
    <span>&nbsp;</span>
    </p>
    <div></div>
<script>
    $("div").mousemove(function(e){
       var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
       var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
       $("span:first").text("( e.pageX, e.pageY ) : " + pageCoords);
       $("span:last").text("( e.clientX, e.clientY ) : " + clientCoords   );
   });
</script>
</body>
</html>

.toggle()

Mô tả : Phương thức .toggle() ràng buộc hai hoặc nhiều handler cho các phần tử so khớp và được thực thi khi click luân phiên nhau.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .toggle(handler(eventObject),handler(eventObject)[,handler(eventObject)])
    • Tham số :
      • handler (eventObject) : hàm được thực thi mỗi khi số lần ckick vào phần tử là chẵn
      • handler(eventObject) : hàm được thực thi mỗi khi số lần ckick vào phần tử là chẵn
      • handler(eventObject) : Một handler thêm để quay vòng đến cùng sau khi click
    • Phiên bản được thêm vào : 1.0

Ghi chú : jQuery cũng cung cấp một phương thức hoạt cảnh tên là .toggle() để xỏ chốt sự tính nhìn thấy được của các phần tử. Trong bất cứ trường hợp nào , hoạt cảnh hay phương thức sự kiện được xảy ra phụ thuộc vào tập các tham số được truyền vào.
Phương thức .toggle() ràng buộc một handler cho sự kiện click, bởi vậy nguyên tắc vạch ra cho các kích hoạt click ở đây là rất tốt.

Ví dụ có tài liệu HTML sau :

<div id="target">
    Click here
</div>
    Sự kiện .toggle có thể tác động đến phần tử div: 
    $('#target').toggle(function() {
       alert('First handler for .toggle() called.');
    }, function() {
       alert('Second handler for .toggle() called.');
    });

Khi phần tử được click lặp lại nhiều lần thì message sẽ xen kẽ là :

First handler for .toggle() called.
Second handler for .toggle() called.
First handler for .toggle() called.
Second handler for .toggle() called.
First handler for .toggle() called.

Nếu có nhiều hơn 2 handler được cung cấp, phương thức toggle sẽ thực hiện vòng quanh tất cả chúng. Ví dụ nếu có 3 handler thì handler thứ nhất sẽ được gọi ở lần click đầu tiên, thứ tư, thứ 7, … và cứ tiếp tục quy luật như vậy.

Phương thức toggle được cung cấp để tạo ra sự thuận tiện.

Phương thức toggle được cung cấp để tạo ra sự thuận tiện. Nó tương đối đơn giản để thực hiện hành vi tương tự bằng tay, và nó là cần thiết nếu các giả thiết được xây dựng vào .toggle() tỏ ra có giới hạn. Ví dụ, .toggle() không được đảm bảo để làm việc chính xác nếu áp dụng 2 lần trên cùng một phần tử. Vì .toggle() nội tại sử dụng một handler click để làm công việc của mình, chúng ta có thể unbind click để loại bỏ một hành vi được gắn với .toggle(), do đó các handler click khác có thể bị xung đột. Sự thực thi cũng gọi phương thức .preventDefault() trong sự kiện, do đó liên kết sẽ không được tuân theo và nút bấm sẽ không được click nếu phương thức .toggle() được gọi trên phần tử.

Ví dụ 1: Click để chuyển đổi trạng thái highlight trên list item

<!DOCTYPE html>
<html>
<head>
    <style>
        ul { margin:10px; list-style:inside circle; font-weight:bold; }
        li { cursor:pointer; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <ul>
        <li>Go to the store</li>
        <li>Pick up dinner</li>
        <li>Debug crash</li>
       <li>Take a jog</li>
    </ul>
<script>
    $("li").toggle(
       function () {
          $(this).css({"list-style-type":"disc", "color":"blue"});
       },
       function () {
          $(this).css({"list-style-type":"disc", "color":"red"});
    },
    function () {
       $(this).css({"list-style-type":"", "color":""});
    }
 );
</script>
</body>
</html>
Categories: Web