สุดยอดฟังก์ชั่นของ JQuery ที่ใช้บ่อยที่สุด

ในการพัฒนาเว็บไชค์โดยใช้ jquery นั้นมีฟังก์ชั่นมากมายให้เราเรียกใช้ได้ครับ แต่มีฟังก์ชั่นหลายๆตัวที่เราใช้บ่อยมากๆ ซึ่งจะมาสรุปฟังกชั่นดังกล่าวคร่าวๆดังต่อไปนี้

หมายเหตุ 1: ในตัวอย่างเราจะเห็นตัวเลข "1000" ซึ่งเป็นการำกหนดค่าความเร็วของการแสดงผลภาพเคลื่อนไหว ซึ่งเราสามารถเปลี่ยนค่าดังกล่าวตามใจชอบว่า จะให้มันแสดงเร็วขึ้นหรือช้าลง. 
หมายเหตุ 2: ในตัวอย่างเราจะเห็นหากเห็น "#DivID" จะอ้างอิงถึง ค่าใดๆที่เรากำหนดให้กับ id ของแท็ค html ต่างๆ. 

1. การใช้ jQuery Selectors

// คืนค่าของ element โดย id
$("#ElementID");

// คืนค่าของ element โดย css class
$(".ClassName");

// คืนค่าของ elements ที่ซึ่งมีค่าตาม id ที่กำหนด
$("[id*='value']");

// คืนค่าของ elements ที่ขึ้นต้นด้วยค่า id ตามที่กำหนด
$("[id^='value']");

// คืนค่าของ elements ที่ลงท้ายด้วยค่า id ตามที่กำหนด
$("[id$='value']");

// คืนค่า elements ทั้งหมด
$("div");

2. ฟังกชั่น Toggle, Show และ Hide

// สั่งให้ซ่อนหรือแสดง element
$("#DivID").toggle(1000);

// ทำ event อื่นๆเมื่อทำการซ่อนหรือแสดงเสร็จแล้ว
$("#DivID").toggle(1000, function () {
alert("Toggle Complete");
});


// ซ่อน element
$("#DivID").hide(1000);

// ทำ event อื่นๆเมื่อทำการซ่อนเสร็จแล้ว
$("#DivID").hide(1000, function () {
alert("Hide Complete");
});


// แสดง element
$("#DivID").show(1000);

// ทำ event อื่นๆเมื่อทำการแสดงเสร็จแล้ว
$("#DivID").show(1000, function () {
alert("Show Complete");
});

3. ฟังกชั่น Slide

// สั่งให้ slide up หรือ slide down
$("#DivID").slideToggle(1000);

// ทำ event อื่นๆเมื่อทำการ slide up หรือ slide down เสร็จแล้ว
$("#DivID").slideToggle(1000, function () {
alert("Slide Toggle Complete");
});

// slide up
$("#DivID").slideUp(1000);

// ทำ event อื่นๆเมื่อทำการ slide up เสร็จแล้ว
$("#DivID").slideUp(1000, function () {
alert("Slide Up Complete");
});

// slide down
$("#DivID").slideDown(1000);

// ทำ event อื่นๆเมื่อทำการ slide down เสร็จแล้ว
$("#DivID").slideDown(1000, function () {
alert("Slide Down Complete");
});

4. ฟังกชั่น Fade

// fade in
$("#DivID").fadeIn(1000);

// ทำ event อื่นๆเมื่อทำการ fade in เสร็จแล้ว
$("#DivID").fadeIn(1000, function () {
alert("Fade In Complete");
});

// fade out
$("#DivID").fadeOut(1000);

// ทำ event อื่นๆเมื่อทำการ fade out เสร็จแล้ว
$("#DivID").fadeOut(1000, function () {
alert("Fade Out Complete");
});

// fade to
$("#DivID").fadeTo(1000, 0.25);

// ทำ event อื่นๆเมื่อทำการ fade to เสร็จแล้ว
$("#DivID").fadeTo(1000, 0.25, function () {
alert("Fade To Complete");
});

5. ฟังกชั่น Animate

$("#DivID").animate({ opacity: 0.25 }, 1000);

// ทำ event อื่นๆเมื่อทำการ animate เสร็จแล้ว
$("#DivID").animate({ opacity: 0.25 }, 1000, function () {
alert("Opacity Animation Complete");
});

6. ฟังกชั่นการเพิ่มและลบ CSS Classes

// การเพิ่ม css class
$("#DivID").addClass("newclassname");

// การลบ css class
$("#DivID").removeClass("classname");

// การเพิ่มและลบ css class ในเวลาเดียวกัน
$("#DivID").removeClass("classname").addClass("newclassname");

// การเพิ่มและลบ หลายๆ classes พร้อมกัน
$("#DivID").removeClass("classname classname2").addClass("newclassname newclassname2");

7. ฟังกชั่นการคืนค่าและกำหนดค่าใน Textbox

// การกำคืนค่าจาก textbox
var TextboxValue = $("#TextboxID").val();

// การกำหนดค่าให้ textbox
$("#TextboxID").val("New Textbox Value Here");

8. ฟังกชั่นการคืนค่าและกำหนดค่า Element ของ HTML

// การคืนค่า element html
var DivHTML = $("#DivID").html();

// การกำหนดค่า element html
$("#DivID").html("This is the new html");

9. ฟังกชั่นการคืนค่าและกำหนดค่า Element ของ Text

// การคืนค่าของ text element
var DivText = $("#DivID").text();

// การกำหนดค่า text element
$("#DivID").text("This is the new text.");

10. ฟังกชั่นการคืนค่าและกำหนดค่า Element ของ Width & Height

// การคืนค่า element height
var ElementHeight = $("#DivID").height();

// การกำหนดค่า element height
$("#DivID").height(300);


//การคืนค่า element width
var ElementWidth = $("#DivID").width();

//การกำหนดค่า element width
$("#DivID").width(600);

11. การเปลี่ยนค่า Element ของ CSS Property

$("#DivID").css("background-color", "#000");
$("#DivID").css("border", "solid 2px #ff0000");

12. ป้อนกันการคลิกขวาบน Mouse 

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

13. เชค element ว่ามีอยู่หรือไม่

if ($("#someDiv").length) {
    //it exists...
}
});

14. การโคลน Object
โดยปกติจะใช้เมธอด .clone() ของ jQuery ในการโคลน DOM ต่างๆ.

// Clone the DIV
var cloned = $('#somediv').clone();

แต่ตัวเมธอด clone() ไม่สามารถโคลน JavaScript object ได้ หากต้องการที่จะโคลน JavaScript object ให้ใช้วิธีดังต่อไปนี้.

// Shallow copy
var newObject = jQuery.extend({}, oldObject);
 
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

15. ตรวจสอบว่า element นั้นๆถูกซ่อนอยู่หรือไม่

if($(element).is(":visible") == "true") {
       //The element is Visible
}

16. วิธีการเรียก Document Ready

//วิธีการแบบเดิมๆ
$(document).ready(function() {
    //document ready
});
//แบบใหม่
$(function(){
    //document ready
});

17. การนับจำนวน element 

$("#foo > div").size()

18. การจัดกึ่งกลางให้ element อ้างอิงตามขนาดหน้าจอ

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}
 
//Use the above function as:
$(element).center();

19. คืนค่าตำแหน่ง mouse cursor ตามแนวแกน x แกน y

$().mousemove(function(e){
    //display the x and y axis values inside the P element
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});
 
  

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.