jQuery Utility Function : สอน method และ property ของ Utility Function, เรียน method และ property ของ Utility Function
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • $.browser.msie จะคืนค่า true ถ้า browser ที่ใช้อยู่เป็น Microsoft Internet Explorer
    $.browser.mozilla จะคืนค่า true ถ้า browser ที่ใช้อยู่เป็น Firefox, Camino, Netscape
    $.browser.safari จะคืนค่า true ถ้า browser ที่ใช้อยู่เป็น Safari
    $.browser.opera จะคืนค่า true ถ้า browser ที่ใช้อยู่เป็น Opera
    $.browser.version จะคืนค่า version ของ browser ที่ใช้อยู่
    $.trim ( value ) ใช้ลบ ช่องว่าง ท่างด้านขวาและซ้ายออก
    $.each ( container, callback ) ใช้เข้าถึงแต่ละ element ภายใน container
    $.grep ( array, callback, invert ) ใช้ กรอง ข้อมูลจาก array ที่กำหนด แล้วคืนค่ามาเป็น array ใหม่
    $.map ( array, callback ) ใช้ เปลี่ยนแปลง ข้อมูชใน array ที่กำหนด แล้วคืนค่ามาเป็น array ใหม่
    $.inArray ( value, array ) ใช้ คืนค่า ตำแหน่งของ value ที่มีอยู่ใน array เป็น index ที่เท่าไร
    $.makeArray ( object ) ใช้ เปลี่ยนสภาพ object ให้เป็น array
    $.unique ( array ) ใช้ ทำให้ array ที่กำหนด เหลือแต่ค่าที่ไม่ซ้ำกัน
    $.extend ( target, source1, source2, ..., sourceN ) ใช้รวบรวม object หลายๆ object ให้เหลือเพียง object เดียว คือ target
    $.getScript ( url, callback ) ใช้สร้าง Object XHR
    jQuery.fx.off ใช้กำหนดค่าหรือคืนค่าว่า animation ทั้งหมด ถูกกำหนดสถานะเป็นอย่างไร
    jQuery.param ( object ) ใช้ในการเข้ารหัส object ที่กำหนด และจะคืนค่ากลับมาเป็น object ที่ถูกเข้ารหัสแล้ว
    $.contains ( container, contained ) ใช้ตรวจสอบว่า element ที่ตรงกับเงื่อนไขของ container เป็น child element ของ element ที่ตรงกับเงื่อนไขของ contained ใช่หรือไม่
    $.data ( element, key, value ) ใช้กำหนด ค่าข้อมูล โดยจะสมมติให้สัมพันธ์กับ element ที่กำหนด
    $.data ( element, key ) ใช้คืนค่า ข้อมูล ของ key ที่กำหนด
    $.removeData ( element, [ key ] ) ใช้ลบ ค่าข้อมูล ของ key ที่กำหนด
    $.globalEval ( code ) ใช้สั่งให้มีการประมวลผล code ที่กำหนด
    $.isArray ( object ) ใช้ตรวจสอบว่า object ที่กำหนดใช่ array หรือไม่
    $.isEmptyObject ( object ) ใช้ตรวจสอบว่า object ที่กำหนด เป็น object ว่างๆใช่หรือไม่
    $.isFunction ( object ) ใช้ตรวจสอบว่า object ที่กำหนด เป็น function ใช่หรือไม่
    $.isPlainObject ( object ) ใช้ตรวจสอบว่า object ที่กำหนด เป็นแบบ plain object ใช่หรือไม่
    $.isXMLDoc ( node ) ใช้ตรวจสอบว่า node ที่กำหนดเป็นแบบ XML Document ใช่หรือไม่
    $.merge ( firstArray, secondArray ) ใช้ merge array 2 ตัวให้เป็นตัวเดียว โดยรวมไว้ที่ firstArray
    $.proxy ( function, context ) เป็นการเรียกใช้ function ที่กำหนด ซึ่งอยู่ภายใน context ที่กำหนด
    $.proxy ( context, nameFunction ) เป็นการเรียกใช้ function ที่กำหนด ซึ่งอยู่ภายใน context ที่กำหนด
    $.parseJSON ( json ) ใช้แปลงค่า json ให้เป็น Object
    $.queue ( element, [ queueName ] ) ใช้คืนค่า queue function ของ queue ที่กำหนด ของ first element ที่อยู่ใน set ของ element ที่กำหนด
    $.queue ( element, queueName, arrayQueueFunction ) ใช้กำหนด queue function ให้กับ ทุก element ที่อยู่ใน set ของ element ที่กำหนด
    $.queue ( element, queueName, function ( next ) ) ใช้กำหนด queue function ให้กับ ทุก element ภายใน set
    $.dequeue ( element, [ queueName ] ) ใช้สั่งให้ queue funtion ปัจจุบัน ของทุก element ภายใน set ทำงาน
  • syntax :
    $.browser.msie

    return type :
    boolean

    content :
    จะคืนค่า true ถ้า browser ที่ใช้อยู่เป็น Microsoft Internet Explorer

    example :
    if ( $.browser.msie )
    {
    	alert ( "This is Microsoft Internet Explorer Browser." );
    }

  • syntax :
    $.browser.mozilla

    return type :
    boolean

    content :
    จะคืนค่า true ถ้า browser ที่ใช้อยู่เป็น Firefox, Camino, Netscape

    example :
    if ( $.browser.mozilla )
    {
    	alert ( "This is Firefox, Camino or Netscape Browser." );
    }

  • syntax :
    $.browser.safari

    return type :
    boolean

    content :
    จะคืนค่า true ถ้า browser ที่ใช้อยู่เป็น Safari

    example :
    if ( $.browser.safari )
    {
    	alert ( "This is Safari Browser." );
    }

  • syntax :
    $.browser.opera

    return type :
    boolean

    content :
    จะคืนค่า true ถ้า browser ที่ใช้อยู่เป็น Opera

    example :
    if ( $.browser.opera )
    {
    	alert ( "This is Opera Browser." );
    }

  • syntax :
    $.browser.version

    return type :
    boolean

    content :
    จะคืนค่า version ของ browser ที่ใช้อยู่

    example :
    alert ( $.browser.version );

  • syntax :
    $.trim ( value )

    return type :
    string

    content :
    ใช้ลบ ช่องว่าง ท่างด้านขวาและซ้ายออก

    example :
    alert ( $.trim("  Hello, This is website function.in.th ?        ") );

  • syntax :
    $.each ( container, callback )

    return type :
    void, array, object

    content :
    ใช้เข้าถึงแต่ละ element ภายใน container
    โดยถ้า container เป็น array แล้ว function callback จะมี parameter คือ index of array และ item ตามลำดับ
    แต่ถ้า container เป็น object แล้ว function callback จะมี parameter คือ property และ value ตามลำดับ

    example :
    var tobject = { one:1, two:2, three:3 };
    $.each ( tobject, function ( prop, value ) {
    	alert ( "Properties is : " + prop + " have a value is : " + value );
    });
    
    var tarray = [ 'one', 'two', 'three' ];
    $.each ( tarray, function ( index, value ) {
    	alert ( "The index at : " + index + " have a value is : " + value );
    });

  • syntax :
    $.grep ( array, callback, invert )

    return type :
    array

    content :
    ใช้ กรอง ข้อมูลจาก array ที่กำหนด แล้วคืนค่ามาเป็น array ใหม่
    โดย array คือ array ที่ต้องการจะถูกกรองข้อมูล
    โดย callback จะเป็น function ที่ใช้ในการกรองข้อมูล มี parameter 2 ตัว คือ value และ index ตามลำดับ
    โดย invert ใช้กำหนด ค่า boolean คือ 
    ถ้ากำหนด false หรือไม่กำหนด แล้ว function callback return true มาจะเป็นการรวบรวม
    แต่ถ้ากำหนด true แล้ว function callback return false มาจะเป็นการรวบรวม

    example :
    var oldNumbers = [ 100, 120, 140, 160, 180, 200 ];
    var newNumbers = $.grep( oldNumbers, function(value,index){ return value>150; } );
    var newNumbers2 = $.grep( oldNumbes, "a>150" );

  • syntax :
    $.map ( array, callback )

    return type :
    array

    content :
    ใช้ เปลี่ยนแปลง ข้อมูชใน array ที่กำหนด แล้วคืนค่ามาเป็น array ใหม่
    โดย array คือ array ที่ต้องการจะถูกเปลี่ยนแปลงข้อมูล
    โดย callback จะเป็น function ที่ใช้ในการเปลี่ยนแปลงข้อมูล มี parameter 2 ตัว คือ value และ index ตามลำดับ

    example :
    var oldNumbers = [ 100, 120, 140, 160, 180, 200 ];
    var newNumbers = $.map( oldNumbers, function(value,index){ return value+150; } );
    var newNumbers2 = $.map( oldNumbes, "a+150" );

  • syntax :
    $.inArray ( value, array )

    return type :
    number

    content :
    ใช้ คืนค่า ตำแหน่งของ value ที่มีอยู่ใน array เป็น index ที่เท่าไร ( คืนค่า index แรกที่พบ และค้นหาจากซ้ายมาขวา )
    โดยจะคืนค่า -1 มาถ้าไม่พบ value ที่กำหนดใน array

    example :
    var arrNumbers = [ 100, 120, 140, 160, 180, 200 ];
    alert ( $.inArray(125, arrNumbers) );

  • syntax :
    $.makeArray ( object )

    return type :
    array

    content :
    ใช้ เปลี่ยนสภาพ object ให้เป็น array

    example :
    var myobject = { one:1, two:2, three:3 };
    var myarray = $.makeArray(myobject);

  • syntax :
    $.unique ( array )

    return type :
    array

    content :
    ใช้ ทำให้ array ที่กำหนด เหลือแต่ค่าที่ไม่ซ้ำกัน

    example :
    var arrNumbers = [ 100, 120, 140, 160, 180, 200, 180, 120 ];
    var newNumbers = $.unique(arrNumbers);

  • syntax :
    $.extend ( target, source1, source2, ..., sourceN )

    return type :
    void

    content :
    ใช้รวบรวม object หลายๆ object ให้เหลือเพียง object เดียว คือ target
    ( เช่น รวมจาก source1, source2, ..., sourceN รวมถึง target ให้เป็น object เดียวคือ object target )

    example :
    var target = { a:1, b:2, c:3 };
    var source1 = { c:4, d:5, e:6 };
    var source2 = { e:7, f:8, g:9 };
    alert ( $.toSource(target) );
    $.extend(target,source1,source2);
    alert ( $.toSource(target) );

  • syntax :
    $.getScript ( url, callback )

    return type :
    Object ( XHR Instance )

    content :
    ใช้สร้าง Object XHR ที่ติดต่อผ่าน url ที่กำหนด โดย method=get
    โดย callback คือ function ที่ถูกเรียกใช้งานหลังจากที่ resource ได้ถูก load เสร็จแล้ว
    ซึ่งมี parameter 2 ตัว ได้แก่ response text และ status code

    example :
    $.getScript( "test.js" );

  • syntax :
    jQuery.fx.off

    return type :
    void, boolean

    content :
    ใช้กำหนดค่าหรือคืนค่าว่า animation ทั้งหมด ถูกกำหนดสถานะเป็นอย่างไร
    โดยถ้ากำหนด true คือ animation ทั้งหมดจะถูก diabled
    แต่ถ้ากำหนด false คือ animation ทั้งหมดจะถูก enabled

    example :
    jQuery.fx.off = false;
    alert ( jQuery.fx.off );

  • syntax :
    jQuery.param ( object )

    return type :
    string

    content :
    ใช้ในการเข้ารหัส object ที่กำหนด และจะคืนค่ากลับมาเป็น object ที่ถูกเข้ารหัสแล้ว

    example :
    var parameter = { name: "function", age: "10" };
    var serialText = jQuery.param ( parameter );
    alert ( serialText );

  • syntax :
    $.contains ( container, contained )

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า element ที่ตรงกับเงื่อนไขของ container
    เป็น child element ของ element ที่ตรงกับเงื่อนไขของ contained ใช่หรือไม่

    example :
    alert ( $.contains( $("div#dialog"), $("body") ) );

  • syntax :
    $.data ( element, key, value )

    return type :
    void

    content :
    ใช้กำหนด ค่าข้อมูล โดยจะสมมติให้สัมพันธ์กับ element ที่กำหนด

    example :
    $.data ( $("div#dialog"), "data", { name: "function", age: "1" } );
    var objData = $.data ( $("div#dialog"), "data" );
    alert ( objData.name );

  • syntax :
    $.data ( element, key )

    return type :
    object, string

    content :
    ใช้คืนค่า ข้อมูล ของ key ที่กำหนด

    example :
    $.data ( $("div#dialog"), "data", { name: "function", age: "1" } );
    var objData = $.data ( $("div#dialog"), "data" );
    alert ( objData.name );

  • syntax :
    $.removeData ( element, [ key ] )

    return type :
    void

    content :
    ใช้ลบ ค่าข้อมูล ของ key ที่กำหนด

    example :
    $.data ( $("div#dialog"), "data", { name: "function", age: "1" } );
    var objData = $.data ( $("div#dialog"), "data" );
    alert ( objData.name );
    $.removeData ( $("div#dialog"), "data" );
    $.data ( $("div#dialog"), "data", "website function.in.th" );
    alert ( $.data ( $("div#dialog"), "data" ) );

  • syntax :
    $.globalEval ( code )

    return type :
    void

    content :
    ใช้สั่งให้มีการประมวลผล code ที่กำหนด

    example :
    $.globlaEval ( " alert ( 'Welcome to Function.in.th' ) ; " );

  • syntax :
    $.isArray ( object )

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า object ที่กำหนดใช่ array หรือไม่

    example :
    if ( $.isArray ( [ ] ) )
    {
    	alert ( "This object is array." );
    }
    else
    {
    	alert ( "This object is not array." );
    }

  • syntax :
    $.isEmptyObject ( object )

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า object ที่กำหนด เป็น object ว่างๆใช่หรือไม่

    example :
    alert ( $.isEmptyObject ( [ ] ) );
    alert ( $.isEmptyObject ( { } ) );

  • syntax :
    $.isFunction ( object )

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า object ที่กำหนด เป็น function ใช่หรือไม่

    example :
    var myClick = function ( ) { "Event Click Occurs." };
    alert ( $.isFunction ( myClick ) );

  • syntax :
    $.isPlainObject ( object )

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า object ที่กำหนด เป็นแบบ plain object ใช่หรือไม่
    ( plain object ได้แก่ { } หรือ มีการ new Object ( ); )

    example :
    var myObject = new String ( "Welcome to website." );
    alert ( $.isPlainObject ( myObject ) );
    alert ( $.isPlainObject ( "Welcome to website." ) );

  • syntax :
    $.isXMLDoc ( node )

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า node ที่กำหนดเป็นแบบ XML Document ใช่หรือไม่

    example :
    if ( $.isXMLDoc ( $("body") ) )
    {
    	alert ( "This object is XML Document." );
    }
    else
    {
    	alert ( "This object is not XML Document." );
    }

  • syntax :
    $.merge ( firstArray, secondArray )

    return type :
    void

    content :
    ใช้ merge array 2 ตัวให้เป็นตัวเดียว โดยรวมไว้ที่ firstArray

    example :
    var first = [ "website", "function", "in.th" ];
    var second = [ "website", "catalogtoday", "com" ];
    $.image ( first, second );
    alert ( first );

  • syntax :
    $.proxy ( function, context )

    return type :
    void

    content :
    เป็นการเรียกใช้ function ที่กำหนด ซึ่งอยู่ภายใน context ที่กำหนด

    example :
    var website = {
    	name: "function.in.th",
    	showMe: function ( ) 
    	{
    		alert ( this.name );
    	}
    };
    $.proxy ( website.showMe, website );

  • syntax :
    $.proxy ( context, nameFunction )

    return type :
    void

    content :
    เป็นการเรียกใช้ function ที่กำหนด ซึ่งอยู่ภายใน context ที่กำหนด

    example :
    var website = {
    	name: "function.in.th",
    	showMe: function ( ) 
    	{
    		alert ( this.name );
    	}
    };
    $.proxy ( website, "showMe" );

  • syntax :
    $.parseJSON ( json )

    return type :
    Object

    content :
    ใช้แปลงค่า json ให้เป็น Object
    โดยค่า json มีรูปแบบ ได้แก่ "{'name':'Function.in.th'}'"

    example :
    var jsonString = "{'name':'Function.in.th'}'";
    var websiteObject = $.parseJSON ( jsonString );
    alert ( websiteObject.name );

  • syntax :
    $.queue ( element, [ queueName ] )

    return type :
    void

    content :
    ใช้คืนค่า queue function ของ queue ที่กำหนด ของ first element ที่อยู่ใน set ของ element ที่กำหนด
    โดยถ้าไม่กำหนด queueName จะหมายถึง ทุก queue ของ animation
    และคำสั่งต่างๆที่เกี่ยวกับการเคลื่อนไหวจะถือเป็นการทำงานของ animation ด้วย ดังตัวอย่าง

    example :
    $("div#animate").show ( "slow" );
    $("div#animate").animate( { left:"+=200" }, 2000 );
    $("div#animate").animate( { left:"-=200" }, 2000 );
    $("div#animate").hide ( "slow" );
    var queueDiv = $.queue ( $("div#animate") );
    alert ( "Number of Queue : " + queueDiv.length );

  • syntax :
    $.queue ( element, queueName, arrayQueueFunction )

    return type :
    void

    content :
    ใช้กำหนด queue function ให้กับ ทุก element ที่อยู่ใน set ของ element ที่กำหนด

    example :
    $.queue ( $("div#animate"), "testQueue", [
    	function ( next ) { $(this).show ( "slow" ); },
    	function ( next ) { $(this).animate ( { left:"+=200" }, 2000 ); },
    	function ( next ) { $(this).animate ( { left:"-=200" }, 2000 ); },
    	function ( next ) { $(this).hide ( "slow" ); }
    ] );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );

  • syntax :
    $.queue ( element, queueName, function ( next ) )

    return type :
    void

    content :
    ใช้กำหนด queue function ให้กับ ทุก element ภายใน set

    example :
    $.queue ( $("div#animate"), "testQueue", [
    	function ( next ) { $(this).show ( "slow" ); },
    	function ( next ) { $(this).animate ( { left:"+=200" }, 2000 ); },
    	function ( next ) { $(this).animate ( { left:"-=200" }, 2000 ); }
    ] );
    $.queue ( $("div#animate"), "testQueue", function ( next ) { $(this).hide ( "slow" ); } );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );

  • syntax :
    $.dequeue ( element, [ queueName ] )

    return type :
    void

    content :
    ใช้สั่งให้ queue funtion ปัจจุบัน ของทุก element ภายใน set ทำงาน

    example :
    $.queue ( $("div#animate"), "testQueue", [
    	function ( next ) { $(this).show ( "slow" ); },
    	function ( next ) { $(this).animate ( { left:"+=200" }, 2000 ); },
    	function ( next ) { $(this).animate ( { left:"-=200" }, 2000 ); },
    	function ( next ) { $(this).hide ( "slow" ); }
    ] );
    jQuery.queue ( $("div#animate"), "testQueue" );
    jQuery.queue ( $("div#animate"), "testQueue" );
    jQuery.queue ( $("div#animate"), "testQueue" );
    jQuery.queue ( $("div#animate"), "testQueue" );

 
Share This Chapter Login with Facebook