Post archive
Tag: jQuery
-
คำสั่ง wrapInner() ของ jquery
wrapInner(wrapper) wrapper :(string|selector) string จะต้องเป็นแท็ก html ที่มีทั้งแท็กเปิดและแท็กปิด “” ฟังก์ชั่นนี้จะนำเอาพารามิเตอร์ที่ส่งเข้าไป ไปล้อมเนื้อหาที่อยู่ภายใน selector ที่เรียกใช้ฟังก์ชั่น โดยแบ่งออกเป็น 2 กรณี กรณีที่ส่งแท็กเปิดปิดของ html (string) เข้าไป มันจะนำแท็กเปิดและปิด ไปล้อม>เนื้อหาที่อยู่ภายใน selector ที่เรียกใช้ แต่ถ้าส่ง selector เข้าไปในฟังก์ชั่น มันจะก้อปปี้ selector ที่ส่งเข้าไป ไปล้อมแทน ดูภาพประกอบ ตัวอย่างการใช้งาน Live Demo
READ MORE -
คำสั่ง 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 ที่เรียกใช้ ตัวอย่างการใช้งาน Live Demo
READ MORE -
คำสั่ง wrap() ของ jquery
คำว่า wrap ในภาษาอังกฤษ แปลว่า ห้อมล้อม หรือล้อม คำสั่ง wrap() นี้ก็เช่นกัน มันจะเอาพารามิเตอร์ซึ่งเป็นเท็ก html เปิด และ ปิด ไปล้อมเป้าหมาย ดู html นี้ <em><strong>content</strong></em><em><strong>content</strong></em> จากด้านบน เรากล่าวได้ว่า แท็ก <em> wrap แท็ก <strong> อยู่ wrap(wrapper) wrapper :(string|selector) string จะต้องเป็นแท็ก html ที่มีทั้งแท็กเปิดและแท็กปิด “<i></i>” ฟังก์ชั่นนี้จะนำเอาพารามิเตอร์ที่ส่งเข้าไป ไปล้อม selector ที่เรียกใช้ฟังก์ชั่น โดยแบ่งออกเป็น 2 กรณี กรณีที่ส่งแท็กเปิดปิดของ html (string) เข้าไป มันจะนำแท็กเปิดและปิด ไปล้อม selector ที่เรียกใช้ แต่ถ้าส่ง selector เข้าไปในฟังก์ชั่น มันจะก้อปปี้ selector […]
READ MORE -
คำสั่ง insertAfter() ของ jquery
ทำงานเหมือนกันเป๊ะๆ กับคำสั่ง after() เพราะฉะนั้น ผมจะขอยกให้ดูเฉพาะตัวอย่างการใช้งาน ส่วนคำอธิบายรายละเอียด ให้อ่านจาก after() ตัวอย่างการใช้งาน insertAfter() Live Demo
READ MORE -
คำสั่ง after() ของ jquery
คำสั่งนี้จะำทำงานตรงกันข้ามกับคำสั่ง before() after(content) content : (string|selector) คำสั่งนี้จะทำหน้าที่เพิ่ม content เข้าไปต่อท้าย selector ที่เรียกใช้ฟังก์ชั่น โดยแบ่งเป็น สองกรณี คือ ถ้าส่ง string เข้าไปในฟังก์ชั่น จะเป็นการนำ string นั้นไปต่อท้าย selector ที่เรียกใช้ฟังก์ชั่น กรณีที่ 2 ถ้าส่ง selector เข้าไปในฟังก์ชั่น จะเป็นการย้าย selector ตัวนั้นไปต่อท้าย selector ที่เรียกใช้ฟังก์ชั่น ตัวอย่างการใช้งาน Live Demo
READ MORE -
คำสั่ง insertBefore() ของ jquery
คำสั่งนี้ทำงานเหมือนกับคำสั่ง before() เป๊ะๆ อาจจะเรียกได้ว่าเป็น alias ของกันและกัน เพราะงั้นการทำงานของคำสั่งนี้ ท่านไปอ่าน คำสั่ง before() ของ jquery นะครับ ในบทนี้ผมจะแสดง เฉพาะตัวอย่างการใช้งาน ผมเคยมานั่งคิด ว่าทำไม เขาใช้ชื่อถึงสองชื่อ ในบางฟังก์ชั่นที่ทำงานเหมือนกันเป๊ะๆ ถ้า php ก็ die กับ exit การทำงานเหมือนกันทุกประการ เป็น alias ของกันและกัน ผมว่าดีไม่ดีเนื้อภายในฟังก์ชั่นคงเป็นตัวเดียวกัน แล้วผมก็ถามเองตอบเองว่า การเขียนโปรแกรมไม่ใช่เป็นเพียงแค่การเขียนให้คอมพิวเตอร์ทำงานตามที่เราต้องการเท่านั้น แต่มันจะต้องเขียนแล้วอ่านได้ลื่น ใช้คำที่มีความสุข อย่าง exit กับ die นี่ ผมเลือกใช้ die เพราะฟังแล้วมันสะใจดี ตัวอย่างการใช้งาน insertBefore Live Demo
READ MORE -
คำสั่ง before() ของ jquery
คำสั่ง before นี้จะมีความคล้ายคลึงกับคำสั่ง prepend ท่านต้องแยกให้ดีนะครับ prepend นั้นจะเพิ่มเนื้อหาเข้าไปในส่วนต้นของเนื้อหาเดิม คือจะเพิ่มเนื้อหาเข้าไปข้างใน ส่วน before นั้น จะเพิ่มเนื้อหาเข้าไปข้างหน้าอีลิเม้นท์ ดู Live Demo ดีกว่าครับ ดีว่าอธิบาย 1000 คำ before(content) content : (string|selector) พารามิเตอร์จะเป็น string (ปน html) ก็ได้ จะเป็น selector ก็ได้ คำสั่งนี้ ถ้าส่ง string เข้าไปในฟังก์ชั่น มันก็จะเอา string ไปวางไว้หน้า selector ที่เรียกใช้ ถ้าส่ง selector เข้าไปในฟังก์ชั่น จะเป็นการย้าย selector ตัวนั้นๆ ไปไว้ข้างหน้า selector ที่เรียกใช้ ตัวอย่างการใช้งาน Live Demo
READ MORE -
คำสั่ง prependTo() ของ jquery
เป็นคำสั่งที่ทำงานตรงกันข้ามกับ appendTo คือแทนที่จะย้ายอีลิเม้นท์จากที่หนึ่งไปสู่อีกที่หนึ่งแบบต่อท้าย แต่นำไปใส่ข้างหน้าแทน ดู Live Demo เพื่อความเข้าใจยิ่งขึ้น prependTo(target) target : (selector) selector ก็คือตัวที่มันขึ้นต้นด้วย $ ของ jquery นั่นแหละ เขาเรียก selector หรือ wrapper ก็ได้ เช่น $(‘#target’) ตัวนี้แหละ selector คำสั่งนี้จะทำการย้าย selector ต้นทางไปหา selector ปลายทาง แบบนำไปแทรกไว้เป็นตัวแรก ตัวอย่างการใช้งาน Live Demo
READ MORE -
สร้าง Todo List ด้วย jQuery AJAX
Todo List ก็คือลิสต์รายการที่เราจะต้องทำ ถ้ารายการไหนทำไปแล้ว เราก็เอามันออกไป เป็นโปรเจ็กเล็กๆ แต่น่าสนใจ และมากคุณประโยชน์เลยทีเดียวครับ หน้าตามันประมาณนี้ครับ เป้าหมายที่เราควรจะได้ในโปรเจ็กนี้ คือ รู้ว่าง AJAX ของ jQuery นั้นอย่างกะปอกกล้วย รู้จักคำสั่ง $.post() ของ jquery รู้จัก method live ของ jquery รู้จักคำสั่ง remove() ของ jquery รู้จักคำสั่ง append() ของ jquery Live Demo | Download Source
READ MORE -
คำสั่ง appendTo() ของ jquery
การย้ายอีลิเม้นท์จากที่หนึ่งไปสู่อีกที่หนึ่งนั้น ด้วย jquery ทำได้ง่ายๆ ทำไมเราจึงต้องเคลื่อนย้ายอีลิเม้นท์จากที่หนึ่งไปสู่อีกที่หนึ่งล่ะ ผมอยากจะให้ท่านดู Live Demo แล้วท่านจะสรุปได้เอง appendTo(target) target : (selector) selector ก็คือตัวที่มันขึ้นต้นด้วย $ ของ jquery นั่นแหละ เขาเรียก selector หรือ wrapper ก็ได้ เช่น $(‘#target’) ตัวนี้แหละ selector คำสั่งนี้จะทำการย้าย selector ต้นทางไปหา selector ปลายทาง แบบนำไปต่อท้าย ตัวอย่างการใช้งาน Live Demo
READ MORE
