Ahli dalam menggunakan jQuery selector [ke]

jQuery sangat kuat mesin pilihan, menyediakan sintaks pemilih yang lengkap, yang memungkinkan kita untuk memilih hampir semua elemen. jQuery dari pemilih sintaks didasarkan pada CSS3 dan XPath, dan CSS3 dan XPath untuk lebih memahami yang lebih signifikan bila penggunaan jQuery berguna. Pada CSS dan XPath, silakan lihat link berikut ini:

Ia adalah bahwa, CSS3 hari ini belum didukung oleh semua browser, jadi kita jarang menggunakannya. Namun, kami masih bisa memilih jQuery menggunakan elemen CSS3, karena jQuery memiliki adat pemilik mesin, dan realisasi CSS3 dukungan.

JQuery pemilik ingin tahu informasi lebih lanjut, kunjungi jQuery dokumentasi resmi terkait Selector bagian. Sekarang, pada awal dasar dokumen resmi untuk membuat beberapa terjemahan dan penjelasan sederhana.

1. Selector CSS (CSS Selectors)

jQuery lengkap dukungan untuk CSS 1-3, dan dapat (pemilih) untuk menambahkan ekspresi kustom CSS seperti (dan xPath).

1,1 jQuery mendukung sintaks CSS selector

* Setiap elemen
E E semua jenis elemen (sebenarnya, E dapat setiap elemen)
E: nth-anak (n) yang tipe E dari unsur, adalah ayahnya unsur-unsur sub pertama n
E:-anak pertama dari jenis E dari unsur, adalah ayahnya, anak pertama elemen elemen (sama dengan E: nth-anak (0))
E: terakhir-anak dari jenis E dari unsur, adalah ayahnya, sub-elemen dari elemen akhir
E: hanya-anak dari jenis E dari unsur, adalah satu-satunya anak ayahnya elemen elemen
E: E kosong yang jenis antarmuka pengguna (UI) elemen, ia tidak memiliki sub-elemen (termasuk elemen teks)
E: E mengaktifkan jenis antarmuka pengguna (UI) elemen, sudah diatur untuk melarang (dinonaktifkan)
E: dinonaktifkan jenis E antarmuka pengguna (UI) elemen, sudah diatur untuk membolehkan (diaktifkan)
E: E dicentang sebuah jenis antarmuka pengguna (UI) elemen, akan dipilih (dicentang) negara (untuk radio button dan checkbox)
E: E dipilih untuk jenis antarmuka pengguna (UI) elemen, akan dipilih (dipilih) negara (dalam pemilihan, ada satu atau lebih elemen alternatif). Catatan: atribut tidak dipilih di CSS spesifikasi, tetapi pemberian dukungan internal jQuery
E.myclass satu jenis dari elemen E, kelasnya adalah "myclass"
E # E myid sebuah jenis elemen, id-nya adalah "myid"
E: tidak (s) dari tipe E, elemen, dan hasil dari konsentrasi unsur tidak cocok (tidak termasuk) selector s (digunakan untuk penyaringan)
EF untuk M jenis unsur, adalah jenis elemen untuk elemen E keturunan (perhatikan keturunanmu elemen)
E> F ke F jenis unsur, adalah jenis untuk unsur-unsur sub E (catatan sub-elemen)
E + F M sebuah jenis elemen, hal ini diikuti dalam jenis elemen untuk E di belakang saudara elemen (Catatan E F adalah saudara node, dan berikut adalah sama yang berlaku satu)
E ~ F M sebuah jenis unsur, adalah jenis elemen untuk E di belakang saudara elemen (Catatan F adalah saudara E-node, dan lokasi di belakang E)

E, F, G E, jenis unsur, sebuah jenis dari M elemen, yang tipe G dari unsur (digunakan untuk memilih lebih dari satu elemen)

1,2 jQuery dukungan, tetapi (dengan spesifikasi CSS) ini berbeda dengan sintaks pemilih

Perbedaan adalah nama properti yang harus ditambahkan sebelum simbol "@"

E [@ foo] an E jenis elemen, memiliki kekayaan "foo"
E [@ foo = bar] an E jenis elemen, memiliki atribut "foo = bar"
E [@ foo ^ = bar] an E jenis elemen, memiliki kekayaan "foo", dan atribut nilai adalah "bar" pada awal
E [@ $ foo = bar] an E jenis elemen, memiliki kekayaan "foo", dan atribut nilai adalah "bar" pada akhir
E [@ foo *= bar] satu elemen dari tipe E, memiliki kekayaan "foo", dan mengandung nilai atribut "bar"
E [@ foo = bar] [@ baz meninju =] sebuah tipe E dari unsur, memiliki atribut "foo = bar" dan atribut "baz = meninju"

Catatan: di atas "bar" dan "memukul" adalah string.

Tidak didukung oleh 1,3 pemilih sintaks jQuery (disingkat)

Karena tidak ada efek praktis, jadi kita tidak dibuat untuk mendapatkan detai disini, saya ingin mempelajari lebih lanjut dapat membaca resmi membantu dokumentasi.

1,4 Contex dan anchoring

Contex dapat diatur ke jangkar (lokasi) pemilih, yang dengan jQuery CSS norma yang berbeda. Pengguna dapat menggunakan sintaks: $ (expr, konteks) untuk mengatur konteks Root. Defaultnya adalah root konteks seluruh dokumen.

2. XPath selector (XPath Selectors)

XPath juga didukung oleh jQuer satu selector sintaks. jQuery dukungan dasar XPath sintaks. Di bawah ini beberapa contoh untuk ilustrasi.

2,1 posisi path (Lokasi Jalur)

Absolute path, yang bertentangan dengan seluruh dokumen HTML

  $ ( "/ Html / tubuh / / p") $ ( "tubuh / / p") $ ( "p / .. / div")

Path relatif, yang bertentangan untuk mengatur node konteks "ini"

  $ ( "P / *", ini) $ ( "/ p / / a", ini)

2,2 untuk mendukung Axis pemilih

"/ /": Keturunan dari elemen (div semua jenis untuk keturunanmu elemen p)

  $ ( "/ Div / / p") $("// div / / p ")

"/": Sub-elemen (div semua jenis untuk sub-elemen p)

  $("// Div / p ")

"~": Brother elemen (div semua jenis untuk membentuk saudara elemen)

  Div formulir $("// ~ ")

""..": Bapa dari elemen (div induk jenis unsur unsur sub p)

  $("// Div / .. / p ")

2,3 untuk mendukung predikat tata bahasa (Predicates)

[@ Foo] memiliki atribut "foo"

  Input $("// [@ foo] ")

[@ Foo = 'test'] memiliki atribut "foo = 'test'"

  $("// J [@ foo = 'tsxt'] ")

[Nodelist] cocok dengan elemen anak-anak dan cucu Nodelist (digunakan untuk menyaring)

  Div $("// [p] ") $("// div [p / a]")

2,4 jQuery dukungan, tetapi (dengan spesifikasi XPath) predikat berbeda sintaks (Predicates)

[terakhir ()] atau [posisi () = terakhir ()] menjadi: terakhir (pilihan hasil fokus pada akhir elemen)

  $ ( "P: terakhir")

[0] atau [posisi () = 0] menjadi: eq (0) atau: pertama (pilihan hasil fokus pada elemen pertama)

  $ ( "P: pertama") $ ( "p: eq (0)")

[posisi () <5] menjadi: lt (5) (pilihan lebih dari 5 hasil indeks elemen)

  $ ( "P: lt (5)")

[posisi ()> 2] menjadi: gt (2) (pilihan hasil terkonsentrasi indeks kurang dari 2 elemen)

  $ ( "P: gt (2)")

Catatan: "menjadi" di depan predicates adalah sintaks XPath, bagian belakang sama dengan sintaks jQuery.

3. JQuery pemilih kustom (Custom Selectors)

jQuery memiliki beberapa kustom selector sintaks, tata bahasa Walaupun ini bukan di CSS dan XPath spesifikasi, namun mereka sangat nyaman, di mana mereka memenangkan jQuery datang.

3,1 kustom pemilih (Custom Selectors)

: Bahkan hasil yang berkonsentrasi untuk indeks bahkan-nomor (bahkan nos) elemen
: Aneh hasil berkonsentrasi untuk indeks yang ganjil (odd) elemen
: Eq (N) dan: nth (N) memilih untuk fokus pada hasil indeks elemen untuk N
: Gt (N) memilih untuk fokus pada hasil indeks elemen lebih besar dari N
: Lt (N) memilih untuk fokus pada hasil indeks kurang dari N elemen
: Pertama pilih hasil pertama elemen (setara dengan eq (0) atau nth (0))
: Pilihan terakhir hasil fokus pada akhir elemen
: Pilihan orang tua dalam hasil fokus elemen, harus ada sub-elemen (termasuk teks node) (dengan: kosongkan bertentangan)
: Berisi ( 'test') memilih untuk fokus pada hasil ditentukan teks berisi elemen
: Terlihat memilih semua terlihat (terlihat) elemen (menampilkan nilai atribut terlihat, blok, inline, atau visibilitas dari nilai properti terlihat, tidak termasuk jenis unsur tersembunyi (disembunyikan pada jenis, seperti <input type = "tersembunyi" ... >))
: Tersembunyi tersembunyi pilih semua (terlihat) elemen (menampilkan nilai atribut tidak sama dengan, atau visibilitas dari nilai properti tersembunyi, tidak termasuk jenis unsur tersembunyi (disembunyikan pada jenis, seperti <input type="hidden" …>))

Contoh:

  $ ( "P: pertama"). Css ( "fontWeight", "bold"); $ ( "div: tersembunyi"). Perlihatkan (); $ ( "/ div: berisi ( 'test')", ini). sembunyikan ();

3,2 pemilih formulir (Formulir Selectors)

: Masukan memilih semua bentuk elemen (input, pilih, textarea, button)
: Teks untuk memilih semua teks domain (type = "text").
: Password pilih semua domain sandi (type = "password").
: Radio semua pilih tombol radio (type = "radio").
: Centang untuk memilih semua kotak (type = "checkbox").
: Pilih menyerahkan semua menyerahkan tombol (type = "submit").
: Semua gambar pilih gambar domain (tipe = "gambar").
: Pilih ulang semua tombol reset (type = "reset").
: Tombol untuk memilih semua tombol (type = "button").
: Pilih semua file <input type="file">.

: Tersembunyi juga tersedia dalam 3,1 dijelaskan di atas.

Yang diusulkan dalam bentuk penggunaan pilihan untuk menyediakan konteks Root, contoh:

  $ ( '# MyForm: input')

  $ ( 'Input: radio', myForm)

Pernyataan di atas ia akan memilih akhir dari semua "myForm" semua bentuk tombol radio, yang setara dengan [@ type = radio] (yaitu, $ ( "[type = radio], myForm")), namun Tabel tunggal pemilih akan sedikit lebih cepat, terutama untuk skala besar bentuk.

3,3 lebih pemilih

jQuery pemilih yang memungkinkan pihak ketiga plug-in untuk memperluas:

Lagi Selectors Plugin
Mike Alsup pada Custom Selectors
Patch untuk membolehkan seleksi oleh CSS properti (full plugin yang akan dirilis bersamaan dengan 1.1)

References:

http://docs.jquery.com/DOM/Traversing/Selectors

(2 suara, rata-rata: 5 dari 5)

Loading ...

- Selamat Datang rating untuk artikel ini

Tidak ada sumbangan dalam terakhir 180 days.Who membuat sumbangan akan meninggalkan pesan di sini. Donate Now.

Ini sebuah plugin wordpress WP-Donatur. Laporan ini memberikan sumbangan fungsi pintar untuk autoleave yang sponsor informasi ini dalam kontainer setelah pembayaran. Orang-orang dapat menyumbangkan mengirimkan nama dan / atau URL TextLink AD. Informasi terbaru dari donor akan ditampilkan di awan. The donates orang lebih, semakin besar mereka akan be.It link 's akan mendukung antarmuka pembayaran paling populer di masa mendatang. ParPal Baru yang pertama. Lagi ..

Powered By: WP-Donatur