ใช้งาน AJAX
การตั้งค่าใช้งานทั่วไปที่มักใช้บ่อยสำหรับการใช้งาน $.ajax()
data บอกว่าข้อมูลที่ส่งเป็นแบบไหนเช่น query string (key1=val1&key2=val2) หรือ JSON ({"key1":"val1","key2":"val2"})
dataFilter(data,type) กรองข้อมูลที่ได้รับ
dataType บอกชนิดข้อมูลที่ต้องการจากการร้องขอเช่น xml html script json jsonp text
error(XMLHttpRequest, textStatus, errorThrow) เรียกเมื่อเกิดข้อผิพลาด
success(data, textStatus, XMLHttpRequest) เรียกเมื่อทำสำเร็จ
type ชนิดการร้องขอ ปกติคือ GET
url ตำแหน่งที่ต้องการส่ง
ใช้งานพื้นฐาน
$.ajax({
"type":"POST",
"url":"jq.php",
"data":"var1=var1&var2=var2",
"success":function(data){
$("#p1")
.css("background","gold")
.html(data);
}
});
วันจันทร์ที่ 27 กุมภาพันธ์ พ.ศ. 2555
พื้นฐานการใช้งาน jQuery ตอนที่ 4 effect,event,methode
ทำให้เคลื่อนไหว และใส่เอฟเฟค
แสดงและซ่อน ส่วนที่เลือก
$("p").show();
$("p").hide();
หน่วงเวลา และ callback
$("p").hide(2000,function(){
$(this).show(2000)
})
ทำการเลือนภาพ
$("p").fadeOut(2000,function(){
console.log("Fade Out")
}).fadeIn(2000,function(){
console.log("Fade In")
});
$("p").fadeTo(2000,0.5,function(){
console.log("Fade To 50% ")
});
แสดงและซ่อน ส่วนที่เลือก
$("p").show();
$("p").hide();
หน่วงเวลา และ callback
$("p").hide(2000,function(){
$(this).show(2000)
})
ทำการเลือนภาพ
$("p").fadeOut(2000,function(){
console.log("Fade Out")
}).fadeIn(2000,function(){
console.log("Fade In")
});
$("p").fadeTo(2000,0.5,function(){
console.log("Fade To 50% ")
});
พื้นฐานการใช้งาน jQuery ตอนที่ 3 สร้าง DOM
สร้างส่วนของ DOM ขึ้นมาใหม่
แบบที่ 1 สร้างง่ายๆโดยสร้าง tag ส่วนที่ต้องการ
$("<p>");
$('<p class="blue">New Paragraph</p>')
แบบที่ 2 สร้างโดยผ่านตัวแปร JSON
$("<p>",{
"class":"blue",
"text":"New Paragraph"
});
ใส่ส่วนที่สร้างขึ้นลงใน DOM ส่วนที่เลือก
ใส่ตรง ๆ ให้ส่วนที่เลือก
$('#p4').append('New text');
$('#p4').prepend('<span class="blue">New span</span>');
$('<span class="blue">New span</span>').prependTo("#p1");
$('<span class="blue">New span</span>').appendTo("#p1");
นำส่วนที่สร้างไว้แล้วมาใส่ให้ส่วนที่เลือก
var el1 = $('<p class="blue">New Paragraph</p>');
var el2 = $("<p>",{"class":"blue","text":"New Paragraph"});
$("#next").append(el1);
$("#next").append(el2);
el1.prependTo("#child");
el2.appendTo("#child");
แบบที่ 1 สร้างง่ายๆโดยสร้าง tag ส่วนที่ต้องการ
$("<p>");
$('<p class="blue">New Paragraph</p>')
แบบที่ 2 สร้างโดยผ่านตัวแปร JSON
$("<p>",{
"class":"blue",
"text":"New Paragraph"
});
ใส่ส่วนที่สร้างขึ้นลงใน DOM ส่วนที่เลือก
ใส่ตรง ๆ ให้ส่วนที่เลือก
$('#p4').append('New text');
$('#p4').prepend('<span class="blue">New span</span>');
$('<span class="blue">New span</span>').prependTo("#p1");
$('<span class="blue">New span</span>').appendTo("#p1");
นำส่วนที่สร้างไว้แล้วมาใส่ให้ส่วนที่เลือก
var el1 = $('<p class="blue">New Paragraph</p>');
var el2 = $("<p>",{"class":"blue","text":"New Paragraph"});
$("#next").append(el1);
$("#next").append(el2);
el1.prependTo("#child");
el2.appendTo("#child");
พื้นฐานการใช้งาน jQuery ตอนที่ 2 คำสั่งพื้นฐาน
การใช้งานพื้นฐานคำสั่ง
เมื่อเลือกส่วนที่ต้องการแล้ว การทำงานจะทำตามคำสั่งจะเป็นลูกโซ่ ถัดต่อไปเรื่อยๆ เช่น
$("p").addClass("box").text("Hello World").appendTo("body");
การใช้งาน jQuery นั้นสามารถทำได้คือ
• เลือกส่วนต่างๆ (DOM) ในหน้า HTML
• ท่องเข้าไปใน DOM และแก้ไข
• จัดการ event เช่น click , mouse-over
• เข้าถึงคุณสมบัติ(attribute,css styling) ในส่วนต่างๆ และแก้ไขเปลี่ยนแปลง
• เพิ่มความหน้าสนใจ การเคลื่อนไหวและเอฟเฟค
• ควบคุม AJAX เบื้องต้น
ท่องไปใน DOM ผ่านคำสั่ง
เลือกตามลำดับ
$("p").eq(1);
เมื่อเลือกส่วนที่ต้องการแล้ว การทำงานจะทำตามคำสั่งจะเป็นลูกโซ่ ถัดต่อไปเรื่อยๆ เช่น
$("p").addClass("box").text("Hello World").appendTo("body");
การใช้งาน jQuery นั้นสามารถทำได้คือ
• เลือกส่วนต่างๆ (DOM) ในหน้า HTML
• ท่องเข้าไปใน DOM และแก้ไข
• จัดการ event เช่น click , mouse-over
• เข้าถึงคุณสมบัติ(attribute,css styling) ในส่วนต่างๆ และแก้ไขเปลี่ยนแปลง
• เพิ่มความหน้าสนใจ การเคลื่อนไหวและเอฟเฟค
• ควบคุม AJAX เบื้องต้น
ท่องไปใน DOM ผ่านคำสั่ง
เลือกตามลำดับ
$("p").eq(1);
พื้นฐานการใช้งาน jQuery ตอนที่ 1 การเลือก Selector
การเรียกใช้ jquery เริ่มจากเรียกผ่านการใช้เครื่องหมาย $ เพื่อเลือก ส่วนต่างๆบนหน้าเอกสาร HTML หรือคุณสมบัติต่างๆ แล้วจัดการผ่านทางแมธอดที่มีมาให้ใช้ สำหรับการวิธีการศึกษาเบื้องต้น สามารถทำได้โดยเขียนไฟล์ HTML ที่เรียกใช้งานไลบรารี jQuery และพิมพ์คำสั่งทดสอบผ่านทาง console ของเบราเซอร์ ถ้า Firefox ใช้ firebug หรือ Opera ผ่าน develop tool ที่เรียกว่า Opera Dragonfly
ในบทความนี้ผมใช้คำว่า “ส่วนที่เลือก” ซึ่งมาจากคำว่า Selector แทนที่จะให้คำว่าเลือกแท็ก(tag) เนื่องจากการให้ jQuery นั้นสามารถเลือกส่วนที่ต้องการทำงานด้วย ได้หลายแบบทั้ง HTML tag, css, properties และอื่นๆอีก
การเรียกใช้ jquery
วีธีที่ 1 เรียกใช้งาน jquery ในบรรทัดของโค้ด (inline code)
<!doctype html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery-1.5.1.min.js"></script>
</head>
<body>
<p onclick="$(this).hide();">Hello</p>
</body>
</html>
วีธีที่ 2 เรียกใช้งาน jquery จากไฟล์ภายนอก
<!doctype html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
</head>
<body>
<p>Hello World</p>
</body>
<script src="jquery-1.5.1.min.js"></script>
<script src="myCodeHere.js"></script>
</html>
การเลือกส่วนต่างๆ (DOM) บนหน้าเอกสาร HTML
ในบทความนี้ผมใช้คำว่า “ส่วนที่เลือก” ซึ่งมาจากคำว่า Selector แทนที่จะให้คำว่าเลือกแท็ก(tag) เนื่องจากการให้ jQuery นั้นสามารถเลือกส่วนที่ต้องการทำงานด้วย ได้หลายแบบทั้ง HTML tag, css, properties และอื่นๆอีก
การเรียกใช้ jquery
วีธีที่ 1 เรียกใช้งาน jquery ในบรรทัดของโค้ด (inline code)
<!doctype html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery-1.5.1.min.js"></script>
</head>
<body>
<p onclick="$(this).hide();">Hello</p>
</body>
</html>
วีธีที่ 2 เรียกใช้งาน jquery จากไฟล์ภายนอก
<!doctype html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
</head>
<body>
<p>Hello World</p>
</body>
<script src="jquery-1.5.1.min.js"></script>
<script src="myCodeHere.js"></script>
</html>
การเลือกส่วนต่างๆ (DOM) บนหน้าเอกสาร HTML
สมัครสมาชิก:
บทความ (Atom)