Ketahui lebih lanjut tentang beberapa kaedah biasa dalam jQuery

Sebagai pembangun bahagian hadapan Web, kami sering menggunakan pustaka jQuery Ia adalah salah satu perpustakaan JavaScript yang paling banyak digunakan dalam industri dan boleh membawa manfaat kepada kami seperti memudahkan pengekodan dan meningkatkan kecekapan pembangunan. Antaranya, kaedah yang disediakan dalam jQuery boleh membantu pembangun dengan cepat memproses elemen DOM dalam halaman, melaksanakan animasi, melakukan pengikatan acara dan operasi lain. Dalam artikel ini, kami akan melihat secara mendalam beberapa kaedah biasa dalam jQuery dan penggunaannya.

Pengenalan kaedah jQuery

Sama seperti kami memperkenalkan perpustakaan lain, sebelum menggunakan jQuery, kami perlu memperkenalkannya ke dalam projek kami. Kaedah yang paling biasa ialah memuat turun jQuery dari tapak web rasmi (http://jquery.com/) dan kemudian memperkenalkannya ke dalam projek:

<script></script>

Jika anda menggunakan perkhidmatan CDN, anda boleh memperkenalkan ia secara langsung :

<script></script>

Selepas diperkenalkan, kami boleh menggunakan kaedah yang disediakan oleh jQuery.

Pemilih Asas

Pemilih ialah fungsi jQuery yang sangat berkuasa, yang boleh mengesan elemen dalam dokumen dengan cepat. Berikut ialah beberapa pemilih asas:

• Pemilih teg: Gunakan nama teg sebagai pemilih:

$('p') // 选取所有<p>元素</p>

• Pemilih kelas: Gunakan nama kelas Sebagai pemilih:

$('.my-class') // 选取所有class="my-class"的元素

• Pemilih ID: Gunakan ID sebagai pemilih:

$('#my-id') // 选取所有id="my-id"的元素

• Pemilih atribut: Berdasarkan elemen Atribut untuk memilih elemen:

$('input[type="checkbox"]') // 选取所有type="checkbox"的<input>元素

• Pemilih keturunan: pilih semua elemen keturunan dalam elemen:

$('div p') // 选取所有<div>元素中的所有<p>元素</p>
<p> Selain itu, terdapat Untuk banyak pemilih yang lebih kompleks, anda boleh merujuk kepada jQuery's dokumentasi rasmi untuk butiran lanjut. </p>
<h2 id="Operasi-DOM-asas">Operasi DOM asas</h2>
<p>Selain pemilih, jQuery juga menyediakan beberapa kaedah operasi DOM yang mudah. Berikut ialah beberapa kaedah operasi DOM asas: </p>
<ul><li>Dapatkan nilai atribut elemen: Dapatkan nilai atribut elemen melalui kaedah .attr(). </li></ul>
<pre class="brush:php;toolbar:false">$('a').attr('href') // 获取所有<a>元素的href属性值</a>

• Tetapkan nilai atribut elemen: Tetapkan nilai atribut elemen melalui kaedah .attr().

$('a').attr('href', 'http://www.example.com/') // 设置所有<a>元素的href为http://www.example.com/</a>

• Dapatkan nilai teks elemen: Dapatkan kandungan teks dalam elemen melalui kaedah .text().

$('p').text() // 获取第一个<p>元素的文本 content</p>

• Tetapkan nilai teks elemen: Tetapkan kandungan teks dalam elemen melalui kaedah .text().

$('p').text('Hello World!') // 设置第一个<p>元素的文本为Hello World!</p>

• Dapatkan kandungan HTML elemen: Dapatkan kandungan HTML elemen melalui kaedah .html().

$('div').html() // 获取第一个<div>元素的HTML内容<ul><li>Tetapkan kandungan HTML elemen: Tetapkan kandungan HTML elemen melalui kaedah .html(). </li></ul>
<pre class="brush:php;toolbar:false">$('div').html('<p>Hello World!</p>') // 设置第一个<div>元素的HTML内容为<p>Hello World!</p>
<ul><li>Tambah elemen: Tambah elemen baharu di hujung elemen melalui kaedah .append(). </li></ul>
<pre class="brush:php;toolbar:false">$('ul').append('

New Item 1

New Item 2

') // 在第一个

元素末尾添加两个新的
• 元素
  • Alih keluar elemen: Alih keluar elemen melalui kaedah .remove().

  $('p').remove() // 移除所有<p>元素</p>

  Ikatan Peristiwa

  jQuery menyediakan pembangun kaedah acara yang lebih mudah daripada JavaScript asli, jadi kami tidak perlu risau tentang keserasian penyemak imbas dan isu lain. Berikut ialah beberapa kaedah pengikatan peristiwa asas:

  • Acara klik: Ikat peristiwa klik elemen melalui kaedah .click().

  $('button').click(function() {
    console.log('Button clicked!');
  });

  • Acara klik dua kali: Ikat peristiwa klik dua kali elemen melalui kaedah .dblclick().

  $('div').dblclick(function() {
    console.log('Div double clicked!');
  });

  • Acara tetikus masuk: Ikat peristiwa masuk tetikus melalui kaedah .mouseenter().

  $('div').mouseenter(function() {
    console.log('Mouse entered div!');
  });

  • Acara keluar tetikus: Ikat acara keluar tetikus melalui kaedah .mouseleave().

  $('div').mouseleave(function() {
    console.log('Mouse left div!');
  });

  • Acara input: Ikat peristiwa input elemen melalui kaedah .keyup().

  $('input').keyup(function() {
    console.log('Input value changed!');
  });

  • Serah acara: Ikat acara serah borang melalui kaedah .submit().

  $('form').submit(function() {
    console.log('Form submitted!');
  });

  Sudah tentu, sebagai tambahan kepada acara yang disenaraikan di atas, jQuery juga menyediakan banyak kaedah acara lain yang boleh digunakan oleh pembangun untuk keperluan yang berbeza.

  Kesan animasi

  Langkah terakhir ialah pengendalian kesan animasi merupakan bahagian yang sangat diperlukan dalam proses pembangunan web. Ia boleh menjadikan halaman lebih interaktif dan menarik secara visual.

  • Tunjukkan dan sembunyikan: Gunakan kaedah .show() dan .hide() untuk memaparkan dan menyembunyikan elemen.

  $('div').hide(); // 隐藏第一个<div>元素
  $('div').show(); // 显示第一个<div>元素<ul><li>Kesan gelongsor: Gunakan kaedah .slideDown() dan .slideUp() untuk mencapai kesan gelongsor mendatar unsur. </li></ul>
  <pre class="brush:php;toolbar:false">$('div').slideUp(); // 收起第一个<div>元素
  $('div').slideDown(); // 打开第一个<div>元素<ul><li>Kesan pudar: Gunakan kaedah .fadeIn() dan .fadeOut() untuk mencapai kesan pudar unsur. </li></ul>
  <pre class="brush:php;toolbar:false">$('div').fadeOut(); // 隐藏第一个<div>元素
  $('div').fadeIn(); // 显示第一个<div>元素<ul><li>Kesan animasi: Gunakan kaedah .animate() untuk mencapai kesan animasi tersuai unsur. </li></ul>
  <pre class="brush:php;toolbar:false">$('div').animate({ // 隐藏第一个<div>元素
    marginLeft: '50px',
    opacity: 0
  }, 1000);<h2 id="Kesimpulan">Kesimpulan</h2>
  <p>Artikel ini memperkenalkan beberapa kaedah biasa dalam jQuery, meliputi pemilih asas, operasi DOM, pengikatan acara dan kesan animasi. Walaupun jQuery menyediakan banyak kaedah, kita boleh memilih kaedah yang sesuai mengikut keperluan kita semasa digunakan untuk memenuhi keperluan pembangunan dengan lebih baik. </p>
  </div>