ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

 การกำหนด Selector ใน jQuery  นอกจากจะกำหนดเป็น class หรือ id แล้วเราสามารถกำหนดในรูปแบบเจาะจงได้ว่าเราต้องการ element หรือองค์ประกอบไหนทำงาน โดยการใช้ selector (“ element + next”) เพื่อสามารถลดการใช้การคลาสหรือไอดีได้ 

selector (“ element + next”) เป็น jQuery ที่ใช้เพื่อเลือกองค์ประกอบ( HTML Element)ที่อยู่“ ถัดไป”จาก"องค์ประกอบที่ระบุ"  ตัวเลือกนี้จะทำงานเฉพาะเมื่อองค์ประกอบ"ถัดไป"ถูกวางไว้หลังองค์ประกอบที่ระบุเท่านั้น

ตัวอย่างเช่น:

  • หากคำสั่งคือ  $(“ div + p”)  สิ่งนี้จะเลือกเฉพาะองค์ประกอบ pตัวแรกซึ่งที่อยู่ถัดจากdiv” และองค์ประกอบpอื่น ๆจะถูกละเว้น
  • แต่ถ้าคำสั่งคือ$(“ div + p”) และ h1อยู่ระหว่างองค์ประกอบdivและpที่เลือกตัวเลือกนี้จะไม่ทำงานและองค์ประกอบ"p"จะไม่มีผล

มี syntex ดังนี้ 

$("element + next")

Return Value:จะคืนองค์ประกอบที่เลือกพร้อมการเปลี่ยนแปลงที่ระบุ

ตัวอย่างโค้ด

<!DOCTYPE html> 
<html> 

<head> 
	<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> 
	
	<script> 
		$(document).ready(function() { 
		$("div + p").css("background-color","lightgreen"); 
		}); 
	</script> 
	
	<style> 
		body { 
			width: 80%; 
			height: 40%; 
			padding: 10px; 
			border: 2px solid green; 
			font-size: 20px; 
		} 
		
		div { 
			border: 1px solid green; 
			padding: 10px; 
		} 
	</style> 
</head> 

<body> 

	<div>Welcme to Mindphp.!</div> 
	<p>This is first paragraph element.</p> 
	<p>This is second paragraph element.</p> 

</body> 

</html> 

จากตัวอย่างโค้ดในส่วนของ script ได้กำหนดไว้ดังนี้ $("div + p").css("background-color","lightgreen");  คือให้เลือก องค์ประกอบ“ p” ที่อยู่ถัดจาก "div" และกำหนดพื้นหลังให้เป็นสีเขียนอ่อน  และผลลัพธ์ก็จะเป็นดังนี้ 

html+js output
ผลลัพธ์เมื่อรันผ่านเบราเซอร์

 ตัวอย่างที่สอง 

<!DOCTYPE html> 
<html> 

<head> 
	<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script> 
	
	<script> 
		$(document).ready(function() { 
			$("button").click(function() { 
				$("div + p").css("background-color","lightgreen"); 
			}); 

		}); 
	</script> 
	<style> 
		body { 
			width: 80%; 
			height: 40%; 
			padding: 10px; 
			border: 2px solid green; 
			font-size: 20px; 
		} 
		
		div { 
			border: 1px solid green; 
			padding: 10px; 
		} 
	</style> 
</head> 

<body> 

	<div>Welcme to Mindphp!</div> 
	<h1>Heading element is here.</h1> 
	<p>This is first paragraph element.</p> 
	<p>This is second paragraph element.</p> 
	<button>Submit</button> 

</body> 

</html> 

จากตัวอย่างที่สองโค้ดในส่วนของ script ได้กำหนดไว้ยังเหมือนเดิม $("div + p").css("background-color","lightgreen");  แต่เพิ่มปุ่มมาผลลัพธ์ก็จะเป็นดังนี้ 

nothing change
ผลลัพธ์เมื่อ p ไม่ได้อยู่ถัดจาก div กดปุ่มแล้วไม่มีอะไรเกิดเปลี่ยนแปลง

จากผลลัพธ์เมื่อกดปุ่มแล้วให้เลือก องค์ประกอบ“ p” ที่อยู่ถัดจาก "div" และกำหนดพื้นหลังให้เป็นสีเขียนอ่อน แต่ในโค้ด element ถัดจาก div ไม่ใช่ "p"ด้วยนี่ซิ มันคือ "h1" แล้วค่อยมา "p"   ดังนี้น element "p"ก็จะไม่มีอะไรเกิดขึ้น พื้นหลังไม่เปลี่ยนแปลง

 

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Work Shop การรับชำระ ในระบบ Open ERP
โดย EyePornnipa จ 24 มิ.ย. 2019 7:00 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
8
จ 24 มิ.ย. 2019 7:00 pm โดย EyePornnipa
ย่อขนาดรูปด้วยโปรแกรม Gimp
โดย jamepiyawat จ 24 มิ.ย. 2019 6:49 pm บอร์ด Graphic design
0
3
จ 24 มิ.ย. 2019 6:49 pm โดย jamepiyawat
ทำความรู้จักกับ Sensor water flow
โดย Patipat จ 24 มิ.ย. 2019 6:42 pm บอร์ด IOT - Internet of things
0
5
จ 24 มิ.ย. 2019 6:42 pm โดย Patipat
VDO การสร้างลิงค์ แอดเพื่อน ใน Line
โดย chatee supasand จ 24 มิ.ย. 2019 6:15 pm บอร์ด MT33 - นายชาตรี สุภาแสน
0
3
จ 24 มิ.ย. 2019 6:15 pm โดย chatee supasand
B - กด SAVE การรับชำระไม่ได้
โดย EyePornnipa จ 24 มิ.ย. 2019 6:01 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
5
จ 24 มิ.ย. 2019 6:01 pm โดย EyePornnipa
มารู้จักตัวแปรชนิด tuple ในภาษา python
โดย jirawoot จ 24 มิ.ย. 2019 5:50 pm บอร์ด Python Knowledge
0
5
จ 24 มิ.ย. 2019 5:50 pm โดย jirawoot
วิธีทำขอบตัวอักษรด้วย Gimp
โดย jamepiyawat จ 24 มิ.ย. 2019 5:17 pm บอร์ด Graphic design
1
15
จ 24 มิ.ย. 2019 6:12 pm โดย mindphp
ตัวอย่างการใช้ Function str_replace() ลบcomma(,) ออกจากจำนวนตัวเลข
โดย Patipat จ 24 มิ.ย. 2019 5:12 pm บอร์ด PHP Knowledge
0
10
จ 24 มิ.ย. 2019 5:12 pm โดย Patipat
การใช้ Script กรอกข้อมูลตัวเลขจำนวนแล้วให้ขึ้นคอมม่า(,)ภาษา PHP
โดย Patipat จ 24 มิ.ย. 2019 4:53 pm บอร์ด Jquery & Ajax Knowledge
0
5
จ 24 มิ.ย. 2019 4:53 pm โดย Patipat
มารู้จักตัวแปร list ในภาษา python
โดย jirawoot จ 24 มิ.ย. 2019 4:47 pm บอร์ด Python Knowledge
0
5
จ 24 มิ.ย. 2019 4:47 pm โดย jirawoot
การ download คลิป ใน youtube ด้วย clipconverter
โดย jirawoot จ 24 มิ.ย. 2019 3:46 pm บอร์ด Share Knowledge
0
7
จ 24 มิ.ย. 2019 3:46 pm โดย jirawoot
เมื่อคุณลงโปรแกรมอะไรสักอย่างแล้วเกิดเหตุการณ์แบบนี้ขึ้น
โดย chatee supasand จ 24 มิ.ย. 2019 3:19 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
จ 24 มิ.ย. 2019 3:19 pm โดย chatee supasand
การใช้ Script กรอกข้อมูลตัวเลขจำนวนแล้วให้ขึ้นคอมม่า(,)ภาษา PHP
โดย Patipat จ 24 มิ.ย. 2019 2:44 pm บอร์ด JavaScript & Jquery Ajax
0
7
จ 24 มิ.ย. 2019 2:44 pm โดย Patipat
VDO การใช้งาน ระบบ ERP และเรียนรู้งานบริการของบริษัท
โดย EyePornnipa จ 24 มิ.ย. 2019 2:40 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
27
จ 24 มิ.ย. 2019 2:40 pm โดย EyePornnipa
B - รบกวนตรวจสอบปัญหาการสั่งซื้อของลูกค้าด่วนครับ [2019-06][021]
โดย tsukasaz จ 24 มิ.ย. 2019 2:27 pm บอร์ด Diageo - Web Ordering - Tester
1
2
จ 24 มิ.ย. 2019 3:15 pm โดย tsukasaz
เปลี่ยนเว็บให้ต่างประเทศเป็นภาษาไทย google แปลภาษา
โดย jamepiyawat จ 24 มิ.ย. 2019 12:44 pm บอร์ด Share Knowledge
0
11
จ 24 มิ.ย. 2019 12:44 pm โดย jamepiyawat
อยากทราบวิธีใช้ Script พอกดเลขแล้วให้ขึ้นคอมม่า(,)ภาษา PHP
โดย Patipat จ 24 มิ.ย. 2019 11:39 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
18
จ 24 มิ.ย. 2019 2:10 pm โดย Patipat
Windows Terminal เวอร์ชั่นใหม่ออกมาแล้ว ดาวน์โหลดได้เลยที่ Microsoft Store
โดย chatee supasand จ 24 มิ.ย. 2019 11:26 am บอร์ด Microsoft Office Knowledge & line & Etc
0
4
จ 24 มิ.ย. 2019 11:26 am โดย chatee supasand
ใน phpbb 3.1 ถ้าเราต้องการเปิดสิทธิ์ให้ user สามารถแก้ไข โพสต์ user อื่นได้ต้องตั้งค่ายังไงค่ะ
โดย thatsawan จ 24 มิ.ย. 2019 11:13 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
8
จ 24 มิ.ย. 2019 11:13 am โดย thatsawan
B - การแสดงผล Database Summary [2019-06][007]
โดย tsukasaz จ 24 มิ.ย. 2019 10:56 am บอร์ด IIEC - Feedback Service System - Tester
1
2
จ 24 มิ.ย. 2019 11:54 am โดย tsukasaz