Jquery-Begining

jQuery
เบื้องต้น
by Rewadee Piputsoongnern

jQuery คืออะไร
• jQuery เป็น JavaScript Library ที่เก็บรวบรวม
ฟังก์ชันต่าง ๆ ที่ทาให้สามารพัฒนาเว็บ โดยช่วยให้
สามารถเขียนหรือเรียกใช้ JavaScript และ Ajax ให้
ง่ายขึ้น
• jQuery เปิดตัวครั้งแรกในงานบาร์แคมป์นิวยอร์ก โดย
จอห์น เรซิก (John Resig) เมื่อ 14 มกราคม พ.ศ.
2549

What You Should Already Know
• ก่อนจะเริ่มศึกษา jQuery ควรมีความรู้พื้นฐานในเรื่อง
ต่อไปนี้มาก่อน
• HTML
• CSS
• JavaScript

การเพิ่ม jQuery library ในหน้าเว็บเพจ
• jQuery library จะเก็บอยู่ในไฟล์ .js เหมือนกับไฟล์ของ
โค้ด JavaScript ซึ่งในไฟล์ดังกล่าวจะเก็บเมธอดทั้งหมด
ของ jQuery
• รูปแบบการเพิ่มไลบรารีในหน้าเว็บเพจ
<head>
<script type="text/javascript" src="jquery.js"></script>
< /head>
****แท็ก <script> จะต้องแทรกอยู่ภายในแท็ก <head>

jQuery Syntax
• jQuery ออกแบบมาให้เลือก HTML element และ
กาหนด action ให้กับอิลิเมนต์นั้น
• รูปแบบ syntax
$(selector).action()
โดย dollar sign ใช้เพื่อกาหนด jQuery
selector คือส่วนที่เลือก เช่น element , css
action() คือ เมธอดที่ใช้กาหนดการทางานให้กับ selector

jQuery Syntax (ต่อ)
ตัวอย่าง
• $(this).hide() - ซ่อนอิลิเมนต์ปัจจุบัน
• $("p").hide() – ซ่อนทุก paragraph
• $("p.test").hide() - ซ่อนทุก paragraph ที่มี
class="test"
• $("#test").hide() – ซ่อนอิลิเมนต์ที่มีค่า id="test"

jQuery Selector
• jQuery Selector ช่วยให้เราสามารถเลือก HTML
element (หรือกลุ่มของ element) โดยใช้ ชื่ออิลิเมนต์
(element name) , ชื่อแอททริบิวต์ (attribute name)
หรือ โดยเนื้อหา

jQuery Element Selector
jQuery ใช้ CSS selector ในการเลือก HTML element
• ตัวอย่าง
• $("p") - เลือก แท็ก <p> ทั้งหมด
• $("p.intro") - เลือก ทุกแท็ก <p> ที่มี class="intro"
• $("p#demo") – เลือกทุกแท็ก <p> ที่มี id="demo"

jQuery Attribute Selector
jQuery ใช้นิพจน์ xPathในการเลือก HTML elementและ Attribute
• $("[href]") - เลือกทุกอิลิเมนต์ที่มีแอททริบิวต์ href
• $("[href='#']") – เลือกทุกอิลิเมนต์ที่แอททริบิวต์ href มีค่าเท่ากับ #
• $("[href!='#']") – เลือกทุกอิลิเมนต์ที่มีแอททริบิวต์ href มีค่าไม่
เท่ากับ #
• $("[href$='.jpg']") – เลือกทุกอิลิเมนต์ที่แอททริบิวต์ href ลงท้าย
ด้วย .jpg

jQuery CSS Selector
jQuery CSS selector สามารถใช้เพื่อแก้ไขคุณสมบัติ CSS
ของ HTML element
• $("p").css("background-color","yellow");

ตัวอย่างเพิ่มเติมสาหรับ jQuey Selectors
Syntax คาอธิบาย
$(this) อิลิเมนต์ HTML ปัจจุบัน
$("p") แท็ก <p> ทุกแท็ก
$("p.intro") แท็ก <p> ทุกแท็ก ที่มี class="intro"
$("p#intro") แท็ก <p> ทุกแท็ก ที่มี id="intro"
$("p#intro:first") แท็ก <p> แท็กแรก ที่มี id="intro"
$(".intro") ทุกแท็กที่มี class="intro"
$("#intro") แท็กแรกที่มี id="intro"
$("ul li:first") แท็ก <li> แท็กแรกของแต่ละแท็ก <ul>
$("[href$='.jpg']") ทุกแท็กที่มีแอททริบิวต์ href ที่มีค่าลงท้ายด้วย .jpg
$("div#intro .head") ทุกแท็ก ที่มี class="head" อยู่ภายในแท็ก <div> ที่มี id="intro"

jQuery Event Functions
• การจัดการเหตุการณ์(Event handler ) คือ เมธอดที่ถูก
เรียก เมื่อเกิดเหตุการณ์นั้นขึ้นกับอิลิเมนต์

<html>
<head>
<script type="text/javascript" src="jquery.js“></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
ถ้ามีเหตุการณ์คลิกที่อิลิ
เมนต์ button ให้ซ่อน
แท็ก <p> ทั้งหมด

Document Ready Function
• รูปแบบ
• ใช้เพื่อป้องกันว่าโค้ดของ jQuery จะทางานเสร็จก่อนที่เอกสารจะโหลดเสร็จ
• ตัวอย่าง action ที่อาจจะล้มเหลวหากว่าฟังก์ชันรันก่อนที่เอกสารจะโหลด
เสร็จ ได้แก่
– พยายามซ่อนอิลิเมนต์ที่ไม่เคยมีมาก่อน
– พยายามอ่านขนาดของ image ที่ยังไม่ได้โหลด
// เขียนฟังก์ชัน ของ jQuery บริเวณนี้
});

jQuery Event Functions (ต่อ)
Event Method Description
$(document).ready(function) เหตุการณ์เมื่อ document โหลดเสร็จแล้ว
$(selector).click(function) เหตุการณ์เมื่อมีการคลิกที่อิลิเมนต์ ที่เลือก
$(selector).dblclick(function) เหตุการณ์เมื่อมีการดับเบิ้ลคลิกที่อิลิเมนต์ ที่เลือก
$(selector).focus(function) เหตุการณ์เมื่อมีโฟกัสที่อิลิเมนต์ ที่เลือก
$(selector).mouseover(function) เหตุการณ์เมื่อมีการเลื่อนเมาส์มาบนอิลิเมนต์ ที่เลือก
ตัวอย่างของ Event function

jQuery Effects
• เช่น การซ่อน(hide) , แสดง(show) , สลับ(toggle) , จาง
หาย(fade) และเคลื่อนไหว(animate) เป็นต้น

jQuery Hide and Show
• ในการซ่อนหรือแสดงอิลิเมนต์ใช้เมธอด hide() และ
show() ตามลาดับ
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
โดย speed อาจกาหนดเป็น “slow” , “fast” , “normal” หรือเป็นมิลลิวินาที ก็ได้
callback คือ ฟังก์ชันที่จะให้ทางานหลังจากซ่อน หรือ แสดง อิลิเมนต์แล้ว

<html>
<head>
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
ตัวอย่างการใช้ hide() และ show()

jQuery Toggle
• ใช้สาหรับสลับการแสดงผลของHTML element ให้ซ่อน
หรือแสดง
• แสดงอิลิเมนต์ที่ถูกซ่อนอยู่ หรือ ซ่อนอิลิเมนต์ที่แสดงอยู่
$(selector).toggle(speed,callback)

<html>
<head>
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
ตัวอย่างการใช้ toggle()

jQuery Slide
• ใช้สาหรับเปลี่ยนความสูงของอิลิเมนต์
$(selector).slideDown (speed,callback)
$(selector).slideUp (speed,callback)
$(selector).slideToggle (speed,callback)

<html>
<head>
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
ตัวอย่างการใช้ slideDown()

<body>
<div class="panel">
<p>ทอสดบการใช ้เมธอด slideDown.</p>
<p>jQuery เป็น JavaScript Library ที่เก็บรวบรวมฟังก์ชันต่าง ๆ ที่ทาให ้สามารพัฒนาเว็บ โดย
ช่วยให ้สามารถเขียนหรือเรียกใช ้JavaScript และ Ajax ให ้ง่ายขึ้น
</p>
</div>
<p class="flip">Show Panel</p>
</body>
</html>
ตัวอย่างการใช้ slideDown()

<html>
<head>
$(".panel").slideUp("slow");
});
});
</script>
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
}
div.panel
{
height:120px;
}
</style>
</head>
ตัวอย่างการใช้ slideUp()

<body>
<div class="panel">
</p>
</div>
<p class="flip">Hide Panel</p>
</body>
</html>
ตัวอย่างการใช้ slideUp()

<html>
<head>
$(".panel").slideToggle("slow");
});
});
</script>
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
ตัวอย่างการใช้ slideToogle()

<body>
<div class="panel">
</p>
</div>
<p class="flip">Show / Hide Panel</p>
</body>
</html>
ตัวอย่างการใช้ slideToggle()

jQuery Fade
• ใช้สาหรับเปลี่ยนความทึบของอิลิเมนต์ที่เลือก
$(selector).fadeIn (speed,callback)
$(selector). fadeOut (speed,callback)
$(selector).fadeTo (speed,opacity ,callback)
opacity คือพาริมเตอร์ที่กาหนดค่าทึบแสง

<html>
<head>
$("div").fadeTo("slow",0.25);
});
});
</script>
</head>
<body>
<div style="background:yellow;width:300px;height:300px">
<button>Click to Fade</button>
</div>
</body>
</html>
ตัวอย่างการใช้ fadeTo()

<html>
<head>
$("div").click(function(){
$(this).fadeOut(4000);
});
});
</script>
</head>
<body>
<div style="background:yellow;width:200px">CLICK ME AWAY!</div>
<p>ถ ้าคุณคลิกกล่องข ้างบน มันจะหายไป</p>
</body> </html>
ตัวอย่างการใช้ fadeOut()

jQuery Animate แบบกาหนดเอง
• ใช้สาหรับกาหนดการเคลื่อนไหวให้กับอิลิเมนต์ที่เลือก
$(selector).animate ({params} , [duration] , [easing] ,
[callback])
โดย params ใช้กาหนดคุณสมบัติ CSS ที่จะให้เคลื่อนไหว
duration คือ ความเร็วในการเคลื่อนไหว มีค่าเป็น “slow” , “fast” , “normal”
หรือเป็นมิลลิวินาที

<html>
<head>
$("div").animate({height:300},"slow");
$("div").animate({width:300},"slow");
$("div").animate({height:100},"slow");
$("div").animate({width:100},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<br /><br />
<div
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>
ตัวอย่างการใช้ animate()

jQuery Callback Function
• Callback Function จะทางานเมื่อการเคลื่อนไหวหรือเอฟ
เฟ็กซ์ปัจจุบันทางานเสร็จสมบูรณ์
• รูปแบบ$(selector).animate ({params} , [duration] , [easing] ,
[callback])
โดย params ใช้กาหนดคุณสมบัติ CSS ที่จะให้เคลื่อนไหว
duration คือ ความเร็วในการเคลื่อนไหว มีค่าเป็น “slow” , “fast” , “normal”
หรือเป็นมิลลิวินาที

<html>
<head>
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
ตัวอย่างการใช้ hide() ที่มี callback function

jQuery AJAX
• jQuery AJAX ช่วยให้เราร้องขอ(request) เอกสาร txt
,html , xml หรือ JSON จากเซิร์ฟเวอร์ได้ ทั้งแบบ HTTP
GET และ HTTP POST
Request Description
$(selector).load(url,data,callback) โหลดข้อมูลจากเซิร์ฟเวอร์ ใส่ลงในอิลิเมนต์ที่
เลือก
$.ajax(options) โหลดข้อมูลจากเซิร์ฟเวอร์ ใส่ลงในออบเจ็กต์
XMLHttpRequest

<html>
<head>
$("div").load('test1.php');
});
});
</script>
</head>
<body>
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>
ตัวอย่างการใช้ load()
<?php
header("content-type: application/x-javascript; charset=TIS-620");
echo "ทดสอบ";
?>
test1.php

<html>
<head>
$.ajax({url:"test1.txt", success:function(result){
$("div").html(result);
}});
});
});
</script>
</head>
<body>
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>
ตัวอย่างการใช้ ajax()

ทาเมนูแบบลูกตาปลา
• 1. สร้างไฟล์ fisheyes_menu.html
• 2. เขียนคาสั่ง JavaScript ในส่วนแท็ก <head>
<script type="text/javascript" src="jquery/jquery-1.6.2.js"></script>
$(function(){
$("ul#eyefish li a img").hover(function(){ /* เงื่อนไขเมื่อเอาเมาส์เคลื่อนอยู่เหนือรูปภาพ*/
$(this).animate({
width:120,
height:100
},300);
},function(){ /* เงื่อนไขเมื่อเอาเมาส์เคลื่อนอยู่ออกจากรูปภาพ*/
$(this).animate({ /* กาหนดการเคลื่อนไหวด ้วยการลดขนาดความกว ้างและความสูงของรูป
ใช ้เวลาหน่วง 0.300 วินาที*/
width:85,
height:71
},300);
});
});
</script>

• 3. เขียนคาสั่งกาหนด css
img{/* กาหนดขอบให ้กับ รูปภาพ*/
border:0;
}
ul#eyefish{ /* กาหนดขอบเขตของเมนู */
margin:0;padding:0;
margin-left:100px;
display:block;
height:100px;
}
ul#eyefish li{ /* กาหนด css ให ้กับ list รายการเมนู*/
list-style:none outside;
float:left;
}
ul#eyefish li a img{ /* กาหนดขนาดเริ่มต ้นให ้กับรูปภาพ */
width:85px;
height:71px;
}
</style>

• 4. เขียนคาสั่ง HTML แสดงรูปเมนู
<body>
<ul id="eyefish">
<li><a href="#"><img src="images/calendar.png" /></a></li>
<li><a href="#"><img src="images/email.png" /></a></li>
<li><a href="#"><img src="images/history.png" /></a></li>
<li><a href="#"><img src="images/home.png" /></a></li>
<li><a href="#"><img src="images/music.png" /></a></li>
<li><a href="#"><img src="images/portfolio.png" /></a></li>
<li><a href="#"><img src="images/video.png" /></a></li>
</ul>
</body>
**รูปภาพอยู่ในโฟลเดอร์ images

ส่งข้อมูลผ่านฟอร์มแบบ post แบบ AJAX
• 1. สร้างไฟล์ post.html
• 2. เขียนคาสั่ง HTML สร้างฟอร์มสาหรับส่งข้อมูลในส่วน body
<body>
<form id="form1" name="form1" method="post" action="">
<p>ชื่อ
<input type="text" name="name" id="name" />
<br />
อีเมลล์
<input type="text" name="email" id="email" />
<br />
<input type="button" name="Send" id="Send" value="Send" />
</p>
</form>
</body>

• 3. เขียนคาสั่ง JavaScript เพื่อส่งข้อมูลแบบ AJAX
<script type="text/javascript" src="jquery/jquery-1.6.2.js"></script>
$(function(){
$("input#Send").click(function(){
var url="test.php"; // ไฟล์ที่ต ้องการรับค ้า
var dataSet={ name: $("input#name").val(), email:
$("input#email").val() }; // กาหนดชื่อและค่าที่ต ้องการส่ง
$.post(url,dataSet,function(data){
alert(data);
});
});
});
</script>

• 4. สร้างไฟล์ php ชื่อ test.php เพื่อรับข้อมูลที่ส่งมา
<?php
if(isset($_POST['name']) && $_POST['name']!=""){
echo "ข ้อมูลที่ได ้รับคือ : ".$_POST['name'] ." และ ".$_POST['email'];
}
?>
** ภาษาไทยอาจจะมีปัญหา ไม่แสดงผล

• 5. เพิ่มฟังก์ชันในการแปลงข้อมูลภาษาไทย สาหรับ php ในtest.php
<?php
function js_thai_encode($data)
{ // ฟังก์ชันเข ้ารหัสภาษาไทย
if (is_array($data))
{
foreach($data as $a => $b)
{
if (is_array($data[$a]))
{$data[$a] = js_thai_encode($data[$a]); }
else
{$data[$a] = iconv("tis-620","utf-8",$b); }
}
}
else
{ $data =iconv("tis-620","utf-8",$data); }
return $data;
}?>

• 6. แก้ไขคาสั่งในการรับและแสดงข้อความ
<?php
if(isset($_POST['name']) && $_POST['name']!=""){
$data = "ข ้อมูลที่ได ้รับคือ : ".$_POST['name'] ." และ ".$_POST['email'];
//เรียกใช ้งานฟังก์ชัน js_thai_encode
echo js_thai_encode($data) ;
}
?>

Jquery-Begining

More Related Content

What's hot (20)

Similar to Jquery-Begining (8)

More from Attaporn Ninsuwan (20)

Jquery-Begining