简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  Tutorial jQuery: Bagaimana untuk memuatkan dan menghidupkan kandungan menggunakan jQuery

Tutorial jQuery: Bagaimana untuk memuatkan dan menghidupkan kandungan menggunakan jQuery

王林
王林asal
2023-09-03 21:21:071383semak imbas

Mengklik mana-mana pautan pada halaman web biasanya akan memuatkan kandungan URL tersebut dalam penyemak imbas kami. Beginilah cara kebanyakan pautan dan tapak web di internet berfungsi. Walau bagaimanapun, anda juga boleh menukar tingkah laku lalai ini dengan beberapa kod untuk memuatkan kandungan URL baharu ke dalam elemen khusus halaman web semasa tanpa memuatkan semula keseluruhan halaman.

Ini boleh dicapai dengan sedikit bantuan daripada JavaScript. Kami akan menggunakan perpustakaan jQuery untuk melakukan pengangkatan berat yang berkaitan dengan animasi dan pemuatan kandungan AJAX.

Anda juga boleh memuatkan dan menghidupkan kandungan menggunakan JavaScript biasa.

Sedia tanda

Kami akan menggunakan halaman web yang sangat mudah untuk menunjukkan cara kesannya berfungsi. Walau bagaimanapun, prinsip yang anda pelajari di sini juga digunakan untuk tapak web lain. Ini adalah markup untuk halaman utama laman web yang akan kami muatkan dan dianimasikan. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="team.html">Our Team</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>

    <span class="loader"></span>

    <section id="content">
        <img  src="dog.svg" / alt="Tutorial jQuery: Bagaimana untuk memuatkan dan menghidupkan kandungan menggunakan jQuery" >

        <h1>Embrace Pawsitivity, Transform Lives!</h1>

        <p>Welcome to Pawsitive Care Foundation, a dedicated organization working towards the well-being and protection of animals.</p>

        <p>Our animal Welfare NGO provides a range of services to support animal welfare:</p>

        <ol>
            <li>Rescue and rehabilitation of abused and abandoned animals</li>
            <li>Adoption programs to find loving homes for animals in need</li>
            <li>Education and awareness campaigns to promote responsible pet ownership</li>
            <li>Lobbying and advocacy for stronger animal protection laws</li>
            <li>Collaboration with local communities to implement spay/neuter programs</li>
        </ol>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script src="load-content.js"></script>
</body>
</html>
Teg

memaut ke fail style.css, yang mengandungi CSS yang digunakan untuk menggayakan semua halaman web. Badan halaman web mengandungi elemen nav, yang mengandungi senarai pautan yang boleh diakses oleh pengguna. Terdapat elemen span dan kelas loader. Setiap kali pengguna mengklik salah satu pautan dalam navigasi, kami akan menunjukkan dan menyembunyikan elemen pemuat ini. Pemuat akan menunjukkan bahawa halaman sedang dimuatkan. nav 元素，其中包含用户可以访问的链接列表。有一个 span 元素和 loader 类。每当用户单击导航中的链接之一时，我们将显示和隐藏此加载器元素。该加载程序将指示当前正在加载页面。

之后，我们有一个 section 元素，其中 id 设置为 content。我们网站的每个网页都会有此部分。本节中的内容是我们将使用 AJAX 加载的内容。我们在 body 元素末尾附近还有两个 script 标签。第一个 script 标签加载 jQuery，而第二个标签加载我们自己的 JavaScript 文件。

在一些 CSS 的帮助下，我们的页面如下所示：

Tutorial jQuery: Bagaimana untuk memuatkan dan menghidupkan kandungan menggunakan jQuery

您可以创建名为 about.html、team.html 和 contact.html 的类似页面。

设置加载程序和内容的样式

我们现在将学习如何使用 CSS 为加载器设置动画，以便在加载新内容的过程中加载器不断旋转。这是让我们的加载程序保持旋转的 CSS。

 .loader {
   background: white;
   width: 30px;
   height: 30px;
   display: inline-block;
   position: absolute;
   right: 2rem;
   top: 1.2rem;
   animation: 0.5s infinite spin;
   border-radius: 50%;
   border-top: 5px solid black;
   border-bottom: 5px solid gray;
 }

 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
 }

这里有几点需要注意。首先，装载机具有绝对定位。这会将其脱离文档的正常流程，以便我们可以将其放置在任何我们想要的位置，而不会中断其他内容的流程。

我们使用 animation 属性根据 spin 关键帧值连续为加载程序设置动画，其中每个动画循环在 0.5 秒内完成。

使用 border-radius: 50% 使我们的加载器变圆，因为它具有相同的宽度和高度。在顶部和底部使用不同的边框颜色只是一种样式偏好。

我们还将使用以下 CSS 来确保我们正在加载的内容覆盖正文的整个宽度。

section#content {
   width: 100% !important;
}

当我们为主要内容制作动画时，这将变得很重要。

您想要如何设计所有这些网页上的一般内容的样式取决于您。

处理链接点击和内容加载

如果此时加载任何网页，您会注意到的一件事是加载器会不断显示。我们只希望它在加载内容时出现。一旦我们的网页准备好，我们可以使用以下代码隐藏加载程序：

$(document).ready(function () {
    $(".loader").fadeOut();
});

由于我们想要控制用户单击导航菜单中的任何链接时发生的情况，因此我们需要为这些链接附加一个侦听器。侦听器的处理函数将包含我们想要在每次链接单击时执行的所有代码。这是我们的点击处理程序的代码：

$("nav li a").on("click", function(event) {
    event.preventDefault();
    
    const loadURL = `${$(this).attr("href")} #content`;
    $("#content").hide("fast", function() {
      loadContent(loadURL);
    });   
    $(".loader").fadeIn("normal");
    
    window.location.hash = $(this).attr("href").slice(0, -5);
});

我们在点击处理程序中做的第一件事是防止发生默认操作。本例中的默认操作是指用户导航到链接的 URL。

由于我们已阻止在浏览器中加载链接的 URL，因此我们有责任为查看者手动加载此内容。为此，我们首先获取所单击链接的 href 属性的值。我们还在 URL 末尾附加 #content 因为这是我们实际想要加载的内容。

我们在 jQuery 中使用 hide() 方法来隐藏 #content 部分。我们隐藏此部分是因为它当前包含用户尝试离开的页面的标记。 hide() 方法接受字符串或数字作为其第一个参数。该值决定隐藏所选元素所需的时间。将其设置为快速可在 200 毫秒内隐藏内容。

hide() 方法会对所选元素的宽度、高度和不透明度进行动画处理，直到它们变为 0。一旦它们达到零，display 属性就会设置为 none。

第二个参数是一个回调函数，在隐藏动画完成后触发。我们在回调函数中调用 loadContent()

Selepas itu, kami mempunyai elemen section dengan id ditetapkan kepada content. Setiap halaman di laman web kami akan mempunyai bahagian ini. Kandungan dalam bahagian ini ialah apa yang akan kami muatkan menggunakan AJAX. Kami juga mempunyai dua teg script berhampiran penghujung elemen body. Teg script pertama memuatkan jQuery, manakala teg kedua memuatkan fail JavaScript kami sendiri. 🎜 🎜Dengan bantuan beberapa CSS, halaman kami kelihatan seperti ini: 🎜 🎜Tutorial jQuery: Cara memuatkan dan menghidupkan kandungan menggunakan jQuery🎜 🎜Anda boleh membuat halaman serupa bernama 🎜about.html🎜, 🎜team.html🎜 dan 🎜contact.html🎜. 🎜

Menggayakan pemuat dan kandungan 🎜 🎜Kami kini akan belajar cara menggunakan CSS untuk menghidupkan pemuat supaya ia berputar semasa memuatkan kandungan baharu. Ini adalah CSS yang memastikan pemuat kami berputar. 🎜 
function loadContent(url) {
    $("#content").load(url, function() {
      showNewContent();
    });
}

function showNewContent() {
    $("#content").show("fast", function() {
      $(".loader").fadeOut("fast");
    });
}
🎜Ada beberapa perkara yang perlu diperhatikan di sini. Pertama, pemuat mempunyai kedudukan mutlak. Ini membawanya keluar daripada aliran biasa dokumen supaya kita boleh meletakkannya di mana-mana yang kita mahu tanpa mengganggu aliran kandungan lain. 🎜 🎜Kami menggunakan atribut animasi untuk menghidupkan pemuat secara berterusan berdasarkan nilai bingkai utama spin, di mana setiap gelung animasi selesai dalam 0.5 saat. 🎜 🎜Gunakan border-radius: 50% untuk menjadikan pemuat kami dibundarkan kerana ia mempunyai lebar dan ketinggian yang sama. Menggunakan warna sempadan yang berbeza di bahagian atas dan bawah hanyalah pilihan gaya. 🎜 🎜Kami juga akan menggunakan CSS berikut untuk memastikan kandungan yang kami muatkan meliputi keseluruhan lebar badan. 🎜 rrreee 🎜Ini akan menjadi penting apabila kita menghidupkan kandungan utama. 🎜 🎜Bagaimana anda mahu menggayakan kandungan umum pada semua halaman ini terpulang kepada anda. 🎜

Mengendalikan klik pautan dan pemuatan kandungan🎜 🎜Jika anda memuatkan mana-mana halaman web pada masa ini, satu perkara yang anda akan perasan ialah pemuat akan terus muncul. Kami hanya mahu ia muncul apabila kandungan sedang dimuatkan. Setelah halaman kami sedia, kami boleh menggunakan pemuat belakang kod berikut: 🎜 rrreee 🎜Memandangkan kami ingin mengawal perkara yang berlaku apabila pengguna mengklik mana-mana pautan dalam menu navigasi, kami perlu melampirkan pendengar pada pautan ini. Fungsi pengendali pendengar akan mengandungi semua kod yang ingin kami laksanakan setiap kali pautan diklik. Berikut ialah kod untuk pengendali klik kami: 🎜 rrreee 🎜Perkara pertama yang kami lakukan dalam pengendali klik ialah menghalang tindakan lalai daripada berlaku. Tindakan lalai dalam contoh ini adalah untuk pengguna menavigasi ke URL yang dipautkan. 🎜 🎜Memandangkan kami telah menyekat URL yang dipautkan daripada dimuatkan dalam penyemak imbas, adalah menjadi tanggungjawab kami untuk memuatkan kandungan ini secara manual untuk penonton. Untuk melakukan ini, kami mula-mula mendapatkan nilai atribut href pautan yang diklik. Kami juga menambahkan #content pada penghujung URL kerana itulah yang sebenarnya ingin kami muatkan. 🎜 🎜Kami menggunakan kaedah hide() dalam jQuery untuk menyembunyikan bahagian #content. Kami menyembunyikan bahagian ini kerana pada masa ini ia mengandungi penanda untuk halaman yang pengguna cuba tinggalkan. Kaedah hide() menerima rentetan atau nombor sebagai hujah pertamanya. Nilai ini menentukan tempoh masa yang diperlukan untuk menyembunyikan elemen yang dipilih. Tetapkannya kepada Pantas untuk menyembunyikan kandungan dalam 200 milisaat. 🎜 Kaedah 🎜hide() menghidupkan lebar, ketinggian dan kelegapan elemen yang dipilih sehingga mencapai 0. Setelah mereka mencapai sifar, atribut display ditetapkan kepada none. 🎜 🎜Parameter kedua ialah fungsi panggil balik, yang dicetuskan selepas animasi penyembunyian selesai. Kami memanggil loadContent() dalam fungsi panggil balik. 🎜

接下来，我们使用 fadeIn() 方法使我们的 loader 元素在加载页面内容时可见。我们还更新页面的 URL 以添加反映当前单击的链接的哈希值。

现在，我们将定义 loadContent() 函数，该函数接受您要加载的 URL 作为其参数。 loadContent() 函数使用另一个名为 showNewContent() 的辅助函数，如下所示：

function loadContent(url) {
    $("#content").load(url, function() {
      showNewContent();
    });
}

function showNewContent() {
    $("#content").show("fast", function() {
      $(".loader").fadeOut("fast");
    });
}

loadContent() 方法使用 jQuery 中内置的 load() 方法来加载 #content 元素中指定 URL 的内容。加载完成后执行回调函数。

我们使用回调函数来执行另一个名为 showNewContent() 的函数。还记得我使用 hide() 方法来隐藏 #content 元素吗？现在，我们将借助 show() 方法使其再次可见。

show() 方法基本上与 hide() 方法相反。它将通过逐渐增加所选元素的宽度、高度和不透明度来使所选元素可见。

在上一节中，我使用了一些 CSS 来确保内容元素的宽度始终保持在 100%。这样做是为了抵消 show() 和 hide() 更新所选元素宽度的影响。在我看来，保持宽度不变，同时对高度和不透明度进行动画处理看起来更好。

最终想法

在本教程中，我们学习了如何使用流行的 jQuery 库中的内置方法来加载我们网站上不同网页的内容并为其设置动画。

如果您想在网站上重现效果，请记住一些事项。首先，标记应该有一个内容元素，您可以在 AJAX 请求的帮助下动态加载新内容。其次，所有链接的单击处理程序应防止导航到单击的链接的默认行为。第三，您尝试以这种方式加载的网页最好属于同一域、子域等。这是因为它们将受到同源策略的约束。

如果您不打算使用 jQuery，也可以使用纯 JavaScript 实现相同的效果。

Atas ialah kandungan terperinci Tutorial jQuery: Bagaimana untuk memuatkan dan menghidupkan kandungan menggunakan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery css ajax html 回调函数 字符串 循环 href display border animation
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk mengembalikan benar dalam JavaScript jika elemen induk mengandungi elemen anak?Artikel seterusnya：Bagaimana untuk mengembalikan benar dalam JavaScript jika elemen induk mengandungi elemen anak?

Artikel berkaitan

Lihat lagi