พื้นฐานการใช้งาน jQuery

Outline

ทำความรู้จักกับ jQuery เป็นไลบรารีที่พัฒนาขึ้นด้วยภาษาจาวาสคริปท์ ที่รวบรวม ฟังก์ชันและคำสั่งต่าง ๆ เข้าไว้ด้วยกัน ทำให้สะดวกและ ง่ายต่อการใช้งานโดยที่ผู้ใช้ไม่ต้องเขียนสร้างฟังก์ชันเอง ทั้งหมด รองรับการทำงานกับ DOM และ Event ต่าง ๆ รวมถึง สามารถรองรับการทำงานของ เทคโนโลยี AJAX

การติดตั้ง ดาวน์โหลดไฟล์จาก jQuery.com แล้วนำมาติดตั้งใน โฮสต์ที่ต้องการใช้งาน เรียกใช้งานผ่านอินเทอร์เน็ตโดยตรง

การโหลดหน้าเอกสาร ใช้คำสั่ง jQuery แบบเต็ม jQuery(document).ready(func tion(){ คำสั่งต่าง ๆ }); ใช้เครื่องหมาย $ $(document).ready(function() { คำสั่งต่าง ๆ }); ใช้เครื่องหมาย $() $().ready(function(){ คำสั่งต่าง ๆ }); ใช้คำสั่ง jQuery แบบเต็ม $(function)(){ คำสั่งต่าง ๆ });

ดักจับการทำงานด้วยอีเวนต์ อีเวนต์ (Events) คือ เหตุการณ์ที่กำหนดขึ้นในเว็บเพจ เช่น เมื่อโหลดหน้าเว็บเพจ (onLoad) แล้วดำเนินการ อะไร, เมื่อคลิกปุ่ม (onClick) แล้วให้ดำเนินการอย่างไร $("# ค่า id ของอินพุต ").Events(function) ตัวอย่างคำอธิบาย $("#btnSubmit").click( function) เมื่อคลิก (click) ปุ่มชื่อ (btnSubmit) $("#txtAmt").keyup(fu nction) เมื่อพิมพ์ตัวอักษร (keyup) ลงในช่องรับข้อความชื่อ (txtAmt)

การเข้าถึงข้อมูลในตำแหน่งที่กำหนด ใน jQuery เราสามารถเข้าถึงข้อมูลในตำแหน่งอิลิเมนต์ และ ได้ด้วย 2 รูปแบบดัง ใช้เมธอด html() เข้าถึงข้อมูลที่เป็นแท็ก HTML ใช้เมธอด text() เข้าถึงข้อมูลเฉพาะข้อความไม่รวม แท็ก HTML

$(document).ready(function () { $("#txtName").keyup(function() { var strName = $(this).val(); $("#showHtml").html(" ข้อมูลที่คุณป้อนคือ " + strName + " "); $("#showText").text(" ข้อมูลที่คุณป้อนคือ " + strName + " "); });

การซ่อนและแสดงข้อมูลด้วย jQuery ฟังก์ชัน hide() และ show() สามารถรับพารามิเตอร์ สำหรับกำหนดความเร็วในการแสดงผลได้ดังนี้ slow normal fast กำหนดตัวเลข หน่วยเป็นมิลลิวินาที ตัวอย่างรายละเอียดรูปแบบการใช้งาน hide() ซ่อนอิลิเมนต์ $("# ค่า id ของอิลิเมนต์ ").hide(); show() แสดงอิลิเมนต์ $("# ค่า id ของอิลิเมนต์ ").show();

$(function () { $("#btnHide").click(function() { $("#divContent").hide(); }); $(function () { $("#btnShow").click(function() { $("#divContent").show(); });

ซ่อนและแสดงข้อมูลแบบสลับกัน (toggle) เมธอด toggle() ใช้สำหรับสลับการทำงานในการเปิดหรือปิด แสดงข้อมูล. $("# ค่า id ของอิลิเมนต์ ").toggle( พารามิเตอร์ ); $(document).ready(function () { $("#btnHideShow").click(function() { $("#divContent").toggle("fast"); });

ฟังก์ชันสำหรับกำหนดรูปแบบการแสดงผล ตัวอย่างรายละเอียดรูปแบบการใช้งาน slideUp() ค่อย ๆ เลื่อนข้อมูลขึ้นด้านบน $("# ค่า id ของอิลิเมนต์ ").slideUp( พารามิเตอร์ ); slideDown() ค่อย ๆ เลื่อนข้อมูลลงด้านล่าง $("# ค่า id ของอิลิ เมนต์ ").slideDown( พารามิเตอร์ ); slideToggle() สลับการเลื่อนข้อมูลและลง $("# ค่า id ของอิลิ เมนต์ ").slideToggle( พารามิเตอร์ ); fadeIn() ข้อมูลค่อย ๆ ปรากฏชัดเจนขึ้น $("# ค่า id ของอิลิเมนต์ ").fadeIn( พารามิเตอร์ ); faceOut() ข้อมูลค่อย ๆ จางหายไป $("# ค่า id ของอิลิเมนต์ ").fadeOut( พารามิเตอร์ ); fadeTo() ข้อมูลค่อย ๆ จางหายไปจนถึงค่า ความทึบที่กำหนด ( สามารถกำหนดได้ ตั้งแต่ 0.00 – 1.00) $("# ค่า id ของอิลิเมนต์ ").fadeTo( พารามิเตอร์, ค่าความทึบ );

กำหนดความเคลื่อนไหวของอิลิเมนต์ animate() เมธอด animate() ทำหน้าที่กำหนดการเคลื่อนไหวของอิ ลิเมนต์ในการแสดงผล เช่น ความเร็ว, ความเข้ม - จาง, ความสูง เป็นต้น $(" ค่า id ของอิลเเมนต์ ").animate( พร็อพเพอร์ตี้ ), ความเร็ว,function()

$(function () { $("#btnAnimate").click(function() { $("#divContent").animate({ opacity: 0.80, height: "toggle" }, 500, function() { });

การตรวจสอบฟอร์มด้วย jQuery การรับค่าจากอินพุตต่าง ๆ ของฟอร์ม สามารถทำได้ 2 วิธี คือใช้เมธอด val() และเมธอด attr() เมธอด val() เป็นการเข้าถึงข้อมูลในแอตตริบิวต์ value ของอินพุต $(" ค่า id ของอิลิเมนต์ ").val() เมธอด attr() เป็นการเข้าถึงแอตตริบิวต์ที่กำหนด $(" ค่า id ของอิลิเมนต์ ").attr(“ แอตตริบิวต์ที่ต้องการ ")

$(document).ready(function () { $("#btnSubmit").click(function (e) { var tName = $("#txtName").val(); var t = $("#txt ").attr("value"); var tLink = $("#link").attr("href"); alert(" ชื่อ - สกุล : " + tName + "\n อีเมล : " + t + "\nMy Link : " + tLink); });

การตรวจสอบค่าว่างในอินพุต TextBox การตรวจสอบอินพุตทีละตัว $(document).ready(function () { $(".error").hide(); $("#btnSubmit").click(function (e) { var tName = $("#txtName").val(); var t = $("#txt ").attr("value"); if (tName.length < 1) { $("#errorName").show(); e.preventDefault(); } else { $("#errorName").hide(); } if (t =="") { $("#error ").show(); e.preventDefault(); } else { $("#error ").hide(); } });

ตรวจสอบอินพุดหลายตัวพร้อมกัน function chk_form(){ $(":input + span.error").remove(); $(":input").each(function(){ if($(this).val()==""){ $(this).after(" กรุณาป้อนข้อมูลด้วย "); } }); if($(":input").next().is(".error")==false){ return true; }else{ return false; }.error{ color:#FF0000; padding-left:5px; font-size:14px; }

กำหนดให้รับตัวเลขจำนวนเต็มเพียงอย่างเดียว $(document).ready(function () { $("#txtAmt").keyup(function() { $("#errNum").hide(); var inputNum = $(this).val(); var numericReg = /^([0-9]+)$/; if (!numericReg.test(inputNum)) { $("#errNum").html(" กรุณาป้อนจำนวน สินค้า ").show().fadeIn(2000); return false; } });

การจำกัดและนับจำนวนตัวอักษรในอินพุต TextArea $(function(){ $("#txtMsg").keyup(function(){ var text = $(this).val(); var chars = text.length; var limit = parseInt($(this).attr('maxlength')); var now_length = limit - chars ; if (chars > limit) { var new_text = text.substr(0, limit); $(this).val(new_text); } else { $("#charLeft").html(now_length+" ตัวอักษร "); } });

การตรวจสอบรูปแบบ ใน TextBox $(document).ready(function () { $(".error").hide(); $("#btnSubmit").click(function (e) { var tName = $("#txtName").val(); var t = $("#txt ").attr("value"); var reg = if (tName.length < 1) { $("#errorName").show(); e.preventDefault(); } else { $("#errorName").hide(); } if (t =="") { $("#error ").show(); e.preventDefault(); } else if (!reg .test(t )) { $("#error ").html(" คุณป้อน อีเมลไม่ถูกต้อง ").show().fadeIn(2000); e.preventDefault(); } else { $("#error ").hide(); } });

การตรวจสอบข้อมูลต้องตรงกัน $(document).ready(function () { $(".error").hide(); $("#btnSubmit").click(function (e) { var tPassword = $("#txtPwd").val(); var tRePassword = $("#txtRePwd").val(); if (tPassword == "") { $("#errPwd1").show(); e.preventDefault(); } else if (tRePassword == "") { $("#errPwd2").show(); e.preventDefault(); } else if (tPassword != tRePassword ) { $("#errPwd").html(" คุณป้อน Password ไม่ตรงกัน ").show().fadeOut(5000); $("#txtRePwd").attr("value","").focus(); e.preventDefault(); } else { $(".error").hide(); } });

กำหนดการใช้งาน / ยกเลิกการใช้งานด้วย checkbox $(document).ready(function () { $(".error").hide(); $("#btnSubmit").click(function (e) { var tName = $("#txtName").val(); var t = $("#txt ").attr("value"); if (tName.length < 1) { $("#errorName").show(); e.preventDefault(); } else { $("#errorName").hide(); } if (t =="") { $("#error ").show(); e.preventDefault(); } else { $("#error ").hide(); } }); $("#ChkAccept").click(function(){ if($(this).attr("checked")=="checked"){ $("#btnSubmit").removeAttr("disabled"); }else{ $("#btnSubmit").attr("disabled","disabled"); } });

การใช้งาน jQuery UI เป็น plug in ของ jQuery สำหรับสร้างแท็บข้อมูลให้เป็น หมวดหมู่ สร้างปฏิทิน และอื่น ๆ

สร้างเมนูแท็บเก็บข้อมูลให้เป็นหมวดหมู่ $(function() { $("#tabs").tabs(); });.divTab { font-size: 14px; color: #F60; } ข้อมูลทั่วไป เนื้อหาโดยย่อ ข้อมูลทั่วไปของหนังสือ ขนาด จำนวนหน้า ราคา รายละเอียดที่น่าสนใจเกี่ยวกับหนังสือ

กล่องข้อความแบบ POPUP (Dialog) $(function() { $( "#dialog" ).dialog({ title: " ทดสอบสร้าง Dialog", width: 350, modal: true });

กรอกข้อมูลวันที่ด้วยปฏิทิน (Datepicker) $(function(){ $("#txtBirthday").datepicker({ changeYear: true, dateFormat: 'dd-mm-y' }); วันที่ :