Ví dụ về bộ chọn Jquery. Bộ chọn JQuery. Các chức năng trong một tập tin riêng biệt

jQuery là một 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 giú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 nhau 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

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


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 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 các bài học trước chúng ta đã thảo luận về câu hỏi Khái niệm chung jQuery và cách kết nối nó.
Bài viết này sẽ tập trung vào việc sử dụng các bộ chọn trong jQuery (CSS và XPath), cho phép bạn chọn một hoặc nhiều thành phần DOM một cách dễ dàng và chính xác. Mỗi bộ chọn sẽ có một mã và một ví dụ về ứng dụng của nó. Việc sử dụng bộ chọn jQuery không gây ra vấn đề gì khi làm việc trong trình duyệt cũ, ví dụ IE 6, vì nó chứa các cơ chế công việc CSS 1-3.

Cấu trúc mã jQuery Ký hiệu đô la $ - biểu thị cách sử dụng jQuery, bộ chọn - Phần tử DOM chúng tôi làm việc với ai và chức năng đặc biệt jQuery với các tham số của nó (ví dụ: hoạt ảnh, triển khai, chuyển động, v.v.).

Ví dụ về mã jQuery

$(selector).function(parameter);

Bộ chọn trong jQuery bài học này Chúng tôi sẽ đi sâu vào chi tiết về vấn đề của bộ chọn. Nó là gì?

Bộ chọn(từ tiếng Anh chọn - chọn) - đây là các phần tử DOM ( mô hình đối tượng tài liệu, chẳng hạn như thẻ hoặc các khối được đánh dấu đặc biệt) mà chúng tôi đưa ra yêu cầu. Khái niệm này tồn tại trong JavaScript, CSS và các ngôn ngữ khác mà bạn cần chọn một thành phần cụ thể và làm việc với các thuộc tính của nó.

Mã định danh (id).

Nếu bạn muốn làm việc với một phần tử cụ thể và chỉ một lần thôi(về lý thuyết, vì trong thực tế một số trình duyệt sẽ không coi thường tái sử dụng mã định danh), thì chúng tôi gán cho nó một id duy nhất.

Mã HTML

#nhận dạng- chọn phần tử duy nhất có mã định danh (id) được truyền. TRONG trong trường hợp này đặc biệt

mã jQuery

$("#special").css("border", "1px màu đen đặc");

Trong tương lai tôi sẽ viết mà không có thẻ, tôi hy vọng rõ ràng rằng JavaScript phải được đính kèm trong đó. Trong ví dụ, chúng tôi chọn phần tử có id đặc biệt, trong trường hợp này là div. Trong đó chúng tôi sử dụng chức năng css và tạo đường viền màu đen liên tục (rắn) 1 pixel.

Các lớp học.

.lớp học- chọn tất cả các phần tử với lớp được chỉ định. Đúng vậy, có thể có một vài trong số họ. Điều chính là tên lớp giống nhau.

Mã HTML

Khối đầu tiên
Khối thứ hai
Như bạn có thể thấy, có hai phần tử (div) và chúng có cùng lớp.

mã jQuery

$(".spec_class").css("border", "1px màu đỏ đặc");
Đối với tất cả các phần tử ở đó giá trị lớp spec_class các đường viền tương tự cũng được tạo như trong ví dụ trước, nhưng có màu đỏ.

Các yếu tố.

Tất cả các phần tử của một loại nhất định được chọn. Đó là một trong hai thân hình, hoặc tất cả các div, hoặc tất cả các bảng và như thế.

mã jQuery

$("div").css("border", "1px màu xanh lá cây đậm");
bạn tất cả các div Một khung màu xanh lá cây sẽ xuất hiện.

* (tất cả các phần tử) - chọn hoàn toàn tất cả các phần tử. Thậm chí cái đầu Và thân hình.

mã jQuery

$("*").css("border", "1px màu xanh đậm");
Tất cả các thành phần trong tài liệu của bạn sẽ có đường viền màu xanh lam.

$("*", document.body).css("border", "2px màu đen đặc");
Chọn tất cả các phần tử trong phần nội dung và tạo cho chúng đường viền màu đen 2 pixel.

Theo loại: selector1, selector2, ..., selectorN - chúng tôi liệt kê tất cả các phần tử. Dưới đây là một ví dụ thú vị chia sẻ bộ chọn.

mã jQuery

$("div, span, p.spec_class").css("border", "1px màu đỏ đậm");
Chọn tất cả các phần tử div, span và p có spec_class được chỉ định. Tất cả các bộ chọn được chỉ định đơn giản, phân tách bằng dấu phẩy.

Bộ chọn phân cấp trong hậu duệ jQueryancestor

Đã chọn yếu tố chính (phần tử cha) và các phần tử có trong nó (con cháu). Chúng ta hãy xem ví dụ dưới đây của cha mẹ hình thức và con cháu lựa chọn.

mã jQuery

$("form select").css("border", "1px nét đứt màu đen");
Tất cả các phần tử được chọn và biểu mẫu con cháu sẽ có đường viền chấm màu đen.

cha mẹ-con cái

Bây giờ hãy chọn tất cả các phần tử con của phần tử cha.

mã jQuery

$("#id > *").css("border", "1px màu đen kép");
Đầu tiên, chúng tôi chọn tất cả những người thừa kế của phần tử với nhận dạng, sau đó tạo một đường viền đôi màu đen cho nó.

trước và tiếp theo (trước và tiếp theo)

Chúng tôi chỉ ra các phần tử tiếp theo (tiếp theo) sau phần tử được chỉ định là trước (trước).

mã jQuery

$("nhãn + đầu vào").css("color", "blue").val("Xong!");
Chọn các thành phần đầu vào theo nhãn. Chúng tôi cài đặt chúng Thuộc tính CSS- màu ở dạng đen và giá trị (.val) được đặt Sẵn sàng!

trước ~ anh chị em

Bây giờ chúng ta làm việc với các phần tử chị em. Tìm tất cả các chị em theo sau phần tử trước đó (prev).

mã jQuery

$("#prev ~ div").css("border", "3px rãnh xanh");
Chúng tôi đang tìm kiếm tất cả các phần tử div là anh em của nhau và ngay lập tức theo sau phần tử có ID #prev. Xin lưu ý rằng ví dụ này sẽ không chọn phần tử span vì việc lựa chọn chỉ dành cho phần tử div.

Bộ lọc cơ bản:đầu tiên

Phần tử đầu tiên với bộ chọn được chỉ định sẽ được chọn.

mã jQuery

$("tr:first").css("font-style", "bold");
Ở hàng đầu tiên (tr) trong bảng, văn bản sẽ được tô đậm.

Bây giờ chúng ta sẽ chọn phần tử cuối cùng với bộ chọn được chỉ định.

mã jQuery

$("tr:last").css((backgroundColor: "vàng", fontWeight: "đậm hơn"));
Tìm dòng cuối cùng (tr) trong bảng và vẽ nền theo màu vàng và cũng cài đặt kiểu chữ in đậm(đậm hơn).

:không(bộ chọn)

Sử dụng phủ định sẽ lọc ra các phần tử. Chọn tất cả các đầu vào không có hộp kiểm, cũng như các nhịp theo sau chúng

mã jQuery

$("input:not(:checked) + span").css("background-color", "gold");
Ý nghĩa của các hộp kiểm không thay đổi.

Chú ý! Ví dụ thú vị , thứ mà mỗi người thứ hai sử dụng trong quá trình luyện tập của mình. Làm thế nào để chọn phần tử chẵn hoặc lẻ? Sau đó, bạn cần làm cho các dòng trong văn bản hoặc thậm chí là mã có thể đọc được. Giá trị bắt đầu 0.

mã jQuery

$("tr:even").css("background-color", "#с1с1с1");
Chọn các hàng chẵn trong bảng. Dòng đầu tiên, thứ ba, v.v. sẽ được đánh dấu. Chú ý! Việc đếm dựa trên các chỉ số và trong đó hàng đầu tiên có giá trị 0. Tiếp theo, các hàng có chỉ số 0, 2, 4, v.v. được chọn).

Bây giờ chúng ta chọn các phần tử lẻ. Giá trị chỉ số được tính bắt đầu từ 0. Các giá trị 1,3,5,7, v.v. sẽ được chọn tương ứng. Điều này tương ứng với các dòng 2,4,6, v.v., vì trên thực tế, chúng được tính từ dòng đầu tiên.

mã jQuery

$("tr:odd").css("background-color", "#с1с1с1");
Nền của các dòng số lẻ có màu xám.

:eq(chỉ mục)

Chọn một chỉ mục phần tử cụ thể. Trong ví dụ này, chúng ta sẽ chỉ tô màu một hàng của bảng.

mã jQuery

$("td:eq(2)").css("color", "blue");
Chúng tôi chọn phần tử 2 theo chỉ mục. Hãy để tôi nhắc bạn rằng đây sẽ là dòng thứ 3, vì nó sẽ là chỉ mục thứ ba (0,1,2).

:gt(chỉ mục)

Bây giờ chúng tôi chọn các giá trị chỉ mục lớn hơn giá trị được chỉ định trong bộ chọn.

mã jQuery

$("td:gt(4)").css("trang trí văn bản", "xuống dòng");
Chúng tôi chọn các hàng trong bảng có chỉ số phần tử lớn hơn 4, nghĩa là chỉ mục của chúng là 5,6, v.v. Điều này tương ứng với 6, 7, v.v. phần tử xuất hiện, trong trường hợp các hàng trong bảng của chúng ta.

:lt(chỉ mục)

Bây giờ chúng tôi chọn các giá trị chỉ mục nhỏ hơn giá trị được chỉ định trong bộ chọn.

mã jQuery

$("td:lt(3)").css("color", "red");
Tất cả các phần tử td có chỉ mục m đều được chọn. Ví dụ: chúng tôi đang tìm kiếm tất cả các phần tử TD có chỉ mục nhỏ hơn 3. Vì việc đếm, tôi xin nhắc bạn một lần nữa, được thực hiện từ đầu, đây là các hàng của bảng (td) 1 ,2,3.

Tất cả các phần tử là tiêu đề (h1,h2,h3, v.v.) sẽ được chọn

mã jQuery

$(":header").css(( nền:"#c1c1c1", color:"#0085cc" ));
Đối với tất cả các tiêu đề (phần tử h), chúng tôi sẽ đặt phông chữ màu xanh và nền màu xám nhạt.

:hoạt hình

Tất cả các phần tử hiện đang hoạt hình sẽ được chọn.

Mã HTML

Làm cho div đầu tiên có màu đỏ
mã jQuery

$("#run").click(function())(
$("div:animated").toggleClass("màu");
});
hàm animateIt() (
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
Ví dụ ở đây phức tạp hơn một chút. Sau khi nhấp vào nút, chúng ta thay đổi màu của phần tử hoạt hình (div). Không có thay đổi nào đối với các yếu tố không hoạt hình.

Hãy xem một ví dụ đơn giản về cách hoạt động của bộ chọn trong jQuery. Tệp đã hoàn toàn sẵn sàng để sử dụng, bạn chỉ cần sao chép toàn bộ mã vào tệp html đã tạo. Thư viện trong ví dụ được kết nối với máy chủ Google, do đó đối với hoạt động chính xác Các tập tin sẽ yêu cầu kết nối internet. Bên dưới mã có một phiên bản demo để xem.

jQuery

#polosa1( vị trí: tương đối; nền: trắng; chiều rộng: 200px; chiều cao: 50px; đường viền trên cùng: rắn 1px #000; )
#polosa2( vị trí: tương đối; nền: xanh dương; chiều rộng: 200px; chiều cao: 50px; )
#polosa3( vị trí: tương đối; nền: đỏ; chiều rộng: 200px; chiều cao: 50px; viền dưới: rắn 1px #000; )

hàm addFlag1())(
$("div:eq(0)").css("background", "white");
$("div:eq(1)").css("background", "green");
$("div:eq(2)").css("background", "red");
}
hàm addFlag2())(
$("#polosa1, #polosa3").css("nền", "đỏ");
$("#polosa2").css("nền", "trắng");
}
hàm addFlag3())(
$("div").css("nền", "đỏ");
}

Một ví dụ về bộ chọn jQuery hoạt động

Cờ của Bulgaria
Cờ của Áo
Cờ Liên Xô

Nguồn tải xuống trình diễn
Cám ơn vì sự quan tâm của bạn! Chúc may mắn trong nỗ lực của bạn!

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 phần tử 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 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, $(":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 loại được chỉ định (trong trường hợp đó phần tử được giả sử có loại = "văn bản").

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");

Một nhiệm vụ thường xuyên phải đối mặt với người mới bắt đầu nhà phát triển javascriptĐây là việc lựa chọn một thành phần trên trang web theo thuộc tính id của nó.

Giả sử chúng ta có mã trên trang.

Chặn nội dung.

Làm cách nào bạn có thể chọn một phần tử có id="elem" và thực hiện một loạt hành động với nó?

Có một số lựa chọn để giải quyết vấn đề. Chúng ta hãy nhìn vào chúng bây giờ.

Tùy chọn 1. Sử dụng Phương pháp Javascript getElementById.

Có một cách để truy cập một phần tử theo id của nó bằng cách sử dụng mã javascript “thuần túy” mà không cần sử dụng bất kỳ thư viện của bên thứ ba nào. Phương pháp này sử dụng phương thức ggetElementById(“element_id”). Vì vậy, chúng ta truy cập phần tử chúng ta cần theo id của nó.

Hãy xem cách này hoạt động như thế nào với một ví dụ đơn giản.

Chặn nội dung. cảnh báo(document.getElementById("elem").innerHTML);

Xin lưu ý rằng những dòng mã (tập lệnh) này nằm bên dưới chính phần tử đó. Cái này điều kiện bắt buộc công việc của kịch bản này, bởi vì Mã Javascriptđược thực hiện khi tải trang. Nếu chúng tôi đặt mã ở trên, chúng tôi sẽ truy cập vào một phần tử trên trang chưa được tải, tức là. nó sẽ chưa có trong mã tại thời điểm tập lệnh được thực thi. Có nhiều cách để tránh điều này, nhưng nó nằm ngoài phạm vi của bài viết này.

Kết quả là, nếu mọi thứ hoạt động chính xác, chúng ta sẽ nhận được một cửa sổ bật lên. Cửa sổ này sẽ hiển thị văn bản bên trong khối div.

Bây giờ chúng ta hãy xem chúng ta có thể giải quyết vấn đề này theo cách khác như thế nào.

Cách 2. Sử dụng Thư viện Jquery.

Tùy chọn thứ hai để chọn một phần tử theo id của nó là sử dụng thư viện Jquery. Trong thực tế, trong các chữ viết hiện đại, phương pháp này thường được sử dụng nhất. Nó thuận tiện và dễ nhớ hơn nhiều.

Để tham chiếu đến một phần tử theo id của nó, bạn cần sử dụng cấu trúc sau:

$("#elem")

Ở đây elem là tên có trong thuộc tính id.

Bởi vì Chúng ta sẽ sử dụng thư viện Javascript của bên thứ ba có tên là Jquery, sau đó trước tiên phải đưa thư viện này vào.

Nó được thêm vào phần này, một trong những cách có thể thực hiện được là thêm hàng tiếp theo mã số:

Để tải được thư viện, cần phải có kết nối Internet.

Chặn nội dung. cảnh báo($("#elem").html());

Bản thân tập lệnh, như trong ví dụ trước, phải nằm bên dưới mã của phần tử mà bạn muốn tương tác.

Vì vậy, chúng tôi đã thảo luận hai cách về cách bạn có thể chọn một thành phần trên trang web theo thuộc tính id của nó và tương tác với nó. Hãy chọn phương pháp phù hợp với bạn và áp dụng nó vào thực tế.

JavaScript, giống như CSS, có chức năng cho phép bạn truy cập các phần tử HTML để chuyển đổi nội dung trang. Trong CSS, điều này đạt được bằng cách viết các bộ chọn. Có một số cách để tổ chức chức năng này trong JavaScript và đây là một trong số đó:

Var PrimaryHeadings = document.getElementsByTagName("h1");

Mã này trích xuất tất cả các tiêu đề h1 và nói một cách đại khái là đặt chúng vào biến PrimaryHeadings. Nếu có nhiều tiêu đề trên trang thì tất cả chúng sẽ được đặt trong một mảng.

Var ou812 = document.getElementById("eddie");

Đoạn code này chọn phần tử có id="eddie".

Đàn guitar của bạn = document.getElementsByClassName("axes");

Chúng ta cũng có thể chọn các phần tử theo tên lớp của chúng.

Hãy thêm chút Sizzle

Các khung JavaScript khác nhau cung cấp các tùy chọn riêng để tạo bộ chọn. Một trong những thành công nhất là Sizzle, sau này trở thành jQuery. Không giống như hậu duệ của nó, Sizzle chỉ có thể hoạt động và thao tác với DOM. Nếu không cần tất cả chức năng jQuery khác, bạn vẫn có thể tải xuống Sizzle dưới dạng thư viện riêng ngay hôm nay.

Với sự phát triển của các thư viện này, việc viết các bộ chọn đã được giảm bớt và chuyển đổi đáng kể:

$("#dave").css()

Mã này trích xuất phần tử html với id=”dave” và cho phép bạn làm việc với các kiểu css của nó.

Sizzle không phải là duy nhất Thư viện JavaScriptđể thao túng Mã HTML. Ngoài ra còn có các lựa chọn khác, ví dụ như rangy. Tuy nhiên, theo tôi, tất cả những điều trên đều đã lỗi thời trước những gì đang chờ đợi bạn ở bài viết này.

Cấp độ tiếp theo của JavaScript

Nhiều nhà phát triển bắt đầu sử dụng jQuery thường xuyên đến mức họ thậm chí còn không nhận thấy những thay đổi đáng kể trong chính JavaScript.

“API bộ chọn JavaScript” là một phần chính thức của đặc tả HTML5 và cũng có thể được sử dụng khi viết các trang XHTML. Cú pháp mới rất đơn giản:

Document.querySelector("#eddie")

Mã này hoàn toàn tương đương với document.getElementById("eddie"). Không ấn tượng? Cái này thì sao:

Document.querySelector("#eddie h1 + p")

Chức năng mới cho phép bạn thao tác DOM bằng cách sử dụng CSS phức tạp biểu thức.

Phương thức querySelector chỉ truy xuất phần tử đầu tiên mà nó gặp. Để truy xuất tất cả những gì bạn cần sử dụng querySelectorAll:

Var hiFrets = document.querySelectorAll("table#frets tr:nth-child(3)")

Mã này truy xuất mỗi hàng thứ ba từ bảng có id="frets".

Một số điểm rất quan trọng

Có một số hạn chế mà bạn cần lưu ý nếu sử dụng phương thức querySelector / All:

Không phải tất cả các trình duyệt đều hỗ trợ chức năng mới. Nếu điều quan trọng đối với bạn là mã phải hoạt động trên IE6-7 thì tốt hơn là bạn nên sử dụng các thư viện có thể thao tác với DOM: Sizzle hoặc jQuery.

Bộ chọn phải được viết rất cẩn thận, nếu không trình duyệt sẽ không hiểu chúng và các phương thức trên sẽ trả về null. Nói chung, hãy hết sức cẩn thận, đặc biệt khi sử dụng bộ chọn CSS3.

Không giống như getElementsByTagName, phương thức querySelectorAll trả về một danh sách tĩnh các phần tử được truy xuất khi chúng xuất hiện trên trang trong khoảnh khắc này thời gian. Điều này có nghĩa là khi thực hiện bất kỳ thay đổi năng động vào mã (thêm, xóa các phần tử thông qua JavaScript), bạn sẽ cần sử dụng lại phương thức querySelectorAll.

Hãy thử chức năng mới để loại bỏ nhu cầu tải xuống nhiều loại thư viện khác nhau.