8.1 เชื่อมต่อ jQuery
ในที่สุดเราก็มาถึงห้องสมุด jQuery เมื่อถึงเวลาที่เขียนบทความนี้ บทความนี้ล้าสมัยไปแล้วและแทบไม่เคยใช้ในโครงการใหม่เลย แต่ครั้งหนึ่งมันได้รับความนิยมมาก จัดทำเป็นเอกสารอย่างดี และมีตัวอย่างมากมายบนอินเทอร์เน็ตที่มีการใช้งาน .
ดังนั้น หากคุณกำลังเขียนโครงการเว็บขนาดเล็กและไม่ต้องการใช้เวลาหลายเดือนในการเรียนรู้เฟรมเวิร์กสมัยใหม่ ฉันขอแนะนำให้คุณใช้ไลบรารี jQuery
ในการใช้ฟังก์ชัน jQuery นับพัน คุณเพียงแค่ต้องรวมไว้ในหน้าของคุณ คุณสามารถทำได้ดังนี้:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
การทำงานกับ jQuery แบ่งออกเป็น 2 ประเภท
ขั้นแรก คุณจะได้รับวัตถุไลบรารี jQuery ซึ่งเป็นองค์ประกอบ HTML ปกติที่รวมอยู่ในวัตถุ jQuery ที่กำหนดเอง
ประการที่สอง jQuery มีวัตถุส่วนกลางหลายตัวที่ไม่ได้เชื่อมโยงกับองค์ประกอบ HTML พวกเขายังต้องใช้
เริ่มกันที่ข้อแรก
8.2 การทำงานกับตัวเลือก
jQuery ใช้ตัวเลือกเพื่อทำงานกับวัตถุ (จำ CSS และคลาสของมันได้หรือไม่) ดังนั้นใน jQuery หากคุณต้องการเลือกวัตถุหรือกลุ่มของวัตถุ คุณต้องตั้งค่าตัวเลือก
ตัวอย่าง:
รหัส | คำอธิบาย | บันทึก | |
---|---|---|---|
1 | $("ดิฟ") | เลือกวัตถุทั้งหมดที่มีแท็ก DIV | วัตถุมากมาย |
2 | $("img.#image123") | เลือกวัตถุทั้งหมดที่มีแท็ก IMG และ ID == image123 | วัตถุหนึ่ง |
3 | $("#image123") | เลือกวัตถุทั้งหมดที่มี ID == image123 | วัตถุหนึ่ง |
4 | $("div.article") | เลือกวัตถุทั้งหมดที่มีแท็ก DIV ที่มีบทความในชั้นเรียน | วัตถุมากมาย |
สมมติว่าเราต้องการเพิ่มการจัดการเหตุการณ์ให้กับลิงก์ทั้งหมดonclick
นี่คือวิธีที่เราสามารถทำได้ด้วย jQuery:
$("a").click(function() {
alert("Click");
});
ดำเนินการสามขั้นตอนที่นี่:
- รับวัตถุที่ตรงกับตัว
"a"
เลือก - เราสร้างฟังก์ชันนิรนามที่เรียกใช้ไฟล์
alert()
. - เราตั้งค่าฟังก์ชันนี้เป็นตัวจัดการเหตุการณ์
click
สำหรับวัตถุทั้งหมดตั้งแต่จุดที่ 1
ข้อดีอีกอย่างเกี่ยวกับ jQuery คือโค้ดนั้นอ่านง่าย ไม่ต้องคิดมากว่าทุกอย่างทำงานอย่างไร หากมีรหัสการทำงาน ก็ง่ายพอที่จะเข้าใจว่ามันทำอะไร
8.3 การทำงานกับองค์ประกอบเอกสาร
มาดูสถานการณ์บางอย่างสำหรับการทำงานกับเอกสารโดยใช้ jQuery
รับค่าขององค์ประกอบ (สำหรับองค์ประกอบที่มีค่า):
var result = $ ("selector").value();
ตั้งค่าองค์ประกอบ (สำหรับองค์ประกอบที่มีค่า):
$ ("selector").value(newValue);
จะเพิ่ม HTML ภายในองค์ประกอบได้อย่างไร
$ ("selector").html(newHTML);
และจะรับ HTML ที่อยู่ภายในองค์ประกอบได้อย่างไร
var html = $ ("selector").html();
ถ้าฉันต้องการรับ/เพิ่มไม่ใช่ HTML แต่เป็นข้อความธรรมดาล่ะ ไม่แปลกใจที่นี่เช่นกัน
var html = $ ("selector").text();
ถ้าฉันต้องการรับ/เปลี่ยนสีขององค์ประกอบล่ะ
$ ("selector").color("red");
หากคุณต้องการทำงานกับสไตล์ ก็สามารถทำได้ง่ายเช่นกัน:
$ ("selector").css("color", "red");
จะเพิ่มองค์ประกอบใหม่ได้อย่างไร?
$ (".container").append($("h3"));