บทความในหมวด ‘jQuery’
คำสั่ง wrapInner() ของ jquery
wrapInner(wrapper)
wrapper :(string|selector) string จะต้องเป็นแท็ก html ที่มีทั้งแท็กเปิดและแท็กปิด “”
ฟังก์ชั่นนี้จะนำเอาพารามิเตอร์ที่ส่งเข้าไป ไปล้อมเนื้อหาที่อยู่ภายใน selector ที่เรียกใช้ฟังก์ชั่น โดยแบ่งออกเป็น 2 กรณี กรณีที่ส่งแท็กเปิดปิดของ html (string) เข้าไป มันจะนำแท็กเปิดและปิด ไปล้อม>เนื้อหาที่อยู่ภายใน selector ที่เรียกใช้ แต่ถ้าส่ง selector เข้าไปในฟังก์ชั่น มันจะก้อปปี้ selector ที่ส่งเข้าไป ไปล้อมแทน
ดูภาพประกอบ
ตัวอย่างการใช้งาน
คำสั่ง wrapAll() ของ jquery
คำสั่งนี้จะทำหน้าที่เหมือนกันกับคำสั่ง wrap() จะต่างกันก็ตรงที่ว่า คำสั่ง wrap() นั้นจะ wrap อีลิเม้นท์ทุกๆตัวที่เจอ แต่ wrapAll() จะ wrap แค่ครั้งเดียวเท่านั้น
ถ้า selector อยู่กันอย่างกระจัดกระจายบนเพจ มันจะย้ายทุกตัวมาอยู่ติดกันแล้ว wrap ทั้งหมด ทีเดียว
wrapAll(wrapper)
wrapper :(string|selector) string จะต้องเป็นแท็ก html ที่มีทั้งแท็กเปิดและแท็กปิด “<i></i>”
ฟังก์ชั่นนี้จะนำเอาพารามิเตอร์ที่ส่งเข้าไป ไปล้อม selector ที่เรียกใช้ฟังก์ชั่น โดยแบ่งออกเป็น 2 กรณี กรณีที่ส่งแท็กเปิดปิดของ html (string) เข้าไป มันจะนำแท็กเปิดและปิด ไปล้อม selector ที่เรียกใช้ แต่ถ้าส่ง selector เข้าไปในฟังก์ชั่น มันจะก้อปปี้ selector ที่ส่งเข้าไป ไปแทนที่ selector ที่เรียกใช้
ตัวอย่างการใช้งาน
คำสั่ง wrap() ของ jquery
คำว่า wrap ในภาษาอังกฤษ แปลว่า ห้อมล้อม หรือล้อม คำสั่ง wrap() นี้ก็เช่นกัน มันจะเอาพารามิเตอร์ซึ่งเป็นเท็ก html เปิด และ ปิด ไปล้อมเป้าหมาย ดู html นี้
<em><strong>content</strong></em>
จากด้านบน เรากล่าวได้ว่า แท็ก <em> wrap แท็ก <strong> อยู่
wrap(wrapper)
wrapper :(string|selector) string จะต้องเป็นแท็ก html ที่มีทั้งแท็กเปิดและแท็กปิด “<i></i>”
ฟังก์ชั่นนี้จะนำเอาพารามิเตอร์ที่ส่งเข้าไป ไปล้อม selector ที่เรียกใช้ฟังก์ชั่น โดยแบ่งออกเป็น 2 กรณี กรณีที่ส่งแท็กเปิดปิดของ html (string) เข้าไป มันจะนำแท็กเปิดและปิด ไปล้อม selector ที่เรียกใช้ แต่ถ้าส่ง selector เข้าไปในฟังก์ชั่น มันจะก้อปปี้ selector ที่ส่งเข้าไป ไปแทนที่ selector ที่เรียกใช้
ตัวอย่างการใช้งาน
คำสั่ง insertAfter() ของ jquery
ทำงานเหมือนกันเป๊ะๆ กับคำสั่ง after() เพราะฉะนั้น ผมจะขอยกให้ดูเฉพาะตัวอย่างการใช้งาน ส่วนคำอธิบายรายละเอียด ให้อ่านจาก after()
ตัวอย่างการใช้งาน insertAfter()
คำสั่ง after() ของ jquery
คำสั่งนี้จะำทำงานตรงกันข้ามกับคำสั่ง before()
after(content)
content : (string|selector)
คำสั่งนี้จะทำหน้าที่เพิ่ม content เข้าไปต่อท้าย selector ที่เรียกใช้ฟังก์ชั่น โดยแบ่งเป็น สองกรณี คือ ถ้าส่ง string เข้าไปในฟังก์ชั่น จะเป็นการนำ string นั้นไปต่อท้าย selector ที่เรียกใช้ฟังก์ชั่น กรณีที่ 2 ถ้าส่ง selector เข้าไปในฟังก์ชั่น จะเป็นการย้าย selector ตัวนั้นไปต่อท้าย selector ที่เรียกใช้ฟังก์ชั่น
ตัวอย่างการใช้งาน
คำสั่ง insertBefore() ของ jquery
คำสั่งนี้ทำงานเหมือนกับคำสั่ง before() เป๊ะๆ อาจจะเรียกได้ว่าเป็น alias ของกันและกัน เพราะงั้นการทำงานของคำสั่งนี้ ท่านไปอ่าน คำสั่ง before() ของ jquery นะครับ ในบทนี้ผมจะแสดง เฉพาะตัวอย่างการใช้งาน
ผมเคยมานั่งคิด ว่าทำไม เขาใช้ชื่อถึงสองชื่อ ในบางฟังก์ชั่นที่ทำงานเหมือนกันเป๊ะๆ ถ้า php ก็ die กับ exit การทำงานเหมือนกันทุกประการ เป็น alias ของกันและกัน ผมว่าดีไม่ดีเนื้อภายในฟังก์ชั่นคงเป็นตัวเดียวกัน
แล้วผมก็ถามเองตอบเองว่า การเขียนโปรแกรมไม่ใช่เป็นเพียงแค่การเขียนให้คอมพิวเตอร์ทำงานตามที่เราต้องการเท่านั้น แต่มันจะต้องเขียนแล้วอ่านได้ลื่น ใช้คำที่มีความสุข อย่าง exit กับ die นี่ ผมเลือกใช้ die เพราะฟังแล้วมันสะใจดี
ตัวอย่างการใช้งาน insertBefore
คำสั่ง before() ของ jquery
คำสั่ง before นี้จะมีความคล้ายคลึงกับคำสั่ง prepend ท่านต้องแยกให้ดีนะครับ prepend นั้นจะเพิ่มเนื้อหาเข้าไปในส่วนต้นของเนื้อหาเดิม คือจะเพิ่มเนื้อหาเข้าไปข้างใน ส่วน before นั้น จะเพิ่มเนื้อหาเข้าไปข้างหน้าอีลิเม้นท์
ดู Live Demo ดีกว่าครับ ดีว่าอธิบาย 1000 คำ
before(content)
content : (string|selector) พารามิเตอร์จะเป็น string (ปน html) ก็ได้ จะเป็น selector ก็ได้
คำสั่งนี้ ถ้าส่ง string เข้าไปในฟังก์ชั่น มันก็จะเอา string ไปวางไว้หน้า selector ที่เรียกใช้ ถ้าส่ง selector เข้าไปในฟังก์ชั่น จะเป็นการย้าย selector ตัวนั้นๆ ไปไว้ข้างหน้า selector ที่เรียกใช้
ตัวอย่างการใช้งาน