cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk memilih semua pautan dalam perenggan menggunakan jQuery?

Bagaimana untuk memilih semua pautan dalam perenggan menggunakan jQuery?

WBOY
WBOYke hadapan
2023-09-14 21:45:03985semak imbas

如何使用 jQuery 选择段落内的所有链接？

jQuery ialah perpustakaan JavaScript popular yang memudahkan traversal DOM HTML, pengendalian acara dan interaksi AJAX untuk pembangunan web yang pantas. Ia menyediakan pelbagai fungsi dan kaedah terbina dalam untuk membantu pembangun memanipulasi elemen HTML, gaya dan gelagat secara dinamik.

Dalam artikel ini, kita akan belajar cara memilih semua pautan dalam perenggan menggunakan jQuery. Memilih pautan dalam perenggan adalah keperluan biasa apabila kami ingin mengubah suai pautan ke bahagian tertentu tapak web (cth. menukar gaya, mencari pautan, dll.).

Bagaimana untuk memilih semua pautan dalam perenggan?

Memilih pautan dalam perenggan adalah tugas biasa, jadi terdapat banyak cara kita boleh memilih semua pautan dalam perenggan dalam jQuery. Mari lihat beberapa cara berbeza untuk memilih pautan dan lihat bagaimana jQuery boleh menyelesaikan tugas ini dengan cekap dan menulis kod yang lebih cekap dan boleh diselenggara.

Kaedah 1: Gunakan kaedah .children()

Kaedah

.filter() ialah kaedah yang disediakan oleh jQuery yang membolehkan pengguna mengembalikan semua elemen anak langsung bagi elemen yang dipilih. Untuk memilih pautan dalam perenggan yang mengandungi teg sauh dengan nama teg yang ditentukan, kita boleh menggunakan kaedah Kanak-kanak. Di bawah ialah sintaks untuk mencapai tujuan yang sama.

Tatabahasa

$("p").children("a").each(function() { 
   // add your styles 
});

Sintaks yang diberikan di atas mula-mula memilih semua elemen perenggan dengan bantuan fungsi "$". Selepas itu, ia memanggil kaedah Children() pada setiap elemen perenggan untuk mendapatkan semula semua tag anchor yang merupakan keturunannya. Akhir sekali, kaedah each() digunakan untuk berulang melalui setiap pautan dan memilih penambat sahaja, iaitu teg untuk menambah atau menukar gaya, atau melakukan sebarang tindakan lain.

Contoh

Dalam contoh ini, kami mentakrifkan butang "btn1" yang menggunakan kaedah .children() untuk memilih semua teg sauh yang merupakan anak langsung perenggan. Apabila butang diklik, kod jquery dilaksanakan yang mengembalikan semua elemen anak langsung bagi elemen yang dipilih, iaitu ia mengembalikan teks hijau "Tutorialspoint" daripada perenggan dalam contoh kami. 

<html>
   <head>
      <title>Select Links Inside Paragraph Using jQuery</title>
      <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
      <script>
         $(document).ready(function(){
            $("#btn2").click(function(){
               $("span").children("a").each(function(){
                  $(this).css("color", "violet");
               });
            });
         });
      </script>
      <style>
         .find-link-class {
            color: black;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <p>
         Welcome to <span><a href="https://www.php.cn/link/d36cad380b069785900bcfd258bdecea">Tutorialspoint</a></span>. A leading Ed Tech company striving to provide the best 
         learning material on technical and non-technical subjects.
      </p>
      <button id="btn2">Violet Link</button>
   </body>
</html>

Kaedah 2: Gunakan kaedah .filter()

Kaedah

.filter() ialah kaedah yang disediakan oleh jQuery yang membolehkan pengguna menapis elemen terpilih berdasarkan syarat tertentu. Untuk memilih pautan dalam perenggan yang mengandungi teg sauh dan kemudian mendapatkan teg ini, kita perlu menentukan nama teg dalam kaedah penapis(). Di bawah ialah sintaks untuk mencapai tujuan yang sama.

Tatabahasa

$("p").find("*").filter("a").each(function(){
   // add your styles
});

Sintaks yang diberikan di atas mula-mula memilih semua elemen perenggan dengan bantuan fungsi "$". Selepas itu, ia memanggil kaedah find() pada setiap elemen perenggan untuk mendapatkan semula semua tag anchor yang merupakan keturunannya. Akhir sekali, kaedah penapis() digunakan untuk mengulangi setiap pautan menggunakan kaedah each() dan memilih penambat sahaja, iaitu teg yang digunakan untuk menambah atau menukar gaya atau melakukan sebarang operasi lain.

Contoh

Dalam contoh ini, kami mentakrifkan butang "btn2" yang menggunakan kaedah .filter() untuk memilih semua teg sauh yang merupakan anak langsung perenggan. Apabila butang diklik, kod jquery dilaksanakan yang mengembalikan semua pautan, iaitu ia mengembalikan teks ungu "Tutorialspoint" daripada perenggan dalam contoh kami. 

<html>
   <head>
      <title>Select Links Inside Paragraph Using jQuery</title>
      <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
      <script>
         $(document).ready(function(){
            $("#btn1").click(function(){
               $("p").find("a").each(function(){
                  $(this).css("color", "green");
               });
            });
         });
      </script>
      <style>
         .find-link-class {
            color: black;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <p>
         Welcome to <span><a href="https://www.php.cn/link/d36cad380b069785900bcfd258bdecea">Tutorialspoint</a></span>. A leading Ed Tech company striving to provide the best 
         learning material on technical and non-technical subjects.
      </p>

      <button id="btn1">Green Link</button>
   </body>
</html>

Kaedah 3: Gunakan kaedah .has()

Kaedah

.has() ialah kaedah yang disediakan oleh jQuery yang membolehkan pengguna memilih elemen yang mempunyai unsur turunan tertentu. Untuk memilih pautan dalam perenggan yang mengandungi teg sauh dan kemudian mendapatkan teg ini, kami boleh menggunakan kaedah ini. Di bawah ialah sintaks untuk mencapai tujuan yang sama.

Tatabahasa

$("p:has(a)").find("a").each(function(){
   // add your styles
});

Sintaks yang diberikan di atas mula-mula memilih semua perenggan yang mengandungi tag anchor dengan bantuan pemilih :has(). Selepas itu, ia memanggil kaedah find() pada setiap elemen perenggan untuk mendapatkan semula semua tag anchor yang merupakan keturunannya. Akhir sekali, kaedah each() digunakan untuk mengulangi setiap pautan untuk menambah atau menukar gaya, atau melakukan sebarang operasi lain.

Contoh

Dalam contoh ini, kami mentakrifkan butang "btn3" menggunakan kaedah .has(). Apabila butang diklik, kod jQuery dilaksanakan dan fungsi memilih semua tag anchor yang mempunyai elemen keturunan tertentu. Iaitu, ia mengembalikan teks merah "Tutorialspoint" daripada perenggan dalam contoh kami. 

<html>
   <head>
      <title>Select Links Inside Paragraph Using jQuery</title>
      <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
      <script>
         $(document).ready(function(){
            $("#btn3").click(function(){
               $("p:has(a)").find("a").each(function(){
                  $(this).css("color", "red");
               });
            });
         });
      </script>
      <style>
         .find-link-class {
            color: black;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <p>
         Welcome to <span><a href="https://www.php.cn/link/d36cad380b069785900bcfd258bdecea">Tutorialspoint</a></span>. A leading Ed Tech company striving to provide the best 
         learning material on technical and non-technical subjects.
      </p>
      <button id="btn3">Red Link</button>
   </body>
</html>

Kesimpulan

Memilih pautan dalam perenggan adalah tugas yang sangat mudah kerana ia membantu dalam mengubah suai pautan untuk bahagian tertentu aplikasi web. Kami membincangkan cara yang berbeza untuk memilih semua pautan dalam perenggan menggunakan jQuery. Seperti yang dibincangkan, kami mempelajari tiga kaedah berbeza iaitu menggunakan kaedah .children() , kaedah .filter() dan kaedah .has() kerana semua kaedah ini adalah cekap dan mudah digunakan. Secara keseluruhan, jQuery ialah alat berkuasa yang memudahkan traversal HTML DOM, pengendalian acara dan interaksi AJAX untuk pembangunan web yang pantas.

Atas ialah kandungan terperinci Bagaimana untuk memilih semua pautan dalam perenggan menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery ajax html Filter 事件 dom 选择器
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk membuat div bergerak menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk membuat div bergerak menggunakan JavaScript?

Artikel berkaitan

Lihat lagi