JQuery Tips : เมธอด prepend() ใช้เพื่อแทรกเนื้อหาไปที่จุดเริ่มต้นของอิลีเมนต์

Post a reply


In an effort to prevent automatic submissions, we require that you complete the following challenge.
Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is ON
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: JQuery Tips : เมธอด prepend() ใช้เพื่อแทรกเนื้อหาไปที่จุดเริ่มต้นของอิลีเมนต์

JQuery Tips : เมธอด prepend() ใช้เพื่อแทรกเนื้อหาไปที่จุดเริ่มต้นของอิลีเมนต์

by abdkode » 03/04/2019 3:56 pm

เมธอด prepend () เป็นเมธอด inbuilt ใน jQuery ซึ่งใช้เพื่อแทรกเนื้อหาที่กำหนดไปที่จุดเริ่มต้นขององค์ประกอบหรืออิลีเมนต์ที่เลือก
รูปแบบ syntax ดังนี้

Code: Select all

$(selector).prepend(content, function)
พารามิเตอร์:เมธอดรับสองพารามิเตอร์ตามด้านล่างนี้:
content : เป็นพารามิเตอร์ที่จำเป็นซึ่งจะใช้ในการระบุเนื้อหาที่จะต้องการแทรก
function : มันเป็นพารามิเตอร์ตัวเลือกเพิ่มเติม(ไม่จำเป็น)ที่ใช้ในการระบุฟังก์ชั่นที่จะดำเนินการหลังจากเรียกใช้

การคืนค่า (Return Value) : วิธีนี้ส่งคืนelementที่เลือกพร้อมการเปลี่ยนแปลงที่กำหนดโดยวิธี prepend ()

ตัวอย่างโค้ดด้านล่างเป็นวิธีการ prepend () ใน jQuery:

Code: Select all

<!DOCTYPE html> 
<html> 
<head> 
	<title>The prepend Method</title> 
	<script src=" 
	https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
	</script> 
		
	<!-- jQuery code to show the woirking of this method -->
	<script> 
		$(document).ready(function(){ 
			$("button").click(function(){ 
				$("p").prepend("Welcome to "); 
			}); 
		}); 
	</script> 
	<style> 
		div { 
			width: 350px; 
			height: 100px; 
			font-weight: bold; 
			padding:20px; 
			font-size: 25px; 
			border: 2px solid navy; 
		} 
	</style> 
</head> 
<body> 
	<div> 
		<p>Mindphp!</p> 
		<!-- Click on this button to see the change -->
		<button>Click Here!</button> 
	</div> 
</body> 
</html> 
ผลลัพธ์ที่ได้เมื่อเปิดผ่านเบราเซอร์
JQuery Tips : เมธอด prepend() ใช้เพื่อแทรกเนื้อหาไปที่จุดเริ่มต้นของอิลีเมนต์ prepend1.jpg
prepend1.jpg (7.94 KiB) Viewed 683 times
เมื่อเรากดปุ่มคลิก จะผลลัพธ์ดังนี้
JQuery Tips : เมธอด prepend() ใช้เพื่อแทรกเนื้อหาไปที่จุดเริ่มต้นของอิลีเมนต์ prepend2.jpg
prepend2.jpg (10.21 KiB) Viewed 683 times
จากโค้ด เรากำหนดข้อความที่ต้องการแทรกคือ "Welcome to " เมื่อมีกดปุ่มเพื่อให้เมธอดนี้ทำงาน ข้อความดังกล่าวก็จะไปแทรกด้านหน้า selector = <p> ซึ่งเป็นข้อความ "Mindphp!" จึงกลายเป็นข้อความ "Welcome to Mindphp!" ดังผลลัพธ์ที่เห็น

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

Top