Browsing articles in "Selectors"
Jul
8
2010

jQuery Selectors type

jQuery Selector

ความสามารถที่โดดเด่นของ jQuery เลยก็คงจะหนีไม่พ้นเรื่องของการใช้ Selector ครับ เพื่อนๆที่พึ่งจะลองจับ jQuery อาจจะยังไม่รู้จักว่า Selector มันคืออะไร จริงๆแล้วถ้าเคยเขียน JavaScript แบบเพียวๆมาก่อนถ้ายกตัวอย่างให้ดูนี่ คงต้องอ๋อกันทุกคนครับ ( document.getElementById(“id”) ) คุ้นๆใหมครับกับรูปแบบนี้ Selector ของ jQuery ก็ทำงานเหมือนกับ ที่ผมยกตัวอย่างขึ้นมาครับ แต่มันสั้นกว่า และง่ายกว่ามาก ความสามารถนี่เอาไปปรับใช้กับงานได้อย่างรวดเร็ว ใครสนใจหัวข้อนี้คลิกเข้ามาอ่านได้เลยครับ

Aug
15
2009

การใช้งาน Selector Filter แบบ last

การใช้งานของ Filter Last นั้นก็เหมือนๆกับ first เลยครับต่างกันตรงที่มันเอามาใช้ในการ select element สุดท้าย ครับ ตัวอย่างเช่นเรามี Table ที่มี TR จำนวน 3 Row ด้วยกัน เราจะทำการกำหนดสี background ให้กับ TR Row สุดท้ายในที่นี้ก็คือ Row 3 ให้มีสีเหลือง สามารถทำได้ดังนี้ครับ 123$(document).ready(function(){ $("tr:last").css({backgroundColor: ‘yellow’, fontWeight: ‘bolder’}); });

Aug
15
2009

การใช้งาน Selector Filters แบบ first

สวัสดีครับ วันนี้เรามาทำความรู้จักกับการใช้งาน Selector ของ jQuery กันครับ jQuery นั้นมีทั้งเครื่องมี Function, Plugin ให้ใช้มากเลยครับ อย่างในบทความนี้ก็เป็นการใช้งาน Selector ที่ jQuery มีมาให้ครับ Selector คืออะไร ผมจะยกตัวอย่างง่ายๆของการใช้งาน Selector ให้ดูกัน อย่างเช่น ถ้าเรามี Table อยู่หนึ่ง Table โครงสร้างเป็นดังนี้ 12345  <table>     <tr><td>Row 1</td></tr>     <tr><td>Row 2</td></tr>     <tr><td>Row 3</td></tr>   </table> ใน code ด้านบนนี้จะเห็นว่าเรามี TR ทั้งหมด 3 Row ด้วยกัน เราสามารถจะเข้าไปใส่ style sheet ให้กับ TR ได้โดยตรง ถ้าเราไม่ใช้ jQuery Selector จะได้ code แบบนี้นะครับ 123… <tr style="color:blue; font-weight:bold;"><td>Row 1</td></tr> … ผลที่แสดงออกมาก็คือ ตัวหนังสือที่อยู่ใน Row 1 นั้นจะเป็นตัวหนาและมีสีน้ำเงิน Row [...]

Jul
31
2009

jQuery select list value

มาดูวิธีการเรียกค่าออกมาจาก Select list box กันบ้างครับ <select id=”mySelect”> <option value=”1″>One</option> <option value=”2″>Two</option> <option value=”3″>Three</option> </select> ถ้าต้องการจะดึงข้อมูลที่เราทำการเลือกจาก list box สามารถใช้ code นี้ในการ ดึงค่าออกมาได้ครับ $(“mySelect”).val(); แล้วถ้าต้องการจะดึงเอา Text ที่อยู่ใน list box ที่เราเลือกละ ทำได้ดังนี้ครับ $(“mySelect :selected”).text(); ลองไปทดสอบกันดูครับ ผมว่ามันง่ายมากเลยสำหรับการเรียกค่าออกจาก list box นี้