Sử dụng Thuộc tính và Đặc tính của Phần tử

Thuộc tính là những đặc tính nội tại của đối tượng JavaScript, mỗi thuộc tính chứa tên và giá trị.

Đặc tính được sử dụng để mô tả các giá trị được thiết lập trong thẻ của phần tử DOM.

Trình duyệt sẽ đọc và phân tích cú pháp thẻ của phần tử để tạo ra một đối tượng JavaScript thể hiện phần tử đó trong DOM. Các đặc tính được thu thập vào một danh sách được lưu trong thuộc tính attributes của đối tượng phần tử DOM. Ngoài việc lưu trữ đặc tính trong danh sách, mỗi đối tượng DOM còn được gán nhiều thuộc tính, bao gồm một số thuộc tính mô tả các đặc tính trong thẻ phần tử. Giá trị đặc tính không chỉ tồn tại trong thuộc tính attributes mà còn tồn tại trong một số thuộc tính khác.

Thao tác với Thuộc tính Phần tử

Các phương thức truy cập phần tử đơn trong tập hợp đã đóng gói:

• Chỉ mục mảng: $(something)[0]
• get(), toArray()
• each(), map()
• eq(), bộ lọc :eq
• Qua hàm gọi lại của một số phương thức (như not() và filter()), các phần tử trong tập hợp đóng gói sẽ làm ngữ cảnh cho hàm gọi lại.

$('*').each(function (index) {
    this.id = this.tagName + index
})

Lấy Giá trị Đặc tính

attr(name)

Đặc tính tùy chỉnh: HTML5 coi các đặc tính bắt đầu bằng data- là đặc tính tùy chỉnh.

Tên đặc tính trong attr không phân biệt chữ hoa/thường.

attr sử dụng tên đặc tính được chuẩn hóa: cellspacing, class, colspan, cssFloat, float, for, frameborder, maxlength, readonly, rowspan, styleFloat, tabindex, usemap.

Thiết lập Giá trị Đặc tính

attr(name, value)

$('*').attr('title', function (index, prevValue) {
    return prevValue + ' Tôi là phần tử ' + index + ' và tên của tôi là ' + (this.id || 'chưa thiết lập')
})

attr(attributes)

$('input').attr(
    { value: '', title: 'Vui lòng nhập một giá trị' }
)

Trình duyệt IE không cho phép sửa đổi các đặc tính name và type của phần tử input.

Xóa Giá trị Đặc tính

removeAttr(name)

Các Ví dụ Hữu ích

1. Ép mở liên kết trong cửa sổ mới

   $('a[href^="http://"]').attr('target', '_blank')

2. Giải quyết việc gửi dữ liệu kép

   $('form').submit(function () {
       $(':submit', this).attr('disabled', 'disabled')
   })

Đặc tính disabled tồn tại có nghĩa là phần tử được đặt ở trạng thái bị vô hiệu hóa. Bạn có thể xóa đặc tính này, hoặc sử dụng phương thức attr() để đặt đặc tính disabled thành false để vô hiệu hóa phần tử.

Lưu trữ Dữ liệu Tùy chỉnh trên Phần tử

data(name, value)

data(name)

removeData(name)

Thay đổi Phong cách Phần tử

Thêm và Xóa Tên Lớp

addClass(names)

removeClass(names)

toggleClass(names)

Ví dụ: Chuyển đổi hiệu ứng hiển thị giữa các phần tử

function hoanDoiHieuUng() {
    $('tr').toggleClass('soc')
}
$(function(){
    $('table tr:nth-child(even)').addClass('soc')
    $('table').mouseover(hoanDoiHieuUng).mouseout(hoanDoiHieuUng)
})

toggleClass(names, switch)

hasClass(name)

Lấy và Thiết lập Phong cách

css(name, value)

$('div.khoi').css('width', function (i, width) {
    return width + 30
})

css(properties)

Có thể sử dụng hàm làm giá trị cho các thuộc tính css để xác định giá trị sẽ được áp dụng.

css(name)

1. Lấy và thiết lập kích thước: width(value); height(value) width(); height() tính toán và trả về kích thước của phần tử. innerHeight(); innerWidth(); outerHeight(margin); outerWidth(margin)
2. Định vị và Cuộn trang: offset() position() scrollLeft(); scrollLeft(value); scrollTop(); scrollTop(value)

Thiết lập Nội dung Phần tử

Thay thế HTML hoặc Nội dung Văn bản

html(); html(content)

text(); text(content)

Di chuyển và Sao chép Phần tử

append(content)

$('p').append('<i>một số văn bản</i>')
$('p.den').append($('.denToi'))

prepend(content)

before(content)

after(content)

appendTo(targets)

prependTo(targets)

insertBefore(targets)

insertAfter(targets)

Bao bọc và Bỏ bao bọc Phần tử

wrap(wrapper)

wrapAll(wrapper)

wrapInner(wrapper)

unwrap()

Xóa Phần tử

remove(selector)

detach(selector)

empty()

Sao chép Phần tử

clone(copyHandlers)

$('img').clone().appendTo('fieldset.anh')
$('ul').clone().chenTruoc('#day')
$('ul').clone().chenTruoc('#day').end().an()

Thay thế Phần tử

replaceWith(content)

$('img[alt]').each(function () {
    $(this).replaceWith('<span>' + $(this).attr('alt') + '</span>')
})

replaceAll(selector)

Xử lý Giá trị Phần tử Biểu mẫu

Phần tử biểu mẫu là những phần tử xuất hiện bên trong biểu mẫu, có các thuộc tính name và value, và khi gửi biểu mẫu, giá trị của chúng sẽ được gửi dưới dạng tham số yêu cầu HTTP đến máy chủ. Các phần tử biểu mẫu điển hình như: input, select, textarea

val()

$('[name="nhomRadio"]:duocChon').val()

var giaTriCheckbox = $('[name="nhomCheckbox"]:duocChon').map(
    function () { return $(this).giaTri() }
).toArray()

val(value)

val(values)

$('input,select').val(['mot', 'hai', 'ba'])