Thực đơn
trang chủMicrosoft

Jquery chọn các phần tử có tên không đầy đủ. Bộ chọn và bộ lọc jQuery. Thu hẹp tập hợp thành các phần tử có phần tử con cụ thể

Lưu trang này để kiểm tra các ví dụ dưới đây.

Trong hầu hết các trường hợp, làm việc với jQuery được thực hiện theo hai bước, theo cùng một mẫu:

    Bước đầu tiên là sử dụng hàm $() để chọn tập hợp thành phần trang ban đầu phù hợp với tiêu chí lựa chọn nhất định, được trả về dưới dạng đối tượng jQuery chứa chúng;

    và thứ hai là thực hiện một hoặc nhiều thao tác trên mỗi phần tử của tập hợp, dẫn đến việc tạo ra tập hợp cuối cùng.

Trong bài viết này, chúng tôi sẽ tập trung vào giai đoạn đầu tiên. Chúng ta sẽ xem xét các phương thức jQuery cho phép bạn quản lý tập hợp đã chọn và điều chỉnh thành phần của nó theo chính xác nhiệm vụ cụ thể. Thông thường, họ bắt đầu từ một tập hợp các phần tử được chọn trước nhất định, tác động đến việc họ đảm bảo rằng chỉ còn lại những phần tử thực sự cần thiết trong đó.

Mở rộng tập lựa chọn

Phương thức add() cho phép bạn thêm vào một đối tượng jQuery hiện có yếu tố bổ sung. Các tùy chọn khác nhau Các cuộc gọi đến phương thức này được đưa ra trong bảng dưới đây:

Giống như nhiều phương thức jQuery, phương thức add() trả về một đối tượng jQuery có thể được sử dụng để gọi các phương thức khác, bao gồm cả các lệnh gọi tiếp theo đến phương thức add(). Một ví dụ về việc sử dụng phương thức add() để mở rộng tập hợp được tìm thấy trước đó được đưa ra dưới đây:

$(function() ( var labelElems = document.getElementsByTagName("label"); var jq = $("img"); $("img:even").add("img").add(jq) .add (labelElems).css("viền", "đỏ dày gấp đôi"); ));

Kịch bản này sử dụng ba cách tiếp cận để thêm các phần tử vào tập hợp ban đầu: sử dụng bộ chọn khác, sử dụng các đối tượng HTMLElement và sử dụng một đối tượng jQuery khác. Đã xây dựng đúng bộđồ vật, chúng ta gọi phương pháp css(), thiết lập thuộc tính của chúng ý nghĩa biên giới, đảm bảo rằng các dòng chữ được bao quanh bởi các khung được vẽ bằng các đường đôi dày, như trong hình:

Thu hẹp tập hợp các mục đã chọn

Có một số phương pháp cho phép bạn xóa các phần tử khỏi tập hợp hiện có. Của họ Mô tả ngắn thể hiện trong bảng dưới đây. Mỗi phương thức này trả về một đối tượng jQuery mới chứa một tập hợp các phần tử được rút gọn. Đối tượng jQuery mà phương thức được gọi vẫn không thay đổi:

Phương pháp lọc phần tử Mô tả phương pháp
eq(chỉ số) Loại trừ tất cả các phần tử khỏi một tập hợp ngoại trừ phần tử tại chỉ mục đã chỉ định
bộ lọc (điều kiện) Loại bỏ các phần tử khỏi tập hợp không đáp ứng một điều kiện cụ thể. Miêu tả cụ thể Các loại đối số hợp lệ được đưa ra dưới đây
Đầu tiên() Xóa tất cả các phần tử khỏi một tập hợp ngoại trừ phần tử đầu tiên
has(), has(jQuery),
có(HTMLElement),
có(HTMLElement) 		Loại trừ khỏi tập hợp các phần tử không có phần tử con khớp với bộ chọn hoặc đối tượng jQuery đã chỉ định hoặc phần tử con không bao gồm đối tượng được chỉ định Phần tử HTML
cuối cùng() Loại bỏ tất cả các phần tử khỏi một tập hợp ngoại trừ phần tử cuối cùng
không (điều kiện) Loại trừ khỏi một tập hợp tất cả các phần tử thỏa mãn một điều kiện đã chỉ định
lát (bắt đầu, kết thúc) Loại bỏ khỏi một tập hợp tất cả các phần tử có chỉ mục nằm ngoài phạm vi đã chỉ định
Thu hẹp tập hợp thành một phần tử

Các phương thức đơn giản nhất có thể được sử dụng để giảm tập hợp các phần tử được chọn là các phương thức first() , Last() và eq() . Ba phương thức này cho phép bạn chọn một phần tử cụ thể dựa trên vị trí của nó trong tập hợp các phần tử có trong đối tượng jQuery. Một ví dụ tương ứng được đưa ra dưới đây:

$(function() ( var jq = $("label"); // chọn phần tử đầu tiên và tác động đến nó jq.first().css("border", "thick double red"); // chọn phần tử cuối cùng và ảnh hưởng đến nó jq.last().css("border", "thick double green"); // chọn một phần tử có chỉ mục được chỉ định và ảnh hưởng đến nó jq.eq(2).css("border", "thick double đen" "); jq.eq(-2).css("viền", "đen dày gấp đôi"); ));

Lưu ý rằng phương thức eq() được gọi hai lần. Nếu đối số là dương, việc đếm chỉ mục bắt đầu ở phần tử đầu tiên trong tập hợp có trong đối tượng jQuery. Nếu đối số là âm, các chỉ số sẽ được tính vào hướng ngược lại, bắt đầu từ phần tử cuối cùng. Kết quả của script được hiển thị trong hình:

Thu hẹp tập hợp thành các phần tử có chỉ số thuộc một phạm vi nhất định

Nếu bạn chỉ muốn giữ lại các phần tử trong tập hợp đã chọn có chỉ số thuộc một phạm vi nhất định, hãy sử dụng phương thức slice(). Một ví dụ tương ứng được đưa ra dưới đây:

$(function() ( var jq = $("label"); jq.slice(0, 2).css("border", "dày đôi màu đen"); jq.slice(4).css("border" , "màu đỏ đậm đặc"); ));

Phương thức slice() lấy giá trị chỉ mục bắt đầu và kết thúc làm đối số. Các chỉ mục được tính từ 0 và phần tử mà chỉ mục cuối cùng tương ứng không được đưa vào tập kết quả. Do đó, đối số 0 và 2 tương ứng với việc lựa chọn hai phần tử đầu tiên.

Nếu đối số thứ hai bị bỏ qua thì việc chọn các phần tử sẽ tiếp tục cho đến hết tập hợp hiện có. Do đó, việc sử dụng đối số duy nhất 4 cho bộ sáu phần tử tương ứng với việc chọn hai phần tử cuối cùng (được lập chỉ mục 4 và 5). Kết quả được thể hiện trong hình:

Lọc các phần tử

Phương thức filter() cho phép bạn đặt điều kiện. Các phần tử không thỏa mãn điều kiện đã chỉ định sẽ bị loại khỏi tập hợp. Tùy chọn có thể sử dụng phương thức filter(), tương ứng theo nhiều cách khác nhauđiều kiện thiết lập được mô tả trong bảng dưới đây:

Một ví dụ về việc sử dụng tất cả bốn tùy chọn để chỉ định các đối số của phương thức filter() được đưa ra dưới đây:

$(function() ( // lựa chọn các phần tử, theo giá trị thuộc tính src// chứa chuỗi "astor" $("img").filter("").css("border", "thick double red"); // chọn phần tử chứa chuỗi "daffodil" var jq = $(""); $("nhãn").filter(jq).css("color", "blue"); // chọn các phần tử là phần tử được chỉ định var elem = document.getElementsByTagName("label"); $("nhãn").filter(elem).css("font-size", "1.5em"); // lọc các phần tử bằng hàm $("img").filter(function(index) ( return this.getAttribution("src").indexOf("peony.png") > -1 || index == 5; ) ).css("viền", "đỏ đậm") ));

Ba phương pháp đầu tiên không yêu cầu bất kỳ lời giải thích đặc biệt nào. Chúng xác định các bộ lọc bằng cách sử dụng bộ chọn, một đối tượng jQuery khác và một đối tượng HTMLElement. Kỹ thuật thứ tư, dựa trên việc sử dụng hàm, yêu cầu giải thích thêm.

Hàm do jQuery cung cấp được thực thi một lần cho mỗi phần tử của tập hợp có trong đối tượng jQuery. Nếu hàm này trả về true thì phần tử được gọi vẫn nằm trong tập hợp. Nếu giá trị trả về là sai thì phần tử sẽ bị xóa khỏi tập hợp. Hàm lấy một đối số duy nhất - chỉ mục của phần tử mà nó được gọi. Ngoài ra, biến này được đặt để trỏ đến đối tượng HTMLElement hiện tại đang được xử lý. TRONG trong ví dụ này true được trả về khi thuộc tính src hoặc chỉ mục phần tử có các giá trị được chỉ định.

Phương thức not() hoạt động tương tự như phương thức filter() nhưng đảo ngược quá trình lọc. Các tùy chọn có thể có để gọi phương thức not() cũng tương tự như gọi phương thức filter().

Thu hẹp tập hợp thành các phần tử có phần tử con cụ thể

Phương thức has() có thể được sử dụng để chỉ giữ trong tập lựa chọn những phần tử có phần tử con cụ thể, được chỉ định bởi bộ chọn hoặc bởi một hoặc nhiều đối tượng HTMLElement. Một ví dụ về việc sử dụng phương thức has() được đưa ra dưới đây:

$(function() ( $("div.dcell").has("img").css("border", "màu đỏ đặc đậm"); var jq = $(""); $("div.dcell ").has(jq).css("viền", "màu xanh đậm đặc"); ));

Trong trường hợp này, các thành viên không có con nhất định sẽ bị loại khỏi tập hợp đã chọn. Trong trường hợp đầu tiên, khi sử dụng bộ chọn, các phần tử không có bất kỳ phần tử con img nào có thuộc tính src bằng astor sẽ bị xóa khỏi tập hợp. Trong trường hợp thứ hai, khi sử dụng đối tượng jQuery, điều tương tự cũng xảy ra với các phần tử không có phần tử con nào có giá trị thuộc tính for chứa chữ cái p. Kết quả của script được hiển thị trong hình:

Chuyển đổi tập lựa chọn

Phương thức map() cung cấp một cách linh hoạt để sử dụng một đối tượng jQuery để tạo một đối tượng khác. Một hàm được truyền dưới dạng đối số cho phương thức map(). Hàm này được gọi cho từng phần tử có trong đối tượng nguồn jQuery và các đối tượng HTMLElement mà nó trả về được bao gồm trong đối tượng jQuery thu được.

Một ví dụ về việc sử dụng phương thức map() được đưa ra dưới đây:

$(function() ( $("div.dcell").map(function(index, elem) ( return elem.getElementsByTagName("img"); )).css("border", "màu đỏ đậm"); $("div.dcell").map(function(index, elem) ( return $(elem).children(); )).css("border", "màu xanh đậm đậm"); ));

Tập lệnh này thực hiện hai thao tác chuyển đổi. Đầu tiên trong số đó, sử dụng giao diện phần mềm DOM, trả về phần tử img đầu tiên xuất hiện trong mỗi phần tử của tập hợp. Thao tác thứ hai, tận dụng các khả năng của đối tượng jQuery, trả về phần tử đầu tiên của tập hợp có trong đối tượng jQuery, được trả về bởi phương thức Children() (phương thức này trả về các nút con của mỗi phần tử có trong đối tượng jQuery).

Kiểm tra một tập hợp các phần tử đã chọn

Để tìm hiểu xem ít nhất một trong các phần tử được chọn có đáp ứng điều kiện nhất định hay không, bạn có thể sử dụng phương thức is(). Các cách sử dụng có thể có của phương thức is() tương tự như các phương thức lọc not() và filter().

Nếu một hàm được truyền dưới dạng đối số thì jQuery gọi hàm đó cho từng phần tử trong đối tượng jQuery, chuyển cho hàm đó chỉ mục của phần tử đó làm đối số và đặt biến this để trỏ đến chính phần tử đó. Một ví dụ về việc sử dụng phương thức is() được đưa ra dưới đây:

$(function() ( var isResult = $("img").is(function(index) ( return this.getAttribution("src").indexOf("rose.png") != -1; )); console .log("Kết quả: " + isResult); ));

Trong tập lệnh này, chúng tôi kiểm tra xem liệu đối tượng jQuery có chứa phần tử có giá trị thuộc tính src bao gồm chuỗi "rose.png" hay không.

Trở lại trạng thái trước đó tập hợp các phần tử được chọn đã được sửa đổi

jQuery cho phép bạn lưu trạng thái của tập hợp các phần tử đã chọn khi nó thay đổi bằng cách gọi các phương thức xâu chuỗi. Bạn có thể hưởng lợi từ tình huống này bằng cách sử dụng hai phương pháp được mô tả trong bảng dưới đây:

Phương thức end() có thể được sử dụng để trả về tập hợp đã chọn trước đó, cho phép bạn chọn một số phần tử, mở rộng hoặc thu hẹp nó, thực hiện một số thao tác và sau đó quay lại tập hợp ban đầu, như trong ví dụ bên dưới:

$(function() ( $("label").first().css("border", "dày màu xanh") .end().css("font-size", "1.5em"); )) ;

Trong trường hợp này, chúng tôi bắt đầu bằng cách chọn tất cả các thành phần nhãn trong tài liệu. Tiếp theo, chúng ta thu hẹp vùng chọn bằng cách gọi phương thức first() (để lấy phần tử khớp đầu tiên) rồi đặt giá trị Thuộc tính đường viền CSS sử dụng phương thức css().

Phương thức end() được gọi tiếp theo để trả về tập lựa chọn trước đó (kết quả là bạn được cung cấp lại tất cả các phần tử nhãn chứ không chỉ phần tử đầu tiên), và sau đó phương thức css() được gọi lại, lần này để đặt giá trị thuộc tính cỡ chữ. Kết quả thực thi script được thể hiện trong hình.

jQuery là Thư viện Javascript, giúp bạn dễ dàng làm việc với DOM, sự kiện, CSS và AJAX, đồng thời cho phép bạn dễ dàng tạo hoạt ảnh. tính năng chính jQuery tương thích với nhiều trình duyệt (có, và trình duyệt web IE 6 nữa :). Khẩu hiệu của jQuery nghe như thế này: “Write less, do more”, dịch sang tiếng Nga có nghĩa là “Viết ít, làm nhiều” (hoặc “Đi càng chậm, bạn càng đi xa” :). Những từ này hoàn toàn phù hợp với mô tả của thư viện này và hoàn toàn hợp lý.

Những bước đầu tiên với jQuery

Đầu tiên, bạn sẽ cần tải xuống thư viện cùng tên. Bạn có thể thực hiện việc này trên trang web chính thức của jQuery. Sau này, bạn nên kết nối jQuery với trang HTML của mình. Bạn có thể thực hiện việc này bằng cách thêm thẻ script vào phần đầu tài liệu:


Kết nối jQuery


Sau này, bạn có thể bắt đầu sử dụng jQuery.

Bộ chọn trong jQuery

Đã đến lúc nói về bộ chọn. Bộ chọn trong jQuery giống như bộ chọn CSS, chỉ được sửa đổi. Chúng được sửa đổi vì các lập trình viên jQuery đã thêm nhiều bộ chọn hữu ích cho tìm kiếm thuận tiện các yếu tố cần thiết.

Hãy xem một ví dụ mã:

ví dụ 1





Đoạn 1


Đoạn văn bản 2


Đoạn 3




// của bạn sẽ ở đây mã javascript


Ví dụ về việc lấy từng thành phần tài liệu:

$(document.body) - phần tử cơ thể
$("div") - bộ chọn trả về tất cả các phần tử div
$("p") hoặc $("div p") - tất cả các đoạn p (3 phần)
$("div > p") - trả về các đoạn là các nút con ngay lập tức của phần tử div
$("p:first") - đoạn số 1
$("#pEl") hoặc $("p#pEl") - sẽ trả về một đoạn có mã định danh (id) "pEl"
$("p.second") - sẽ trả về một đoạn văn có lớp "thứ hai"
$("p:eq(1)") - sẽ trả về đoạn có chỉ số 1 (các chỉ số bắt đầu từ 0, đoạn số 2 sẽ được trả về)
$("p:last") - trả về đoạn cuối
$("p.third#third") - sẽ trả về đoạn số 3

Lưu ý rằng việc tìm thấy phần tử chúng ta cần dễ dàng như thế nào. Hãy quên document.getElementById("id") và document.getElementsByTagName("p") đi, chúng ta sẽ không cần chúng nữa.

Ví dụ 2

Chúng ta hãy xem một số tính năng mạnh mẽ hơn của jQuery. Để làm điều này, hãy vẽ một bảng

Tiêu đề 1 Tiêu đề 2
Ô 1Ô 2
Ô 3Ô 4
Ô 5Ô 6
Ô 7Ô 8
Nhấn tôi

Trong ví dụ này tôi đã sử dụng bộ chọn ":odd" để chọn mọi thứ không phần tử chẵn và áp dụng nó cho các hàng của bảng (thẻ tr). ":even" lần lượt chọn số chẵn (0, 2, 4, ...).
Và vì vậy, chúng ta cần chọn tất cả các hàng lẻ của bảng, nhưng chúng ta không muốn hàng đầu tiên, là tiêu đề (phần tử thứ), thay đổi màu sắc và các sọc bắt đầu từ hàng thứ ba. Trong trường hợp này, bộ chọn ":not(selector)" sẽ hữu ích cho chúng ta. Nó được sử dụng như thế này:

$("table tr:not(:first):odd") - chọn tất cả các phần tử tr chẵn ngoại trừ phần tử đầu tiên

Đây là nguồn javascript:

$("nút").toggle(function() (
$("table tr:not(:first):odd").css("background", "#eee");
// Lần nhấp chuột đầu tiên, đặt nền thành màu xám
),chức năng() (
$("table tr:not(:first)").css("background", "none");
// Nhấn lần 2, xóa nền khỏi tất cả tr
});

Ví dụ 3 - làm việc với biểu mẫu

Trên trang web jQuery, trong phần bộ chọn, có một tiểu mục riêng dành riêng để làm việc với các biểu mẫu. Bộ chọn cung cấp công việc thuận tiện với các hộp kiểm, nút, trường nhập, v.v. Hãy vẽ hình dạng.

Trong bài học này, chúng ta sẽ tìm hiểu về bộ chọn phần tử biểu mẫu, chúng ta sẽ sử dụng bộ chọn này làm đối số cho hàm jQuery("selector") để chọn các phần tử.

Mục đích của bộ chọn thành phần biểu mẫu

Bộ chọn thành phần biểu mẫu được thiết kế để chọn các thành phần tùy thuộc vào:

  • loại của chúng (giá trị thuộc tính loại) là :button, :checkbox, :file, :image, :password, :radio, :reset, :submit, :text.
  • thẻ của họ là input , textarea , select hay nút - :input .
  • phần tử có tiêu điểm hay không - :focus .
  • liệu các phần tử ở trạng thái hoạt động (: đã bật) hay trạng thái không hoạt động (: đã tắt).
  • liệu các phần tử tùy chọn có ở trạng thái đã chọn hay không - :selected .
  • liệu các phần tử hộp kiểm, phần chọn và radio có ở trạng thái được chọn hay không - :checked.
Bộ chọn thành phần biểu mẫu

    :button - chọn tất cả các thành phần nút và thành phần có type="button" . Bộ chọn $(":button") tương đương với $("button, input") .

    Bộ chọn:button không phải là một phần của đặc tả CSS, nó được triển khai độc quyền trong jQuery. Vì vậy, khi bạn sử dụng nó trong bộ chọn để lọc các phần tử, bạn sẽ không đạt được hiệu suất mà phương thức DOM querySelectorAll() gốc cung cấp. Để cải thiện hiệu suất truy vấn trong trình duyệt hiện đại, hãy sử dụng cấu trúc sau: $("selector").filter(":button");

    Ví dụ: chọn tất cả các thành phần nút hoặc thành phần có type="button" nằm bên trong biểu mẫu:

    Cập nhật dữ liệu $("form:button"); //hoặc sử dụng phương thức lọc $("form *").filter(":button");

    :checkbox - chọn tất cả các thành phần có type="checkbox" . Bộ chọn $(":checkbox") tương đương với $("") .

    Trước bộ chọn:hộp kiểm, cũng như trước các bộ chọn lớp giả (tức là các bộ chọn bắt đầu bằng dấu ://), bạn nên chỉ định một thẻ hoặc một bộ chọn khác (ví dụ: tên của lớp). Nếu bạn không chỉ định bất kỳ điều gì trước dấu " : " thì việc sử dụng bộ chọn phổ quát (*) được ngụ ý. Nói cách khác, $(":checkbox") tương đương với $("*:checkbox") . Nhưng trong trường hợp này sẽ đúng hơn khi sử dụng thẻ đầu vào thay vì *: $("input:checkbox") .

    Bộ chọn:checkbox không phải là một phần của đặc tả CSS, nó được triển khai độc quyền trong jQuery. Vì vậy, khi bạn sử dụng nó trong bộ chọn để lọc các phần tử, bạn sẽ không đạt được hiệu suất mà phương thức DOM querySelectorAll() gốc cung cấp. Để cải thiện hiệu suất truy vấn trong các trình duyệt hiện đại, hãy sử dụng cấu trúc sau: $("input");

    Ví dụ: chọn tất cả các thành phần đầu vào có thuộc tính type="checkbox", tức là là các hộp kiểm:

    $("đầu vào:hộp kiểm"); //hoặc sử dụng bộ chọn thuộc tính $("input");

    :checked - chọn tất cả các thành phần có trạng thái đã chọn hoặc đã chọn. Bộ chọn:checked dành cho hộp kiểm, phần tử chọn và nút radio.

    Linux Windows Chrome Firefox Giá trị 1 Giá trị 2 Giá trị 3

    :disabled - chọn tất cả các phần tử bị vô hiệu hóa.

    Trước bộ chọn :disabled, cũng như trước bộ chọn lớp giả (tức là những bộ chọn bắt đầu bằng " : "), bạn nên chỉ định một thẻ hoặc bộ chọn khác (ví dụ: tên của lớp). Nếu bạn không chỉ định bất cứ điều gì trước dấu " : " thì việc sử dụng bộ chọn phổ quát (" * ") được ngụ ý. Nói cách khác, $(":disabled") tương đương với $("*:disabled") . Nhưng trong trường hợp này, sẽ đúng hơn khi sử dụng thẻ đầu vào thay vì " * ": $("input:disabled") .

    Bộ chọn:disabled khác với bộ chọn thuộc tính. Bộ chọn:disabled kiểm tra giá trị Boolean (true/false) của thuộc tính bị vô hiệu hóa của phần tử, trong khi bộ chọn thuộc tính chỉ kiểm tra xem phần tử có thuộc tính bị vô hiệu hóa hay không.

    Bộ chọn:disabled chỉ có thể được sử dụng để chọn các thành phần HTML hỗ trợ thuộc tính bị vô hiệu hóa: , , , và .

    $("đầu vào:bị vô hiệu hóa");

    :enabled - chọn tất cả các thành phần được kích hoạt.

    Trước bộ chọn :enabled, cũng như trước bộ chọn lớp giả (tức là những bộ chọn bắt đầu bằng " : "), bạn nên chỉ định một thẻ hoặc bộ chọn khác (ví dụ: tên của lớp). Nếu bạn không chỉ định bất cứ điều gì trước dấu " : " thì việc sử dụng bộ chọn phổ quát (" * ") được ngụ ý. Nói cách khác, $(":enabled") tương đương với $("*:enabled") . Nhưng trong trường hợp này sẽ đúng hơn khi sử dụng thẻ đầu vào thay vì " * ": $("input:enabled") .

    Bộ chọn:enabled khác với:not() . Bộ chọn:enabled chọn các phần tử có thuộc tính boolean bị vô hiệu hóa được đặt thành false . Trong khi :not() chọn các phần tử không có tập thuộc tính bị vô hiệu hóa.

    Bộ chọn:enabled chỉ có thể được sử dụng để chọn các thành phần HTML hỗ trợ thuộc tính bị vô hiệu hóa: , , , , và .

    $("đầu vào:đã bật");

    :file - chọn tất cả các thành phần có type="file" . Bộ chọn:file tương đương với .

    Trước bộ chọn:file, cũng như trước bộ chọn lớp giả (tức là những bộ chọn bắt đầu bằng " : "), bạn nên chỉ định một thẻ hoặc bộ chọn khác (ví dụ: tên của lớp). Nếu bạn không chỉ định bất cứ điều gì trước dấu " : " thì việc sử dụng bộ chọn phổ quát (" * ") được ngụ ý. Nói cách khác, $(":file") tương đương với $("*:file") . Nhưng trong những trường hợp như vậy, sẽ đúng hơn khi sử dụng thẻ đầu vào thay vì " * ": $("input:file") .

    Bộ chọn:file không phải là một phần của đặc tả CSS, nó được triển khai độc quyền trong jQuery. Vì vậy, khi bạn sử dụng nó trong bộ chọn để lọc các phần tử, bạn sẽ không đạt được hiệu suất mà phương thức DOM querySelectorAll() gốc cung cấp. Để cải thiện hiệu suất truy vấn trong các trình duyệt hiện đại, hãy sử dụng bộ chọn thuộc tính.

    $("đầu vào:tập tin"); // $("đầu vào");

    :focus - chọn phần tử có tiêu điểm.

    Trước bộ chọn:focus, cũng như trước bộ chọn lớp giả (tức là những bộ chọn bắt đầu bằng " : "), bạn nên chỉ định một thẻ hoặc một bộ chọn khác (ví dụ: tên của lớp). Nếu bạn không chỉ định bất cứ điều gì trước dấu " : " thì việc sử dụng bộ chọn phổ quát (" * ") được ngụ ý. Nói cách khác, $(":focus") tương đương với $("*:focus") . Nếu bạn cần lấy phần tử hiện tại có tiêu điểm, thì hãy sử dụng mã sau: $(document.activeElement) . Phương pháp này lấy một phần tử mà không cần tìm kiếm nó trong cây DOM.

    :image - chọn tất cả các phần tử có type="image" . Bộ chọn:image tương đương với .

    Bộ chọn:image không phải là một phần của đặc tả CSS, nó được triển khai độc quyền trong jQuery. Vì vậy, khi bạn sử dụng nó trong bộ chọn để lọc các phần tử, bạn sẽ không đạt được hiệu suất mà phương thức DOM querySelectorAll() gốc cung cấp. Để cải thiện hiệu suất truy vấn trong các trình duyệt hiện đại, hãy sử dụng .

    $("đầu vào:hình ảnh"); // $("đầu vào");

    :input - Chọn tất cả các phần tử input , textarea , select và nút trong tài liệu. Những thứ kia. nó chọn tất cả các điều khiển biểu mẫu.

    Bộ chọn:input không phải là một phần của đặc tả CSS, nó được triển khai độc quyền trong jQuery. Vì vậy, khi bạn sử dụng nó trong bộ chọn để lọc các phần tử, bạn sẽ không đạt được hiệu suất mà phương thức DOM querySelectorAll() gốc cung cấp. Để cải thiện hiệu suất truy vấn trong các trình duyệt hiện đại, hãy sử dụng cấu trúc sau: $("selector").filter(":input");

    Tham số 1 Tham số 2 $("*:input"); // $("form *).filter(":input");

    :password - chọn tất cả các thành phần có type="password" . Bộ chọn: mật khẩu" tương đương với .

    Trước bộ chọn:password, cũng như trước bộ chọn lớp giả (tức là những bộ chọn bắt đầu bằng " : "), bạn nên chỉ định một thẻ hoặc bộ chọn khác (ví dụ: tên lớp). Nếu bạn không chỉ định bất cứ điều gì trước dấu " : " thì việc sử dụng bộ chọn phổ quát (" * ") được ngụ ý. Nói cách khác, $(":password") tương đương với $("*:password") . Nhưng trong những trường hợp như vậy, sẽ đúng hơn khi sử dụng thẻ đầu vào thay vì " * ": $("input:password") .

    Bộ chọn:password không phải là một phần của đặc tả CSS. Nó được triển khai độc quyền trong jQuery. Vì vậy, khi bạn sử dụng nó trong bộ chọn để lọc các phần tử, bạn sẽ không đạt được hiệu suất mà phương thức DOM querySelectorAll() gốc cung cấp. Để cải thiện hiệu suất truy vấn trong các trình duyệt hiện đại, hãy sử dụng .

    $("*:mật khẩu"); // $("");

    :radio - chọn tất cả các thành phần có type="radio" . Bộ chọn: radio tương đương với .

    Trước bộ chọn:radio, cũng như trước bộ chọn lớp giả (tức là những bộ chọn bắt đầu bằng " : "), bạn nên chỉ định một thẻ hoặc bộ chọn khác (ví dụ: tên của lớp). Nếu bạn không chỉ định bất cứ điều gì trước dấu " : " thì việc sử dụng bộ chọn phổ quát (" * ") được ngụ ý. Nói cách khác, $(":radio") tương đương với $("*:radio") . Nhưng trong trường hợp này sẽ đúng hơn khi sử dụng thẻ đầu vào thay vì " * ": $("input:radio") .

    Bộ chọn:radio không phải là một phần của đặc tả CSS, nó được triển khai độc quyền trong jQuery. Vì vậy, khi bạn sử dụng nó trong bộ chọn để lọc các phần tử, bạn sẽ không đạt được hiệu suất mà phương thức DOM querySelectorAll() gốc cung cấp. Để cải thiện hiệu suất truy vấn trong các trình duyệt hiện đại, hãy sử dụng .

    $(":đài phát thanh"); // $("");

    :reset - chọn tất cả các thành phần có type="reset" . Bộ chọn: reset tương đương với .

    Bộ chọn:reset không phải là một phần của đặc tả CSS, nó được triển khai độc quyền trong jQuery. Vì vậy, khi bạn sử dụng nó trong bộ chọn để lọc các phần tử, bạn sẽ không đạt được hiệu suất mà phương thức DOM querySelectorAll() gốc cung cấp. Để cải thiện hiệu suất truy vấn trong các trình duyệt hiện đại, hãy sử dụng .

    $(":đặt lại"); // $("");

    :selected - chọn tất cả các thành phần ở trạng thái đã chọn. Bộ chọn: đã chọn chỉ hoạt động trên các phần tử tùy chọn và không hoạt động trên các phần tử hộp kiểm và radio. Để làm việc với cái sau, hãy sử dụng selector:checked .

    Bộ chọn:selected không phải là một phần của đặc tả CSS, nó được triển khai độc quyền trong jQuery. Vì vậy, khi bạn sử dụng nó trong bộ chọn để lọc các phần tử, bạn sẽ không nhận được hiệu suất đạt được do phương thức DOM querySelectorAll() gốc cung cấp. Để cải thiện hiệu suất truy vấn trong các trình duyệt hiện đại, hãy sử dụng cấu trúc sau: $("selector").filter(":selected");

    Hoa Cây Bụi Cây Đất Cỏ $(":selected"); // $("*").filter(":selected");

    :submit - chọn tất cả các thành phần có type="submit" . Bộ chọn: gửi là dành cho yếu tố nút hoặc đầu vào.

    Bộ chọn:submit không phải là một phần của đặc tả CSS, nó được triển khai độc quyền trong jQuery. Vì vậy, khi bạn sử dụng nó trong bộ chọn để lọc các phần tử, bạn sẽ không đạt được hiệu suất mà phương thức DOM querySelectorAll() gốc cung cấp. Để cải thiện hiệu suất truy vấn trong các trình duyệt hiện đại, hãy sử dụng đầu vào, nút

    $(":gửi"); // $("đầu vào,nút");

    :text - chọn tất cả các thành phần có type="text" .

    Hàm jQuery $(":text") cho phép chúng ta chọn các phần tử. Trước bộ chọn:text, cũng như trước bộ chọn lớp giả (tức là những bộ chọn bắt đầu bằng " : "), bạn nên chỉ định một thẻ hoặc bộ chọn khác (ví dụ: tên của lớp). Nếu bạn không chỉ định bất cứ điều gì trước dấu " : " thì việc sử dụng bộ chọn phổ quát (" * ") được ngụ ý. Nói cách khác, $(":text") tương đương với $("*:text") . Nhưng trong trường hợp này sẽ đúng hơn khi sử dụng thẻ đầu vào thay vì " * ": $("input:text") .

    Bắt đầu bằng phiên bản jQuery 1.5.2, bộ chọn:input cũng chọn các phần tử đầu vào không có thuộc tính type được chỉ định (trong trường hợp phần tử đó được giả định là có type="text").

    Hãy chứng minh sự khác biệt giữa $(":text") và $("") bằng ví dụ sau:

    $("").is(""); // sai $("").is(":text"); // ĐÚNG VẬY

    Bộ chọn:text không phải là một phần của đặc tả CSS, nó được triển khai độc quyền trong jQuery. Vì vậy, khi bạn sử dụng nó trong bộ chọn để lọc các phần tử, bạn sẽ không đạt được hiệu suất mà phương thức DOM querySelectorAll() gốc cung cấp. Để cải thiện hiệu suất truy vấn trong các trình duyệt hiện đại, hãy sử dụng .

    $(":văn bản"); // $("đầu vào");

Bộ chọn JQuery là một trong những bộ chọn nhất bộ phận quan trọng thư viện jQuery.

bộ chọn jQuery

Bộ chọn JQuery cho phép bạn chọn và thao tác (các) phần tử HTML.

Bộ chọn JQuery được sử dụng để "tìm" (hoặc chọn) phần tử HTML, dựa trên tên, ID, lớp, loại, thuộc tính, giá trị thuộc tính và hơn thế nữa. Nó dựa trên hiện có Bộ chọn CSS, và ngoài ra, nó còn có một số bộ chọn riêng.

Tất cả các bộ chọn trong JQuery đều bắt đầu bằng ký hiệu đô la và dấu ngoặc đơn: $().

Phần tử lựa chọn

Bộ chọn phần tử jquery chọn các phần tử dựa trên tên phần tử.

Bạn có thể chọn tất cả các yếu tố

Trên một trang như thế này:

ví dụ

Khi người dùng nhấp vào nút, mọi thứ

Các phần tử sẽ bị ẩn:

Bộ chọn #id

Bộ chọn #id của JQuery sử dụng thuộc tính ID của thẻ HTML để tìm một phần tử cụ thể.

ID phải là duy nhất trong trang, vì vậy bạn nên sử dụng bộ chọn #ID nếu bạn muốn tìm một phần tử duy nhất.

Để tìm một phần tử có ID cụ thể, hãy viết ký tự băm theo sau là ID phần tử HTML:

ví dụ

Khi người dùng nhấp vào nút, phần tử có id="test" sẽ bị ẩn:

Bộ chọn .class

Bộ chọn Lớp Jquery tìm các phần tử với một lớp cụ thể.

Để tìm các phần tử thuộc một lớp cụ thể, hãy viết dấu chấm ký tự theo sau là tên lớp:

ví dụ

Khi người dùng nhấp vào nút, các phần tử có class="test" sẽ bị ẩn:

Các ví dụ khác về bộ chọn JQuery Ví dụ mô tả cú phápyếu tốyếu tố
$("*") Chọn tất cả các phần tử Thử nó
$(cái này) Chọn phần tử HTML hiện tại Thử nó
$("p.intro") Chọn tất cả

Các phần tử có lớp = "giới thiệu"

 Thử nó
$("p:đầu tiên") Chọn cái đầu tiên

Yếu tố

 Thử nó
$("ul li:first") Chọn cái đầu tiên
  • yếu tố đầu tiên
    		• Thử nó
    $("ul li:con đầu lòng") Chọn cái đầu tiên
  • phần tử của mọi
    		• Thử nó
    $("") Chọn tất cả các phần tử có thuộc tính href Thử nó
    $("a") Chọn tất cả các phần tử có giá trị thuộc tính đích bằng "_blank" Thử nó
    $("a") Chọn tất cả các phần tử có giá trị thuộc tính đích KHÔNG bằng "_blank" Thử nó
    $(":nút") Chọn tất cả các thành phần và thành phần của type="button" Thử nó
    $("tr:chẵn") Chọn tất cả thậm chí
    Thử nó
    $("tr:lẻ") Chọn tất cả số lẻ
    Thử nó
    Các chức năng trong một tập tin riêng biệt

    Nếu trang web của bạn chứa nhiều trang và bạn muốn các chức năng Jquery của mình dễ bảo trì, bạn có thể đặt hàm jQuery thành một tệp .js riêng biệt.