ศึกษา jQuery - core

ศึกษา jQuery - core

jQuery Core ถือว่าเป็น main หลัก ในการเรียกใช้ jQuery เลยก็ว่าได้ เพราะว่าหากเราไม่เริ่มเรียกแบบตัวอย่างนี้ ก็จะไม่เรียกว่าใช้ jQuery เลยล่ะ โดยก่อนจะเริ่มใช้ Selector นี้ อยากให้เข้าใจเรื่องพื้นฐาน ของ HTML ก่อน ก็คือเรื่องของ DOM HTML

jQuery( selector, [context])

selector คือ ข้อความที่ระบุถึง เงื่อนไขของ selector เพราะว่า selector นั้นจะระบุเงื่อนไขได้ เดี๋ยวเราจะเล่าทีหลัง
context คือ DOM element, Document , หรือ คำสั่งของ jQuery

jQuery(element)

element คือ DOM element ที่จะเรียกเข้ามาให้เป็น jQuery object

jQuery(elementArray)

elementArray คือ Array ที่ประกอบด้วย กลุ่มของ DOM element ที่จะเรียกเข้ามาให้เป็น jQuery object

jQuery ( jQuery object )

jQuery object คือ การสร้างใหม่ของ jQuery object ที่มีอยู่แล้ว

ในตัวอย่างแรก เราจะใช้งาน $() เพื่อเป็นการค้นหา DOM สำหรับ element ที่อยู่หน้าเว็บที่ถูกกำหนดโดย selector และนำมาสร้างให้เป็น jQuery object เพื่อเอาไปใช้ต่อไป เช่น

$('div.meewebfree'); //เป็นการอ้างถึง div ที่มี class ชื่อ meewebfree

Selector context

โดยปกติ selector จะทำการค้นหา DOM ในหน้าเว็บ โดยเริ่มตั้งแต่ root ไล่ลงไปเรื่อยๆ แต่ในบางครั้ง เรามี context เพิ่มเติมโดยการใส่ paramater ตัวที่สองเพื่ออ้างอิง กับ $()  เช่น ใน callback function เราคาดหวังให้ค้น element โดยกำหนดได้ดังนี้

$('div.foo').click(function() {   $('span', this).addClass('bar'); });

 

จากตัวอย่างนี้ เราระบุเจาะจงโดยใช้ selector content ว่า this นั่นจะส่งผลให้ span ที่อยู่ใน this จะถูกเพิ่ม class ชื่อ bar ลงไป หรือความหมายเต็มๆก็คือ  เมื่อ div class ชื่อ foo ถูก click ให้ทำการเพิ่ม class ชื่อ bar ในทุก span ที่อยู่ภายใต้ div class ชื่อ foo นั่นเอง (ในโค้ดแทนด้วย this)

หรืออีกทาง เราสามารถเรียก selector context โดยใช้ .find() method ก็ได้ ดังนั้นเราจะได้ว่า $('span', this) จึงมีค่าเท่ากับ $('this').find('span') นั่นเอง

 

เรียกใช้ DOM element

ในย่อหน้าแรกๆ ด้านบน จะเห็นตัวอย่างการเรียกใช้งาน element หน้าเว็บด้วย โดย element เหล่านั้น จำเป็นที่จะต้องถูกประกาศขึ้นมาก่อนแล้ว และสำหรับการอ้างอิงขึ้นพื้นฐาน ที่ใช้อ้างอิง jQuery object ที่กำลังเรียกใช้งานอยู่นั้น(การเรียกแทนตัวเอง) เราจะใช้ว่า this

$('div.foo').click(function() {   $(this).slideUp(); });

จากตัวอย่างนี้ เมื่อเราคลิก div.foo จะทำให้เกิด animation ค่อยๆเลื่อนขึ้นเพื่อซ่อนตัวเองจากการแสดงผล เพราะว่าตัว handle receiver ได้รับค่า this ที่ได้อ้างอิงกับ DOM element ก็คือตัวเอง

เมื่อข้อมูลในแบบ XML ที่ส่งคืนมาจากการเรียก AJAX เราสามารถใช้ function $() ในการแปลงเข้าไปเป็น jQuery object ได้ทันทีเลย และเมื่อสำเร็จแล้ว เราก็สามารถเรียก object ใดๆ ได้โดยใช้ .find() หรือ method อื่นๆก็ได้เช่นกัน

การคืนค่าว่างเปล่า

ใน jQuery 1.4 เมื่อเราไม่ใส่ค่าใดๆให้กับ method jQuery() จะทำให้ jQuery คืนค่าว่างเปล่ากลับมา แต่ถ้าเป็น version เก่า จะคืนค่า document node

ตัวอย่าง

ตัวอย่างที่ 1.1 หา p element ที่เป็น children ของ div element

<!DOCTYPE html> <html> <head>   <script src="/scripts/jquery-1.4.js"></script> </head> <body>   <p>one</p> <div> <p>two</p> </div> <p>three</p> <script>$("div > p").css("border", "1px solid gray");</script> </body> </html>

ตัวอย่างที่ 1.2 หา input type radio ใน form แรกของหน้าเว็บ

$("input:radio", document.forms[0]);

ตัวอย่างที่ 1.3 หา div element จาก XML ที่ได้มาจาก AJAX

$("div", xml.responseXML);

ตัวอย่างที่ 1.4 เปลี่ยนสี background ของหน้าเว็บให้เป็น สีดำ

$(document.body).css( "background", "black" );

ตัวอย่างที่ 1.5 ซ่อน input element ทุกอันที่อยู่ใน form

$(myForm.elements).hide() jQuery ( html, [ ownerDocument ] )

html คือstring ของ html ที่สร้างขึ้นมาจากโค้ดชุดนี้  ซึ่งจะต้องเป็น HTML ไม่ใช่ XML
ownerDocument คือ document ที่เราต้องการสร้าง element นี้

jQuery ( html, props )

html คือ string ของ HTML ที่สร้างขึ้นมาแบบเดี่ยวๆ เช่น <div> หรือ </div>
props คือ attribute , events, และ method ที่ใช้สำหรับ เรียก element ที่สร้างขึ้นมาใหม่

ถ้าเราใส่ string ลงไปเป็น parameter ของ $()  jQuery จะทำความเข้าใจว่าเป็น HTML ถ้าโค้ดมีลักษณะที่เป็น <tag ... > ถ้าไม่อย่างนั้น ก็จะประมวลผลให้เป็น selector expression แต่ถ้า string นั้นเป็น HTML jQuery จะทำการสร้าง DOM element ขึ้นมาใหม่ และคืนค่ากลับมา หรือเอาไว้อ้างอิงต่อไป ตัวอย่างการใช้ jQuery method สร้าง object

$('<p id="test">My <em>new</em> text</p>').appendTo('body');

เมื่อ HTML ที่มีความสมบูรณ์มากกว่าเป็น single tag โดยที่ไม่มี attribute เหมือนตัวอย่างดังกล่าวนี้ ก็จะถูกสร้างเป็น element ใหม่ในหน้าเว็บโดยกระบวนการ innerHTML โดย jQuery จะสร้าง <div> element ใหม่ขึ้นมาและใช้ innerHTML ช่วยในการใส่เข้าไปที่หน้าเว็บ แต่เมื่อเป็น single tag เช่น $('<img />') หรือ $('<a></a>') jQuery จะสร้าง element ใหม่โดยใช้ native javaScript  function createElement()

เพื่อให้มั่นใจว่าสามารถใช้งานได้ในทุก platform โค้ดที่ใส่จะต้องถูกต้องตามมาตรฐาน tag จะต้องมีค่า และมีการเปิดปิดอย่างถูกต้อง

$('<a href="http://jquery.com"></a>');

หรือ การเขียนในรูปแบบ XML ก็ไม่ต้องตามด้วยช่องว่างก่อน slash

$('<a/>');

tag ที่ไม่จำเป็นต้องใส่ element หรือ การปิด

$('<img />'); $('<input>');

ตัวอย่าง

ตัวอย่างที่ 1.6 สร้าง div element และ content ภายใน แบบ dynamic,โดยให้แสดงหลัง tag เปิดของ body element>> ก็จะทำงานโดยการสร้างผ่าน innerHTML โดยการสร้างแบบนี้จะมีข้อกำกัด และยืดหยุ่นน้อยกว่า

$("<div><p>Hello</p></div>").appendTo("body")

ตัวอย่างที่ 1.7 สร้าง DOM element

$("<div>", {   "class": "test",   text: "Click me!",   click: function(){     $(this).toggleClass("test");   } }).appendTo("body"); $("<input>", {   type: "text",   val: "Test",   focusin: function() {     $(this).addClass("active");   },   focusout: function() {     $(this).removeClass("active");   } }).appendTo("form");

jQuery ( callback )

callback คือ function ที่จะถูกเรียก เมื่อ DOM ถูกประกาศแล้ว (เมื่อหน้าเว็บโหลดเสร็จ)

function นี้ใช้งานได้เหมือน $(document).ready() โดยจะทำงานเมื่อ DOM ถูกประกาศขึ้นมาแล้ว 

ตัวอย่าง 1.8 ดำเนินการใน function เมื่อ DOM ถูกประกาศแล้ว

$(function){  //DOM ประกาศเรียบร้อยแล้ว }

ตัวอย่าง 1.9 ใช้ shortcut สำหรับ $(document).ready() 

jQuery(function($) {   // โค้ดที่ใช้งานด้วย $ alias ในแบบ failsafe });
Create: Modify : 2010-08-11 08:38:34 Read : 8001 URL :