Ketahui Cara Membuat Elemen di jQuery

Ketahui Cara Membuat Elemen di jQuery

Membuat elemen baru adalah salah satu tugas paling asas yang dapat anda laksanakan dengan pustaka JavaScript jQuery. Menggunakan jQuery, tugasnya jauh lebih sederhana daripada pendekatan yang setara dengan Model Objek Dokumen (DOM). Anda juga akan merasa lebih fleksibel dan ekspresif, semakin banyak anda menggunakan jQuery.





Untuk memenuhi tujuan, anda harus dapat menambahkan elemen anda ke halaman web. Pelajari cara menambahkan item senarai baru atau mengganti perenggan dengan kandungan baru menggunakan jQuery.



Apa itu jQuery?

Perpustakaan jQuery adalah koleksi JavaScript kod dengan dua tujuan utama:





  • Ini memudahkan operasi JavaScript biasa.
  • Ia menangani masalah JavaScript keserasian silang antara pelbagai penyemak imbas.

Tujuan kedua menangani bug, tetapi juga menangani perbezaan pelaksanaan antara penyemak imbas. Kedua-dua tujuan tersebut kurang diperlukan daripada sebelumnya, kerana penyemak imbas bertambah baik dari masa ke masa. Tetapi jQuery masih boleh menjadi alat yang berharga.

Apa itu Elemen?

Elemen kadang-kadang disebut sebagai tag. Walaupun kedua-duanya sering digunakan secara bergantian, ada perbezaan yang halus. Tag merujuk kepada literal

atau



anda sertakan dalam fail HTML untuk menandakan kandungan teks. Elemen adalah objek di belakang layar yang mewakili teks bertanda. Fikirkan elemen sebagai rakan DOM untuk tag HTML.

Cara Membuat Elemen Baru Menggunakan jQuery

Seperti kebanyakan operasi jQuery, membuat elemen bermula dengan fungsi dolar, $ () . Ini adalah jalan pintas ke inti jQuery () fungsi. Fungsi ini mempunyai tiga tujuan berbeza, iaitu:



  • Memadankan elemen, biasanya elemen yang sudah ada dalam dokumen
  • Membuat elemen baru
  • Menjalankan fungsi panggilan balik apabila DOM sudah siap

Apabila anda meneruskan rentetan yang mengandungi HTML sebagai parameter pertama, fungsi ini akan membuat elemen baru:

$(' ')

Ini mengembalikan objek jQuery khas yang mengandungi kumpulan elemen. Dalam kes ini, ada satu objek yang mewakili elemen 'a' yang baru kita buat.



tetapkan semula tetingkap kata laluan pentadbir tempatan 10

Rentetan mesti kelihatan seperti HTML untuk membezakan tindakan ini daripada elemen yang sepadan. Dalam praktiknya, ini bermaksud tali mesti dimulakan dengan huruf a < . Anda tidak boleh menambahkan teks biasa ke dokumen menggunakan kaedah ini.

Penting untuk difahami bahawa ini tidak menambahkan elemen ke dalam dokumen anda, hanya membuat elemen baru yang siap anda tambahkan. Elemen itu 'tidak dilampirkan', mengambil ingatan tetapi sebenarnya bukan bahagian dari halaman akhir - belum.

Menambah HTML yang Lebih Kompleks

Fungsi dolar sebenarnya boleh membuat lebih daripada satu elemen. Sebenarnya, ia dapat membina sebarang elemen elemen HTML yang anda mahukan:

$('
  • one
  • two
  • three
')

Anda juga dapat menggunakan format ini untuk membuat elemen dengan atribut:

$(' my hometown')

Cara Menetapkan Atribut pada Elemen Baru

Anda boleh membuat elemen jQuery baru dan menetapkan atributnya tanpa perlu membina rentetan HTML sepenuhnya. Ini berguna jika anda menghasilkan nilai atribut secara dinamik. Sebagai contoh:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

Cara Menambah Elemen

Setelah membuat elemen baru, anda boleh menambahkannya ke dalam dokumen dengan beberapa cara yang berbeza. Dokumentasi jQuery mengumpulkan kaedah ini bersama-sama di bawah Kategori ‘manipulasi’ .

Tambahkan sebagai Anak Elemen Sedia Ada

$('body').append($('

Hello, world

'));
$(document.body).append($el);

Anda boleh menggunakan kaedah ini, misalnya, untuk menambahkan item senarai baru di akhir senarai.

Tambahkannya sebagai Saudara Elemen yang Ada

$('p.last').after('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

    Ini adalah pilihan yang baik jika, misalnya, anda ingin menambahkan perenggan baru di tengah-tengah dua yang lain.

    Ganti Elemen Yang Ada

    Anda boleh menukar elemen yang ada untuk yang baru dibuat menggunakan ganti dengan () kaedah:

    $('#old').replaceWith('

    New paragraph

    ');

    Balut Sekitar Elemen Yang Ada

    Ini adalah kes penggunaan yang jarang berlaku, tetapi anda mungkin mahu memasukkan elemen yang ada dalam elemen yang baru. Contohnya, anda mungkin mempunyai kod elemen yang ingin anda bungkus dalam untuk :

    $('code#n1').wrap('
    ')
    Mengakses Elemen yang Anda Buat
     
    The $ () fungsi mengembalikan objek jQuery. Ini berguna untuk operasi susulan:
    $el = $('p');  
    $('body').append($el);
    Perhatikan bahawa, secara konvensional, pengaturcara jQuery sering menamakan pemboleh ubah jQuery dengan tanda dolar terkemuka. Ini hanyalah skema penamaan dan tidak berkaitan langsung dengan $ () fungsi.
     
    Membuat Elemen Menggunakan jQuery
     
    Walaupun anda dapat memanipulasi DOM menggunakan fungsi JavaScript asli, jQuery menjadikannya lebih mudah untuk melakukannya. Masih sangat berguna untuk memahami DOM dengan baik, tetapi jQuery menjadikan bekerja dengannya lebih menyenangkan.
      Berkongsi    Berkongsi      Tweet      E-mel      Wira Tersembunyi Laman Web: Memahami DOM  
    Mempelajari reka bentuk web dan perlu mengetahui lebih lanjut mengenai Model Objek Dokumen? Inilah yang perlu anda ketahui mengenai DOM.
    Baca Seterusnya       Topik-topik yang berkaitan  
       
    • Pengaturcaraan
      •  
    • Pembangunan Web
      •  
    • jQuery
      •  
      Mengenai Pengarang   Bobby Jack(58 Artikel Diterbitkan)      
    Bobby adalah peminat teknologi yang bekerja sebagai pembangun perisian selama hampir dua dekad. Dia meminati permainan, bekerja sebagai Editor Ulasan di Switch Player Magazine, dan terlibat dalam semua aspek penerbitan dalam talian & pembangunan web.
    Lagi Dari Bobby Jack
    Langgan buletin kami
     
    Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
    Klik di sini untuk melanggan