วันนี้ขอเขียนสั้นๆสักบทความครับ ช่วงนี้งานเข้าเยอะมากครับ (- -”) นอกตีสามตีสี่ มาสามวันติดๆ มาเข้าเรื่องกันเลยก็แล้วกันครับ วันนี้ผมนั่งอ่านบทความที่เกี่ยวกับการทำ  jQuery injection หรือการแทรก jQuery Framework เข้าไปในหน้า website ที่เราต้องการที่เขาไม่ได้งาน jQuery เพื่อการ Debugs หรือเพื่ออะไรก็แล้วแต่จุดประสงค์ของเราครับ แต่เอาไปใช้งานทางที่ดีก็พอครับแหะๆ  อ่านๆไปก็ไปเห็นตรงที่มันมี Link จากทาง Microsoft ที่ให้เราสามารถที่จะ Include jQuery ไปใช้งานได้

วันนี้มาทำความรู้จักกับ Method Deledate กันบ้างครับซึ่ง Method หรือ Function นี้จะมีอยู่ใน jQuery 1.4 นะครับ ตามคำจำกัดความที่ทาง jQuery นั้นเขียนไว้ว่า “Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.” แปลเป็นไทยได้ทำนองนี้ครับ (แปลได้ งูๆปลาๆนะครับ – -’ ) jQuery delegate ก็คือ Function หรือ method ที่ใช้ในการ แทรก Event ต่างๆเข้าไปสามารถแทรกเข้ามาได้มากกว่า 1 event เช่น event Click, hover, mouseover, mouseout เป็นต้น ซึ่งจะแทรกเข้าไปในทุกๆ elements ที่ตรงกับที่เราได้ selector เอาไว้

ผมไปเจอ Video ที่สอนการใช้งานเครื่องมือสำหรับ Debug เบื้องต้นครับ ดูแล้วน่าสนใจมากๆขอบอก ใครพลาดแล้วจะเสียใจครับ มันดียังไงนั้นต้องเข้าไปดูเองครับ แต่ที่แน่ๆนั้น มันมีบางเทคนิค หรือบางอย่างที่ผมเองนั้นยังไม่เคยใช้เลย เขาสอนการใช้ Debug tools ทั้งบน FireFox, Chrome, Safari ครับ ยังไงลองเข้ามาดู Video ด้านในเลยครับ สุดยอดมากๆ

ในบางงานที่เป็นการทำงานที่ไม่ใช่ Static HMTL หรือเป็น dynamic HTML นั้นเราจำเป็นต้องใช้ความสามารถของ JavaScript มาช่วยในการสร้าง HTML แบบ dynamic หรือแบบที่มีการเปลี่ยนแปลงตลอดเวลา ใน jQuery version 1.4 เราจะมาใช้ความสามารถของมันในการสร้าง HTML แบบ dynamic กันครับ ถ้าเรียกเป็นภาษาทางการหน่อยก็ Building HTML in 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!’ });

หลังจากที่ jQuery 1.4 ออกมาได้สักพักก็ถึงเวลาที่จะแนะนำอะไรใหม่ๆใน เวอร์ชั่นนี้กันสักทีครับ ในบทความนี้ผมขอเขียนหัวข้อไว้ก่อนนะครับว่ามีอะไรใหม่ๆบ้าง ในบทความต่อๆไปจะแนะนำ Features ใหม่ๆทั้ง 15 features ของ jQuery 1.4 ให้ได้อ่านกันทีละ features นะครับ ช่วงเดือนสองเดือนที่ผ่านมางานยุ่งกันพอสมควรเลยครับ เลยไม่ค่อยได้ update blog กันเลยต้องขออภัยแฟนๆใว้นะที่นี้ด้วยนะครับ :)