Post archive
Category: jQuery
-
คำสั่ง 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 -
การสร้างเนื้อหาแบบ on the fly ด้วย jQuery
Live Demo มันเป็นอะไรที่ง่ายเอามากๆครับ ดูโค้ดเลยละกัน แล้วผมจะอธิบายทีหลัง <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>Insert element on the fly</title> <script type="text/javascript"> $(document).ready(function(){ var inner = $(‘<h1>This is H1</h1>’); $(‘#content’).html( inner ); }) </script> </head> <body> <div id="content"> </div> </body> </html><!DOCTYPE html PUBLIC "-//W3C//DTD […]
READ MORE -
selector ของ jQuery
selector คืออะไร คือตัวที่เราจะใช้สำหรับอ้างอิงไปถึงออบเจ็กต่างๆ ที่อยู่บนหน้าเพจ ดูตัวอย่าง javascript กันก่อนนะครับ document.getElementById(’username’); document.getElementByTagName(’p’);document.getElementById(‘username’); document.getElementByTagName(‘p’); คำสั่งแรกจะอ้างอิงไปถึง อะไรก็ตามที่อยู่บนหน้าเพจที่มี id เท่ากับ username คำสั่งที่สอง อ้างอิงไปถึงแท็ก p ทุกตัวที่อยู่บนหน้าเพจ ทีนี้เรามาดู selector ในรูปแบบ css #username{font-size:16px;} .classname{font-size:18px;} p a{font-size:20px;}#username{font-size:16px;} .classname{font-size:18px;} p a{font-size:20px;} #username จะอ้างไปถึงออบเจ็กที่มี id เท่ากับ username .classname จะอ้างไปถึงอ้อบเจ็กทุกตัวที่เรากำหนด class เท่ากับ classname p a จะอ้างไปถึง แท็ก a ที่อยู่ภายใต้แท็ก p ทุกตัวในเพจ จากที่กล่าวมาท่านพอจะเข้าใจบ้างนะครับว่า selector คืออะไร ้ ทีนี้เรามาว่ากันถึง selector ของ […]
READ MORE -
วิธีการตรวจสอบ checkbox ด้วย jQuery
เช็กบ้อกมี attribute ตัวหนึ่งที่จะเป็นตัวบอกว่า ตัวมันเองถูกติ๊กเลือกหรือเปล่า คือ checked ถ้าหากว่าผู้ใช้ติ๊กเครื่องหมายถูก checked จะมีค่าเท่ากับ true ถ้าไม่ถูกเช็กจะมีค่าเท่ากับ false jQuery นั้นมีคำสั่งดึงค่าค่าจาก attribute ของคอนโทรลตัวไหนๆ ก็ตามง่ายๆ ดูตัวอย่าง Live Demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>jquery checkbox checked</title> <script type="text/javascript"> $(document).ready(function(){ $(‘#button’).click(function(){ alert( $(‘#checkbox’) .attr( ‘checked’ ) ); }); […]
READ MORE
