ป้ายกำกับ: jquery

Lv.3 jQuery Selectors

Posted on by alsoon

jQuery Selectors เป็นสิ่งที่สำคัญมากที่สุดใน jQuery ไลบรารี

jQuery Selectors

jQuery Selectors สามารถเลือก HTML element มาใช้งานได้ เราสามารถเลือกได้จาก ชื่ออิลิเมนต์, id, class, type, attributes, ค่าของแอตทริบิวต์ และอื่นๆ โดยค่า Selectors ต่างๆ ก็ใช้เหมือนกันกับ CSS seletors ได้เลย

การเลือกอิลิเมนต์ต่างๆ สามารถทำได้โดย $().

เลือกอิลิเมนต์จากชื่อ

โครตเบสิกเลย คือการเลือกอิลิเมนต์จากชื่อ

$("p")

จากบรรทัดบนคือการเลือกแท็ก p ทั้งหมดเลย

ตัวอย่างการใช้งาน

$("button").click(function(){
	$("p").hide();
});

จากตัวอย่างเมื่อกดที่ปุ่ม จะทำการซ่อนแท็ก p ทั้งหมด

เลือกอิลิเมนต์จาก #id

เป็นการเลือกอิลิเมนต์จาก id ของ HTML element ชื่อ id ไม่สามารถมีชื่อซ้ำได้

$("#test")

ตัวอย่างการใช้งาน

$("button").click(function(){
	$("#test").hide();
});

จากตัวอย่างเมื่อกดที่ปุ่ม จะทำการซ่อนอิลิเมนต์ที่มี id ชื่อว่า test เพียง id เดียวเท่านั้น

เลือกอิลิเมนต์จาก .class

ชื่อคลาสเหมือนกัน แต่คนละอิลิเมนต์ ทำให้เลือกเพียงชื่อคลาสก็สามารถใช้งาน 2 อิลิเมนต์ได้

$(".test")

ตัวอย่างการใช้งาน

$("button").click(function(){
	$(".test").hide();
});

จากตัวอย่างจะทำการซ่อนคลาสที่มีชื่อว่า test ทั้งหมด แท็กไหนมีคลาสเป็น test โดนซ่อนหมด

เลือกไฟล์ jQuery จากภายนอก

หากเว็บไซต์ของเรามีหน้าจำนวนมากๆ และเราต้องการให้ Function ของ jQuery ดูแลรักษาง่าย เราสามารถแยกไฟล์ jQuery ได้

ตัวอย่าง

<body>

	<script src="asset/js/jquery-v3.6.0.min.js"></script>
	<script src="asset/js/main_jquery_functions.js"></script>

</body>

Lv.2 jQuery Syntax

Posted on by alsoon

jQuery Syntax เราสามารถเลือก HTML element ได้แบบง่ายๆ พร้อมกับกำหนดการดำเนินการได้เลย

jQuery Syntax

Syntax

$(selector).action()

  • เครื่องหมาย $ เพื่อกำหนด/เข้าถึง jQuery
  • (selector) เพื่อค้นหา HTML elemets
  • การดำเนินการ jQuery() ที่จะกระทำการให้กับอิลิเมนต์ที่เราได้เลือกมา
$(document).ready(function(){

  // เขียน jQuery ตรงนี้

});

ตัวอย่าง

$(this).hide() – ซ่อนอิลิเมนต์นั้นๆ

$(“p”).hide() – ซ่อนแท็ก(อิลิเมนต์) p ทั้งหมด

$(“.test”).hide() – ซ่อนอิลิเมนต์ที่มี class ชื่อ test

$(“#test”).hide() – ซ่อนอิลิเมนต์ที่มี id ชื่อ test

การใช้งาน Ready Function ใน jQuery

ในการใช้ jQuery เพื่อเลือกอิลิเมนต์(HTML element) ใดๆ บนเว็บเพจ สิ่งสำคัญคือเราต้องแน่ใจเสียก่อนว่าอิลิเมนต์ที่เราต้องการเหล่านั้น ถูกโหลดมาครบทุกอิลิเมนต์หรือยัง

  • พยายามซ่อนอิลิเมนต์ ที่ยังไม่ได้สร้างหรือยังไม่มีตัวตน (โหลดยังไม่เสร็จ จะเอาอะไรไปทำอะไรล่ะ)
  • พยายามจะปรับขนาดของรูปภาพที่ยังโหลดไม่เสร็จ

Tip

เขียนแบบนี้สั้นกว่า

$(function(){

  // เขียน jQuery ตรงนี้

});

Lv.1 jQuery เริ่มต้น jQuery

Posted on by alsoon

jQuery จุดประสงค์ของ jQuery คือการทำให้เราสามารถใช้งาน JavaScript ได้ง่ายขึ้นนั่นเอง

เริ่มต้น jQuery ต้องรู้อะไรบ้าง

ก่อนที่เราจะสามารถเรียน jQuery ได้นั้น เราต้องมีความรู้และเข้าใจ 3 ภาษานี้ในระดับหนึ่งก่อน ไม่งั้นงงแน่นอนครับ

jQuery คืออะไร

jQuery เป็นไลบรารีของ JavaScript ทำให้เราสามารถใช้งาน JavaScript บนเว็บไซต์ได้ง่ายกว่าเดิม ลดความซับซ้อนในการเขียนโค้ดยาวๆ

jQuery ทำอะไรได้บ้าง

ไลบรารี jQuery มีคุณสมบัติดังต่อไปนี้

  • จัดการ HTML/DOM
  • จัดการ CSS
  • เหตุการณ์ HTML
  • เอฟเฟกต์และแอนิเมชั่น
  • AJAX
  • Utilities

ทำไมต้อง jQuery

มีไลบรารี JavaScript อื่นๆมากมาย แต่ jQuery เป็นที่นิยมมากที่สุดและมีความยืดหยุ่นมากที่สุด
บริษัทใหญ่ๆหลายแห่งใช้ jQuery เช่น Google, Microsoft, IBM และ Netflix

เริ่มต้นใช้ jQuery

ก่อนที่เราจะสามารถใช้งาน jQuery ได้นั้น เราต้องไปดาวน์โหลดไฟล์ jQuery มาติดตั้งไว้ในเว็บไซต์ของเราเสียก่อน โดยสามารถเข้าไปดาวน์โหลดได้ที่เว็บของ jQuery เลย

การเรียกใช้งาน jQuery

เพื่อความสะดวกในการใช้งาน ให้คัดลอกไฟล์ jQuery ไปไว้ในโฟลเดอร์เดียวกันของเว็บไซต์

ส่วนการเรียกใช้งานให้เราเรียกใช้ผ่าน HTML <script> แท็ก

<head>
	<script src="jQuery-v3.6.0.min.js"></script>
</head>

หรือจะเรียกใช้ใน body แท็กก็ได้

<body>
	<script src="jQuery-v3.6.0.min.js"></script>
</body>

แค่นี้เราก็สามารถใช้งาน jQuery ได้แบบสบายๆแล้ว แถบฟรีอีกต่างหาก สุดยอด

Top