รู้จักการใช้งานฟังก์ขัน after() ใน jquery

18 October 2008

สมมติ xxx คือ element หรือ selector ที่กำหนด

รูปแบบการใช้งาน $("xxx").affter(content)

เมื่อ content คือ ข้อความหรือ html
การทำงานของฟังก์ชันคือ เป็นการแทรกเนื้อหา หรือ html ต่อท้าย element ที่เรากำหนด

jQuery Code

<span id="greeting">Hello</span>
<script language="javascript">
$(function(){
	$(":button").click(function(){ // เงื่อนไขการคลิกสำหรับทดสอบ
		$("#greeting").after("<span> How are you?</span>");
	});
});
</script>
<br />
<input type="button" name="Button" value="คลิกแสดงตัวอย่าง" />

ตัวอย่างผลลัพธ์

Hello

คำอธิบาย

เมื่อมีการคลิกปุ่ม คลิกแสดงตัวอย่าง จะมีการแทรก html ที่ีมีข้อความว่า How are you?
ต่อท้ายจาก element ที่กำหนดซึ่งคือ แท็ก span ที่มี id เท่ากับ greeting








บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

30 Mar 09 ค้นหาและ hilight ข้อความในหน้าเว็บเพจด้วย jQuery อ่าน 2765 20 Aug 09 jQuery ป้องกัน การคลิกขวา ในหน้าเว็บไซต์ อ่าน 2756 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 2746 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรอง Attribute อ่าน 2739 28 Jun 10 การเลือก หรือ ไม่เลือก checkbox ทั้งหมด และ hilight ด้วย jQuery อย่างง่าย อ่าน 2719 01 Feb 10 การใช้งาน method delay() ใน jQuery 1.4 อ่าน 2718 29 Oct 10 แนะนำ jQuery CountDown plugin สวยๆ สำหรับประยุกต์ใช้งาน อ่าน 2711 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรองพื้นฐาน อ่าน 2700 19 Oct 10 เริ่มต้นการใช้งาน jwplayer jquery plugin แสดง video บนเว็บไซต์ อ่าน 2680 26 Sep 10 การแสดงข้อมูล แนะนำ เส้นทาง ใน google map อ่าน 2617 29 Nov 09 กำหนด hilight ของ cell ข้อมูลในตาราง ด้วย jQuery และ CSS อย่างง่าย อ่าน 2608 25 Sep 08 หาตำแหน่งของ element แนวแกน x แกน y ด้วยฟังก์ชันของ jQuery อ่าน 2571 22 Aug 10 สร้าง waiting page ให้รอสักครู่ ก่อนลิ้งค์ ไปเว็บอื่น ด้วย jQuery และ php อ่าน 2552 06 Nov 10 แนะนำ jQuery UI Effect แบบ ไม่ต้องใช้งานร่วมกับ event show hide และ toggle อ่าน 2549 14 Mar 09 ค้นหาข้อความในหน้าเว็บเพจอย่างง่ายด้วย jQuery อ่าน 2541

บทความคนเข้าอ่านวันนี้

23 Nov 08 สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย อ่าน 24537 21 Aug 09 ตรึงหัวข้อ header ในตาราง table ด้วย css รองรับ Firefox และ IE อ่าน 4803 27 May 10 ทบทวน ลำดับ การทำงาน mouse events ใน jQuery อ่าน 2354 08 Oct 08 คำสั่ง SQL DISTINCT อ่าน 4861 12 Sep 10 จัดรูปแบบ NavigationControlOptions ใน Google Map อ่าน 1613 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรอง Attribute อ่าน 2739 22 Mar 09 javascript หาความกว้างและความสูงของหน้าเพจได้ด้วยฟังก์ชันง่ายๆ อ่าน 1717 27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 2513 22 Dec 10 เพิ่มลูกเล่น การแสดงข้อมูล เลื่อนสลับบน ล่าง คล้าย twitter ด้วย jQuery อ่าน 3351 14 Feb 09 คำนวณหาอายุ จากวันเกิด ด้วย php อ่าน 4476 25 Sep 08 คำสั่ง SQL เพื่อสุ่มข้อมูลมาแสดง อ่าน 3750 07 Sep 10 ใช้ ckeditor กับ filemanager ด้วย php รองรับ ฟังก์ชัน javascript อ่าน 3407 01 Nov 10 ประยุกต์ ฟังก์ชัน animate ใน jQuery เลื่อน scroll หน้าเพจ อ่าน 2264 23 Feb 11 การแบ่งหน้า การพิมพ์ สำหรับข้อมูลต่อเนื่อง ด้วย css อย่างง่าย อ่าน 2138 13 Mar 09 สร้างฟังก์ชัน กรอกข้อความได้เฉพาะภาษาไทยด้วย javascript อ่าน 3252 25 Sep 08 Margins and Padding การจัดการพื้นที่ระหว่างสิ่งต่างๆ อ่าน 3409 06 Nov 09 สร้าง swap แบนเนอร์ effect แบบ fade ด้วย jQuery อย่างง่าย อ่าน 4638 03 Nov 10 การเพิ่ม ลบ แก้ไข แบ่งหน้า ข้อมูล ด้วย jquery ajax อย่างง่าย อ่าน 5415 24 Mar 09 Database ข้อมูลจังหวัดและอำเภอในประเทศไทย อ่าน 6684 07 Dec 09 การเลื่อน scrollbar อัตโนมัติตาม การเลื่อนขึ้นลง ของ mouse ด้วย jQuery อ่าน 2906
จำนวนผู้เยี่ยมชม 777840
คน 2012 © Copyright ninenik.com. All rights reserved.