บทเรียน Jquery

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

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

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน

การใช้งาน JQuery HTML Get Content จะมีหลักอยู่ 3 แบบ คือ text(), html(), and val()

โดยที่การ Get Content  นั้นเป็นส่วนที่สำคัญส่วนหนึ่งของ JQuery ที่ใช้ในการจัดการและเข้าถึง element และ attributes ต่างๆได้ง่ายขึ้น

text() : จัดการค่าหรือว่ามีการ return ค่าที่เป็น Text ของเนื้อหา ของ element ที่เลือก

html() : จัดการค่าหรือว่ามีการ return ค่าที่เป็น Text ของเนื้อหา ของ element ที่เลือก รวมไปถึงแสดง Tag HTML ด้วย

val() : จัดการค่าหรือว่ามีการ return ค่า จากฟิลด์ต่างในฟอร์ม

 

มาดูตัวอย่างการใช้งาน

 

<html>

<head>

         <script src="http://code.jquery.com/jquery-1.9.1.js">
        </script>
       
        <script>
            $(document).ready(function(){
                $("#btn_val").click(function(){
                    alert("Get Value Textbox : " + $("#test_val").val());
                });
               
                $("#btn1").click(function(){
                    alert("Get Text : " + $("#test").text());
                }); 


                $("#btn2").click(function(){
                    alert("Get Text with HTML Tag : " + $("#test").html());
                });   
            });   
        </script>

</head>

<title></title>

<body>

        <p id="test">This is some <b>bold</b> text in a paragraph.</p>
        <p>Value: <input type="text" id="test_val" value="Minpphp"></p>
       
        <button id="btn1">Show Text from Paragraph</button>
        <button id="btn2">Show HTML from Paragraph</button>
        <button id="btn_val">Show Value from Textbox</button>

 

</body>

</html>

 

จากตัวอยย่างการใช้งาน ด้านบน จะทำงานอยู่ในลักษณะ ที่มี ข้อความสั้นๆ 1 ข้อความ ที่มี tag  HTML อยู่ภายในข้อความ และมี textbox 1 ช่อง

โดยจะมีปุ่ม 3 ปุ่ม ให้เลือกใช้งานทำงาน ว่าต้องการ แสดงค่าเฉพาะ text ภายในข้อความ, แสดง text ในรูปแบบของ html, หรือว่า แสดงข้อความที่อยู่ใน textbox

 

 

 

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

 

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

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน
บทที่ 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 Effects ตอนที่ 1 (hide/show and slide)
   jQuery Effects คือเอฟเฟคต่างๆของ jQuery ซึ่งใช้เพื่อเพิ่มเติมลูกเล่นต่างๆให้กับหน้าเว็บ นอกจากนี้แล้ว ยังสามารถสร้าง animations ได้อีกด้วย เช่น Hide (ซ่อน), Show()แสดง, Toggle(สลับ), Slide(เลื่อน), Fade(จาง), Animate(เคลื่อนไหว) เป็นต้น
   มี syntax ดังนี้
 $(selector).Effect (speed,callback);  ***speed(ความเร็ว)  อาจกำหนดเป็น slow, fast, normal หรือกำหนดเป็นมิลลิวินาทีก็ได้
       callback คือ function ที่ถูกเรียกใช้งานเมื่อ animated complete ใช้เมื่อเราต้องการให้ jQuery ทำคำสั่งแรกจนเสร็จก่อน แล้วจึงค่อยเริ่มทำคำสั่งที่สอง

Effect                         
คำอธิบาย
$(selector).hide() ซ่อนอีลิเมนต์

$(selector).show()

แสดงอิลิเมนต์

$(selector).toggle()

สลับระหว่างการซ่อนกับการแสดงอิลิเมนต์

$(selector).slideDown()

เลื่อนอิลิเมนต์จากบนลงล่าง(แสดง)

$(selector).slideUp()

เลื่อนอิลิเมนต์จากล่างขึ้นบน(ซ่อน)

$(selector).slideToggle()

สลับระหว่างการเลื่อนลงกับการเลื่อนขึ้น

$(selector).fadeIn()

แสดงอิลิเมนต์จากจางไปเข้ม

$(selector).fadeOut()

ซ่อนอิลิเมนต์จากเข้มไปจาง

$(selector).fadeTo()

ปรับความเข้มของอิลิเมนต์

$(selector).animate()

สร้างeffectเอง


1.ตัวอย่างการใช้ Hide/show  
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p><b>สวัสดีคุณผู้อ่าน<b></p>
<p>ลองคลิกที่ปุ่ม ซ่อน ซิ แล้วฉันจะหายไปทันที </p>
<button id="hide">ซ่อน</button>
<button id="show">แสดง</button>
</body>
</html>
คลิกดูตัวอย่าง hide/show

2.ตัวอย่างการใช้ toggle
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>
<button>สลับ</button>
<p>คลิกครั้งแรก เพื่อทดลองซ่อนฉันไม่ให้ใครเห็น</p>
<p>คลิกครั้งที่สองถ้าอยากให้ฉันกลับมา</p>
</body>
</html>
คลิกดูตัวอย่าง toggle

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

4.ตัวอย่างการใช้ slideUp
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).slideUp('slow'); 
  });
});
</script>
</head>
<body>
<p align=center>คลิกซิจ๊ะ แล้วฉันจะสไลด์ให้ดู</center></p>
<p align=center>คลิกซิจะสไลด์อีกที</center></p>
<p align=center>คลิกต่อสไลด์อีกทีแล้วกัน</center></p>
</body>
</html>
คลิกดูตัวอย่าง slideUp

5.ตัวอย่างการใช้ slideToggle
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<button>สลับ</button>
<p>คลิกครั้งแรก เพื่อดูการเลื่อนขึ้นของฉัน</p>
<p>คลิกครั้งที่สอง ถ้าอยากให้ฉันเลื่อนลงมา</p>
</body>
</html>
คลิกดูตัวอย่าง slideToggle


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

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
บทที่ 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 ต่อในทันที
กระทู้ล่าสุดจากบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
โดย
[Extension phpBB3.1.x] Paypal Donation Extension เสริม บริจาคด้วย Paypal
โดย prakasit.bank พ 01 ก.ค. 2015 11:49 am บอร์ด phpBB 3.1 Extension Review
0
4
พ 01 ก.ค. 2015 11:49 am โดย prakasit.bank
[Review] Ajax Search Lite Plug in เสริมช่อง Search
โดย prakasit.bank พ 01 ก.ค. 2015 11:18 am บอร์ด Wordpress user Guide Knowledge
0
5
พ 01 ก.ค. 2015 11:18 am โดย prakasit.bank
ความแตกต่างระหว่าง number_format() กับ floor()
โดย m028 พ 01 ก.ค. 2015 11:01 am บอร์ด Share Knowledge
0
8
พ 01 ก.ค. 2015 11:01 am โดย m028
งานประจำวันที่ 1 กรกฏาคม 2558
โดย mcmakdonal พ 01 ก.ค. 2015 9:59 am บอร์ด MT06 - ณัฐดนัย อุปทอง
0
2
พ 01 ก.ค. 2015 9:59 am โดย mcmakdonal
งานประจำวันที่ 1 ก.ค. 58 (M027)
โดย M027 พ 01 ก.ค. 2015 9:48 am บอร์ด M027 - ณัฐพล ตากล้า
0
2
พ 01 ก.ค. 2015 9:48 am โดย M027
งานประจำวันที่ 01 กรกฎาคม 2558
โดย Apiradee.02 พ 01 ก.ค. 2015 9:29 am บอร์ด MT08 - อภิรดี ปลั่งกลาง
0
2
พ 01 ก.ค. 2015 9:29 am โดย Apiradee.02
งานประจำวันที่ 1 กรกฎาคม 2558
โดย prakasit.bank พ 01 ก.ค. 2015 9:08 am บอร์ด MT07 - ประกาศิต อังคสุวรรณศิริ
0
1
พ 01 ก.ค. 2015 9:08 am โดย prakasit.bank
คลิกที่เมนู ระบบ ของ phpbb ขึ้น sprintf(): Too few arguments แก้ไขยังค่ะ
โดย thatsawan พ 01 ก.ค. 2015 1:11 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
19
พ 01 ก.ค. 2015 1:11 am โดย mindphp
bug จาก function trim() ในการใช้ filter เพื่อค้นหา
โดย M027 อ 30 มิ.ย. 2015 6:26 pm บอร์ด Joomla Development
0
21
อ 30 มิ.ย. 2015 6:26 pm โดย M027
งานประจำวันที่ 30 มิถุนายน 2558
โดย mae_q13 อ 30 มิ.ย. 2015 5:14 pm บอร์ด MP03 - วณัฐสินันท์ เฉลยวรรณ
1
3
อ 30 มิ.ย. 2015 5:14 pm โดย mae_q13
สอบถามเพิ่มจากคลิปนี้หน่อยครับ(มือใหม่มากๆ)
โดย light788 อ 30 มิ.ย. 2015 4:04 pm บอร์ด Programming - PHP
0
20
อ 30 มิ.ย. 2015 4:04 pm โดย light788
OT News Grid Extension Review Content
โดย mcmakdonal อ 30 มิ.ย. 2015 11:25 am บอร์ด Joomla Extension Review
1
26
อ 30 มิ.ย. 2015 11:25 am โดย seiha
[Review] Login With Ajax Plug in เสริม Widget Login
โดย prakasit.bank อ 30 มิ.ย. 2015 10:47 am บอร์ด Wordpress user Guide Knowledge
0
15
อ 30 มิ.ย. 2015 10:47 am โดย prakasit.bank
extension tag mindphp
โดย offing อ 30 มิ.ย. 2015 10:43 am บอร์ด Mindphp.com - Project
1
4
อ 30 มิ.ย. 2015 10:43 am โดย thatsawan
[Extension phpBB3.1.x] Groups in viewtopic Extension เสริมแสดงกลุ่ม
โดย prakasit.bank อ 30 มิ.ย. 2015 10:23 am บอร์ด phpBB 3.1 Extension Review
0
18
อ 30 มิ.ย. 2015 10:23 am โดย prakasit.bank
งานประจำวันที่ 30 มิถุนายน 2558
โดย mcmakdonal อ 30 มิ.ย. 2015 10:04 am บอร์ด MT06 - ณัฐดนัย อุปทอง
3
8
อ 30 มิ.ย. 2015 10:04 am โดย mcmakdonal
งานประจำวันที่ 30 มิถุนายน 2558
โดย Apiradee.02 อ 30 มิ.ย. 2015 9:57 am บอร์ด MT08 - อภิรดี ปลั่งกลาง
1
3
อ 30 มิ.ย. 2015 9:57 am โดย Apiradee.02
งานประจำวันที่ 30 มิถุนายน 2558
โดย prakasit.bank อ 30 มิ.ย. 2015 9:42 am บอร์ด MT07 - ประกาศิต อังคสุวรรณศิริ
2
7
อ 30 มิ.ย. 2015 9:42 am โดย prakasit.bank
งานประจำวันที่ 30 มิ.ย. 58 (M027)
โดย M027 อ 30 มิ.ย. 2015 9:39 am บอร์ด M027 - ณัฐพล ตากล้า
1
4
อ 30 มิ.ย. 2015 9:39 am โดย M027
Fixed bug ได้ มันต้องประกาศให้โลกรู้
โดย mindphp อ 30 มิ.ย. 2015 2:07 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
อ 30 มิ.ย. 2015 2:07 am โดย mindphp