Kuasai pemilih asas jQuery dengan mudah: Tutorial pantas 5 minit!

Kuasai pemilih asas jQuery dengan mudah: 5 minit!

Dengan pembangunan berterusan pembangunan bahagian hadapan, jQuery telah menjadi salah satu rangka kerja bahagian hadapan yang digunakan secara meluas. Dalam jQuery, pemilih ialah konsep yang sangat penting, yang boleh membantu kami mencari dan mengendalikan elemen pada halaman dengan cepat. Artikel ini akan memperkenalkan pemilih asas jQuery dan membimbing anda untuk menguasainya dengan mudah melalui contoh kod tertentu.

1. Pemilih ID (#id)

Pemilih ID memilih elemen melalui atribut id mereka. Dalam jQuery, gunakan simbol # diikuti dengan nilai id elemen untuk memilih elemen. #符号后跟上元素的id值即可选择该元素。

// 选择id为myBtn的按钮元素
$("#myBtn").click(function(){
  alert("Hello, World!");
});

2. 类选择器（.class）

类选择器通过元素的class属性来选择元素。在jQuery中，使用.

// 选择类名为myClass的所有元素
$(".myClass").css("color", "red");

2. Pemilih kelas (.class)

Pemilih kelas memilih elemen melalui atribut kelas mereka. Dalam jQuery, gunakan simbol . diikuti dengan nama kelas untuk memilih semua elemen kelas tersebut.

// 选择所有p元素并设置背景颜色
$("p").css("background-color", "yellow");

3. Pemilih elemen (elemen)

Pemilih elemen boleh memilih semua elemen jenis yang ditentukan.

// 选择id为container下所有的p元素
$("#container p").css("font-size", "16px");

4. Pemilih keturunan (keturunan moyang)

Pemilih keturunan boleh memilih semua elemen keturunan di bawah elemen yang ditentukan.

// 选择类名为menu下直接的子元素ul
$(".menu > ul").addClass("active");

5. Pemilih elemen kanak-kanak (ibu bapa > kanak-kanak)

Pemilih elemen kanak-kanak hanya memilih elemen anak bagi elemen yang ditentukan.

// 选择所有含有title属性的元素并修改文本
$("[title]").text("This is a title");

6. Pemilih atribut ([atribut])

Pemilih atribut boleh memilih elemen dengan atribut tertentu. 🎜rrreee🎜Melalui contoh kod ringkas di atas, kita boleh menguasai penggunaan pemilih asas jQuery dengan mudah. Dengan amalan dan penerokaan berterusan, saya percaya bahawa semua orang boleh menggunakan pemilih jQuery dengan mudah dalam pembangunan bahagian hadapan untuk meningkatkan kecekapan dan pengalaman pembangunan. Jika anda mempunyai soalan atau lebih banyak keperluan, anda mungkin ingin berlatih lebih lanjut untuk mendalami pemahaman dan aplikasi pemilih jQuery anda, dan menjadikan jalan ke pembangunan bahagian hadapan lebih lancar! 🎜

Atas ialah kandungan terperinci Kuasai pemilih asas jQuery dengan mudah: Tutorial pantas 5 minit!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!