kaedah sambungan jquery dan kaedah contoh-Soal Jawab bahagian hadapan-php.cn

kaedah sambungan jquery dan kaedah contoh

WBOY

Lepaskan： 2023-05-23 11:44:07

asal

391 orang telah melayarinya

Dalam pembangunan bahagian hadapan, jQuery ialah perpustakaan JavaScript yang sangat popular. Ciri yang berkuasa dan kemudahan penggunaannya membuatkan ramai pembangun memilih untuk menggunakannya untuk mengendalikan halaman web. jQuery menyediakan satu siri kaedah contoh dan kaedah sambungan, yang boleh menyediakan pembangun pengalaman pengaturcaraan yang lebih cekap dan menjadikan kod lebih ringkas. Artikel ini akan memperkenalkan kaedah sambungan dan kaedah contoh jQuery, dan memberikan beberapa contoh untuk menunjukkan penggunaannya.

1. Kaedah contoh jQuery

Dalam jQuery, kaedah contoh merujuk kepada kaedah yang boleh dipanggil terus oleh elemen DOM yang dipilih melalui pemilih Kaedah ini dipanggil kaedah objek jQuery. Berikut ialah beberapa kaedah contoh yang biasa digunakan:

.addClass() kaedah

Kaedah ini boleh menambah satu atau lebih nama kelas CSS pada elemen yang dipilih, seperti ditunjukkan di bawah :

$('选中的元素').addClass('class1 class2');

Salin selepas log masuk

.removeClass() kaedah

Kaedah ini boleh mengalih keluar satu atau lebih nama kelas CSS daripada elemen yang dipilih, seperti ditunjukkan di bawah:

$('选中的元素').removeClass('class1 class2');

Salin selepas log masuk

.attr() kaedah

Kaedah ini boleh mendapatkan atau menetapkan nilai atribut elemen yang dipilih, seperti yang ditunjukkan di bawah:

// 获取属性值
$('选中的元素').attr('属性名')

// 设置属性值
$('选中的元素').attr('属性名', '属性值')

Salin selepas log masuk

.css( ) kaedah

Kaedah ini boleh mendapatkan atau menetapkan nilai gaya elemen yang dipilih, seperti yang ditunjukkan di bawah:

// 获取样式值
$('选中的元素').css('样式名')

// 设置样式值
$('选中的元素').css('样式名', '样式值')

Salin selepas log masuk

.html() kaedah

Kaedah ini boleh mendapatkan atau menetapkan kandungan HTML elemen yang dipilih, seperti yang ditunjukkan di bawah:

// 获取HTML内容
$('选中的元素').html()

// 设置HTML内容
$('选中的元素').html('HTML内容')

Salin selepas log masuk

kaedah.on()

Kaedah ini boleh menambah mendengar acara untuk Objek elemen yang dipilih, seperti yang ditunjukkan di bawah:

$('选中的元素').on('事件名', function(event) {
  // 处理事件
})

Salin selepas log masuk

2. Kaedah sambungan jQuery

Kaedah sambungan merujuk kepada kaedah yang boleh dipanggil terus pada objek jQuery ($), dipanggil jQuery fungsi (atau fungsi global ).

Kaedah $.extend()

Kaedah ini boleh menggabungkan satu atau lebih objek menjadi satu objek, seperti yang ditunjukkan di bawah:

$.extend(target, object1, object2)

Salin selepas log masuk

di mana , sasaran ialah objek sasaran untuk digabungkan, dan objek1, objek2, dsb. ialah objek sumber untuk digabungkan.

Kaedah $.ajax()

Kaedah ini digunakan untuk menghantar permintaan HTTP. Ia membenarkan mendapatkan data daripada API bahagian belakang secara tidak segerak dan boleh mengendalikan fungsi panggil balik selepas kejayaan atau kegagalan, seperti yang ditunjukkan di bawah:

$.ajax({
  url: 'url',
  method: 'GET',
  data: 'data',
  dataType: 'json',
  success: function(response) {
    // 处理响应数据
  },
  error: function(jqXHR, textStatus, errorThrown) {
    // 处理请求错误
  }
})

Salin selepas log masuk

Kaedah $.getJSON()

Ini kaedah digunakan untuk menghantar permintaan GET dan mendapatkan data respons dalam format JSON. Berbanding dengan kaedah $.ajax(), kaedah $.getJSON() adalah lebih mudah dan mempunyai kod yang lebih sedikit, seperti yang ditunjukkan di bawah:

$.getJSON('url', function(response) {
  // 处理响应数据
})

Salin selepas log masuk

4. Contoh demonstrasi

diberikan di bawah Contoh yang menunjukkan cara menggunakan kaedah sambungan jQuery dan kaedah contoh untuk mengendalikan contoh mudah.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery实例和拓展方法演示</title>
</head>
<body>

  <!-- 示例DOM元素 -->
  <div id="example">
    <p>jQuery实例和拓展方法演示</p>
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>

    // 使用实例方法
    $('#example').addClass('test');
    $('#example').on('click', function() {
      alert('点击了example元素');
    });

    // 使用拓展方法
    var settings = {
      url: 'https://randomuser.me/api/',
      method: 'GET',
      dataType: 'json'
    };
    $.ajax(settings).done(function(response) {
      var $paragraph = $('<p>').text('随机用户：' + response.results[0].name.first);
      $('#example').append($paragraph);
    });

  </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kaedah contoh pertama kali digunakan untuk menambah kelas "ujian" pada elemen dengan id "contoh" dan mengikat acara klik. Kemudian, gunakan kaedah sambungan untuk menghantar permintaan GET, dapatkan data pengguna rawak dan paparkannya pada halaman.

Ringkasan

Artikel ini memperkenalkan konsep dan penggunaan kaedah sambungan dan kaedah contoh jQuery, serta menyediakan beberapa contoh untuk menunjukkan penggunaannya. Sama ada kami menggunakan kaedah contoh atau kaedah sambungan, kaedah ini boleh membantu kami menyelesaikan tugas pembangunan bahagian hadapan dengan lebih cepat dan lebih mudah serta meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci kaedah sambungan jquery dan kaedah contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!