jQuery :header Selector - Chọn những phần tử là tiêu đề

views

A+A-

PrintEmail

Sử dụng bộ chọn jQuery :header Selector để chọn ra những phần tử là header (tiêu đề) chẳng hạn như h1, h2, h3, h4, h5. h6. Cú pháp của bộ chọn này như thế nào, và cách sử dụng chúng có gì đặc biệt?

Cú pháp, Khái niệm và cách sử dụng jQuery :header Selector

Syntax

Bộ chọn jQuery :header Selector có cú pháp

$(":header")

Nếu chọn kết hợp với bộ chọn khác. Các bạn sẽ sử dụng cú pháp

$("selector :header")

Trong đó selector là bộ chọn khác, và phải có khoảng trắng trước :header, các bạn không nên viết dính liền thành selector:header, như vậy jQuery sẽ không hiểu nhé.

Bộ chọn :header chọn tất cả các phần tử là các thẻ header như h1 h2 h3h4 h5 h6

Ví dụ jQuery :header Selector

Ví dụ

Chọn tất cả những phần tử là header

$(":header")

Thử code »

Hoặc có thể bạn xem ví dụ ở đây.
Ví dụ: Bạn có HTML như sau:

<div id='example'>
<h1>Thẻ Header H1</h1>
<span>Đây là một đoạn văn span</span>
<h2>Thẻ Header H2</h2>
<h3>Thẻ Header H3</h3>
<span>Đây là một đoạn văn span</span>
<h4>Thẻ Header H4</h4>
<h5>Thẻ Header H5</h5>
<h6>Thẻ Header H6</h6>
<h7>Thẻ Header H7</h7>
</div>

Bấm button sau để chọn những phần tử là header trong thẻ div có id="example" để set background thành màu vàng

Thẻ Header H1

Đây là một đoạn văn span

Thẻ Header H2

Thẻ Header H3

Đây là một đoạn văn span

Thẻ Header H4

Thẻ Header H5

Thẻ Header H6

Thẻ Header H7

Và đây là code jQuery bạn phải viết:

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#example :header").css("background-color", "yellow");
  });
});
</script>

Xem thêm bài viết Tất cả bộ chọn jQuery Selectors tại đây

Chuyên Mục : Bộ chọn jQuery Học jQuery jQuery Selectors