Computer >> Máy Tính >  >> Lập trình >> Javascript

Phương thức jQuery:append ()

jQuery:Giới thiệu ngắn gọn

jQuery là một thư viện JavaScript cho phép các nhà phát triển thao tác với DOM, viết các trình xử lý sự kiện, hoạt ảnh và các yêu cầu AJAX chỉ với một vài dòng mã. Điều này có thể thực hiện được với các bộ chọn và phương thức dành riêng cho API jQuery. Một trong những phương thức này là append() .

jQuery append () là gì?

append() phương thức có thể nhận một hoặc nhiều đối số của “nội dung” (có thể là một chuỗi HTML, văn bản, một mảng, một phần tử hoặc nhiều jQuery) và đính kèm hoặc “nối” nó vào cuối bất kỳ hoặc tất cả các phần tử phù hợp bộ chọn. Một số cách sử dụng phổ biến bao gồm thêm một mục vào cuối danh sách (chẳng hạn như một mục “việc cần làm” mới trong danh sách việc cần làm) hoặc hiển thị nội dung mới bằng cách nhấp vào nút. Bây giờ chúng ta hãy xem cách append() hoạt động với một số mã ví dụ.

Cách sử dụng jQuery append ()

Lấy ví dụ ở trên về việc chèn các mục vào danh sách việc cần làm, chúng ta sẽ thấy cách append() được gọi trên một bộ chọn và chèn nội dung vào tất cả các lựa chọn phù hợp.

Bắt đầu với HTML của chúng tôi để xây dựng danh sách việc cần làm cơ bản:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>To Do List</h2>
<ol class="list1">
<li>Read Chapters 1 & 2 </li>
<li>Meeting at 3:00pm</li>
<li>Write about yesterday's reading</li>
</ol>
</body>
</html>

Điều quan trọng cần lưu ý là đưa địa chỉ vào API jQuery bên trong <script> trong thẻ <head> của trang HTML. Nếu không, chúng tôi không thể sử dụng jQuery trong trang HTML của mình.

Bây giờ, danh sách việc cần làm của chúng tôi hiển thị rất đẹp!

Phương thức jQuery:append ()

Hôm nay chúng tôi cảm thấy làm việc hiệu quả, vì vậy hãy thêm một mục vào cuối danh sách. Còn kế hoạch ăn tối thì sao?

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Tham khảo bố cục HTML của chúng tôi, chúng tôi thấy danh sách được sắp xếp (<ol> ) có một lớp list1 . Đây là một tin tuyệt vời vì chúng tôi có thể chọn toàn bộ lựa chọn đó bằng cách thêm một <script> khác ở cuối :

<script>
 $(document).ready( () => {
   $(".list1").append("<li>Make dinner plans</li>")
 })
</script>

Bên trong của <script> , chúng tôi có một số ký hiệu $. Cái gì đây? Đây là những bộ chọn jQuery mạnh mẽ.

Chúng ta có thể chọn bất kỳ thứ gì trong DOM của mình bằng cách chuyển vào một phần tử, tên lớp hoặc tên id để đặt tên cho một số. Trong trường hợp này, chúng tôi đã chọn bất kỳ thứ gì có lớp list1, sẽ chọn toàn bộ <ol> yếu tố. (document) trên bộ chọn chọn toàn bộ trang và gọi ready() phương thức đợi để gọi dòng mã tiếp theo cho đến khi trang được tải đầy đủ. Điều này giúp giữ cho mã của chúng tôi chạy tuần tự.

Bây giờ, bên trong ready() của chúng tôi hàm gọi lại, chúng tôi đã chọn tất cả các phần tử có lớp list1. Trong trường hợp này, điều này sẽ chọn <ol> của chúng tôi và chèn <li> được chuyển tới append() ngay trên </ol> đóng của chúng tôi . Vì vậy, sau khi trang của chúng tôi tải, hãy Make dinner plans mục danh sách sẽ được thêm vào danh sách việc cần làm của chúng tôi:

Phương thức jQuery:append ()

Tuyệt vời! Bây giờ chúng ta hãy xem xét một ví dụ khác. Lần này, hãy hiển thị nhiều nội dung hơn sau khi một nút được nhấp vào.

jQuery append ():Một ví dụ trong thế giới thực

Giả sử chúng ta có một nút trên trang web của mình và chúng ta muốn hiển thị nội dung mới khi nút được nhấp. Sẽ hiệu quả và hài lòng hơn cho người dùng của chúng tôi nếu chúng tôi hiển thị nội dung mới mà không làm mới trang hoặc chuyển hướng.

Ở đây nói lên sức mạnh và sự sang trọng của jQuery :chúng tôi có thể hiển thị nội dung mới mà không cần làm mới hoặc chuyển hướng khi nút được nhấp.

Với HTML cơ sở này:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="content">
  <p>Hello World!</p>
</div>
<button id="btn-main">Click Me!</button>
</body>
</html>

Khá giống với cách chúng tôi bắt đầu danh sách công việc ngoại trừ chúng tôi có một nút:

Phương thức jQuery:append ()

Hãy sử dụng những gì chúng ta đã học về jQuery để thêm nội dung vào “Hello World!” khi nút được nhấp. 

<script>
  $(document).ready( () => {
    $("#main-btn").click( () => {
      $("p").append("<b>Goodbye</b>")
    })
  })
</script>

Một lần nữa, chúng tôi đã đưa thẻ