Course โมดูล 3 - Lecture: ห้องสมุด jQuery

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"));