บทเรียน Jquery

บทเรียน Jquery สอน Jquery ตั้งแต่พื้นฐาน จนถึงการนำ jquery ไปใช้กับงานจริง

ให้เรตสมาชิก

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
บทที่ 1 jQuery คืออะไร
     jQuery คือ JavaScript Library ซึ่งถูกออกแบบมาเพื่อให้การเขียน JavaScript นั้นง่ายขึ้น เนื่องจากการใช้ JavaScript เพื่อประยุกต์กับงานเว็บ (Client-side JavaScript) นั้นสิที่ยุ่งยาก อาทิเช่น ความไม่เข้ากันของเว็บเบราว์เซอร์แต่ละค่าย, DOM ,API เป็นต้น jQuery จึงถือกำเนิดมาโดยเตรียมฟังก์ชันและออบเจกต์ต่างๆที่จำเป็นไว้ให้ในรูปของ Library ดังนั้นโค้ดที่เราเคยต้องเขียนด้วย JavaScript หลายๆบรรทัดก็อาจเขียนได้สั้นลงเหลือเพียงแค่บรรทัดเดียวเท่านั้น
   jQuery ประกอบด้วยฟีเจอร์ต่างๆ ดังนี้
    -HTML/DOM manipulation
    -CSS manipulation
    -HTML event methods
    -Effects and animations
    -AJAX
    -Utilities
    ก่อนที่จะเริ่มต้นเรียน jQuery นั้นผู้เรียนจำเป็นต้องมีความรู้เรื่อง ,HTML5 , CSS3 , JavaScript เพื่อให้สามารถทำเข้าใจเกี่ยวกับ jQuery ได้ง่ายขึ้น โดยเราต้องดาวน์โหลดและติดตั้งมันเสียก่อน โดยเราสามารถดาวน์โหลดได้ที่ http://www.jquery.com
    ในเว็บไซต์จะมีให้ดาวน์โหลดสองรูปแบบย่อยด้วยกันคือ แบบ Production และแบบ Development ซึ่งแบบ Development เหมาะสำหรับการเอาซอร์สโค้ดมาดัดแปลงแก้ไขหรือศึกษาทำความเข้าใจ ในขณะที่แบบ Production เหมาะกับการนำไปใช้งานจริง เพราะได้ตัดช่องว่างและปรับเปลี่ยนตัวแปรภายในให้สั้นลง เพื่อลดขนาดของไฟล์ลง ก็ให้เลือกเอาตามความต้องการใช้งาน (หากคลิกดาวน์โหลดแล้วมันเปิดขึ้นมาเป็นข้อความก็อย่าได้ตกใจไป เพราะมันคือไฟล์ .js เหมือน JavaScript ทั่วไป และเบราว์เซอร์ของคุณอาจมองว่ามันเป็น Text ชนิดหนึ่ง ก็ให้เซฟเว็บเพจนั้นซะ)
   เมื่อเราได้ไฟล์ jquery-x.y.z.js หรือ jquery-x.y.z.min.js แล้ว ลำดับถัดไปก็คือการอ้างอิงใช้มันในไฟล์ HTML ซึ่งก็จะเหมือนกับการอ้างอิงใช้งานไฟล์ JavaScript ทั่วไป  ซึ่งวิธีการนำมาใช้งานจะกล่าวในบทต่อไป


ข้อมูลอ้างอิง
http://www.kontentblue.com

ให้เรตสมาชิก

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
บทที่ 2 jQuery Syntax
    หลังจากดาวน์โหลดเสร็จแล้วก็เอาไฟล์ jquery.js ไปวางไว้ที่ Root Document หรือจะเอาไปรวมไว้กับไลบรารี่อื่นๆ ก็ได้ ขอให้เรารู้ก็แล้วกันว่ามันอยู่ที่ไหนจะได้อ้างไปหาถูกที่ (ตามตัวอย่างใช้ jQuery เวอร์ชั่น 1.9.1)
 โดยการใส่โค๊ดให้ยึดตามชื่อของไฟล์ jQuery ที่เราโหลดมา เช่น
-หากโหลดมาชื่อไฟล์เป็น jquery-1.9.1 ก็ให้ใส่โค๊ดเป็น <script src="/jquery-1.9.1.js"> 
-หรือ หากโหลดมาชื่อไฟล์เป็น jquery-1.9.1.min ก็ให้ใส่โค๊ดเป็น <script src="/jquery-1.9.1.min.js" > 
 
โดยมีรูปแบบ ดังนี้
<script src="/jquery-1.9.1.js">
</script>
   โดยเขียนโค้ดข้างต้นไว้ในแท็ก <head> ตัวอย่างเช่น
<html>
<head>
<script src="/jquery-1.9.1.js"></script>
<script>
// เราจะเขียนโค้ดคำสั่ง javascript ต่างๆของเราในส่วนนี้นะจ๊ะ
</script>
</head>
<body>
  <!-- ส่วนตรงนี้เราก็จะใช้เขียนโค้ด html  -->
</body>
</html>  

     สำหรับบางคนที่ไม่สะดวกจะดาวน์โหลดไฟล์ jQuery อาจใช้วิธีอ้างอิงจากเซิร์ฟเวอร์อื่นๆได้ดังนี้
1.อ้างอิงจากเซิร์ฟเวอร์ของ google จะใช้ syntax ดังนี้
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

</head>
2.อ้างอิงจากเซิร์ฟเวอร์ของ Microsoft จะใช้ syntax ดังนี้
<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js">
</script>

</head>

     jQuery syntax
jQuery ออกแบบมาให้เลือก HTML element และกำหนด action ให้กับอิลิเมนต์นั้น มี syntax ดังนี้
$(selector).action()             selector คือส่วนที่เลือก เช่น element , css
       action() คือ เมธอดที่ใช้กำหนดการทำงานให้กับ selector
 ตัวอย่าง เช่น
- $(this).hide()  เป็นการซ่อนองค์ประกอบปัจจุบัน
- $("p").hide()  เป็นการซ่อนองค์ประกอบ  "p" ทั้งหมด
- $(".test").hide()  เป็นการซ่อนองค์ประกอบที่มี class= "test"
-  $(#test").hide()  เป็นการซ่อนองค์ประกอบที่มี  id="test"

    ลักษณะการใช้งาน  jQuery
   การใช้งาน jQuery Library จะใช้งานผ่านฟังก์ชัน jQuery() เป็นหลัก ยกตัวอย่างเช่น หากต้องการเข้าถึงแท็ก <title> เราสามารถเขียนได้ดังนี้ jQuery("title")
และเนื่องจากมันเป็นฟังก์ชันหลักที่เราต้องเรียกใช้อยู่ตลอด ผู้คิดค้นจึงเตรียมฟังก์ชัน $() ไว้เป็น Shortcut ให้เราเรียกใช้ได้โดยสะดวก ดังนั้นตัวอย่างข้างต้นจึงเขียนได้ใหม่ดังนี้
$("title")   จากตัวอย่างที่ยกมาข้างต้นนี้เมื่อเราเข้าถึง Elements ต่างๆได้แล้ว เราก็สามารถเรียกใช้ฟังก์ชันต่างๆเพื่อดัดแปลงแก้ไข Elements นั้นได้ ไม่ว่าจะเป็น Text, Attribute, หรือ CSS เป็นต้น ตัวอย่างเช่น
$("title").text("Hello jQuery");   ตัวอย่างข้างต้น ?title? คือ Selector หรือตัวกำหนดว่าจะเข้าถึง Elements ใด โดย Syntax จะใช้รูปแบบเดียวกับ Selector ใน CSS ส่วนเมธอด text() คือเมธอดสำหรับแก้ไขข้อความใน Element นั้นๆ (เมื่อเรา Select อะไรได้แล้ว ทุกอย่างคือออบเจกต์ ดังนั้นฟังก์ชันภายในออบเจกต์ก็คือเมธอดนั่นเอง)  

   นอกจากนี้ jQuery ยังนำเสนอรูปแบบการเขียนที่เรียกว่า Method Chainning กล่าวคือเมื่อเราได้ออบเจกต์ (Elements) ที่ต้องการแล้ว เราสามารถเรียกใช้หลายๆเมธอดเป็นลำดับขั้นได้ (และเขียนมันภายในบรรทัดเดียว) ตัวอย่างเช่น
$("h1").text("One more?").css("font-style","italic");   ในตัวอย่างข้างต้นนี้เราเข้าถึงแท็ก <h1> (สมมุติว่ามีเพียงแท็กเดียวในเอกสาร HTML) และเปลี่ยนแปลงข้อความในแท็กให้เป็น "One more?" ด้วยเมธอด text() จากนั้นเราจึงเรียกเมธอด css() เพื่อกำหนดสไตล์ให้กับแท็ก <h1> อีกที นี่แหละเทคนิคที่เรียกว่า Method Chainning และจะ Chain มากกว่าสองครั้งก็ได้


ข้อมูลอ้างอิง
http://www.kontentblue.com
http://sci.udru.ac.th

ให้เรตสมาชิก

ดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
บทที่ 3 jQuery Selectors ตอนที่1
(มาดูกันว่าเจ้ามหากาพย์ selector นั้นมีอะไรซ่อนอยู่บ้าง)
jQuery syntax
$(selector).action()    selector คือส่วนที่เลือก เช่น element , css
action() คือ เมธอดที่ใช้กำหนดการทำงานให้กับ selector  
   จากลักษณะ syntax ของ jQurey ข้างต้นจะเห็น selector คือตัวที่เราจะใช้สำหรับอ้างอิงไปถึงออบเจ็กต่างๆ ที่อยู่บนหน้าเพจ
ซึ่งการที่เราจะสั่งให้ jQuery ทำงานบางอย่างตามที่เราตั้งใจนั้น เราจำเป็นต้องเรียกใช้งาน object ให้ได้อย่างถูกต้องก่อน เพราะว่าหากเรายังไม่สามารถสั่งให้ jQuery ระบุได้ว่าจะกระทำกับ object ใด ก็ไม่สามารถทำอะไรต่อได้อีกแล้ว ก็ถือว่าได้ Selector คือเรื่องพื้นฐานที่เราต้องรู้จักแล้วใช้ให้ถูกต้องก็จะสามารถสร้างสรรค์งาน ได้ดั่งใจ  
   selector ของ jQuery จะเริ่มต้นด้วยเครื่องหมายดอลลาร์แล้วตามด้วยวงเล็บ
$(selector)
โดยมี selector แบบพื้นฐานดังนี้
1  $("#id")  เป็นการเลือก object ที่มี id ตามที่กำหนด
ตัวอย่างเช่น
<html>
<head>
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
    $("#test").fadeOut(4000);
});
</script>
</head>
<body>
<h2 id="test">welcome to www.mindphp.com</h2>
</body>
</html>
คลิกดูตัวอย่างการ select แบบ IdSelector
 *จากตัวอย่าง select แบบ $("#id") จะเห็นว่าเมื่อเราใช้คำสั่ง $("#test").fadeOut(4000); ซึ่งหมายถึงเลือก object ที่มี id ทั้งหมด โดยให้มีเอฟเฟค fadeOut(4000) (ค่อยๆจางหายไปใน 4 วินาที)  ดังนั้นข้อความ welcome to www.mindphp.com ซึ่งอยู่ใน object ที่มี id จึงค่อยๆจางหายไป ตามตัวอย่าง

2   $(".class")  การเลือกด้วย classname เช่น หากในหน้าเว็บของเรามี tag ที่เรียกใช้งาน class stylesheet อยู่ แทกตัวนี้จะเป็นตัวที่ถูก selector  ตัวอย่างเช่น
<html>
<head>
<script src="/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
    $(".test").fadeOut(4000);
});
</script>
</head>
<body>
<h2 class="test">welcome to www.mindphp.com</h2>
</body>
</html>
คลิกดูตัวอย่าง select โดยชื่อ classname
  *จากตัวอย่าง select โดยชื่อ classname จะเห็นว่าเมื่อเราใช้คำสั่ง $(".test").fadeOut(4000); ซึ่งหมายถึงเลือก h2 class ทั้งหมด โดยให้มีเอฟเฟค fadeOut(4000) (ค่อยๆจางหายไปใน 4 วินาที)  ดังนั้นข้อความ welcome to www.mindphp.com ซึ่งอยู่ใน h2 class จึงค่อยๆจางหายไป ตามตัวอย่าง

3   $("*")  เป็นการเลือก object ทั้งหมด (all selector) ตัวอย่างเช่น
<html>
<head>
<script src="/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
    $("*").fadeOut(4000);
});
</script>
</head>
<body>
<h2>welcome to www.mindphp.com</h2>

</body>
</html>
คลิกดูตัวอย่างแบบ all selector
  *จากตัวอย่าง select โดยชื่อ all selector จะเห็นว่าเมื่อเราใช้คำสั่ง $("*").fadeOut(4000); ซึ่งหมายถึงเลือก object ทั้งหมด โดยให้มีเอฟเฟค fadeOut(4000) (ค่อยๆจางหายไปใน 4 วินาที)  ดังนั้นข้อความ welcome to www.mindphp.com ซึ่งอยู่ในแท็ก h2 ซึ่งถือเป็น object หนึ่งภายในเอกสาร html นี้จึงค่อยๆจางหายไป ตามตัวอย่าง

4   select โดยชื่อ html tag  $("a"), $("p")$, ("div")  ตัวอย่างเช่น
<html>
<head>
<script src="/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){  
    $("h2").fadeOut(4000);
  });
</script>
</head>
<body>
<h2>welcome to www.mindphp.com</h2>
</body>
</html>
คลิกดูตัวอย่าง select โดยชื่อ html tag
  *จากตัวอย่าง select โดยชื่อ html tag จะเห็นว่าเมื่อเราใช้คำสั่ง $("h2").fadeOut(4000); ซึ่งหมายถึงเลือกแท็ก h2 ทั้งหมด โดยให้มีเอฟเฟค fadeOut(4000) (ค่อยๆจางหายไปใน 4 วินาที)  ดังนั้นข้อความ welcome to www.mindphp.com ซึ่งอยู่ในแท็ก h2 จึงค่อยๆจางหายไป ตามตัวอย่าง

5.  $("selector1, selector2,.... selectorN")  เป็นการเลือก object แบบหลายๆอัน
(multi selector)
 เช่น ถ้าเราต้องการเลือกหลาย tag โดยใช้คำสั่งเดียวกัน สามารถทำได้ดังนี้
<html>
<head>
<script src="/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$('h2, p, b').fadeOut(4000);
});
</script>
</head>
<body>
<h2 > Nadech </h2>
<p > boyPakorn</p>
<b > Mario</b>

</body>
</html>
คลิกดูตัวอย่างแบบ multi selector
*จากตัวอย่าง multi selector จะเห็นว่าเมื่อเราใช้คำสั่ง $('h2, p, b').fadeOut(4000); สามารถทำให้เราสามารถเลือกแท็ก h2 , p และแท็ก b ได้พร้อมกันทั้งหมด โดยให้มีเอฟเฟค fadeOut(4000) (ค่อยๆจางหายไปใน 4 วินาที)  ดังนั้นข้อความ แท็ก h2 , p และแท็ก b จึงค่อยๆจางหายไปพร้อมๆกัน ตามตัวอย่าง  ซึ่งช่วยให้การเขียนโค๊ดคำสั่งง่ายขึ้นแทนที่จะต้องเขียนคำสั่งทีละ object


อ่านเพิ่มเติม
บทที่ 3 jQuery Selectors ตอนที่ 2
บทที่ 3 jQuery Selectors ตอนที่ 3


ให้เรตสมาชิก

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
บทที่ 3 jQuery Selectors ตอนที่ 2
  จากบทเรียน บทที่ 3 jQuery Selectors ตอนที่ 1 ที่ได้ยกตัวอย่าง jQuery selectors พื้นฐานไปแล้ว จากหลายๆตัวอย่าง จะสังเกตว่าในโค๊ดคำสั่งแต่ล่ะชุดนั้นจะมี document ready function
$(document).ready(function()   document ready function  มีหน้าที่ควบคุม javascript ที่อยู่ใน function ดังกล่าว เพื่อทำงานเมื่อหน้า html โหลดเสร็จเรียบร้อยโดยอัตโนมัติ ทั้งนี้ก็เพื่อให้ javascript ที่เราต้องการเรียกใช้งานนั้นอยู่ในสภาพพร้อมใช้
<script>
$(document).ready(function(){  
    $("h2").fadeOut(4000);
  });
</script>
จากตัวอย่างเมื่อหน้า html โหลดเสร็จเรียบร้อย ก็จะทำการเลือกแท็ก h2 แล้วจัดการ fadeOut (ค่อยๆจางหายไป) แท็ก h2
     การใช้งาน document ready function นั้นสามารถเขียนให้สั้นเข้าไปอีกได้ดังนี้
<script type>
 $(function() {
  $("h2").fadeOut(4000);
 });
</script>


    jQuery สามารถเลือกอิลิเมนต์เป็นกลุ่มหรือเลือกอิลิเมนต์เดียว,เลือกตามชื่ออิลิเมนต์,เลือกตามแอตตริบิวต์,หรือเลือกตามเนื้อหาดังนี้

jQuery Element Selectors
jQuery ใช้ css ในการเลือก อิลิเมนต์  HTML (DOM)

$("p") เลือกอิลิเมนต์ <p> ทั้งหมด

$("p.intro")เลือกอิลิเมนต์<p>และอิลิเมนต์ class="intro"

$("p#demo")เลือกอิลิเมนต์ <p> และอิลิเมนต์ id="demo"

jQuery Attribute Selectors
jQuery ใช้ xPath expressions ในการเลือกอิลิเมนต์ในแอตตริบิวต์

$("href")เลือกอิลิเมนต์ทั้งหมดที่มีแอตตริบิวต์ href

$("[href=#]")เลือกอิลิเมนต์ทั้งหมดที่มีแอตตริบิวต์ href =?#?

$("[href!=#]")เลือกอิลิเมนต์ทั้งหมดที่แอตตริบิวต์ href  ไม่เท่ากับ=?#?

$("[href$='.jpg']")เลือกอิลิเมนต์ทั้งหมดที่มีแอตตริบิวต์ href และค่าของแอตตริบิวต์ลงท้ายด้วย .jpg

jQuery CSS Selectors
jQuery css selectors สามารถกำหนด,สร้าง,เปลื่ยนแปลง คุณสมบัติของ css ได้ จากตัวอย่างจะเป็นการเปลี่ยนพื้นหลังของอิลิเมนต์ <p>เป็นสีเหลืองทั้งหมดดังนี้

$("p").css("background-color","yellow");


อ่านเพิ่มเติม

บทที่ 3 jQuery Selectors ตอนที่ 1

บทที่ 3 jQuery Selectors ตอนที่ 3


ให้เรตสมาชิก

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
บทที่ 3 jQuery Selectors ตอนที่ 3
   ตัวอย่างเพิ่มเติม jQuery Selectors
Syntax                                   
คำอธิบาย
$(this)เลือกอิลิเมนต์ปจจุบัน
$("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"

อ่านเพิ่มเติม
บทที่ 3 jQuery Selectors ตอนที่ 1
บทที่ 3 jQuery Selectors ตอนที่ 2

ข้อมูลอ้างอิง
http://sci.udru.ac.th
http://www.w3schools.com

ให้เรตสมาชิก

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
บทที่ 4 jQuery Event Funtions
    Event คือเหตุการณ์ต่าง ๆ ที่ผู้ใช้งานมีต่อเว็บไซต์ ซึ่งมีการควบคุมโดยการใช้ฟังก์ชั่นของ jQuery จัดการ ตัวอย่างของ Event เช่น การคลิก,การดับเบิลคลิก,การกำหนดโฟกัส,เกิดเหตุการณ์เมื่อนำเมาส์เลื่อนอยู่ เหนืออิลิเมนต์ที่เลือก
Event                                                       
คำอธิบาย
$(document).ready(function)เหตุการณ์จะเกิดขึ้นเมื่อมีการโหลดเอกสาร html เสร็จเรียบร้อยแล้ว
$(selector).click(function)เหตุการณ์จะเกิดขึ้นเมื่อมีการคลิกอิลิเมนต์ที่เลือก
$(selector).dblclick(function)เหตุการณ์จะเกิดขึ้นเมื่อมีการดับเบิลคลิกอิลิเมนต์ที่เลือก
$(selector).focus(function)เหตุการณ์จะเกิดขึ้นเมื่อเมาส์ไปอยู่ในตำแหน่งโฟกัส
$(selector).mouseover(function)เหตุการณ์จะเกิดขึ้นเมื่อเมาส์อยู่เหนืออิลิเมนต์ที่เลือก

   การใช้งาน jQuery Event Funtions นั้นจะใช้อยู่ในลักษณะ เมธอดที่ถูกเรียกเมื่อเหตุการณ์นั้นเกิดขึ้น อย่างเช่น
เมธอดที่ใช้กำหนดการทำงานให้กับ selector 

*** หมายเหตุ <meta charset="utf8"> แท็กนี้เป็นแท็กที่ใส่เพื่อให้ web browser สามารถแสดงภาษาไทยได้ ซึ่งจะใส่ในส่วนของแท็ก <head>

  ตัวอย่างที่ 1 (click method)  $(selector).click(function)
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>คลิกซิจ๊ะ แล้วฉันจะหายไปทันที</p>
<p>คลิกอีกทีนะ</p>
</body>
</html>
คลิกดูตัวอย่าง click method

ตัวอย่างที่ 2 (dbclick method)  $(selector).dblclick(function)
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>ดับเบิ้ลคลิกซิจ๊ะ แล้วฉันจะหายไปทันที</p>
<p>คลิกอีกทีนะ</p>
</body>
</html>
คลิกดูตัวอย่าง dbclick method

ตัวอย่างที่ 3 (focus method)  $(selector).focus(function)
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","pink");
  });

  $("input").blur(function(){
   $(this).css("background-color","white");
    alert('please insert your information');
  });
});
</script>
</head>
<body>
ชื่อ: <input type="text" name="fullname"><br>
อีเมล: <input type="text" name="email">
</body>
</html>
คลิกดูตัวอย่าง focus method

ตัวอย่างที่ 4 mouseover method  $(selector).mouseover(function)
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("#h").mouseover(function(){
    alert("www.mindphp.com!");
  });
});
</script>
</head>
<body>
<h id="h">บทความสอน CSS , HTML, javascript, jQuery</h>
</body>
</html>
คลิกดูตัวอย่าง mouseover

ข้อมูลอ้างอิง
http://www.w3schools.com


ให้เรตสมาชิก

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
บทที่ 5 jQuery Effect ตอนที่ 2 (callback funtion)
jQuery Callback Functions
   จากที่ได้เคยได้อธิบายเรื่อง Query Effect ไว้ใน  บทที่ 5 jQuery Effect ตอนที่ 1 แล้วในบทนี้เราจะมาพูดถึงฟังก์ชัน callback ของกันบ้าง
syntax ของ jQuery Effect
$(selector).hide(speed,callback);  ***speed(ความเร็ว)  อาจกำหนดเป็น slow, fast, normal หรือกำหนดเป็นมิลลิวินาทีก็ได้
       callback คือ function ที่ถูกเรียกใช้งานเมื่อ animated complete ใช้เมื่อเราต้องการให้ jQuery ทำคำสั่งแรกจนเสร็จก่อน แล้วจึงค่อยเริ่มทำคำสั่งที่สอง  
    syntax ของ jQuery Effect นั้นประกอบด้วย speed และ callback ซึ่งทั้งสองตัวนี้เป็นตัวเสริมที่มีมาเพิ่มเติมลูกเล่นของ Effect ให้หลากหลายมากขึ้น

1.ตัวอย่างการใช้งานฟังก์ชัน callback
<html>
<head>
<meta charset="utf-8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("10000",function(){
      alert("กำลังซ่อนข้อความ");
    });
  });
});
</script>
</head>
<body>
<button>ซ่อน</button>
<p>อยากเรียน jQuery อ่านใน www.mindphp.com ซิจ๊ะ</p>
</body>
</html>
คลิกดูตัวอย่าง callback

2.ตัวอย่างที่ไม่ใช้งานฟังก์ชัน callback
<html>
<head>
<meta charset="utf-8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(10000);
    alert("กำลังซ่อนข้อความ");
  });
});
</script>
</head>
<body>
<button>ซ่อน</button>
<p>อยากเรียน jQuery อ่านใน www.mindphp.com ซิจ๊ะ</p>
</body>
</html>
คลิกดูตัวอย่างแบบ without-callback

  ****จากตัวอย่างที่1 กับตัวอย่างที่2 จะสังเกตว่า มีที่ต่างกันคือตัวอย่างที่1 แบบมีฟังก์ชัน callback จะใช้เป็น   $("p").hide("10000",function(){  กับ ตัวอย่างที่2 แบบไม่มีฟังก์ชัน callback จะใช้เป็น  $("p").hide(10000); ซึ่งทั้งสองตัวอย่างให้ผลลัพธ์ที่แตกต่างกันคือ ตัวอย่างที่1 แบบมีฟังก์ชัน callback เมื่อคลิกที่ปุ่ม "ซ่อน" จะทำการซ่อนข้อความจนเสร็จแล้วจึงมีการ alert ต่างกับ ตัวอย่างที่2 แบบไม่มีฟังก์ชัน callback เมื่อคลิกปุ่ม "ซ่อน" จะทำการซ่อนข้อความแล้วตามด้วยการ alert ต่อมาติดๆ โดยไม่รอให้การซ่อนข้อความนั้นเสร็จก่อน ก็ alert ต่อในทันที

ให้เรตสมาชิก

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
บทที่ 5 jQuery Effect ตอนที่ 3 (Animation)
    animate() method ของ jQuery เป็น method ที่ช่วยในการสร้างแอนิเมชั่นแบบง่ายๆ
มี syntax ดังนี้
$(selector).animate({params},speed,callback);   ***params ใช้กำหนดลักษณะการเคลื่อนไหวของแอนิเมชั่น
       speed ใช้กำหนดความเร็วในการเคลื่อนไหว เช่น slow,fast,normal หรือ อาจใช้กำหนดตำแหน่งที่วัตถุจะเคลื่อนที่ไปก็ได้
****แท็ก meta หรือ <meta charset="utf8"> แท็กนี้เป็นแท็กที่ใส่เพื่อให้ web browser สามารถแสดงภาษาไทยได้ ซึ่งจะใส่ในส่วนของแท็ก <head>

ตัวอย่างที่ 1 การสร้างแอนิเมชันอย่างง่าย (JQuery animation)
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({top:'250px'},4000);
  });
});
</script>
</head>
 
<body>
<button>Start Animation</button>
<div style="background:pink;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
คลิกดูตัวอย่างที่ 1 (JQuery animation)
   ***จากตัวอย่างที่หนึ่งคือการกำหนดให้ object ที่สร้างด้วยแท็ก <div>
ให้มีการเคลื่อนที่ลง 250px โดยใช้เวลาในการเคลื่อนที่ 4000 มิลลิวินาที (4วิ)

ตัวอย่างที่ 2 การเพิ่มลูกเล่นให้แอนิเมชันมีรูปแบบที่หลากหลายขึ้น (Manipulate Multiple Properties)
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      top:'300px',
      opacity:'0.2',
      height:'200px',
      width:'200px'
    });
  });
});

</script>
</head>
<body>
<button>Start Animation</button>
<div style="background:pink;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
คลิกดูตัวอย่างที่ 2

ตัวอย่างที่ 3 การเพิ่ม values ให้กับแอนิเมชั่น
   ซึ่งการใส่ค่า values ให้กับแอนิเมชั่น อาจใส่เป็น += เพื่อเพิ่มขนาดวัตถุ หรือ -= เพื่อลดขนาดวัตถุ นอกจากนี้แล้วยังสามารถใส่ค่า values ให้เป็น "show", "hide", หรือ "toggle" ก็ได้
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      top:'400px',
      height:'-=50px',
      width:'-=50px'
    });
  });
});

</script>
</head>
<body>
<button>Start Animation</button>
<p>คลิกเพื่อดูการเคลื่อนที่แอนิเมชั่น </p>
<p>คลิกซ๊ำอีกที จะเห็นว่าสี่เหลี่ยมนั้นลดขนาดขึ้นอีก เเละคลิกอีกก็ลดอีก</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
คลิกดูตัวอย่างที่ 3 (values)

ตัวอย่างที่ 4 การสร้างแอนิเมชั่น โดยการใช้ Queue Functionality

   เมื่อเราต้องการสร้างแอนิเมชั่นให้มีรูปแบบที่หลากหลาย จึงจำเป็นต้องมีการกำหนดการทำงานของคำสั่งว่าต้องทำอะไรก่อน อะไรหลังเหมือนกับลักษณะการเรียงคิวของตัวคำสั่ง ว่าต้องทำคำสั่งในก่อน คำสั่งในทีหลัง
<html>
<head>
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'100'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'100'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
   div.animate({fontSize:'3em'},"slow");
  });
});

</script>
</head>
<body>
<button>Start Animation</button>
<p>คลิกเพื่อดูการเคลื่อนที่ของแอนิเมชั่น</p>
<div style="background:pink;height:100px;width:200px;position:absolute;">HELLO Nerd</div>

</body>
</html>
คลิกดูตัวอย่างที่ 4 Queue Functionality
   ***จากตัวอย่างที่ 4 จะเห็นว่ามีการกำหนดลักษณะแอนิเมชั่นที่หลากหลาย ซึ่งจะมีลักษณะการทำงานแบบทีละ step ไปเรื่อยๆ โดยรอจน step แรกเสร็จ แล้วจึงเริ่ม step ต่อไป

 

ให้เรตสมาชิก

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
บทที่ 5 jQuery Effect ตอนที่ 5 (Fade)
   Fade แปลว่าเลือนลาง
   Fade เป็นเมธอดของ jQuery ที่ใช้เพื่อทำให้ object ต่างๆที่เราสร้างขึ้นเลือนลาง หรืออาจใช้เพื่อให้ทำให้ object ที่เลือนลางอยู่แล้วชัดเจนขึ้น
   fade method นั้นแบ่งเป็น 4 แบบดังนี้

fade Method
      คำอธิบาย
fadeIn()      
      จากที่เลือนลาง ก็ทำให้ชัดเจน

fadeOut()      จากที่ชัดเจน ก็ทำให้เลือนลาง

fadeToggle()      สลับไปมา ระหว่างเลือนลาง กับชัดเจน

fadeTo()      เป็นคำสั่งที่ช่วยกำหนดระดับความเลือนลาง ซึ่งค่าที่ใช้กำหนดจะอยู่ในช่วง 0-1 (ถ้าใกล้ 0 หรือเป็น 0 แปลว่าเลือนลางมากสุด มองไม่เห็นเลย ,แต่ถ้าใกล้ 1 จะยิ่งชัดเจน หรือถ้าเป็น 1 คือชัดที่สุด )

1. fadeIn() method
มี syntax ดังนี้
$(selector).fadeIn(speed,callback);ตัวอย่างเช่น
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn(5000);
    $("#div2").fadeIn();
    $("#div3").fadeIn("slow");

  });
});
</script>
</head>
<body>
<p>คลิกดูตัวอย่างการใช้ fadeIn method</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:yellow;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>


</body>
</html>
คลิกดูตัวอย่าง fadeIn method

2. fadeOut() method

มี syntax ดังนี้
$(selector).fadeOut(speed,callback);ตัวอย่างเช่น
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);

  });
});
</script>
</head>

<body>
<p>คลิกดูตัวอย่างการใช้ fadeOut method</p>
<button>Click to fade out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:yellow;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>


</body>
</html>
คลิกดูตัวอย่าง fadeOut method

***เปรียบเทียบระหว่าง fadeIn กับ fadeOut จะเห็นว่าทั้งสองตัวอย่างนี้ นอกจากจะแตกต่างที่ตัว syntax แล้ว ยังมีตัวคำสั่งที่อยู่ภายในแท็ก <div> ที่แตกต่างกันด้วย นั้นคือคำสั่ง display:none ซึ่งมีอยู่ใน fadeIn method แต่ไม่มีใน fadeOut method   ตัวคำสั่ง display:none เป็นคำสั่งที่สั่งไม่มีการแสดง object     
    -ในตัวอย่างที่ 1 เราจะเห็นว่าในตอนแรกไม่มี object ปรากฎ เนื่องจากคำสั่ง display:none และเมื่อมีการคลิก object จึงปรากฎ
   -ในตัวอย่างที่ 2 เราจะเห็นว่าในตอนแรกมี object ปรากฎอยู่แล้ว เนื่องจากไม่มีคำสั่ง display:none และเมื่อมีการคลิก object จึงหายไป
(เเท็ก <div> คือแท็กที่ใช้ในการสร้าง object)

3. fadeToggle() Method

มี syntax ดังนี้
$(selector).fadeToggle(speed,callback);ตัวอย่างเช่น
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);

  });
});
</script>
</head>
<body>
<p>คลิกดูตัวอย่างการใช้ fadeOut method</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>


</body>
</html>
คลิกดูตัวอย่าง fadeToggle method

4. fadeTo() Method

มี syntax ดังนี้
$(selector).fadeTo(speed,opacity,callback);ตัวอย่างเช่น
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",1);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.1);

  });
});
</script>
</head>
<body>
<p>คลิกดูตัวอย่าง fadeTo method </p>
<button>Click to fade boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>


</body>
</html>
คลิกดูตัวอย่าง fadeTo method


กระทู้ล่าสุดจากบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
โดย
"Symfony" php Framework วิธีการรันไฟล์ ?
โดย thatsawan อ 22 ก.ค. 2014 7:06 pm บอร์ด Programming - PHP
1
20
อ 22 ก.ค. 2014 7:06 pm โดย thatsawan
"Symfony" php Framework วิธีสร้างไฟล์ ?
โดย thatsawan อ 22 ก.ค. 2014 7:02 pm บอร์ด Programming - PHP
1
15
อ 22 ก.ค. 2014 7:02 pm โดย thatsawan
ลบโปรแกรมไอคอนหน้า Desktop ยังไงค่ะ
โดย thatsawan อ 22 ก.ค. 2014 4:53 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
16
อ 22 ก.ค. 2014 4:53 pm โดย thatsawan
กด submit แล้วไม่ตอบสนองครับ
โดย Anonymous อ 22 ก.ค. 2014 4:38 pm บอร์ด Programming - PHP
0
18
อ 22 ก.ค. 2014 4:38 pm โดย Anonymous
B - เอกสารหมายเลข 6 - ค่าเช่าต่อเดือนไม่ถูกต้อง
โดย jay_limm อ 22 ก.ค. 2014 12:42 pm บอร์ด Rid - ระบบบันทึกงบประมาณ
1
6
อ 22 ก.ค. 2014 12:42 pm โดย jay_limm
งานประจำวัน 22 กรกฎาคม 2557
โดย buay อ 22 ก.ค. 2014 11:07 am บอร์ด M018 - ณัฐกุล โนรินทร์
1
4
อ 22 ก.ค. 2014 11:07 am โดย buay
รายงานประจำวันที่ 22 กรกฎาคม 2557
โดย jay_limm อ 22 ก.ค. 2014 9:55 am บอร์ด M019 - คะนึงรัตน์ ลิ่มตระกูล
1
2
อ 22 ก.ค. 2014 9:55 am โดย jay_limm
The connection has timed out
โดย buay จ 21 ก.ค. 2014 7:29 pm บอร์ด Programming - PHP
4
80
จ 21 ก.ค. 2014 7:29 pm โดย buay
B - เอกสารหมายเลข 6 - show notice
โดย jay_limm จ 21 ก.ค. 2014 6:20 pm บอร์ด Rid - ระบบบันทึกงบประมาณ
2
6
จ 21 ก.ค. 2014 6:20 pm โดย jay_limm
B - M014 - เอกสารหมายเลข 7 - แผนการดำเนินกิจกรรม - ไม่โชว์ข้อมูลตอนedit
โดย jay_limm จ 21 ก.ค. 2014 6:03 pm บอร์ด Rid - ระบบบันทึกงบประมาณ
1
5
จ 21 ก.ค. 2014 6:03 pm โดย jay_limm
[MOD] Advanced Rules Page
โดย buay จ 21 ก.ค. 2014 5:38 pm บอร์ด PHPBB3 Mod Review
0
45
จ 21 ก.ค. 2014 5:38 pm โดย buay
งานประจำวันที่ 21 กรกฏาคม 2557
โดย eingeng จ 21 ก.ค. 2014 4:17 pm บอร์ด M020 - รัชนีกร จงหมั่น
2
16
จ 21 ก.ค. 2014 4:17 pm โดย eingeng
[Free] มู๊ด เพลย์: โพสท์อารมณ์พร้อมรูปถ่ายได้ด้วยกัน
โดย inexco จ 21 ก.ค. 2014 4:16 pm บอร์ด โหลดโปรแกรม พูดคุยเรื่องทั่วไป จับฉ่าย
0
48
จ 21 ก.ค. 2014 4:16 pm โดย inexco
B - งท.05 - ไม่แสดงปุ่มปฏิทินบน chrome
โดย jay_limm จ 21 ก.ค. 2014 2:11 pm บอร์ด Rid - ระบบบันทึกงบประมาณ
2
7
จ 21 ก.ค. 2014 2:11 pm โดย jay_limm
B - งท.04 - โมดูลซ้อนทับตาราง
โดย jay_limm จ 21 ก.ค. 2014 2:01 pm บอร์ด Rid - ระบบบันทึกงบประมาณ
2
7
จ 21 ก.ค. 2014 2:01 pm โดย jay_limm
รายงานประจำวันที่ 21 กรกฎาคม 2557
โดย jay_limm จ 21 ก.ค. 2014 10:01 am บอร์ด M019 - คะนึงรัตน์ ลิ่มตระกูล
1
6
จ 21 ก.ค. 2014 10:01 am โดย jay_limm
งานประจำวัน 21 กรกฎาคม 2557
โดย buay จ 21 ก.ค. 2014 9:32 am บอร์ด M018 - ณัฐกุล โนรินทร์
1
3
จ 21 ก.ค. 2014 9:32 am โดย buay
การแบ่งหน้าเพื่อการแสดงผล ค้นหา
โดย thatsawan ส 19 ก.ค. 2014 10:34 pm บอร์ด Programming - PHP
3
177
จ 21 ก.ค. 2014 12:07 am โดย thatsawan
เขียนคำสั่ง SQL JOIN TABLE เพื่อค้นหา เเต่บางคำ ค้นหาไม่ได้
โดย thatsawan ศ 18 ก.ค. 2014 10:14 pm บอร์ด SQL - Database
5
205
ส 19 ก.ค. 2014 2:20 pm โดย mindphp
ขอ extreme 1ครับ
โดย pokchaisriha ส 19 ก.ค. 2014 10:23 am บอร์ด โหลดโปรแกรม พูดคุยเรื่องทั่วไป จับฉ่าย
0
94
ส 19 ก.ค. 2014 10:23 am โดย pokchaisriha