Làm cách nào để đọc tệp HTML trong jQuery?

Question

Nếu chúng ta muốn thêm jQuery vào trang Html bằng cách tải xuống tệp jQuery, thì chúng ta phải làm theo các bước được đưa ra bên dưới. Sử dụng các bước này, bất kỳ người dùng nào cũng có thể dễ dàng thêm jQuery

Nội dung chính Show

1. Tạo tệp nhúng
2. AJAX – NHẬN yêu cầu
3. phương thức tải ()
4. Bản trình diễn
5. Kết luận
Cạo từ phía máy khách là gì?
Triển khai cạo phía máy khách bằng jQuery
điều kiện tiên quyết
Tìm nạp trang từ xa bằng cách sử dụng Get
Trích xuất dữ liệu mong muốn bằng phương pháp tìm kiếm của jQuery
Cân nhắc về Bảo mật
Hạn chế
Phần kết luận
Làm cách nào để tải tệp HTML trong jQuery?
Làm cách nào để lấy văn bản HTML trong jQuery?
Làm cách nào để chuyển dữ liệu từ HTML sang jQuery?
Cách lấy giá trị từ HTML trong jQuery?

Bước 1. Đầu tiên, chúng ta phải tải xuống tệp jquery js từ trang web chính thức sau của jQuery. https. // jquery. com/tải xuống/

Làm cách nào để đọc tệp HTML trong jQuery?

Bước 2. Khi chúng tôi đã tải xuống tệp, chúng tôi phải mở tệp Html mà chúng tôi muốn thêm jquery vào

Bước 3. Sau đó, chúng ta phải đặt con trỏ giữa thẻ đầu ngay trước thẻ tiêu đề. Và, sau đó chúng ta phải sử dụng

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

Cách thêm hình ảnh xác thực vào liên hệ HTML

Vui lòng bật JavaScript

Cách thêm hình ảnh xác thực vào trang liên hệ HTML

Đ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 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


  
  How to include HTML page with jQuery
  
  
  
 
    
    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 theo phương thức load()

Mã hoàn thành


 
  How to include HTML page with jQuery
  
  
  
 
  
  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

Trang web của bạn đôi khi có thể cần sử dụng thông tin từ các trang web khác không cung cấp API. Chẳng hạn, bạn có thể cần lấy thông tin giá cổ phiếu từ một trang web trong thời gian thực và hiển thị nó trong một tiện ích của trang web của bạn. Tuy nhiên, một số trang web tổng hợp giá cổ phiếu không cung cấp API

Trong những trường hợp như vậy, bạn cần truy xuất mã nguồn HTML của trang web và tìm thông tin bạn cần theo cách thủ công. Quá trình truy xuất và phân tích cú pháp HTML theo cách thủ công này để tìm thông tin cụ thể được gọi là quét web

Trong hướng dẫn này, bạn sẽ học cách cạo trang web bằng jQuery, một công cụ nhanh và linh hoạt để phân tích cú pháp và thao tác HTML. Mặc dù jQuery thường được sử dụng để tương tác hiệu quả với HTML và CSS từ JavaScript phía máy khách, nhưng khả năng thao tác và duyệt DOM của nó kết hợp với tính năng AJAX khiến nó trở thành một lựa chọn chắc chắn để quét web

Cạo từ phía máy khách là gì?

Quét phía máy khách liên quan đến việc tìm nạp nguồn của trang web dưới dạng HTML bằng cách sử dụng URL của trang và phân tích cú pháp thông tin để có được thông tin cụ thể

Ví dụ: bạn có thể muốn xây dựng một công cụ tìm kiếm mã. Một trang web như Stack Overflow cung cấp API để truy cập các câu hỏi và câu trả lời của họ theo chương trình. Tuy nhiên, các trang web hướng dẫn khác, chẳng hạn như trang này từ Bản nháp. nhà phát triển, có các khối mã nhưng không cung cấp API để sử dụng thông tin. Để đọc các khối mã của họ, bạn sẽ phải sử dụng tính năng quét phía máy khách, như đã giải thích trong hướng dẫn này

Triển khai cạo phía máy khách bằng jQuery

Hướng dẫn này chỉ cho bạn cách cạo một trang web bằng jQuery. jQuery là một thư viện JavaScript nhanh và mạnh, hỗ trợ duyệt tài liệu HTML và thao tác với các thuộc tính phần tử HTML. Nó cũng có các tính năng có thể xử lý các sự kiện của các phần tử HTML. jQuery sử dụng bộ chọn CSS để chọn đối tượng

điều kiện tiên quyết

Bắt đầu bằng cách thêm một tham chiếu đến thư viện jQuery bằng cách sử dụng thẻ

<script src="https://code.jquery.com/jquery-3.6.0.min.js">script>

`Tìm nạp trang từ xa bằng cách sử dụng Get`

Trong phần này, bạn sẽ tìm hiểu cách tìm nạp trang HTML từ xa bằng cách sử dụng phương thức get() của jQuery. Phương thức get() tải dữ liệu từ máy chủ bằng cách sử dụng http get request

Yêu cầu get() cho phép bạn xác định chức năng gọi lại có thể được thực thi khi yêu cầu nhận thành công. Hàm gọi lại cũng chấp nhận tham số

Hãy xem xét một trang web mẫu từ Bản nháp. blog của nhà phát triển. Trang web này chứa các phần tử HTML có ID và các lớp khác nhau và một số có thuộc tính. Bạn sẽ tìm nạp mã HTML hoàn chỉnh của trang này và cảnh báo nó

Để tìm nạp URL, hãy chuyển nó tới phương thức get() của jQuery và xác định hàm gọi lại bằng câu lệnh cảnh báo. Bạn có thể chuyển dữ liệu HTML được trả về bởi yêu cầu get(), như được hiển thị bên dưới

$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert(html);
});

Bạn sẽ thấy mã HTML hoàn chỉnh của trang web. Đầu ra được cắt bớt để chỉ hiển thị HTML mẫu

<html lang="en"><head>    <meta charset="utf-8">    <title>How to Use Markdown | Draft.devtitle>  <meta content="Draft.dev" property="og:site_name">      <meta content="How to Use Markdown" property="og:title">        <meta content="article" property="og:type">      <meta content="If you don't know what Markdown is, or if you've only heard of it, it may seem confusing how a tool for writing can do these things and be held in such high regard by an entire community. This blog post will dive a bit deeper into why Markdown was developed, what exactly it is, and why you should use it. " property="og:description"> 
--
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js">script>body>html>

Đây là cách bạn có thể lấy mã nguồn HTML hoàn chỉnh của một trang web bằng cách sử dụng phương thức get() của jQuery

`Trích xuất dữ liệu mong muốn bằng phương pháp tìm kiếm của jQuery`

Trong phần này, bạn sẽ tìm hiểu cách trích xuất dữ liệu mong muốn từ nguồn HTML (ví dụ: trích xuất văn bản của một phần tử HTML cụ thể hoặc trích xuất văn bản của các phần tử với một lớp cụ thể). Ngoài ra, bạn sẽ học cách truy cập các phần tử có cùng lớp HTML

Ghi chú. để biết ID hoặc lớp của các thành phần HTML trong trang web, bạn có thể nhấp chuột phải vào trang web và chọn tùy chọn xem nguồn trang

jQuery cung cấp phương thức

$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert(html);
});

2 để tìm kiếm thông qua các đối tượng hậu duệ có sẵn trong tập hợp các phần tử DOM. Bạn có thể sử dụng bộ chọn CSS để tìm một phần tử. Bộ chọn CSS xác định các thành phần áp dụng kiểu CSS
Nhận văn bản phần tử bằng ID
Thuộc tính ID được sử dụng để chỉ định một ID duy nhất cho các thành phần HTML trong trang web của bạn. Bạn không thể xác định cùng một ID cho nhiều thành phần trong cùng một trang HTML. CSS và JavaScript trong trang của bạn sử dụng ID này để truy cập vào các phần tử cụ thể nhằm đặt kiểu hoặc thực hiện bất kỳ thao tác nào khác trên phần tử
Trong quá trình quét dữ liệu, bạn có thể sử dụng ID này để tìm và truy cập phần tử. URL mẫu có một phần tử có ID tại sao sử dụng-đánh dấu. Sử dụng phương pháp 
$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert(html);
});

2, bạn sẽ tìm thấy phần tử có ID này và in thông tin văn bản của nó
Để tìm một phần tử có ID, bạn cần sử dụng bộ chọn ID, đó là #. Ví dụ: để chọn một phần tử có ID tại sao sử dụng-markdown, hãy đặt trước ID của phần tử đó là 
$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert(html);
});

4 và chuyển nó cho phương thức $.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert(html);
});

2, như minh họa bên dưới. Sau khi phần tử được chọn, bạn có thể sử dụng phương thức $.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert(html);
});

6 để truy cập thuộc tính văn bản của phần tử

$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {

  alert($(html).find("#why-use-markdown").text());
  
});

Bây giờ bạn đã truy cập phần tử HTML bằng ID của nó
Nhận văn bản phần tử bằng tên lớp
Tiếp theo, bạn sẽ học cách chọn các phần tử bằng cách sử dụng lớp của nó. Thuộc tính class được sử dụng để chỉ định lớp của các phần tử HTML. Không giống như thuộc tính ID, bạn có thể có nhiều phần tử với cùng một lớp trong một trang web
Thuộc tính lớp cho phép bạn xác định một tập hợp các kiểu bằng CSS. Kiểu này sẽ được áp dụng cho tất cả các thành phần được xác định bằng lớp cụ thể đó. Trong quá trình cạo dữ liệu, bạn có thể sử dụng tên lớp này để tìm tất cả các phần tử với một lớp cụ thể và lấy dữ liệu từ các phần tử đó
Trong URL mẫu, có một phần tử có tiêu đề trang lớp



Để tìm một phần tử có lớp, bạn cần sử dụng bộ chọn lớp, đó là 
$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert(html);
});

7. Ví dụ: để chọn một phần tử có tiêu đề trang lớp, thêm tiền tố $.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert(html);
});

7 với lớp của phần tử đó và chuyển nó cho phương thức $.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert(html);
});

2, như minh họa bên dưới. Sau khi phần tử được chọn, bạn có thể sử dụng phương thức $.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert(html);
});

6 để truy cập thuộc tính văn bản của phần tử
$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert($(html).find(".page-title").text());
});
Đây là cách bạn tìm thấy một phần tử với một lớp
Xử lý nhiều phần tử với cùng một lớp
Như đã thảo luận trước đây, có thể có nhiều phần tử có cùng một lớp trong tài liệu HTML. Do đó, bây giờ bạn sẽ học cách tìm nhiều hơn một phần tử trong cùng một lớp
Bạn có thể sử dụng phương thức 
$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert(html);
});

2 để tìm một phần tử bằng tên lớp của nó. Khi có nhiều phần tử cùng lớp, bạn có thể sử dụng phương thức <html lang="en"><head>    <meta charset="utf-8">    <title>How to Use Markdown | Draft.devtitle>  <meta content="Draft.dev" property="og:site_name">      <meta content="How to Use Markdown" property="og:title">        <meta content="article" property="og:type">      <meta content="If you don't know what Markdown is, or if you've only heard of it, it may seem confusing how a tool for writing can do these things and be held in such high regard by an entire community. This blog post will dive a bit deeper into why Markdown was developed, what exactly it is, and why you should use it. " property="og:description"> 
--
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js">script>body>html>
2 để lặp lại các phần tử. Hàm gọi lại được xác định sẽ được áp dụng cho từng phần tử
Trong URL mẫu, có nhiều phần tử được xác định bằng phần tô sáng của lớp. Nó là lớp được sử dụng để biểu thị tất cả các khối mã có hướng dẫn đánh dấu
Khi bạn tìm phần tử bằng cách sử dụng lớp này, bạn sẽ nhận được một danh sách các đối tượng jQuery. Sau đó, bạn có thể sử dụng phương thức 
<html lang="en"><head>    <meta charset="utf-8">    <title>How to Use Markdown | Draft.devtitle>  <meta content="Draft.dev" property="og:site_name">      <meta content="How to Use Markdown" property="og:title">        <meta content="article" property="og:type">      <meta content="If you don't know what Markdown is, or if you've only heard of it, it may seem confusing how a tool for writing can do these things and be held in such high regard by an entire community. This blog post will dive a bit deeper into why Markdown was developed, what exactly it is, and why you should use it. " property="og:description"> 
--
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js">script>body>html>
2 để lặp lại các phần tử này và in văn bản của các phần tử để in các khối hướng dẫn, như minh họa bên dưới

// Get HTML from page and fetching the element with ID 

$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  
  // Loop through elements you want to scrape content from
  $(html).find(".highlight").each(function() {

    alert($(this).text());

  });

});

Đây là cách bạn có thể tìm thấy một phần tử có tên lớp của nó và lặp lại các phần tử phù hợp
Cân nhắc về Bảo mật
Khi tìm nạp dữ liệu từ một URL, nó có thể chứa các tập lệnh. Theo mặc định, API của jQuery không chạy tập lệnh. Tuy nhiên, mã HTML như 
<html lang="en"><head>    <meta charset="utf-8">    <title>How to Use Markdown | Draft.devtitle>  <meta content="Draft.dev" property="og:site_name">      <meta content="How to Use Markdown" property="og:title">        <meta content="article" property="og:type">      <meta content="If you don't know what Markdown is, or if you've only heard of it, it may seem confusing how a tool for writing can do these things and be held in such high regard by an entire community. This blog post will dive a bit deeper into why Markdown was developed, what exactly it is, and why you should use it. " property="og:description"> 
--
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js">script>body>html>
4 sẽ thực thi tập lệnh một cách gián tiếp. Do đó, bạn cần cẩn thận và dọn dẹp hoặc thoát khỏi các tập lệnh khỏi nguồn. Mặt khác, các tập lệnh không xác định có thể gây hại cho chương trình của bạn hoặc bạn có khả năng cung cấp quyền truy cập vào thông tin cá nhân của mình cho tin tặc
Hạn chế
Có một số hạn chế đối với việc quét web phía máy khách bằng jQuery
Nguồn của trang web có thể thay đổi theo thời gian. Do đó, bất kỳ thay đổi nào trong tên lớp hoặc ID của trang web đều có thể làm hỏng ứng dụng cạo
Các trang web động thường xuyên thay đổi rất khó bị loại bỏ khỏi phía máy khách do tính chất thay đổi của cấu trúc phần tử HTML, ID phần tử và các lớp phần tử. Ngoài ra, do các cân nhắc về bảo mật, các tập lệnh không được thực thi trong khi cạo. Vì vậy, các thành phần được tải bởi tập lệnh sẽ không được tải trong trang web động
It is difficult to scrape pages with pagination where the data is loaded with a script. If pagination is implemented where each page has a separate URL (for example, https://example.com?page=) then it’s possible to scrape by simply making separate requests. However, if the pages are loaded via AJAX calls (for example, an infinite scrolling page), then it’s difficult to scrape since scripts cannot be executed by jQuery.
Do đó, phương pháp này phù hợp nhất cho các trang sử dụng kết xuất phía máy chủ, HTML tĩnh đơn giản hoặc HTML một trang
Phần kết luận
Trong bài viết này, bạn đã học cách thực hiện quét web bằng jQuery, cách tìm các phần tử bằng cách sử dụng phần tử ID hoặc HTML của nó và cách xử lý các phần tử HTML có cùng lớp
jQuery là một công cụ nhanh và linh hoạt, cung cấp chức năng phân tích cú pháp và thao tác các phần tử HTML DOM, cho phép bạn xây dựng các ứng dụng thu thập dữ liệu mạnh mẽ cho các trang web
Tuy nhiên, khi quét các trang web theo cách thủ công bằng các chương trình của riêng bạn, có khả năng IP của bạn có thể bị chặn vì lý do bảo mật hoặc giới hạn truy cập. Trong trường hợp đó, bạn có thể sử dụng API, chẳng hạn như Scraping Bee, xử lý các trình duyệt không đầu và xoay vòng proxy cho bạn
Vikram AruchamyVikram Aruchamy là kiến trúc sư giải pháp đám mây thích xây dựng mọi thứ trên đám mây và là một nhà văn kỹ thuật thích viết về cách xây dựng mọi thứ trên đám mây. 
 
Làm cách nào để tải tệp HTML trong jQuery?
Cách tiếp cận.  . 
 Đầu tiên, chúng tôi sẽ tạo tệp HTML bên ngoài của mình
 Thêm phần tử div vào tệp HTML nơi chúng tôi muốn tải HTML bên ngoài
 Theo kịch bản, sử dụng hàm ready() để kiểm tra xem DOM đã sẵn sàng chưa
 Sau đó chọn phần tử div mà chúng tôi muốn tải HTML bằng load()
 
Làm cách nào để lấy văn bản HTML trong jQuery?
Để lấy nội dung HTML của một phần tử bằng jQuery, hãy sử dụng phương thức html() . Phương thức html() lấy nội dung html của phần tử được so khớp đầu tiên. 
Làm cách nào để chuyển dữ liệu từ HTML sang jQuery?
click(function () { var tmp = $(this). attr('id). tách ra("-"); . } . 
 Thêm thuộc tính tùy chỉnh vào phần tử (XHTML)
 Sử dụng ID thuộc tính và phân tích nó bằng regex
 Thuộc tính thuộc tính dữ liệu-* trong HTML5
 Sử dụng các phần tử con ẩn
 
Cách lấy giá trị từ HTML trong jQuery?
Lấy nội dung - văn bản(), html() và val()
. text() - Đặt hoặc trả về nội dung văn bản của các thành phần được chọn. html() - Đặt hoặc trả về nội dung của các thành phần được chọn (bao gồm đánh dấu HTML) val() - Đặt hoặc trả về giá trị của các trường biểu mẫu .

programming html

Làm cách nào để đọc tệp HTML trong jQuery?

nội dung

1. Tạo tệp nhúng

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

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

4. Bản trình diễn

5. Kết luận

Cạo từ phía máy khách là gì?

Triển khai cạo phía máy khách bằng jQuery

điều kiện tiên quyết

Tìm nạp trang từ xa bằng cách sử dụng Get

Trích xuất dữ liệu mong muốn bằng phương pháp tìm kiếm của jQuery

Nhận văn bản phần tử bằng ID

Nhận văn bản phần tử bằng tên lớp

Xử lý nhiều phần tử với cùng một lớp

Cân nhắc về Bảo mật

Hạn chế

Phần kết luận

Làm cách nào để tải tệp HTML trong jQuery?

Làm cách nào để lấy văn bản HTML trong jQuery?

Làm cách nào để chuyển dữ liệu từ HTML sang jQuery?

Cách lấy giá trị từ HTML trong jQuery?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

`Tìm nạp trang từ xa bằng cách sử dụng Get`

`Trích xuất dữ liệu mong muốn bằng phương pháp tìm kiếm của jQuery`