Begining Jquery Part II

Written on Monday, February 23rd, 2009 at 8:56 am by cpcpyc
Filed under งานพัฒนาและบำรุงรักษาฯ.

jQuery ( expression, [context] )

expression ก็คือ selector อย่างที่ได้ทราบจาก step by step (1) นั่นเองครับ

โดย default แล้ว context จะมีค่าเป็น document หรือข้อมูลของเว็บหน้าที่บรรจุโค้ด jQuery ทั้งหน้าเลยครับ

อย่างเช่น

jQuery(”#price”).css(”color”,”red”);
หรือเขียนอีกอย่างคือ
$(”#price”).css(”color”,”red”);

เป็นการกำหนดให้ element ที่มี id เท่ากับ price เปลี่ยนเป็นสีแดง
อย่างเช่น <div id=”price”>1234</div>
จากเดิมแสดงผล 1234
จะเปลี่ยนเป็น 1234

แต่ถ้าเราเปลี่ยน context ไปจะเป็นการนำเอาข้อมูลจาก context นั้นมาใช้
อย่างเช่น

<script type=”text/javascript”>
var data=”<div><p>test</p><p id=\”abc\”>test2</p></div>”;
alert( $(”#abc”,data).text() ); //แสดง test2
</script>

===========================================

jQuery ( html )

เป็นการสร้าง html dom แบบพร้อมใช้งานทันที

$(”<p>Hello</p>”).appendTo(”body”);

เป็นการสร้าง p element ใส่ไปใน body element

ถ้าจากเดิม <body></body>
จะกลายเป็น <body><p>Hello</p></body>
อีกตัวอย่างหนึ่ง
alert( $(”<div id=’hello’ class=’m1′>test</div>”).attr(’class’) );


คำสั่งข้างบนจะแสดง m1

===========================================

jQuery ( element )

เป็น selector แบบหนึ่งคล้ายๆ กับ expression
แต่เป็นการอ้างถึง element ด้วยตัว object ของ element เอง

อย่างเช่น


$(document.form1).css(”border”,”solid blue 3px”);
$(document.getElementById(’id1′)).css(”border”,”solid blue 3px”);

เป็นการกำหนดให้ element form1 (แท็ก form) และ
element ซึ่งมี attribute id มีค่าเท่ากับ id1   มีกรอบเป็นสีน้ำเงินขนาด 3 pixel

===========================================

jQuery ( callback )

เป็นคำสั่งแบบสั้นใช้แทน jQuery( document ).ready();

ดูคำอธิบายโดยละเอียดได้ที่ http://e-working.ocs.ku.ac.th/homepage/information/wordpress/?p=109

$(function(){
alert(’คำสั่งที่ต้องการให้ทำงานเมื่อ document ถูกโหลดครบแล้ว’);
});

Leave a Reply