NộI Dung
- Học những điều cơ bản
- Bộ chọn thuần hóa
- Bộ chọn bộ nhớ đệm
- Tìm hiểu các bộ chọn nâng cao
- Sử dụng bộ chọn với các biểu mẫu
- Tìm hiểu thêm
Tôi tình cờ nghe được nhận xét này từ một nhà phát triển mà tôi làm việc cùng ngày hôm trước: "Nếu bạn không thể chọn nó, bạn không thể làm việc với nó". Nghe có vẻ giống như một trong những câu nói triết học Viễn Đông cổ điển mà bạn có thể áp dụng vào cuộc sống hàng ngày, nhưng tôi biết trong trường hợp này cô ấy đang nói về các bộ chọn trong thư viện jQuery Javascript rất phổ biến.
Bộ chọn của jQuery là nơi bạn thường tiếp xúc với thư viện lần đầu tiên. Những người đã làm việc với CSS nhiều sẽ thấy các bộ chọn của jQuery rất quen thuộc vì jQuery sử dụng rộng rãi cú pháp của CSS cho các bộ chọn. Những người khác ít quen thuộc với phát triển CSS chắc chắn sẽ học được điều gì đó mới mẻ về cả bộ chọn jQuery và CSS.
Trong bài viết này, tôi sẽ chỉ cho bạn cú pháp bộ chọn của jQuery, cách tối ưu hóa bộ chọn jQuery và cách áp dụng các kết hợp bộ chọn nâng cao hơn cho các phần tử đánh dấu của bạn. Hãy bắt đầu hành trình với những kiến thức cơ bản về công cụ chọn jQuery.
Học những điều cơ bản
Đối tượng jQuery (thường thấy nhất là $ ()) được sử dụng để bao bọc một mảng các phần tử dựa trên các bộ chọn được sử dụng. Ví dụ $ (’Div.content p’) sẽ bao bọc tất cả các đoạn văn là con của các div có một lớp nội dung vào một đối tượng jQuery duy nhất. Sau khi được bọc, mảng đối tượng có thể có các phương thức jQuery (và JavaScript) được áp dụng cho nó.
Nếu bạn đang chọn một mục theo id, sẽ chỉ có một đối tượng trong mảng.
ul id = "list"> li id = "itemOne"> First Item / li> li id = "itemTwo"> Second Item / li> li id = "itemThree"> Third Item / li> li id = "itemFour"> Mục thứ tư / li> / ul>
$ (’# ItemThree’) chỉ chọn mục danh sách thứ ba và itemThree sẽ là phần tử duy nhất trong mảng đối tượng jQuery cho bộ chọn này.
Trong nhiều thiết kế trang web, id không được gán cho các phần tử trong một trang web. Nếu đúng như vậy, làm thế nào bạn có thể chọn một phần tử cụ thể như đã trình bày ở trên? Hãy xem danh sách này:
ul id = "list"> li> Mục đầu tiên / li> li> Mục thứ hai / li> li> Mục thứ ba / li> li> Mục thứ tư / li> / ul>
Sử dụng $ (’Li: eq (2)’) sẽ nhận được mục danh sách thứ ba (lưu ý rằng đếm các mục mảng trong JavaScript, và do đó jQuery, bắt đầu từ 0). Mặc dù tôi ghét phải nhầm lẫn về những thứ như thế này, nhưng bạn cũng nên biết rằng $ (’Li: nth-child (3)’) cũng sẽ nhận được phần tử. Tại sao nth-child () bắt đầu đếm ở 1? Đó là do CSS là cái được gọi là '1-indexed' và bộ chọn nth-child () được sinh ra trong thế giới CSS, không phải JavaScript.
Nếu bạn có nhiều danh sách trong trang web của mình, bạn sẽ cần phải cụ thể hơn với bộ chọn nếu bạn đang cố gắng đối sánh một mục trong một danh sách. Trong trường hợp của danh sách được minh họa, bạn có thể sử dụng $ (’# List li: eq (2)’) hoặc là $ (’# List li: nth-child (3)’) để có được mục thứ ba.
Bạn có thể bao bọc nhiều phần tử dưới dạng một mảng trong đối tượng jQuery bằng cách sử dụng số nhận dạng nhóm như thẻ HTML hoặc tên lớp trong bộ chọn. Sử dụng $ ('. Nội dung') sẽ tập hợp tất cả các phần tử HTML có một lớp nội dung vào một mảng đối tượng jQuery. Tương tự như vậy, $ (’P’) sẽ gói tất cả các đoạn trong tài liệu thành một đối tượng jQuery duy nhất.
Bộ chọn thuần hóa
Một trong những điều bạn thực sự cần biết khi sử dụng jQuery là các bộ chọn được đọc từ phải sang trái bởi công cụ chọn jQuery, Sizzle (John Resig, sizzlejs.com). Điều này có nghĩa là các bộ chọn dài sẽ tốn nhiều tài nguyên hơn và có thể mất thêm thời gian để thực hiện. Hãy xem đánh dấu HTML sau:
div id = "section1"> ul> li id = "first"> One / li> li id = "second"> Two / li> li id = "third"> Three / li> / ul> div> p> Bacon ipsum dolor sit amet salami ball tip ngắn thăn đùi ... / p> / div> / div> div id = "section2"> ul> li id = "one"> One / li> li id = "two"> Two / li> li id = "three"> Three / li> / ul> div> p> Bacon ipsum dolor sit amet salami ball tip short thăn đùi ... / p> / div> / div>
Đây là một ví dụ khá nổi trội nhưng nếu bạn muốn chọn mục danh sách thứ hai trong danh sách thứ hai, bạn có thể sử dụng công cụ chọn jQuery:
$ (’. Container .selection li: nth-child (2)’)
Về cơ bản, công cụ chọn jQuery cho biết: "Đầu tiên hãy tìm tất cả các mục trong danh sách là con thứ hai. Sau đó, xem chúng có được chứa trong một lớp được gọi là vùng chọn hay không. Sau đó, hãy kiểm tra xem vùng chọn đó có phải là con của vùng chứa không. Nếu bạn có nhiều của các mục được lồng tương tự nhau, điều này có thể tạo ra nhiều chi phí vì jQuery phải duyệt qua cây DOM (Mô hình đối tượng tài liệu) mỗi khi bộ chọn được sử dụng. Tốt hơn hết là càng cụ thể càng tốt và trong trường hợp này, bạn chỉ có thể sử dụng id của mục danh sách trong bộ chọn của bạn, $ (’# Ba’).
Các bộ chọn có số nhận dạng phần tử có khoảng cách giữa chúng còn được gọi là bộ chọn con. Bộ chọn được sử dụng sẽ tìm tất cả các con của vùng chứa lớp có lớp được lựa chọn, bất kể vùng chọn cây DOM ở mức độ nào. Nếu bạn muốn đảm bảo rằng vùng chọn là con trực tiếp của vùng chứa, bạn sẽ viết bộ chọn theo cách này:
$ (’. Container> .selection li: nth-child (2)’)
Ký hiệu lớn hơn sẽ buộc công cụ lựa chọn đảm bảo rằng các phần tử có lựa chọn lớp là con cháu trực tiếp của những mục có vùng chứa lớp.
Bộ chọn bộ nhớ đệm
Có thể có lúc bạn phải sử dụng một bộ chọn dài dòng hoặc bạn có thể cần phải sử dụng một bộ chọn cụ thể nhiều lần. Một ví dụ thực sự tốt về điều này là khi bạn đang làm việc với các bảng chứa đầy dữ liệu cần được xử lý. Một cách dễ dàng để tối ưu hóa hành động là lưu vào bộ đệm đối tượng bộ chọn jQuery bằng cách chứa nó trong một biến:
var cell7 = $ (’table tr td: nth-child (7));
Sau đó, bạn có thể sử dụng biến đó nhiều lần để thao tác phần tử:
cell7.css (’font-weight’, ’bold’); cell7.each (function () {var newValue = $ (this) .html () + 3,14; $ (this) .html (newValue);});
Vì biến có chứa đối tượng được bao bọc, bạn sẽ không cần duyệt lại DOM để lấy dữ liệu cho bộ chọn đó.
Với sự hiểu biết về các bộ chọn jQuery cơ bản, đã đến lúc chuyển trọng tâm của bạn sang một số cú pháp bộ chọn nâng cao hơn.
Tìm hiểu các bộ chọn nâng cao
Ưu điểm tuyệt vời mà jQuery cung cấp so với nhiều thư viện JavaScript là khả năng sử dụng cùng một bộ chọn được sử dụng trong CSS, bất kể bộ chọn phức tạp đến mức nào. Các bộ chọn giả kiểu CSS có sẵn cho bạn cũng như các bộ chọn thuộc tính.
Các bộ chọn thuộc tính trong jQuery cung cấp chức năng giống như biểu thức chính quy và thậm chí có thể được kết hợp theo những cách cung cấp chức năng có điều kiện. Tôi sẽ sử dụng khối đánh dấu HTML này để chứng minh:
div> Tam giác đỏ / div> div> Tam giác xanh lam / div> div> Tam giác xanh lục / div> div> Hình vuông xanh / div> div> Hình vuông tím / div> div> Hình vuông vàng / div> div> Vòng tròn đỏ / div> div > Vòng tròn màu vàng / div> div> Vòng tròn / div màu cam>
Nếu bạn muốn chọn các div có lớp "bắt đầu bằng" màu vàng, bạn sẽ sử dụng ký hiệu ^ (carat):
$ (’Div [class ^ =" yellow "]’)
Làm thế nào về việc chọn tất cả các mục có các lớp bắt đầu bằng màu vàng HOẶC có tam giác lớp?
$ (’Div [class ^ =" yellow "], [class =" tam giác "]’)
Ở đây (dấu ngã) biểu thị rằng bộ chọn thuộc tính sẽ tìm kiếm các mục trong đó lớp "chứa từ" hình tam giác. Bằng cách phân tách các bộ chọn thuộc tính bằng dấu phẩy, bạn đang cung cấp điều kiện HOẶC cho tìm kiếm. Nếu bạn xóa dấu phẩy, điều kiện AND sẽ được gọi và sẽ không trả về bất kỳ đối tượng nào vì không có phần tử nào có lớp "tam giác màu vàng". Bạn có thể tiếp tục liên kết các bộ chọn thuộc tính với nhau khi làm việc với jQuery.
Các bộ chọn thuộc tính jQuery sẽ hoạt động với bất kỳ thuộc tính HTML nào được công nhận. Các bộ chọn này cung cấp cho bạn sức mạnh để truy xuất các phần tử dựa trên giá trị của thuộc tính bằng cách áp dụng các bộ lọc cho chúng. Bạn có thể tìm hiểu thêm về các bộ chọn thuộc tính bằng cách truy cập api.jquery.com/category/selectors/attribute-selectors/.
(Nếu bạn muốn chơi với các bộ chọn thuộc tính, tôi đã thiết lập một mẫu mà bạn có thể thao tác và chạy tại jsfiddle.net).
Sử dụng bộ chọn với các biểu mẫu
Bạn có thể sử dụng các bộ chọn thuộc tính của jQuery để làm việc với các biểu mẫu và các loại bộ chọn này thường hoàn hảo để đạt được một hiệu ứng cụ thể, chẳng hạn như xóa biểu mẫu sau khi nó được gửi:
$ (’Input [type =” text ”]’). Val (’’);
Nếu bạn muốn xóa các yếu tố đầu vào khác, bạn có thể đặt các định nghĩa thuộc tính bổ sung vào bộ chọn:
$ (’Input [type =” text ”], [type =” number] ’). Val (’ ’);
Hãy cẩn thận, mặc dù! Tôi đã thấy nhiều nhà phát triển sử dụng bộ chọn sau và tự hỏi tại sao biểu mẫu, các nút và tất cả của họ lại trống:
$ (’Input’). Val (’’);
Tất cả các giá trị đầu vào của biểu mẫu sẽ bị xóa, bao gồm cả văn bản trên bất kỳ phần tử gửi hoặc đặt lại nào có trong biểu mẫu. Đó là một bài học hay khi trở nên cụ thể với các bộ chọn jQuery của bạn.
Sẽ có lúc bạn muốn các bộ chọn chuyên dụng làm việc với các phần tử biểu mẫu. Bạn có thể dùng :đã kiểm tra bộ chọn giả để chọn tất cả các hộp kiểm được chọn và :đầu vào bộ chọn giả để gói tất cả các đầu vào trong một biểu mẫu. Hãy sử dụng biểu mẫu sau làm ví dụ:
form name = "myForm" method = "post"> label for = "username"> Name / label> input type = "text" name = "username" /> br /> label for = "userstreet"> Street / label> input type = "text" name = "userstreet" /> br /> label for = "usercity"> City, State & Zip / label> input type = "text" name = "usercity" /> input type = "text" name = "userstate" size = "2" /> input type = "text" name = "userzip" /> br /> label for = "subscribertype"> Loại / nhãn người đăng ký> select name = "subscribertype"> giá trị tùy chọn = "3"> 3 Tháng / tùy chọn> giá trị tùy chọn = "6"> 6 Tháng / tùy chọn> giá trị tùy chọn = "12"> 12 Tháng / tùy chọn> / chọn> br /> nhãn cho = "useremail"> E-Mail / label> input type = "text" name = "useremail" /> br /> label for = "userphone"> Phone / label> input type = "text" name = "userphone" /> br /> label> Liên hệ Ưu tiên / label> Loại đầu vào E-Mail = "hộp kiểm" name = "useemail" ĐÃ KIỂM TRA /> Loại đầu vào điện thoại = "hộp kiểm" name = "usephone" /> br /> loại đầu vào = "submit" value = "Submit" /> / hình thức>
Sử dụng $ (’Form [name =" myForm "] input: check’) sẽ bao bọc đầu vào bằng hộp kiểm có thuộc tính CHECKED. Nếu bạn muốn chọn tất cả đầu vào từ biểu mẫu của mình và đó là biểu mẫu duy nhất trên trang, bạn có thể sử dụng $ (’: Input’).
Tìm hiểu thêm
Bây giờ, bạn đã học được cú pháp của bộ chọn jQuery và biết các cách để kết hợp và kết nối các bộ chọn của thư viện jQuery, bạn đang trên đường bắt đầu thêm jQuery vào các dự án web của mình.
Để thực sự trau dồi kỹ năng jQuery của mình, tôi khuyên bạn nên dành một chút thời gian nghiên cứu nhiều bộ chọn có sẵn cho thư viện. Bạn có thể làm như vậy trên trang web jQuery tại api.jquery.com/category/selectors/.
