jQuery tâm hồn - phương pháp jQuery()
Mô hình
Tìm kiếm tất cả các phần tử p là con của phần tử div và thiết lập thuộc tính viền của chúng:
$("div > p").css("border", "1px solid gray");
Định nghĩa và cách sử dụng
Hàm jQuery() chấp nhận một chuỗi chứa CSS chọn器 để khớp bộ sưu tập phần tử.
Hàm jQuery() có ba cú pháp:
Cú pháp 1
Chấp nhận một chuỗi chứa CSS chọn器 để khớp bộ sưu tập phần tử:
jQuery(selector, [context]
Cú pháp 2
Sử dụng chuỗi HTML nguyên bản để tạo phần tử DOM:
jQuery(html,ownerDocument]
Cú pháp 3
Gán một hàm được thực thi sau khi tài liệu DOM được tải xong:
jQuery( callback )
jQuery( selector, [ context ] )
Cú pháp này có các cách sử dụng sau:
Cách sử dụng 1: Thiết lập môi trường chọn器
Cú pháp
jQuery(selector, [context]
mặc định, chọn器 từ gốc của tài liệu để tìm kiếm DOM. Tuy nhiên, có thể thiết lập tham số tùy chọn context cho $().
ví dụ, nếu chúng ta muốn tìm kiếm một phần tử trong một callback, có thể giới hạn tìm kiếm sau:
Mô hình
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
Do chúng ta đã giới hạn bộ lọc span trong môi trường này là this, chỉ các phần tử span trong phần tử được nhấp mới nhận được class.
Trong nội bộ, môi trường chọn器 được thực hiện thông qua phương pháp .find(), vì vậy $("span", this) tương đương với $(this).find("span").
Tất cả các chức năng cốt lõi của jQuery đều được thực hiện thông qua hàm này. Mọi thứ trong jQuery đều dựa trên hàm này,或者说 đều sử dụng hàm này theo một cách nào đó. Cách sử dụng cơ bản nhất của hàm này là truyền một biểu thức (thường là biểu thức chọn CSS) vào nó, sau đó tìm kiếm tất cả các phần tử khớp với biểu thức đó.
Mặc định, nếu không chỉ định tham số context, hàm $() sẽ tìm kiếm phần tử DOM trong tài liệu HTML hiện tại; nếu chỉ định tham số context, chẳng hạn như một tập hợp phần tử DOM hoặc đối tượng jQuery, thì sẽ tìm kiếm trong context đó. Từ jQuery 1.3.2 trở đi, thứ tự các phần tử trả về tương đương với thứ tự xuất hiện trong context.
Cách sử dụng 2: Sử dụng phần tử DOM
Cú pháp
jQuery(element)
Hàm này cho phép chúng ta tạo đối tượng jQuery bằng cách sử dụng phần tử DOM được tìm thấy bằng cách khác. Cách sử dụng phổ biến của tính năng này là gọi phương pháp jQuery cho phần tử đã được truyền vào hàm callback bằng từ khóa this:
Mô hình
$("div.foo".click(function() {
$(this).slideUp();
});
Ví dụ này sẽ sử dụng hiệu ứng cuộn để ẩn phần tử khi nó được nhấp. Do xử lý viên nhận phần tử được nhấp trong từ khóa this là phần tử DOM thuần, do đó trước khi gọi phương pháp jQuery, phải bọc phần tử bằng đối tượng jQuery.
Hàm này cũng có thể nhận XML document và đối tượng Window (mặc dù chúng không phải là phần tử DOM) làm tham số hợp lệ.
Khi dữ liệu XML được trả về từ cuộc gọi Ajax, chúng ta có thể sử dụng hàm $() để bọc dữ liệu bằng đối tượng jQuery. Một khi hoàn thành, chúng ta có thể sử dụng .find() và các phương pháp duyệt DOM khác để lấy lại các phần tử đơn lẻ trong cấu trúc XML.
Cách sử dụng 3: Sao chép đối tượng jQuery
Cú pháp
jQuery(đối tượng jQuery)
Khi truyền đối tượng jQuery dưới dạng tham số vào hàm $(), sẽ tạo ra một bản sao của đối tượng đó. Như đối tượng ban đầu, đối tượng jQuery mới sẽ tham chiếu đến cùng một phần tử DOM.
Cách sử dụng 4: Trả về tập hợp trống
Cú pháp
jQuery()
Đối với jQuery 1.4, việc gọi phương thức jQuery() không có tham số sẽ trả về một tập hợp jQuery trống. Trong các phiên bản jQuery trước, điều này sẽ trả về một tập hợp chứa phần tử document.
jQuery( html, [ ownerDocument ] )
Cú pháp này có các cách sử dụng sau:
Cách sử dụng 1: Tạo phần tử mới
Cú pháp
jQuery(html,ownerDocument]
Bạn có thể truyền một chuỗi HTML tự viết, hoặc chuỗi được tạo bởi một số mô hình động hoặc插件, hoặc chuỗi được tải qua AJAX. Nhưng khi tạo phần tử input, có một số giới hạn, bạn có thể tham khảo ví dụ thứ hai.
Chắc chắn rằng chuỗi có thể chứa dấu gạch chéo (ví dụ như địa chỉ hình ảnh) và dấu chéo ngược. Khi tạo một phần tử đơn lẻ, hãy sử dụng thẻ đóng hoặc định dạng XHTML. Ví dụ, để tạo một phần tử span, có thể sử dụng $("<span/>") hoặc $("<span></span>"), nhưng không khuyến khích sử dụng $("<span>"). Trong jQuery, cú pháp này tương đương với $(document.createElement("span")).
Nếu truyền chuỗi dưới dạng tham số cho $(), jQuery sẽ kiểm tra chuỗi có phải là HTML (ví dụ, tại một số vị trí của chuỗi có thẻ) hay không. Nếu không, chuỗi sẽ được hiểu là biểu thức chọn lựa, xem xét ở phần giải thích trên. Nhưng nếu chuỗi là đoạn mã HTML, jQuery sẽ cố gắng tạo phần tử DOM được mô tả bởi đoạn mã HTML đó. Sau đó, nó sẽ tạo và trả về một đối tượng jQuery tham chiếu đến các phần tử DOM:
Mô hình
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
Nếu đoạn mã HTML phức tạp hơn thẻ đơn giản không có thuộc tính, giống như ví dụ trên, thì quá trình tạo元素 thực tế được hoàn thành bởi cơ chế innerHTML của trình duyệt. Cụ thể, jQuery sẽ tạo một phần tử <div> mới, sau đó thiết lập thuộc tính innerHTML của phần tử cho đoạn mã HTML được truyền vào. Khi tham số chỉ là thẻ đơn giản, chẳng hạn như $("<img />") hoặc $("<a></a>"), jQuery sẽ tạo phần tử bằng cách sử dụng hàm createElement() tích hợp sẵn của JavaScript.
Để đảm bảo tương thích qua nhiều nền tảng, cấu trúc của đoạn mã phải tốt. Các thẻ có thể chứa phần tử khác phải xuất hiện theo cặp (cùng với thẻ đóng):
$("<a href="http://jquery.com"></a>");
Nhưng jQuery cũng cho phép cú pháp thẻ tương tự như XML:
$("<a/>");
Các thẻ không chứa phần tử khác có thể đóng hoặc không đóng:
$("<img />");
$("<input>");
Cách sử dụng 2: Thiết lập thuộc tính và sự kiện
Cú pháp
jQuery(html,props)
Đối với jQuery 1.4, chúng ta có thể truyền một bản đồ thuộc tính vào tham số thứ hai. Tham số này chấp nhận một tập hợp mở rộng của thuộc tính có thể truyền cho phương thức .attr(). Ngoài ra, bạn có thể truyền bất kỳ loại sự kiện nào và có thể gọi các phương thức jQuery sau: val, css, html, text, data, width, height, hoặc offset.
Lưu ý, Internet Explorer không cho phép bạn tạo phần tử input và thay đổi loại của nó; bạn phải sử dụng ví dụ như "<input type="checkbox" />" để quy định loại.
Mô hình
Tạo một phần tử <input> cùng với thuộc tính type, giá trị thuộc tính và một số sự kiện.
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback )
Cho phép bạn gán một hàm để thực hiện sau khi văn bản DOM được tải xong.
Hàm này hoạt động như $(document).ready() nhưng khi sử dụng hàm này, bạn cần bao bọc tất cả các phép toán $() khác cần thực hiện khi DOM tải xong vào hàm này. Mặc dù về kỹ thuật, hàm này có thể được liên kết, nhưng thực tế không có nhiều trường hợp liên kết theo cách này.
Ví dụ
Khi DOM đã tải xong, thực hiện các hàm trong đó:
$(function() {
// Văn bản đã sẵn sàng
});
