ไวยากรณ์พื้นฐานของ jQuery เกี่ยวข้องกับการใช้ตัวเลือก(ตัวเลือกสไตล์ CSS) และวิธีการจัดการกับองค์ประกอบที่เลือก นี่คือตัวอย่างไวยากรณ์พื้นฐานของ jQuery:
การเลือกองค์ประกอบ
-
เลือกองค์ประกอบตามชื่อแท็ก HTML:
$("tagname")ตัวอย่าง:$("p")เลือก<p>องค์ประกอบทั้งหมดในหน้า -
เลือกองค์ประกอบตามคลาส CSS:
$(".classname")ตัวอย่าง:$(".myClass")เลือกองค์ประกอบทั้งหมดที่มีคลาส "myClass" -
เลือกองค์ประกอบตาม ID:
$("#idname")ตัวอย่าง:$("#myElement")เลือกองค์ประกอบด้วย ID "myElement" -
เลือกองค์ประกอบตามแอตทริบิวต์:
$("[attribute='value']")ตัวอย่าง:$("[data-type='button']")เลือกองค์ประกอบโดยตั้งค่าแอตทริบิวต์data-typeเป็น "ปุ่ม" -
การรวมการเลือก:
$("tagname.classname"),$("#idname .classname"), ...
จัดการองค์ประกอบที่เลือก
-
การเปลี่ยนเนื้อหาขององค์ประกอบ:
.html(),.text()ตัวอย่าง:$("#myElement").html("New content")ตั้งค่าเนื้อหา HTML ขององค์ประกอบด้วย ID "myElement" -
การแก้ไขแอตทริบิวต์ขององค์ประกอบ:
.attr(),.prop()ตัวอย่าง:$("img").attr("src", "newimage.jpg")เปลี่ยน แอตทริบิวต์ของ องค์ประกอบsrcทั้งหมด<img> -
จัดการคลาส CSS ขององค์ประกอบ:
.addClass(),.removeClass(),.toggleClass()ตัวอย่าง:$("#myElement").addClass("highlight")เพิ่มคลาส "highlight" ให้กับองค์ประกอบด้วย ID "myElement" -
การซ่อน/แสดงองค์ประกอบ:
.hide(),.show(),.toggle()ตัวอย่าง:$(".myClass").hide()ซ่อนองค์ประกอบทั้งหมดด้วยคลาส "myClass" -
จัดการเหตุการณ์ในองค์ประกอบ:
.click(),.hover(),.submit(), ... ตัวอย่าง:$("button").click(function() { ... })ลงทะเบียนตัวจัดการเหตุการณ์คลิก
การทำงานกับคอลเลกชันขององค์ประกอบ
-
วนซ้ำผ่านคอลเล็กชัน:
.each()ตัวอย่าง:$("li").each(function() { ... })วนซ้ำแต่ละ<li>องค์ประกอบในหน้า -
การกรองคอลเลกชัน:
.filter(),.not()ตัวอย่าง:$("div").filter(".myClass")กรอง<div>องค์ประกอบและเลือกองค์ประกอบที่มีคลาส "myClass" -
การแทรกองค์ประกอบในคอลเลกชัน:
.append(),.prepend(),.after(),.before()ตัวอย่าง:$("#myElement").append("<p>New paragraph</p>")ผนวก<p>องค์ประกอบใหม่เข้ากับองค์ประกอบด้วย ID "myElement"
เอฟเฟกต์และภาพเคลื่อนไหว
-
การแสดงเอฟเฟ็กต์ fadeIn/fadeOut:
.fadeIn(),.fadeOut()ตัวอย่าง:$("#myElement").fadeIn(1000)ทำให้องค์ประกอบที่มี ID "myElement" จางหายไปในระยะเวลา 1 วินาที -
การใช้เอฟเฟ็กต์ SlideUp/SlideDown:
.slideUp()ตัวอย่าง.slideDown():$(".myClass").slideUp(500)เลื่อนองค์ประกอบทั้งหมดที่มีคลาส "myClass" ขึ้นในระยะเวลา 0.5 วินาที -
การแสดงภาพเคลื่อนไหวแบบกำหนดเอง:
.animate()ตัวอย่าง:$("#myElement").animate({ left: '250px', opacity: '0.5' })ทำให้องค์ประกอบเคลื่อนไหวด้วย ID "myElement" โดยเปลี่ยนตำแหน่งด้านซ้ายและความทึบ
ตัวอย่างเหล่านี้แสดงวิธีใช้ลักษณะต่างๆ ของไวยากรณ์พื้นฐานของ jQuery เพื่อเลือกองค์ประกอบ จัดการคุณสมบัติ และใช้เอฟเฟกต์หรือภาพเคลื่อนไหว jQuery นำเสนอชุดวิธีการและฟังก์ชันมากมายเพื่อลดความซับซ้อนและปรับปรุงงานพัฒนาเว็บ