Post archive
Category: jQuery
-
คำสั่ง 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 -
และแล้ว…
เท่าที่ผมสำรวจดูยังไม่เห็น gadget ที่สร้างโดยคนไทย (เฉพาะในคลังของกูเกิลนะ) ผมเป็นคนแรกหรือเปล่าเนี่ย หลังจากที่ผมได้สร้าง google gadget ติดตามโพสต์ใหม่ของเว็บนี้ ขึ้นมาเพื่อเสริมเข้าไปใน google desktop ผมก็ได้อัปโหลดขึ้นไปให้ทางกูเกิลพิจารณา ว่าสมควรจะถูกบรรจุไว้ใน คลัง gadget ของกูเกิลหรือไม่ และแล้ว gadget ที่ผมสร้างขึ้นมาก็ได้รับการอนุมัติ ท่านลองเข้าไปที่ http://desktop.google.com/plugins/?hl=th
READ MORE -
คำสั่ง append() ของ jquery
ในบางครั้งบางคราว ที่เราจำเป็นจะต้องเพิ่มเนื้อหา เข้าไปในเนื้อหาที่มีอยู่เดิม jquery มีคำสั่งช่วยเราในลักษณ์นี้ append(content) content : (string) เนื้อหาที่ต้องการเพิ่มเข้าไปต่อท้ายข้อความที่มีอยู่เดิม สามารถใช้ html ได้ คำสั่งนี้ใช้สำหรับเพิ่มเนื้อหาเข้าไปต่อท้าย เนื้อหาเดิมที่มีอยู่ ในอีลิเม้นท์ใดๆ ตัวอย่างการใช้งาน Live Demo
READ MORE -
คำสั่ง prepend() ของ jquery
คำสั่งนี้จะทำงานตรงกันข้ามกับคำสั่ง append() โดยมันจะเพิ่มเนื้อหาเข้าไปในส่วนต้น ของเนื้อหาเดิม prepend(content) content :(string) เนื้อหาที่ต้องการเพิ่มเข้าไปในส่วนต้นของเนื้อหาเดิม สามารถใช้แท็ก html ปนได้ ตัวอย่างการใช้งาน Live Demo
READ MORE -
คำสั่ง text() ของ jquery
ด้วย jquery เราสามารถกำหนดข้อความให้กับอิลิเม้นท์ใดๆ หรือดึงค่าออกจากอีลิเม้นท์ใดๆ ได้ง่ายๆ ด้วยคำสั่ง text คำสั่งนี้จะคืนค่ากลับมาเฉพาะเท็กเท่านั้น ดูตัวอย่างนำร่อง นิดนึง <ul id="theList"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul><ul id="theList"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> ถ้าเราใช้คำสั่ง var text = $(‘theList’).text();var text = $(‘theList’).text(); สิ่งที่เก็บในตัวแปร text คือ OneTwoThreeFour เห็นมั้ยว่ามันตัดส่วนที่เป็นแท็ก html ทิ้งทั้งหมด ถ้าเราต้องการให้มันคืนค่า html กลับมาด้วย เราต้องใช้ คำสั่ง html() ของ jquery เมื่อเราต้องการดึงเท็กออกจากอีลิเม้นท์ใดๆ ใช้คำสั่ง text() ใช้สำหรับดึงข้อความออกจากอีลิเม้นท์ใดๆ ตัวอย่างการใช้งาน Live Demo
READ MORE
