Các cách sử dụng jQuery để thao tác với các phần tử DOM trên trang web

// Chọn phần tử có id là "my-element"
var $myElement = $('#my-element');

// Chọn tất cả các phần tử li trong phần tử có id là "my-list"
var $listItems = $('#my-list li');

// Chọn tất cả các phần tử đầu tiên của mỗi phần tử ul trong trang web
var $firstItems = $('ul').find('li:first');

// Thay đổi nội dung của phần tử có id là "my-element"
$myElement.text('New content');

// Thay đổi nội dung của tất cả các phần tử li trong phần tử có id là "my-list"
$listItems.text('New item');

// Thay đổi nội dung của tất cả các phần tử đầu tiên của mỗi phần tử ul trong trang web
$firstItems.html('<strong>New content</strong>');

// Thay đổi thuộc tính "src" của phần tử có id là "my-image"
$('#my-image').attr('src', 'new-image.jpg');

// Thay đổi thuộc tính "disabled" của phần tử có id là "my-button"
$('#my-button').prop('disabled', true);

// Thêm lớp "highlight" vào phần tử có id là "my-element"
$('#my-element').addClass('highlight');

// Xóa lớp "active" khỏi tất cả các phần tử a trong phần tử có id là "my-menu"
$('#my-menu a').removeClass('active');

// Xử lý sự kiện click trên phần tử li trong phần tử có id là "my-menu"
$('#my-menu li').click(function() {
$('#my-dropdown').toggleClass('open');
});

// Thay đổi chiều rộng của phần tử có id là "my-element"
$('#my-element').width(200);

// Thay đổi độ cao của phần tử có id là "my-element"
$('#my-element').height(100);

// Thay đổi thuộc tính CSS "background-color" của phần tử có id là "my-element"
$('#my-element').css('background-color', 'red');

// Thay đổi vị trí tuyệt đối của phần tử có id là "my-element"
$('#my-element').css('position', 'absolute').css('left', '100px').css('top', '50px');