Tìm hiểu cách tạo một phần tử trong jQuery

Tạo một phần tử mới là một trong những tác vụ cơ bản nhất mà bạn có thể thực hiện với thư viện JavaScript jQuery. Sử dụng jQuery, nhiệm vụ đơn giản hơn rất nhiều so với cách tiếp cận tương đương với Mô hình đối tượng tài liệu (DOM). Bạn cũng sẽ thấy nó linh hoạt và biểu cảm hơn khi bạn sử dụng jQuery nhiều hơn.

Để phục vụ một mục đích, bạn cần có thể thêm phần tử của mình vào một trang web. Tìm hiểu cách thêm một mục danh sách mới hoặc thay thế một đoạn văn bằng nội dung mới bằng jQuery.

JQuery là gì?

Thư viện jQuery là một bộ sưu tập của JavaScript mã với hai mục đích chính:

Nó đơn giản hóa các hoạt động JavaScript phổ biến.
Nó xử lý các vấn đề JavaScript tương thích chéo giữa các trình duyệt khác nhau.

Mục đích thứ hai phục vụ cho các lỗi, nhưng nó cũng giải quyết sự khác biệt về triển khai giữa các trình duyệt. Cả hai mục đích đều ít cần thiết hơn trước đây, vì các trình duyệt được cải thiện theo thời gian. Nhưng jQuery vẫn có thể là một công cụ có giá trị.

Một phần tử là gì?

Một phần tử đôi khi được gọi là thẻ. Mặc dù cả hai thường được sử dụng thay thế cho nhau, nhưng có một sự khác biệt nhỏ. Một thẻ đề cập đến nghĩa đen

hoặc

bạn đưa vào tệp HTML để đánh dấu nội dung văn bản. Một phần tử là đối tượng hậu trường đại diện cho văn bản được đánh dấu. Hãy coi một phần tử như là đối tác của DOM với các thẻ HTML.

Cách tạo một phần tử mới bằng jQuery

Giống như hầu hết các hoạt động jQuery, việc tạo một phần tử bắt đầu bằng hàm đô la, $ () . Đây là một lối tắt đến cốt lõi jQuery () hàm số. Chức năng này có ba mục đích riêng biệt, nó:

Đối sánh các phần tử, thường là những phần tử đã tồn tại trong tài liệu
Tạo các yếu tố mới
Chạy một hàm gọi lại khi DOM đã sẵn sàng

Khi bạn chuyển một chuỗi chứa HTML làm tham số đầu tiên, hàm này sẽ tạo một phần tử mới:

$(' ')

Điều này trả về một đối tượng jQuery đặc biệt chứa một tập hợp các phần tử. Trong trường hợp này, có một đối tượng duy nhất đại diện cho phần tử 'a' mà chúng tôi vừa tạo.

chuông có tương thích với google home không

Chuỗi phải giống HTML để phân biệt hành động này với các phần tử phù hợp. Trong thực tế, điều này có nghĩa là chuỗi phải bắt đầu bằng < . Bạn không thể thêm văn bản thuần túy vào tài liệu bằng phương pháp này.

Điều quan trọng cần hiểu là thao tác này không thêm phần tử vào tài liệu của bạn, nó chỉ tạo ra một phần tử mới sẵn sàng để bạn thêm vào. Phần tử là 'chưa được đính kèm', chiếm bộ nhớ nhưng chưa thực sự là một phần của trang cuối cùng.

Thêm HTML phức tạp hơn

Hàm đô la thực sự có thể tạo ra nhiều hơn một phần tử. Trên thực tế, nó có thể xây dựng bất kỳ cây nào gồm các phần tử HTML mà bạn muốn:

$('one
two
three
')

Bạn cũng có thể sử dụng định dạng này để tạo một phần tử có các thuộc tính:

$(' ')

Cách đặt các thuộc tính trên một phần tử mới

Bạn có thể tạo một phần tử jQuery mới và đặt các thuộc tính của nó mà không cần phải tự mình xây dựng chuỗi HTML đầy đủ. Điều này hữu ích nếu bạn đang tạo động các giá trị thuộc tính. Ví dụ:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';  
$(' ', { src: photo });

Cách thêm phần tử

Sau khi tạo một phần tử mới, bạn có thể thêm phần tử đó vào tài liệu theo nhiều cách khác nhau. Tài liệu jQuery tập hợp các phương thức này lại với nhau trong Danh mục 'thao túng' .

Thêm làm phần tử con của một phần tử hiện có

$('body').append($('Hello, world
'));  
$(document.body).append($el);

Ví dụ: bạn có thể sử dụng phương pháp này để thêm một mục danh sách mới vào cuối danh sách.

Thêm nó làm anh chị em của một phần tử hiện có

$('p.last').after('A new paragraph
')  
$('ul li:first').before('new item
')

Đây là một lựa chọn tốt nếu bạn muốn thêm một đoạn văn mới vào giữa hai đoạn văn bản khác.

Thay thế một phần tử hiện có

Bạn có thể hoán đổi một phần tử hiện có cho một phần tử mới được tạo bằng cách sử dụng thay bằng() phương pháp:

$('#old').replaceWith('New paragraph
');

Bao quanh một phần tử hiện có

Đây là một trường hợp sử dụng khá hiếm, nhưng bạn có thể muốn đưa một phần tử hiện có vào một phần tử mới. Ví dụ, bạn có thể có một mã số phần tử mà bạn muốn bao bọc trong một vì :

$('code#n1').wrap('

')

Truy cập phần tử bạn đã tạo

Các $ () hàm trả về một đối tượng jQuery. Điều này rất hữu ích cho các hoạt động tiếp theo:

$el = $('p'); $('body').append($el);

Lưu ý rằng, theo quy ước, các lập trình viên jQuery thường đặt tên cho các biến jQuery bằng một ký hiệu đô la đứng đầu. Đây chỉ đơn giản là một lược đồ đặt tên và không liên quan trực tiếp đến $ () hàm số.

Tạo phần tử bằng jQuery

Mặc dù bạn có thể thao tác DOM bằng các hàm JavaScript gốc, jQuery làm cho việc này dễ dàng hơn nhiều. Việc hiểu rõ về DOM vẫn rất hữu ích, nhưng jQuery làm cho việc làm việc với nó trở nên dễ chịu hơn rất nhiều.

Đăng lại Đăng lại tiếng riu ríu E-mail Người hùng tiềm ẩn của các trang web: Hiểu DOM

Học thiết kế web và cần biết thêm về Mô hình đối tượng tài liệu? Đây là những gì bạn cần biết về DOM.

Đọc tiếp Chủ đề liên quan

Lập trình
Phát triển web
jQuery

Giới thiệu về tác giả Bobby Jack(58 bài báo đã xuất bản)

Bobby là một người đam mê công nghệ, người đã làm việc như một nhà phát triển phần mềm trong gần hai thập kỷ. Anh ấy đam mê chơi game, làm Biên tập viên đánh giá tại Tạp chí Switch Player và đắm mình trong tất cả các khía cạnh của xuất bản trực tuyến và phát triển web.

Xem thêm từ Bobby Jack

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký