Selecting Element in jQuery

Xin chào tất cả mọi người, hôm nay mình sẽ giơi thiệu sơ qua về cách selecting element trong jQuery. Mình thấy có rất nhiều bạn sử dụng các cách thông thường như select theo class hay theo id và thêm một vài selecting form như :checked, :disable, :enable,... Do vậy, hôm nay mình sẽ tổng hợp các cách selecting thường hay sử dụng trong thực tế.

 $("#myId")

 $(".myClass")

chắc các bạn khá quen với hai cách selecting trên, cái đầu tiên là selecting by Id, và cái thứ hai là selecting by Class. ví dụ ta có đoạn HTML

    <h1>text A</h1>
	<h1 id="Id1" class="myClass class1" >text B</h1>
	<h1 id="Id2" class="myClass class2" >text C</h1>
	<h2 id="Id3" class="myClass class1" >text D</h2>
	<h2 id="Id4" class="myClass class2" >text E</h2>

chúng ta có thể select theo tên thẻ h1 hoặc h2

    $("h1")

hay chúng ta có thể select theo id

    $("#Id1")

hoặc cũng có thể theo class

    $(".myClass")
    $(".class1")
    $(".class2")

hoặc cũng có thể select chồng, như vừa là thẻ h1 và có class là class1

    $("h1.class1")

Ngoài ra, chúng ta cũng có thể gộp hai nhóm select bằng dấu ","
ví dụ mình muốn select đối tượng h1 class1 và đối tượng h2 class2

    $("h1.class1, h2.class2")

OK, trên đây là selecting với thẻ và 2 thuộc tính cơ bản là class và id

Vậy với các thẻ đã có cùng thuộc tính class và id thì chúng ta sẽ select kiểu gì?
Chúng ta sẽ select kèm theo các attributes

Chúng ta hãy theo dõi ví dụ dưới đây

    <h1 class="banner" >text A</h1>
	<h1 class="banner" name>text B</h1>
    <h1 class="banner" name="job_name">text C</h1>
	<h1 class="banner" name="job_description">text D</h1>
	<h1 class="banner" name="h_banner">text E</h1>
	<h1 class="banner" name="b_banner">text F</h1>

giờ chúng ta có thể
select theo class

    $(".banner")

select class mà có trường name(kể cả trường name không có giá trị gì)

    $(".banner[name]")

select class mà có trường name bắt đầu bằng bằng chữ "job"

    $(".banner[name^='job']")

select class mà có trường name và trường name có chứa kí tự "b"

    $(".banner[name*='b']")

select class mà có trường name và trường name có đoạn kết thúc là "banner"

    $(".banner[name$='banner']")

Và giờ, nếu các attributes cũng giống nhau thì sao?
Vậy chúng ta có thể sử dụng Psedo-select để chỉ ra đối tượng mình muốn

    //the first element class banner
    $(".banner:first")

    //the last element class banner
    $(".banner:last")

    //lấy từ phẩn tử thứ 3 trở đi
    $(".banner.gt(2)")

    //lấy phần tử ở vị trí lẻ
    $(".banner:even")

    //lấy phần tử ở vị trí chẵn
    $(".banner:odd")

ngoài ra còn các thuộc tính để kiểm tra sử dụng trong form như :checked đối với checkbox, :selected đối với các form select , :disable, :enable,...

lưu ý: Mình thấy mọi người hay select đến từng đối tượng để update các thuộc tính CSS hay Attributes, vậy chúng ta nên làm thế nào để có thể select được đối tượng mình cần?
Theo mình thấy, jQuery có các hàm loop rất hay như map hay each, và điều đặc biệt là khi gán vào function thì mỗi phần tử đều được gán vào biến $(this), và chúng ta hoàn toàn có thể sử dụng biến $(this) một cách vô cùng linh hoạt. Chúng ta hãy xem ví dụ dưới đây:

    <form id="registration">
		<label>Name</label>
		<input type="text" name="name">
		<label>Email</label>
		<input type="text" name="email">
		<label>Address</label>
		<input type="text" name="address">
	</form>

bây giờ chúng ta muốn toàn bộ các chữ label có màu đỏ thì chúng ta nên làm thế nào?

    $("form#registration label").css("color", "red")

vậy bây giờ chúng ta muốn label của name có màu xanh chuối thì sao? Chúng ta có 3 cách để select:

    //chỉ định trực tiếp phần tử label đầu tiên của mảng
    $("#registration label:first").css("color", "green")

    //load mảng label ra vả chỉ định phần tử đầu tiên
    $("#registration label").eq(0).css("color", "green")

    //tìm kiếm input có attributes name có kí tự name rùi tìm ra label của nó
    $("#registration input[name*='name']").prev().css("color", "green")

Theo quan điểm của mình thì nên dùng cách thứ 3 vì đối với các hệ thống như rails thì attributes name của input là dạng text được format theo kiểu #{model_name}_#{attributes_name} nên rất thuận tiện cho select.

Kết luận

selecting element là một công cụ select vô cùng mạnh mẽ của jQuery, nó giúp chúng ta dễ dàng chỉ ra được điều mình muốn đưa ra đối sách hợp lý để dễ dàng tối ưu và tái sử dụng code và nó giúp chúng ta có một cái nhiều sâu hơn về giao diện hay cách thức tương tác của các thẻ, các phẩn tử trong HTML và từ HTML đến với CSS

Do còn thiếu kinh nghiệm nên bài viết còn sơ sài và thiếu tính tập trung và thực dụng, rất mong nhận được góp ý từ các bạn qua hòm mail minhld1709@gmail.com

Xin hẹn gặp lại các bạn ở bài viết sau về hai công cụ loop là map và each với biến $(this)

Xin cảm ơn, Xin chào và hẹn gặp lại

Thank so much for reading!