Tạo 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 jQuery JavaScript. Khi sử dụng jQuery, tác vụ đơn giản hơn 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 sẽ cần có thể thêm phần tử của mình vào 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 tập hợp mã JavaScript 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 sự cố JavaScript tương thích chéo giữa các trình duyệt khác nhau
Mục tiêu thứ hai là khắc phục lỗi nhưng cũng giải quyết sự khác biệt về cách triển khai giữa các trình duyệt. Cả hai mục tiêu đề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 yếu tố là gì?
An element is sometimes referred to as a tag. Although the two are often used interchangeably, there’s a subtle difference. A tag refers to the literal
or
you include in an HTML file to markup the text content. An element is the behind-the-scenes object that represents the marked-up text. Think of an element as the DOM counterpart to the HTML tags.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 của jQuery, việc tạo một phần tử bắt đầu bằng hàm đô la, $[]. Đây là lối tắt đến hàm jQuery[] cốt lõi. Chức năng này có ba mục đích riêng biệt, nó
- So khớp 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 phần tử mới
- Chạy chức năng 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 ta vừa tạo
Chuỗi phải trông giống như 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 dấu 12 ? "afternoon.jpg" : "morning.jpg";
$["", { src: photo }];
Cách thêm một phần tử
Sau khi tạo thành phần mới, bạn có thể thêm thành phần đó 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ác'
Thêm dưới dạng 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 mới vào giữa hai đoạn khác chẳng hạn.
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 phương thức replaceWith[]
$['#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 đặt một phần tử hiện có trong một phần tử mới. Ví dụ: bạn có thể có một phần tử mã mà bạn muốn bọc trong một
$['code#n1'].wrap[""
]
Truy cập phần tử bạn đã tạo
Hàm $[] trả về một đối tượng jQuery. Điều này hữu ích cho các hoạt động tiếp theo
________số 8_______Lưu ý rằng, theo quy ước, các lập trình viên jQuery thường đặt tên các biến jQuery bằng ký hiệu đô la ở đầu. Đây chỉ đơn giản là cách đặt tên và không liên quan trực tiếp đến hàm $[]
Tạo các phần tử bằng jQuery
Mặc dù bạn có thể thao tác DOM bằng cách sử dụng các hàm JavaScript gốc, nhưng jQuery giúp bạn thực hiện điều đó dễ dàng hơn nhiều. Việc hiểu rõ về DOM vẫn rất hữu ích, nhưng jQuery giúp làm việc với nó dễ chịu hơn rất nhiều