[Học jQuery] Các hàm xử lý HTML trong jQuery – Phần 1

Tiếp nối bài viết danh sách các Selector hay dùng trong jQuery, Hoàng An xin chia sẻ nội dung tiếp theo trong chuỗi bài học jQuery.

Chúng ta cùng tìm hiểu các hàm xử lý HTML trong jQuery

Hàm add()

Hàm add() sẽ thêm các thành phần vào thành phần đã có để thực hiện hành động nào đó. Các thành phần thêm vào có thể là Selector, thẻ HTML, Object hoặc context (this)

Trường hợp 1: Hàm add(selector)

 $('div').add('p').css('border','1px solid red'); 

Trường hợp này cả thẻ div và thẻ p phải có sẵn, hàm add() sẽ tạo ra object để cùng thực hiện hàm css()

Trường hợp 2: Hàm add(html)

$('div').add('<p class="test">Test Text</p>').appendTo('body');

Trường hợp này thẻ div có sẵn, còn thẻ p kia được tạo thông qua hàm add() và cùng thực hiện add vào thẻ body

Trường hợp 3: Hàm add (Object)

$('div').add($('p').css('color','red')).css('border','1px solid red');

Trường hợp này thẻ div và p có sẵn, kết quả thẻ p sẽ có màu đỏ, thẻ div và thẻ p có cùng viền đỏ

Trường hợp 4: Hàm add(selector, context)

$('div').click(function() {
$('div').add('p',this).addClass('item');
});

Trường hợp này, thẻ p sẽ nằm trong thẻ div. Khi click vào thẻ div thì thẻ p và div sẽ được add class là “item”