selector trong jquery

http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Selector jQuery Thư viện jQuery khai thác sức mạnh CSS (Cascading Style Sheets) Selector để giúp truy cập nhanh dễ dàng tới phần tử nhóm phần tử DOM Một jQuery Selector hàm mà sử dụng Expression để tìm so khớp phần tử từ DOM sở tiêu chuẩn cho Theo cách đơn giản, bạn nói rằng, Selector sử dụng để chọn nhiều phần tử HTML sử dụng jQuery Khi phần tử chọn, thực hoạt động đa dạng phần tử chọn Hàm sở $() jQuery Factory Function dịch hàm sở tơi, nơi thứ tạo jQuery Selector bắt đầu với ký hiệu đô la cặp dấu ngoặc đơn $() Hàm sở $() sử dụng ba khối chọn phần tử tài liệu cho STT Selector & Miêu tả Tag Name Biểu diễn tên thẻ có sẵn DOM Ví dụ: $('p') chọn tất đoạn văn phần tử Tag ID Biểu diễn tên thẻ có sẵn với ID cho DOM Ví dụ $('#some-id') chọn tất phần tử đơn tài liệu mà có ID some-id Tag Class Biểu diễn thẻ có sẵn với lớp cho DOM Ví dụ $('.some-class') chọn tất phần tử tài liệu mà có lớp some-class Tất mục sử dụng kết hợp với Selector khác Tất jQuery Selector xây dựng qui tắc ngoại trừ số “mẹo” (Tweaking) http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Ghi − Hàm sở $() đồng nghĩa với hàm jQuery() Vì trường hợp bạn sử dụng thư viện JavaScirpt khác xuất xung đột đây, bạn đổi ký hiệu $ thành jQuery bạn sử dụng hàm jQuery() thay cho hàm$() Ví dụ Sau ví dụ đơn giản sử dụng Tag Selecor Nó chọn tất phần tử vởi tên thẻ p thiết lập màu thành “yellow” The jQuery Example $(document).ready(function() { $("p").css("background-color", "yellow"); });

This is a paragraph.

This is second paragraph.

This is third paragraph.

Nó cho kết sau: Cách sử dụng Selector jQuery? Selector hữu ích cần yêu cầu bước sử dụng jQuery Chúng nhận phần tử xác bạn muốn từ tài liệu HTML bạn Bảng sau liệt kê Selector giải thích chúng ví dụ bạn click link tương ứng: STT Selector & Miêu tả Name Chọn tất phần tử mà so khớp với phần tử có Name cho #ID Chọn phần tử đơn mà so khớp với ID cho Class http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Chọn tất phần tử mà so khớp với Class cho Universal (*) Chọn tất phần tử có sẵn DOM Multiple Elements E, F, G Chọn kết tổ hợp từ tất chọn E, F G cho Ví dụ Selector jQuery Tương tự với cú pháp ví dụ trên, ví dụ sau giúp bạn hiểu thêm loại khác Selector hữu ích khác STT Selector & Miêu tả $('*') Selector chọn tất phần tử tài liệu $("p > *") Selector chọn tất phần tử mà phần tử đoạn văn $("#specialID") Hàm Selector nhận phần tử với id= "specialID" $(".specialClass") Selector nhận tất phần tử mà có class specialClass $("li:not(.myclass)") Chọn tất phần tử so khớp thẻ

mà khơng có class="myclass" $("a#specialID.specialClass") Selector so khớp liên kết với id specialID class specialClass $("p a.specialClass") http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Selector so khớp liên kết với class specialClass khai báo phần tử

$("ul li:first") Selector nhận phần tử

phần tử

$("#container p") Chọn tất phần tử so khớp

mà phần tử có id làcontainer 10 $("li > ul") Chọn tất phần tử so khớp

mà phần tử
• so khớp 11 $("strong + em") Chọn tất phần tử so khớp mà theo sau phần tử anh so khớp 12 $("p ~ ul") Chọn tất phần tử so khớp
  mà theo sau phần tử anh so khớp

  13 $("code, em, strong") Chọn tất phần tử so khớp or 14 $("p strong, myclass") Chọn tất phần tử so khớp mà phần tử so khớp

  tất phần tử mà có class myclass 15 $(":empty") Chọn tất phần tử mà khơng có phần tử 16 $("p:empty") http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Chọn tất phần tử so khớp

  mà khơng có phần tử 17 $("div[p]") Chọn tất phần tử so khớp mà chứa phần tử so khớp

  18 $("p[.myclass]") Chọn tất phần tử so khớp

  mà chứa phần tử với class làmyclass 19 $("a[@rel]") Chọn tất phần tử so khớp mà có thuộc tính rel 20 $("input[@name=myname]") Chọn tất phần tử so khớp mà có giá trị name xác tương đương với myname 21 $("input[@name^=myname]") Chọn tất phần tử so khớp mà có giá trị tên bắt đầu vớimyname 22 $("a[@rel$=self]") Chọn tất phần tử so khớp mà có giá trị thuộc tính rel kết thúc làself 23 $("a[@href*=domain.com]") Chọn tất phần tử so khớp mà có giá trị href chứa domain.com 24 $("li:even") Chọn tất phần tử so khớp

  • mà có giá trị mục even 25 $("tr:odd") Chọn tất phần tử so khớp mà có giá trị mục odd 26 $("li:first") http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Chọn phần tử
  • 27 $("li:last") Chọn phần tử
  • cuối 28 $("li:visible") Chọn tất phần tử so khớp
  • mà visible (nhìn thấy) 29 $("li:hidden") Chọn tất phần tử so khớp
  • mà hidden (ẩn) 30 $(":radio") Chọn tất nút radio Form 31 $(":checked") Chọn tất hộp thoại checked Form 32 $(":input") Chỉ chọn phần tử form (input, select, textarea, button) 33 $(":text") Chỉ chọn phần tử text (input[type=text]) 34 $("li:eq(2)") Chọn phần tử
  • thứ ba 35 $("li:eq(4)") Chọn phần tử
  • thứ năm 36 $("li:lt(2)") Chọn tất phần tử so khớp
  • trước phần tử thứ hai; nói cách khác, chọn hai phần tử
  • 37 $("p:lt(3)") http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Chọn tất phần tử so khớp

    trước phần tử thứ tư; nói cách khác, chọn ba phần tử

    38 $("li:gt(1)") Chọn tất phần tử so khớp

  • sau phần tử thứ hai 39 $("p:gt(2)") Chọn tất phần tử so khớp

    sau phần tử thứ ba 40 $("div/p") Chọn tất phần tử so khớp

    mà phần tử so khớp 41 $("div//code") Chọn tất phần tử so khớp mà phần tử so khớp 42 $("//p//a") Chọn tất phần tử so khớp mà phần tử so khớp

    43 $("li:first-child") Chọn tất phần tử so khớp

  • mà phần tử cha 44 $("li:last-child") Chọn tất phần tử so khớp
  • mà cuối phần tử cha 45 $(":parent") Chọn tất phần tử mà cha phần tử khác, bao gồm text 46 $("li:contains(second)") Chọn tất phần tử so khớp
  • mà chứa văn second http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Bạn sử dụng tất Selector với phần tử HTML/XML theo cách chung Ví dụ, Selector $("li:first") làm việc cho phần tử
  • đó, $("p:first") làm việc cho phần tử

      http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     ... dụ Selector jQuery Tương tự với cú pháp ví dụ trên, ví dụ sau giúp bạn hiểu thêm loại khác Selector hữu ích khác STT Selector & Miêu tả $('*') Selector chọn tất phần tử tài liệu $("p > *") Selector. .. Nó cho kết sau: Cách sử dụng Selector jQuery? Selector hữu ích cần yêu cầu bước sử dụng jQuery Chúng nhận phần tử xác bạn muốn từ tài liệu HTML bạn Bảng sau liệt kê Selector giải thích chúng ví... − Hàm sở $() đồng nghĩa với hàm jQuery( ) Vì trường hợp bạn sử dụng thư viện JavaScirpt khác xuất xung đột đây, bạn đổi ký hiệu $ thành jQuery bạn sử dụng hàm jQuery( ) thay cho hàm$() Ví dụ Sau