แนะนำให้รู้จักกับ jQuery
06 Jan 2012
ได้เวลา Hello World jQuery แล้ว
เป็นธรรมเนียมถือปฏิบัติกันไปแล้วสำหรับการเรียนเขียนโปรแกรมที่ตัวอย่างแรกมักจะเป็น Hello World แต่ในบทความนี้ผมต้องการให้เห็นภาพรวมๆของการใช้ jQuery จึงขอยกตัวอย่างที่มันซับซ้อนกว่านั้นสักเล็กน้อย เริ่มต้นเรามาดูโค้ด HTML ตัวอย่างกันก่อนดังแสดงในตัวอย่างที่ 1 (hello-jquery1.html) ซึ่งเมื่อรันแล้วก็จะได้ผลลัพธ์ดังแสดงในรูปที่ 1
<html>
<head>
<title>Hello jQuery</title>
</script>
</head>
<body>
<h1>Cheers !!</h1>
<img src="half_a_glass.png" />
</body>
</html>
ตัวอย่างข้างต้นเป็นตัวอย่างง่ายๆจึงประกอบไปด้วยแท็ก <h1> สำหรับข้อความ และแท็ก <img> สำหรับรูปภาพเท่านั้น สำหรับตัวอย่างนี้ผมต้องการให้รูปภาพเปลี่ยนเมื่อมีการคลิกที่รูป ดังนั้นสิ่งแรกที่ต้องทำคืออ้างอิงใช้ jQuery Library ดังนี้
<head>
<title>Hello jQuery</title>
<script src="jquery-1.7.1.min.js">
</script>
</head>
ในกรณีนี้ไฟล์ jQuery-1.7.1.min.js จะต้องอยู่ที่เดียวกับไฟล์ HTML ของเรา จากนั้นลำดับถัดไปเราจะสร้างฟังก์ชัน cheers() ขึ้นเพื่อเปลี่ยนรูปภาพของแท็ก <img> และข้อความในแท็ก <h1> ด้วยดังนี้
var cheers = function(){
$("img").attr("src","empty_glass.png");
$("h1").text("One more?").css("font-style","italic");
}
ตัวอย่างข้างต้นเราเข้าถึงแท็ก <img> และเรียกเมธอด attr() เพื่อกำหนดรูปภาพใหม่ และเข้าถึงแท็ก <h1> และเปลี่ยนข้อความด้วยเมธอด text() อีกทั้งยังมีการกำหนดสไตล์ให้กับแท็ก <h1> ด้วย (ยังจำ Method Chainning ในหัวข้อที่ผ่านมาได้ใช่ไหมครับ) เมื่อได้ฟังก์ชันที่ต้องการแล้ว เราต้องการให้มันทำงานเมื่อมีการคลิกที่รูปภาพ ดังนั้นเราจึงต้องเพิ่มโค้ดต่อไปนี้ลงไป
$("img").click(cheers);
คงพอเดาได้ใช่ไหมครับ เราเข้าถึงแท็ก <img> และผูกฟังก์ชัน cheers() เข้ากับเหตุการณ์ onclick ด้วยเมธอด click() ใน jQuery นั่นเอง เอาหล่ะเมื่อได้ทั้งหมดแล้วเราไปรวมโค้ดแล้วรองรันกัน ตัวอย่างที่ 2 (hello-jquery1.html) แสดงโค้ดทั้งหมด และรูปที่ 2 แสดงผลลัพธ์การรัน
<html>
<head>
<title>Hello jQuery</title>
<script src="jquery-1.7.1.min.js">
</script>
</head>
<body>
<h1>Cheers !!</h1>
<img src="half_a_glass.png" />
<script>
var cheers = function(){
$("img").attr("src","empty_glass.png");
$("h1").text("One more?").css("font-style","italic");
$("button").show();
}
$("img").click(cheers);
</script>
</body>
</html>
One More Example Please
จากตัวอย่างที่ผ่านไปเราได้เห็นภาพการใช้งาน jQuery ในส่วนของ HTML and CSS Selection และ HTML and CSS Manipulation แล้ว ในหัวข้อนี้เราจะมาดูตัวอย่างการใช้ jQuery กับการทำ Visual Effects and Animation บ้าง โดยเราจะนำเอาโค้ดตัวอย่างที่ผ่านมามาประยุกต์เรียนกัน โดยผมต้องการให้มีการแสดงปุ่ม "no more" ข้างใต้รูปภาพด้วยหลังจากมีการคลิกที่รูปภาพ ดังนั้นจึงเพิ่มโค้ดดังต่อไปนี้ลงไป
<body>
<h1>Cheers !!</h1>
<img src="half_a_glass.png" />
<br/>
<button style="display:none">no more</button>
. . .
ในเบื้องต้นนั้นเราจะให้ปุ่มถูกซ่อนอยู่ด้วยโค้ด CSS ปุ่มจะปรากฏขึ้นก็ต่อเมื่อมีการคลิกที่รูปภาพ เราจึงต้องเพิ่มโค้ด jQuery เข้าไปในฟังก์ชัน cheers() ดังนี้
var cheers = function(){
$("img").attr("src","empty_glass.png");
$("h1").text("One more?").css("font-style","italic");
$("button").show();
}
$("img").click(cheers);
เอ๊ะแล้วเพิ่มปุ่มมันแสดง Visual Effects หรือ Animation ตรงไหน? อันนี้ก็ต้องตามต่อนะครับ ลำดับถัดไปผมต้องการให้รูปภาพหายไปเมื่อกดปุ่ม "no more" โดยต้องการให้รูปภาพค่อยๆจางหายไป ไม่ใช่หายไปทันทีเลย ดังนั้นเราจึงสร้างฟังก์ชัน noMore() ขึ้นดังนี้
var noMore = function(){
$("img").fadeOut("slow");
}
ตัวอย่างข้างต้นเราใช้เมธอด fadeOut() และส่งผ่านพารามิเตอร์ slow เข้าไป (fast, medium, slow, หรือจะเป็นตัวเลขหน่วย Millisecond ก็ได้) จากนั้นจึงผูกฟังก์ชัน noMore() เข้ากับเหตุการณ์ onclick ของปุ่มด้วย jQueryดังนี้
$("button").click( noMore );
เอาหล่ะครบทุกอย่างแล้วก็ประกอบรวมทั้งหมดเข้าด้วยกันดังแสดงในตัวอย่างที่ 3 (hello-jquery2.html) และผลการรันก็ดังที่แสดงในรูปที่ 3
<html>
<head>
<title>Hello jQuery</title>
<script src="jquery-1.7.1.min.js">
</script>
</head>
<body>
<h1>Cheers !!</h1>
<img src="half_a_glass.png" />
<br/>
<button style="display:none">no more</button>
<script>
var cheers = function(){
$("img").attr("src","empty_glass.png");
$("h1").text("One more?").css("font-style","italic");
$("button").show();
}
$("img").click(cheers);
var noMore = function(){
$("img").fadeOut("slow");
}
$("button").click( noMore );
</script>
</body>
</html>
What's Next?
จบแล้วนะครับสำหรับบทความสั้นๆเพื่อให้แนะนำให้รู้จักกับ jQuery คุณคงพอจะเห็นภาพแล้วนะครับว่าการใช้งาน jQuery เป็นอย่างไร ช่วยให้การเขียน JavaScript ง่ายขึ้นแค่ไหน อย่างไรก็ตาม jQuery ไม่ได้มาแทนที่ JavaScript อย่างที่บางคนเข้าใจ แต่ถูกออกแบบมาเพื่อให้ใช้งาน JavaScript ได้ง่ายขึ้น (หากจะแทนที่จริงก็คงจะเป็น DOM และ Events มากกว่า) Syntax และกฏพื้นฐานต่างๆก็ยังคงเป็น JavaScript อยู่เช่นเดิม หากคุณตัดสินใจที่จะใช้ jQuery แล้วหล่ะก็ ให้ศึกษาหัวข้อต่างๆตามที่ได้แบ่งหมวดหมู่ไว้ในหัวข้อ "ฟีเจอร์หลักของ jQuery" ข้างต้น ขอให้สนุกกับการเขียน JavaScript และ jQuery ครับ :)
