วันนี้จะมาแนะนำการใช้งาน Function .prev() กันครับซึ่งอยู่ในหมวดหรือกลุ่มคำสั่ง Tree Traversal ครับ ถ้าให้อธิบายง่ายๆก็คือการ select ค่าของ Element อะไรก็ตามที่อยู่ถนัดไป หรือ หลัง Element ที่เราได้ select ไว้แล้ว ประโยชน์ส่วนใหญ่ก็จะเอาไปใช้กับ Tag พวก li ครับ

บทความนี้เขียนตอนประมาณตี 2 กว่าๆครับ (นั่งดูบอลไปด้วยทำงานไปด้วย) ไปเจอปัญหาหนึ่งที่ง่ายๆแต่ลืมวิธีใช้งาน ก็เลยมาเขียนลงบทความไว้ดีกว่าครับ จะได้เป็นประโยชน์สำหรับเพื่อนๆ ที่พึ่งเริ่มต้นกัน สำหรับ เทพๆ คงผ่านบทความนี้ไปได้เลยครับ

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

New feature ที่ 3 ใน jQuery 1.4 วิธีการกำหนด Event handlers ให้กับ Element ที่เราต้องการแบบรวดเดียวจบเลยครับ หรือแบบ Multiple event handlers โดยไม่ต้องมาเสียเวลามาเขียนให้มัน binding ทีละตัวครับ มาดู code กันเลยดีกว่า 1234567891011jQuery(’#foo).bind({     click: function() {         // do something     },     mouseover: function() {         // do something     },     mouseout: function() {         // do something     } }); จาก code ด้านบนเราจะเห็นได้ว่าเราสามารถที่จะ binding event [...]

มาถึง new feature ที่ 2 ของ jQuery 1.4 กันครับ อันนี้เป็นอีกความสามารถใหม่ใน version 1.4 นี้ครับ มาพูดถึงว่ามันทำงานกันเลยดีกว่าครับ prevUntil, nextUntil, parentsUntil นี้การทำงานของมันจะเป็นลักษณะการค้นหา Elements ที่เราต้องการแต่เราสามารถระบุตำแหน่งที่ต้องการและทำแหน่งสิ้นสุดได้ครับ ดูได้จากตัวอย่างด้านล่างนี้ครับ 12345678<ul>     <li>Apple</li>     <li>Banana</li>     <li>Grape</li>     <li>Strawberry</li>     <li>Pear</li>     <li>Peach</li> </ul> จาก code ตัวอย่างด้านบนนี้ถ้าเราต้องการจะ เลือกเอาเฉพาะ element li ที่มีข้อความ Banana, Grape, Strawberry เพื่อที่จะกำหนดค่าให้เฉพาะที่เราเลือกนั้น เราสามารถที่จะใช้ความสามารถใหม่ของ jQuery 1.4 นี้ได้ดังตัวอย่าง code ด้านล่างนี้ครับ 123jQuery(’ul li:contains(Apple)’) .nextUntil(’:contains(Pear)’); // Selects Banana, Grape, Strawberry จาก code นี้เป็นการ select ค่าที่อยู่ระหว่าง Apple กับ Pear ดังนั้นค่าที่อยู่ระหว่างนี้เราสามารถที่จะกำหนดค่าให้กับมันได้ครับ [...]

เอาละวันนี้เริ่มต้นด้วย Features แรกกันเลยละกันครับ จากทั้งหมด 15 features ใน jQuery 1.4 แต่ก่อนนั้นเวลาที่เราจะเปลี่ยนแปลงค่า Attributes ด้วย jQuery นั้นเราจะใช้ function attr ในการเปลี่ยนแปลงค่าหรือเพิ่มเข้าไปใหม่ เช่น 1  $("input").attr( "value", "Hello World!!!" ); หรือถ้าเราจะเปลี่ยน Link ใน Tag A แต่ก่อนเราก็เขียนแบบนี้ครับ 1  $("a").attr("href","http://www.jquery.com"); แต่ในความสามารถใหม่ของเวอร์ชั่น 1.4 นี้เราสามารถที่จะเพิ่ม Attributes เข้าไปได้ทีเดียว รวมไปถึงสามารถกำหนด Event ไปด้วยเลยก็ได้ ลองดูจากตัวอย่าง code ด้านล่างนี้จะเข้าใจง่ายกว่าครับ ตัวอย่างนี้เป็นการกำหนดค่าให้กับ Tag a 1234567jQuery(’<a />’, {     id: ‘foo’,     href: ‘http://google.com’,     title: ‘Become a Googler’,     rel: ‘external’,     text: ‘Go to Google!’ });

หลายคนถามหาวิธีการ Upload รูปแล้วสามารถเห็นรูป Preview ก่อนได้ วันนี้เรามีวิธีการทำมาแนะนำ ดูได้ตามลิงค์ด้านล่างเลยครับ Website: http://www.zurb.com/playground/ajax_upload Demo : http://www.zurb.com/playground/ajax_upload

มาดูวิธีการแก้ปัญหาเรื่องของ Cross domain กันครับคิดว่าหลายคนคงเคยเจอ URL : http://net.tutsplus.com

ถ้าจะกล่าวถึง jQuery + Ajax แล้วละก็ที่ขาดไม่ได้เลยก็คือ JSON เพราะสามารถนำมาใช้งานได้สะดวกและง่าย เพราะข้อมูลที่เป็นรูปแบบ JSON นั้น Ajax สามารถที่จะเรียกข้อมูลนั้นๆออกมาเป็น Object ได้ JSON คืออะไร json นั้นย่อมาจากคำว่า ” JavaScript Object Notation ” จริงๆแล้วข้อมูลที่อยู่ในรูปแบบของ JSON นั้นก็คือ Text ธรรมดาๆครับ เพียงแต่ถูกจัดเรียงให้อยู่ในรูปแบบของ Object Array ถ้าอธิบายวิชาการไปเรื่อยๆนี่สงสัยจะงงกันแน่ๆ มาดูตัวอย่าง รูปแบบของ JSON เลยละกัน 12345678910111213141516{     "firstName": "John",     "lastName": "Smith",     "address": {         "streetAddress": "21 2nd Street",         "city": "New York",         "state": "NY",         "postalCode": [...]

เมื่อหลายวันก่อนเปิดหน้าเว็บ Google แล้วไปเจอลูก Apple ตกลงมา อ๋อวันเกิดของ นิวตัน นี่เอง แต่จากวันนั้นมีหลายคนถามครับว่า รูป Apple ที่ตกลงมานั้น เขาทำ Animation อย่างไรให้ภาพมันตกลงมาแล้วก็กระเด้งๆๆ วันนี้เปิดๆหาข้อมูลของ jQuery ก็ไปเจอเว็บหนึ่งครับ ที่ทำพวก Effect สำหรับทำ Animation ไว้เยอะพอดูเลยละ ลองเข้าไปทดสอบกันดูครับ มี Effect ให้เลือกใช้เยอะเลย ตัวอย่างการเรียกใช้งาน 1   $("#element").effect([speed, callback]); Demo : Click here Web site : http://net.tutsplus.com