บทเรียน [phpBB] บทที่ 2 jQuery Syntax

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16180
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

บทเรียน [phpBB] บทที่ 2 jQuery Syntax

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

บทที่ 2 jQuery Syntax
1. การเรียกใช้ไฟล์ jQuery จะอยู่ใน <script src="ชื่อไฟล์ประเภท Javascript"></scrip> มี 2 รูปแบบคือ
- download ไฟล์ jQuery แล้วนำไปวางใน root Document หรือจะเอาไปรวมไว้กับไลบรารี่อื่นๆ ก็ได้ แล้วเรียกตาม path ที่เราเก็บไฟล์ jQuery ไว้ (ตัวอย่างไฟล์ jquery-3.5.1.min.js)

โค้ด: เลือกทั้งหมด

 
 	<html>
		<head>
			<script src="/jquery-3.5.1.min.js"></script>
		</head>
	</html>
- เรียก jQuery จากเซิร์ฟเวอร์อื่น วิธีเรียก

โค้ด: เลือกทั้งหมด

	<html>
		<head>
			<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		</head>
	</html>
2. jQuery syntax การทำงานจะให้เลือก HTML element (เช่น p, ul, li, i, span เป็นต้น) และกำหนด action ให้กับ element นั้นๆ โดยมีรูปแบบเป็น
$(selector).action()
selector = HTML element, css (ที่เราระบุเป็น id, class) ที่กำหนดอยู่ใน element
action() = เมธอดที่ใช้กำหนดการทำงานให้กับ selector

ตัวอย่างการใช้
- $(this).hide() เป็นการซ่อนองค์ประกอบปัจจุบัน
- $("p").hide() เป็นการซ่อนองค์ประกอบ "p" ทั้งหมด
- $(".test").hide() เป็นการซ่อนองค์ประกอบที่มี class= "test"
- $(#test").hide() เป็นการซ่อนองค์ประกอบที่มี id="test"

3. Method Chainning เป็นความสามารถเขียน jQuery ที่เรียกใช้เมธอนใน Element นั้นได้มากกว่า 1 Method โดยการทำงานจะเรียงลำดับขั้น ซึ่งจะเขียนได้ภายในบรรทัดเดียว เช่น
$("h1").text("One more?").css("font-style","italic");
หากใน html นั้นมีแท็ก h1 > text("One more?") จะแสดงเป็นคำว่า One more? >> css("font-style","italic") เปลี่ยน style จะทำให้ตัวหนังสือเอียง
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 30