Làm cách nào để tạo trang HTML bằng jQuery?

Nếu quen thuộc với PHP, bạn có thể nhanh chóng nhúng một tệp PHP hoặc HTML khác vào trang của mình bằng cách sử dụng các câu lệnh bao gồm và yêu cầu

Điều này giúp tiết kiệm thời gian khi bạn cần thêm cùng một dòng mã vào một số tệp

Nếu bạn không sử dụng tập lệnh phía máy chủ trên trang web của mình thì bạn có thể sử dụng iframe hoặc ngôn ngữ tập lệnh phía máy khách

Có hai cách trong jQuery để bao gồm một tệp trong một tệp HTML khác –

• yêu cầu AJAX
• phương thức tải ()

Bản trình diễn Tải xuống

---

nội dung

---

1. Tạo tệp nhúng

Trong phần trình bày, tôi đang bao gồm một tệp header.html đến index.html

Tệp header.html chứa bố cục menu

tiêu đề. html

    
Home
    
About
    
Blog
    
Contact

---

CSS

/* Menu */
.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: darkturquoise;
}

.menu li {
    float: left;
}

.menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.menu li a:hover {
    background-color: lightskyblue;
}

---

2. AJAX – NHẬN yêu cầu

Gửi các yêu cầu GET từ AJAX lấy dữ liệu từ máy chủ và sử dụng phản hồi của nó theo phương thức html() để thêm nó vào trang

Mã hoàn thành

  
  
  
  
  
 
    

    
Content
 

---

3. phương thức tải ()

Có một cách khác để làm điều này với. hàm tải (). Thao tác này cũng tải nội dung từ máy chủ và thêm nội dung đó vào bộ chọn

Cú pháp –

$( selector ).load( URL );

Bạn có thể chuyển URL của mình trong phương thức load()

Mã hoàn thành

 
  
  
  
  
 
  

  
Content
 

---

4. Bản trình diễn

Cả hai đều cho cùng một đầu ra -

Xem bản trình diễn

---

5. Kết luận

Cả hai cách đều trả về nội dung từ máy chủ nhưng tôi không khuyên bạn nên sử dụng tập lệnh phía Máy chủ trong dự án của mình như – PHP, nơi bạn sử dụng các câu lệnh dựng sẵn e. g. -, bao gồm, yêu cầu, bao gồm_một lần và yêu cầu_một lần

Phương thức html() của jQuery dùng để thay đổi toàn bộ nội dung của phần tử được chọn. Nó thay thế nội dung phần tử đã chọn bằng nội dung mới

Ghi chú. Đây là một chức năng rất hữu ích nhưng hoạt động trong một khu vực hạn chế do tài liệu API của nó. Tài liệu API của hàm jQuery html bao gồm ba chữ ký phương thức

Chữ ký phương thức đầu tiên không có đối số, vì vậy nó chỉ trả về HTML trong phần tử đó. Hai chữ ký còn lại có một đối số duy nhất. tôi. e. một chuỗi hoặc một hàm trả về một chuỗi

cú pháp

Nó được sử dụng để trả lại nội dung

Nó được sử dụng để thiết lập nội dung

Nó được sử dụng để thiết lập nội dung bằng cách gọi chức năng

Phương thức jQuery html() được sử dụng để đặt nội dung hoặc trả về nội dung của các phần tử được chọn

• Để thiết lập nội dung. Khi bạn sử dụng phương thức này để đặt nội dung, nó sẽ ghi đè lên nội dung của tất cả các phần tử đã khớp
• Để trả lại nội dung. Khi bạn sử dụng phương thức này để trả về nội dung, nó sẽ trả về nội dung của phần tử được so khớp đầu tiên

Phương thức text() được sử dụng để đặt hoặc chỉ trả về nội dung văn bản của các thành phần được chọn

Các tham số của phương thức jQuery html()

Tham sốMô tảNội dungĐó là một tham số cần thiết. Nó được sử dụng để chỉ định nội dung mới cho các phần tử được chọn. Nó cũng có thể chứa các thẻ HTML. Chức năng (chỉ mục, nội dung hiện tại)Đó là một tham số tùy chọn. Nó chỉ định một hàm trả về nội dung mới cho các phần tử đã chọn

• Mục lục. Nó hiển thị vị trí chỉ mục của phần tử trong tập hợp
• nội dung hiện tại. Nó hiển thị nội dung HTML hiện tại của phần tử được chọn

Ví dụ về phương thức jQuery html()

Hãy lấy một ví dụ để chứng minh phương thức jQuery html(). Nó đang thay đổi nội dung của tất cả các phần tử p

Kiểm tra nó ngay bây giờ

đầu ra

Nhấn vào đây để thay đổi nội dung của tất cả các phần tử p

Đây là một đoạn

Đây là một đoạn khác

---

jQuery html() ví dụ 2

Hãy xem một ví dụ khác về phương thức jQuery html() trả về nội dung HTML. Nó chỉ trả về nội dung của đoạn đầu tiên

Tôi có thể sử dụng jQuery với HTML không?

Làm cách nào để liên kết jQuery trong trang HTML?

Làm cách nào để thêm HTML vào div bằng jQuery?