.change()

Định nghĩa và sử dụng

  • .change(): Xác định một thành phần đã được thay đổi.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.change()

$('input').change();
  • Đã được thêm vào từ phiên bản 1.4.3

.change(function(){})

$('input').change(function(){});

.change()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('input').change(function() {
        $('span').text('Trường nhập đã được thay đổi');
    });
    
    $('button').click(function(){
         $('input').change();
    });
});
</script>
</head>

<body>
<input class="textField" type="text" value="Text" /> <span></span><br>
<button>Button</button>
</body>
</html>

Hiển thị trình duyệt:

Không thay đổi giá trị của input, chỉ cần focus và sau đó click button ta sẽ thấy kết quả, do khi click ta đã khai báo input đã thay đổi.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<input class="textField" type="text" value="Text" /><span></span><br> <button>Button</button>

<input class="textField" type="text" value="Text" /><span>Trường nhập đã được thay đổi</span><br>
<button>Button</button>
</div>

.change(function(){})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('input').change(function() {
        $('span').text('Trường input đã được thay đổi');
    });
    
    $('select').change(function() {
        $('span').text('Trường select đã được thay đổi');
    });
    
    $('textarea').change(function() {
        $('span').text('Trường textarea đã được thay đổi');
    });
});
</script>
</head>

<body>
<input class="textField" type="text" value="Text" />
<select class="select">
<option value="option01" selected="selected">Option01</option>
<option value="option02">Option02</option>
</select>
<textarea cols="25" rows="5">Textarea field</textarea><br>
<span></span>
</body>
</html>

Hiển thị trình duyệt:

Thay đổi giá trị của một trong các trường sau đó click ra ngoài để thấy kết quả.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<input class="textField" type="text" value="Text" />
<select class="select">
<option value="option01" selected="selected">Option01</option>
<option value="option02">Option02</option>
</select>
<textarea cols="25" rows="5">Textarea field</textarea><br>
<span></span>

<input class="textField" type="text" value="Text" />
<select class="select">
<option value="option01" selected="selected">Option01</option>
<option value="option02">Option02</option>
</select>
<textarea cols="25" rows="5">Textarea field</textarea><br>
<span>Trường input đã được thay đổi</span> <span>Trường select đã được thay đổi</span> <span>Trường textarea đã được thay đổi</span>

.blur()

.children()