Post archive
Tag: jQuery
-
คำสั่ง 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 -
คำสั่ง html() ของ jquery
การจัดการกับเนื้อหาของอีลิเม้นท์บนเพจด้วย jquery นั้นเป็นอะไรที่ง่ายเหลือเชื่อ คุณสามารถดึงเนื้อหาจากอีลิเม้นท์ใดๆได้ด้วยคำสั่ง html() หรือจะกำหนดเนื้อหา ก็แค่ใช้คำสั่ง html(content) html() parameter : ไม่มี คำสั่งนี้ใช้สำหรับดึงเนื้อหาออกมาจากอีลีเม้นท์ ตัวอย่างการใช้งาน Live Demo
READ MORE -
จัดการ content ด้วย jQuery
หลังจากวันนี้ไป ผมจะกล่าวถึงคำสั่งที่ใช้สำหรับจัดการกับเนื้อหาบนเพจของ jquery ซึ่งมีอยู่ด้วยกัน 16 คำสั่ง ดังนี้ html() text() append() appendTo() prepend() prependTo() before() insertBefore() after() insertAfter() wrap(wrapper) wrapAll(wrapper) wrapInner(wrapper) remove() empty() clone(copyHandlers) การจัดการเนื้อหาบนเพจด้วย javascript แบบเดิม ผมว่ามันเป็นอะไรที่ลำบากเอามากๆ อีกทั้งยังต้องคำนึงถึงเบราเซอร์แต่ละตัวอีก แต่ถ้าใช้ jquery แล้ว หายห่วง เรื่องการข้ามเบราเซอร์มันจะเป็นคนจัดการให้เอง ผมขอกล่าวเพิ่มเติมอีกสักนิด เรื่อง jquery เพราะมีเพื่อนคนนึงเขาถามมาด้วยความไม่เข้าใจ ว่าแท้จริงแล้ว jquery มันคืออะไร เป็นภาษาใหม่ใช่ไม๊ แล้วมันทำในสิ่งที่จาวาสคริปต์ทำไม่ได้ ใช่หรือเปล่า แล้วทำไมจึงบอกว่าใช้เขียนแทน javascript ได้
READ MORE -
คำสั่ง hasClass ของ jQuery
ผมได้พูดถึงคำสั่งที่เกี่ยวกับการจัดการ css ไปแล้ว 2 ครั้ง คือ jQuery กับการจัดการ CSS คำสั่ง css ของ jQuery คราวนี้จะกล่าวถึงคำสั่งที่ใช้สำหรับตรวจสอบว่า css คลาส มีอยู่ในอีลิเม้นท์ตัวที่เราจะตรวจสอบหรือไม่
READ MORE -
คำสั่ง css ของ jQuery
ผมได้เขียนบทความเรื่อง jQuery กับการจัดการ CSS ไปแล้วครั้งหนึ่ง ในบทความนั้นจะกล่าวถึงเรื่อง การเพิ่ม css คลาสให้กับออบเจ็กในเพจ และการเอา css คลาสออก นั่นหมายถึงว่า การจะใช้งานคำสั่งนั้น เราจะต้องเขียนคลาสของ css เตรียมไว้ก่อน แล้วถ้าเราไม่ได้เขียน css ไว้ก่อนล่ะ?่ jquery ยังมีคำสั่งที่ใช้สำหรับจัดการกับ css อีกชุดหนึ่ง คือ css( name,value ) name : (string) ชื่อ css value : (string|number|function) ค่าที่เราต้องการกำหนด ชนิดจะขึ้นอยู่กับ css ตัวนั้นๆ เช่นถ้า width เราก็ใช้ตัวเลข คำสั่งนี้ใช้สำหรับกำหนดค่า element ผ่านทาง css ผมขอยก html มาให้ท่านดูประกอบนิดนึง <p style="padding-left:10px;width:200px"> Paragraph </p><p style="padding-left:10px;width:200px"> […]
READ MORE -
jQuery กับการจัดการ CSS
การทำเว็บเดี๋ยวนี้เราไม่ค่อยใช้ตารางในการจัดวางโครงสร้างกันแล้ว เรานิยมใช้ CSS มาช่วยจัดการการแสดงผล เรียกได้ว่า CSS เข้ามามีบทบาทมากกว่าเมื่อก่อน jQuery นั้นมีคำสั่งจัดการ CSS อยู่ 3 คำสั่ง คือ addClass(names) removeClass(names) toggleClass(name) ผมจะอธิบายไล่ไปทีละคำสั่งเลยนะครับ addClass(names) ใช้สำหรับเพิ่มชื่อคลาสเข้าไปใน element ใดๆ โดยจะไม่ไปทับคลาสเดิม html นั้นในอีลิเม้นท์ตัวหนึ่งๆ สามารถมีคลาสได้หลายคลาสอยู่แล้ว names :(string) ชื่อคลาสที่เราต้องการเพิ่ม ในกรณีต้องการเพิ่มทีเดียวหลายคลาส ให้คั่นคลาสแต่ละตัวด้วยช่องว่าง
READ MORE -
คำสั่ง removeAttr ของ jQuery
Live Demo ในกรณีที่เราต้องการ remove attribute ออกจาก element ภายในเพจ jQuery ได้เตรียมคำสั่งไว้คำสั่งหนึ่งคือ removeAttr อย่างถ้าสมมติว่า ในฟอร์มของเรามีช่องเท็กบ้อกช่องหนึ่ง ซึ่งเราเซตไว้ว่าให้อ่านได้อย่างเดียว <input type="text" name="username" id="username" readonly="readonly" /><input type="text" name="username" id="username" readonly="readonly" /> แล้วเราต้องการให้ยูสเซ่อร์สามารถป้อนข้อมูลเข้าไปในช่องเท็กบ้อกนี้ได้ เราก็ใช้คำสั่ง $(‘#username’).removeAttr( ‘readonly’ );$(‘#username’).removeAttr( ‘readonly’ );
READ MORE -
คำสั่ง attr ของ jQuery
Live Demo คำสั่ง attr ของ jQuery นั้นไว้สำหรับดึงค่าจาก attribute ของ element ในเพจ หรือใช้สำหรับกำหนดค่าให้กับ attribute ก็ได้ครับ การดึงค่า ไวยากรณ์ จะเป็นดังนี้ : attr(attrname)attr(attrname) attrname : คือ ชื่อ attribute ดูตัวอย่างครับ จะเข้าใจชัดเจนขึ้น $(‘#get’).click(function(){ alert( $(‘img’).attr( ‘src’ ) ); //= http://www.select2web.com/wp-content/themes/typebased/styles/default/logo.jpg alert( $(‘img’).attr( ‘alt’ ) ); //= select2web alert( $(‘img’).attr( ‘width’ ) ); //= 400 }); <img src="http://www.select2web.com/wp-content/themes/typebased/styles/default/logo.jpg" alt="select2web" […]
READ MORE
