.before()

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

.before(): Chèn nội dung, di chuyển thành phần vào ngay trước mỗi thành phần đã có.

Cấu trúc

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

$('div').before('<p>nội dung thêm vào</p>');
$('div').before($('h3'));

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

.before(function(index){...})

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

.before(nội dung)

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(){
    $('div').before('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

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

Ban đầu nội dung chỉ có thành phần div, nhưng khi sử dụng before thì ngay trước thành phần div được thêm thành phần <p>nội dung thêm vào</p>.

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

Trước khi có jQuery	Sau khi có jQuery
<div>Thành phần div</div>	<p>nội dung thêm vào</p> <div>Thành phần div</div>

Ví dụ thêm

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(){
    $('div').before($('h3'));
});
</script>
</head>

<body>
<div>
<h3>thành phần h3</h3>
<p>thành phần p</p>
</div>
</body>
</html>

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

Ban đầu thành phần h3 nằm trong thành phần div, nhưng khi sử dụng before thì thành phần h3 được di chuyển ngay trước thành phần div.

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

Trước khi có jQuery	Sau khi có jQuery
<div> <h3>thành phần h3</h3> <p>thành phần p</p> </div>	<h3>thành phần h3</h3> <div> <p>thành phần p</p> </div>

.before(function(index){...})

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(){
    $('div').before(function() {
        return '<p>' + this.className + '</p>';
    });
});
</script>
</head>

<body>
<div class="test01">thành phần div 01</div>
<div class="test02">thành phần div 02</div>
</body>
</html>

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

Với cách sử dụng function như trên, ta đã thêm ngay trước mỗi thành phần div lần lượt là thành phần p với nội dung được lấy từ tên class của thành phần div.

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

Trước khi có jQuery	Sau khi có jQuery
<div class="test01">thành phần div 01</div> <div class="test02">thành phần div 02</div>	<div class="test01">thành phần div 01</div> <p>test01</p> <div class="test02">thành phần div 02</div> <p>test02</p>

.attr()

.bind()