Bagaimana Anda memilih elemen div dengan javascript?

Question

Konsep paling dasar dari jQuery adalah "memilih beberapa elemen dan melakukan sesuatu dengannya. " jQuery mendukung sebagian besar pemilih CSS3, serta beberapa pemilih non-standar. Untuk referensi pemilih lengkap, kunjungi dokumentasi Selectors on api. jquery. com

Table of Contents Show

Memilih Elemen berdasarkan ID
Memilih Elemen berdasarkan Nama Kelas
Memilih Elemen berdasarkan Atribut
Memilih Elemen dengan Compound CSS Selector
Memilih Elemen dengan Daftar Pemilih yang dipisahkan Koma
Pseudo-Selectors
Memilih Selector
Apakah Pilihan Saya Mengandung Unsur Apa Saja?
Menyimpan Pilihan
Pilihan Penyulingan & Penyaringan
Memilih Elemen Formulir
Bagaimana cara memilih semua elemen div dalam JavaScript?
Bagaimana cara mengakses elemen div di JavaScript?
Bagaimana cara memilih elemen dengan JavaScript?
Bagaimana cara memilih elemen div di CSS?

Memilih Elemen berdasarkan ID

1


$( "#myId" ); // Note IDs must be unique per page.

Memilih Elemen berdasarkan Nama Kelas

1


$( ".myClass" );

_

Memilih Elemen berdasarkan Atribut

1


$( "input[name='first_name']" );

Memilih Elemen dengan Compound CSS Selector

1


$( "#contents ul.people li" );

Memilih Elemen dengan Daftar Pemilih yang dipisahkan Koma

1


$( "div.myClass, ul.people" );

_

Pseudo-Selectors

1

2

3

4

5

6

7

8

9

10

11

12


$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

Catatan. Saat menggunakan


$( ".myClass" );

5 dan


$( ".myClass" );

6 pseudo-selector, jQuery menguji visibilitas elemen yang sebenarnya, bukan properti CSS


$( ".myClass" );

7 atau


$( ".myClass" );

8. jQuery melihat apakah tinggi dan lebar fisik elemen pada halaman keduanya lebih besar dari nol

Namun, tes ini tidak bekerja dengan


$( ".myClass" );

_9 elemen. Dalam kasus


$( ".myClass" );

_9 jQuery memeriksa properti CSS


$( ".myClass" );

8, dan menganggap elemen tersembunyi jika properti


$( ".myClass" );

8 diatur ke


$( "input[name='first_name']" );

3

Elemen yang belum ditambahkan ke DOM akan selalu dianggap tersembunyi, meskipun CSS yang akan memengaruhinya akan membuatnya terlihat. Lihat bagian Memanipulasi Elemen untuk mempelajari cara membuat dan menambahkan elemen ke DOM

Memilih Selector

Memilih penyeleksi yang baik adalah salah satu cara untuk meningkatkan kinerja JavaScript. Terlalu banyak kekhususan bisa menjadi hal yang buruk. Pemilih seperti


$( "input[name='first_name']" );

_4 berlebihan jika pemilih seperti


$( "input[name='first_name']" );

5 akan menyelesaikan pekerjaan

Apakah Pilihan Saya Mengandung Unsur Apa Saja?

Setelah Anda membuat pilihan, Anda akan sering ingin tahu apakah Anda memiliki sesuatu untuk dikerjakan. Kesalahan umum adalah menggunakan

1

2

3

4


// Doesn't work!
if ( $( "div.foo" ) ) {
    ...
}

Ini tidak akan berhasil. Saat pemilihan dibuat menggunakan


$( "input[name='first_name']" );

_6, objek selalu dikembalikan, dan objek selalu dievaluasi menjadi


$( "input[name='first_name']" );

7. Meskipun pemilihan tidak mengandung elemen apa pun, kode di dalam pernyataan


$( "input[name='first_name']" );

8 akan tetap berjalan

Cara terbaik untuk menentukan apakah ada elemen adalah dengan menguji properti


$( "input[name='first_name']" );

9 seleksi, yang memberi tahu Anda berapa banyak elemen yang dipilih. Jika jawabannya adalah 0, properti


$( "input[name='first_name']" );

_9 akan dievaluasi menjadi


$( "#contents ul.people li" );

1 bila digunakan sebagai nilai boolean

1

2

3

4


// Testing whether a selection contains elements.
if ( $( "div.foo" ).length ) {
    ...
}

Menyimpan Pilihan

jQuery tidak menyimpan elemen cache untuk Anda. Jika Anda telah membuat pilihan yang mungkin perlu Anda buat lagi, Anda harus menyimpan pilihan tersebut dalam sebuah variabel daripada membuat pilihan berulang kali

1


var divs = $( "div" );

Setelah pilihan disimpan dalam variabel, Anda dapat memanggil metode jQuery pada variabel seperti Anda akan memanggilnya pada pilihan asli

Pilihan hanya mengambil elemen yang ada di halaman pada saat pemilihan dilakukan. Jika elemen ditambahkan ke halaman nanti, Anda harus mengulang pemilihan atau menambahkannya ke pilihan yang disimpan dalam variabel. Pilihan yang disimpan tidak diperbarui secara ajaib saat DOM berubah

Pilihan Penyulingan & Penyaringan

Terkadang pilihan berisi lebih dari yang Anda cari. jQuery menawarkan beberapa metode untuk menyempurnakan dan memfilter pilihan

1

2

3

4

5

6


// Refining selections.
$( "div.foo" ).has( "p" );         // div.foo elements that contain <p> tags
$( "h1" ).not( ".bar" );           // h1 elements that don't have a class of bar
$( "ul li" ).filter( ".current" ); // unordered list items with class of current
$( "ul li" ).first();              // just the first unordered list item
$( "ul li" ).eq( 5 );              // the sixth

Memilih Elemen Formulir

jQuery menawarkan beberapa pemilih semu yang membantu menemukan elemen dalam formulir. Ini sangat membantu karena sulit untuk membedakan antara elemen formulir berdasarkan status atau jenisnya menggunakan pemilih CSS standar

. diperiksa

Tidak perlu bingung dengan. kotak centang,


$( "#contents ul.people li" );

2 target kotak centang yang dicentang, tetapi perlu diingat bahwa pemilih ini juga berfungsi untuk tombol radio yang dicentang, dan


$( "#contents ul.people li" );

3 elemen (untuk


$( "#contents ul.people li" );

3 elemen saja, gunakan pemilih


$( "#contents ul.people li" );

5)

1


$( ".myClass" );

_0

Pemilih semu


$( "#contents ul.people li" );

2 berfungsi saat digunakan dengan kotak centang, tombol radio, dan pilihan

. dengan disabilitas

Menggunakan


$( "#contents ul.people li" );

_7 pseudo-selector menargetkan elemen


$( "#contents ul.people li" );

8 dengan atribut


$( "#contents ul.people li" );

9

1


$( ".myClass" );

_1

Untuk mendapatkan kinerja terbaik menggunakan


$( "#contents ul.people li" );

_7, pertama-tama pilih elemen dengan pemilih jQuery standar, lalu gunakan


$( "div.myClass, ul.people" );

1, atau awali pemilih semu dengan nama tag atau beberapa pemilih lainnya

. diaktifkan

Pada dasarnya kebalikan dari. pemilih-semu yang dinonaktifkan, pemilih-semu


$( "div.myClass, ul.people" );

_2 menargetkan elemen apa pun yang tidak memiliki atribut


$( "#contents ul.people li" );

9

1


$( ".myClass" );

_2

Untuk mendapatkan kinerja terbaik menggunakan


$( "div.myClass, ul.people" );

_2, pertama-tama pilih elemen dengan pemilih jQuery standar, lalu gunakan


$( "div.myClass, ul.people" );

5, atau awali pemilih semu dengan nama tag atau beberapa pemilih lainnya

. memasukkan

Menggunakan pemilih


$( "div.myClass, ul.people" );

_6 memilih semua elemen


$( "#contents ul.people li" );

8,


$( "div.myClass, ul.people" );

8,


$( "#contents ul.people li" );

3, dan


$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

0

1


$( ".myClass" );

_3

. terpilih

Menggunakan pemilih semu


$( "#contents ul.people li" );

_5 menargetkan item apa pun yang dipilih dalam elemen


$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

2

1


$( ".myClass" );

_4

Untuk mendapatkan kinerja terbaik menggunakan


$( "#contents ul.people li" );

_5, pertama-tama pilih elemen dengan pemilih jQuery standar, lalu gunakan


$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

4, atau awali pemilih semu dengan nama tag atau beberapa pemilih lainnya

Memilih berdasarkan jenis

jQuery menyediakan pemilih semu untuk memilih elemen khusus bentuk sesuai dengan jenisnya


$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

5


$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

_6


$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

_7


$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

_8


$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

_9


// Doesn't work!
if ( $( "div.foo" ) ) {
    ...
}

0


// Doesn't work!
if ( $( "div.foo" ) ) {
    ...
}

1


// Doesn't work!
if ( $( "div.foo" ) ) {
    ...
}

2


// Doesn't work!
if ( $( "div.foo" ) ) {
    ...
}

3

Untuk semua ini ada catatan tambahan tentang kinerja, jadi pastikan untuk memeriksa dokumen API untuk informasi lebih mendalam

Bagaimana cara memilih semua elemen div dalam JavaScript?

getElementsByTagName() yang akan memilih semua instance elemen HTML tertentu pada halaman web saat ini berdasarkan nama tagnya, i. e. dokumen. getElementsByTagName("div") adalah semua yang perlu Anda lakukan untuk memilih semua elemen

Bagaimana cara mengakses elemen div di JavaScript?

Elemen menggunakan metode getElementById() .

Bagaimana cara memilih elemen dengan JavaScript?

JavaScript menyediakan enam metode untuk memilih elemen dari dokumen. .

getElementById – cari elemen berdasarkan element_id

getElementsByTagName – mencari elemen berdasarkan nama tag (mis. g. , rentang, div)

getElementsByClassName – elemen pencarian berdasarkan nama kelas

getElementsByName – elemen pencarian berdasarkan atribut nama

Bagaimana cara memilih elemen div di CSS?

Pemilih id CSS . Id dari suatu elemen adalah unik di dalam sebuah halaman, sehingga pemilih id digunakan untuk memilih satu elemen unik. Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id elemen .

kode javascript