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

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • each ( function ) ใช้วนลูปแต่ละ element ภายใน set
    size () คืนค่าจำนวนของ element ภายใน set
    text () ใช้คืนค่า text contents ของ first element ภายใน set
    text ( content ) ใช้กำหนดค่า text contents ให้กับ ทุก element ภายใน set
    text ( function ( index, text ) ) ใช้กำหนดค่า text contents ให้กับ ทุก element ภายใน set
    html () ใช้คืนค่า HTML Contents ภายใน first element ของ set
    html ( text ) ใช้กำหนด HTML Contents ให้กับ ทุก element ภายใน set
    html ( function ( index, html ) ) ใช้กำหนด HTML Contents ให้กับ ทุก element ภายใน set
    contents () ใช้ในการคืนค่า ทั้งหมดที่อยู่ภายใน tag ของ first element ภายใน set
    empty () ใช้ลบ content ทั้งหมด ของ ทุก element ภายใน set ออก
    remove () ใช้ลบ ทุก element ภายใน set ออกจาก pages
    remove ( [ selector ] ) ใช้ลบ ทุก element ภายใน set ออกจาก page หรือ เฉพาะ element ภายใน set ที่มีเงื่อนไขตรงกับ selector ที่กำหนด
    detach ( [ selector ] ) ใช้ลบ element นั้น ออกจาก page และคืนค่า element เหล่านั้นที่ถูกลบกลับมาด้วย
    clone ( copyHandlers ) ใช้ คัดลอก set ของ element มาจาก set เก่าทั้งหมด
    replaceWith ( newContent ) ใช้ในการแทนที่ ทุก element ภายใน set โดยค่า newContent ที่กำหนดลงไป
    replaceWith ( function ( index, oldContent ) ) ใช้ในการแทนที่ ทุก element ภายใน set โดย function จะใช้ return ค่าที่ต้องการใช้นำไปแทนที่
    replaceAll ( selector ) ใช้กำหนดให้ ทุก element ภายใน set ไปแทนที่ element ที่มี selector ตรงกับที่กำหนด
    after ( selector ) ใช้เพิ่ม element เข้าไป ( หรือย้าย element ในกรณีที่เอามาจากใน page ) ด้านหลัง ( หรือถ้ดไป ) ของ ทุก element ภายใน set
    after ( function ( index ) ) ใช้เพิ่ม element เข้าไป ( หรือย้าย element ในกรณีที่เอามาจากใน page ) ด้านหลัง ( หรือถ้ดไป ) ของ ทุก element ภายใน set
    before ( selector ) ใช้เพิ่ม element เข้าไป ( หรือย้าย element ในกรณีที่เอามาจากใน page ) ด้านหน้า ( หรือก่อนหน้า ) ของ ทุก element ภายใน set
    before ( function ( index ) ) ใช้เพิ่ม element เข้าไป ( หรือย้าย element ในกรณีที่เอามาจากใน page )
    append ( content ) ใช้เพิ่ม content เข้าไปในส่วนท้ายของ ทุก element ภายใน set
    append ( function ( index, html ) ) ใช้เพิ่ม content เข้าไปในส่วนท้ายของ ( last-element ) ทุก element ภายใน set
    appendTo ( target ) ใช้ move ทุก element ใน set เข้าไปในส่วนท้ายของ target
    prepend ( content ) ใช้เพิ่ม content ที่กำหนด ลงไปด้านหน้าสุด ( first-element ) ของทุก element ภายใน set
    prepend ( function ( index, html ) ) ใช้เพิ่ม content ที่กำหนด ลงไปด้านหน้าสุด ( first-element ) ของทุก element ภายใน set
    prependTo ( target ) ใช้ย้าย ทุก element ภายใน set เข้าไปยัง ด้านหน้าสุดของ target
    wrap ( wrapper ) ใช้กำหนดให้ ทุก element ภายใน set ถูกคลุมด้วย wrapper
    wrap ( function ( ) ) ใช้กำหนดให้ ทุก element ภายใน set ถูกคลุมด้วย ค่าที่ถูก return มาจาก function
    wrapInner ( wrapper ) ใช้กำหนดให้ content ของ ทุก element ภายใน set ถูกคลุมด้วย wrapper
    wrapInner ( function ( ) ) ใช้กำหนดให้ content ของ ทุก element ภายใน set ถูกคลุมด้วย wrapper
    wrapAll ( wrapper ) ใช้กำหนดให้ ทุก element ภายใน set ถูกคลุมด้วย wrapper
    unwrap() ใช้ลบ parent element ของ ทุก element ภายใน set
    insertAfter ( target ) ใช้กำหนดให้ ทุก element ภายใน set ถูกเพิ่มไว้ด้านหลังของ target
    insertBefore ( target ) ใช้กำหนดให้ ทุก element ภายใน set ถูกเพิ่มไว้ด้านหน้าของ target
    context ใช้อ้างถึงว่าเป็น node ตาม object ของ JavaScript
    selector ใช้คืนค่า selector
  • syntax :
    each ( function )

    return type :
    void, element

    content :
    ใช้วนลูปแต่ละ element ภายใน set
    โดย function ที่กำหนดจะมี parameter จำนวน 1 ตัว คือ ตำแหน่งของ element

    example :
    $("img").each( function(index) {
    	alert ( "Element at" + index + " have id : " + this.id );
    });

  • syntax :
    size ()

    return type :
    number

    content :
    คืนค่าจำนวนของ element ภายใน set

    example :
    var amount = $("a").size();

  • syntax :
    text ()

    return type :
    string

    content :
    ใช้คืนค่า text contents ของ first element ภายใน set

    example :
    alert ( $("div").text() );

  • syntax :
    text ( content )

    return type :
    void, element

    content :
    ใช้กำหนดค่า text contents ให้กับ ทุก element ภายใน set

    example :
    $("div").text("Hello, welcome to function.in.th");

  • syntax :
    text ( function ( index, text ) )

    return type :
    void, element

    content :
    ใช้กำหนดค่า text contents ให้กับ ทุก element ภายใน set

    example :
    $("div").text ( function ( index, html ) { 
    	if ( index % 2 == 0 )
    	{
    		return "Welcome to Function.in.th";
    	}else{
    		return "Hello, Welcome to me";
    	}
    } );

  • syntax :
    html ()

    return type :
    string

    content :
    ใช้คืนค่า HTML Contents ภายใน first element ของ set

    example :
    alert ( $("div").html() );

  • syntax :
    html ( text )

    return type :
    void, element

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

    example :
    $("div").html("<b>Hello</b>, welcome to <i>function.in.th</i>.");

  • syntax :
    html ( function ( index, html ) )

    return type :
    void, element

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

    example :
    $("li", "ul#group").html ( function ( index, html ) { 
    	return "My id : " + this.id + " and My class : " + this.className;
    } );

  • syntax :
    contents ()

    return type :
    string

    content :
    ใช้ในการคืนค่า ทั้งหมดที่อยู่ภายใน tag ของ first element ภายใน set

    example :
    alert ( $("div#dialog").contents() );

  • syntax :
    empty ()

    return type :
    void, element

    content :
    ใช้ลบ content ทั้งหมด ของ ทุก element ภายใน set ออก

    example :
    $("div#dialog").empty ();

  • syntax :
    remove ()

    return type :
    void, element

    content :
    ใช้ลบ ทุก element ภายใน set ออกจาก pages

    example :
    $("div#dialog").remove();

  • syntax :
    remove ( [ selector ] )

    return type :
    void, element

    content :
    ใช้ลบ ทุก element ภายใน set ออกจาก page
    หรือ เฉพาะ element ภายใน set ที่มีเงื่อนไขตรงกับ selector ที่กำหนด

    example :
    $("p").remove(":contains('Manchester United')");

  • syntax :
    detach ( [ selector ] )

    return type :
    void, element

    content :
    ใช้ลบ element นั้น ออกจาก page และคืนค่า element เหล่านั้นที่ถูกลบกลับมาด้วย
    หรือ จะลบเฉพาะ element ภายใน set ที่มีเงื่อนไขตรงกับ selector ที่กำหนด
    และคืนค่า element ที่ถูกลบเหล่าน้นมาด้วย

    example :
    var divDetach = $("div#dialog").detach();

  • syntax :
    clone ( copyHandlers )

    return type :
    element

    content :
    ใช้ คัดลอก set ของ element มาจาก set เก่าทั้งหมด
    โดยถ้ากำหนด argument เป็น true คือจะ copy event handler มาด้วย
    แต่ถ้ากำหนด argument เป็น false คือจะไม่ copy event handler มา

    example :
    $("div").clone(true);

  • syntax :
    replaceWith ( newContent )

    return type :
    void, element

    content :
    ใช้ในการแทนที่ ทุก element ภายใน set โดยค่า newContent ที่กำหนดลงไป
    ( โดยถ้า newContent เป็น element ที่มีอยู่จริงภายใน page ก็จะเป็นการ ย้าย element นั้น
    มาแทนที่ ทุก element ภายใน set )

    example :
    $("button").click(function () {
          $(this).replaceWith("<div>" + $(this).text() + "</div>");
     });
    $("button").replaceWith($("div"));

  • syntax :
    replaceWith ( function ( index, oldContent ) )

    return type :
    void, element

    content :
    ใช้ในการแทนที่ ทุก element ภายใน set โดย function จะใช้ return ค่าที่ต้องการใช้นำไปแทนที่
    หรือ element ที่ต้องการให้ไปแทนที่

    example :
    $("button").click(function () {
    	$(this).replaceWith( function ( index, oldContent ) { 
    		return "<div>" + $(this).text() + "</div>";
    	});
     });

  • syntax :
    replaceAll ( selector )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ภายใน set ไปแทนที่ element ที่มี selector ตรงกับที่กำหนด

    example :
    $("<b>Manchester United</b>").replaceAll("p");

  • syntax :
    after ( selector )

    return type :
    void, element

    content :
    ใช้เพิ่ม element เข้าไป ( หรือย้าย element  ในกรณีที่เอามาจากใน page )
    ด้านหลัง ( หรือถ้ดไป ) ของ ทุก element ภายใน set

    example :
    $("p").after("<b>Hello</b>");
    $("p").after("b");

  • syntax :
    after ( function ( index ) )

    return type :
    void, element

    content :
    ใช้เพิ่ม element เข้าไป ( หรือย้าย element  ในกรณีที่เอามาจากใน page )
    ด้านหลัง ( หรือถ้ดไป ) ของ ทุก element ภายใน set
    โดย function จะต้องคืนค่า html string ทีจะใช้ insert after แต่ละ element ภายใน set

    example :
    $("p").after ( function ( index ) { 
    	if ( index % 2 == 0 )
    	{
    		return "<b>Hello</b>";
    	}else{
    		return "<i>Hello</i>";
    	}
    } );

  • syntax :
    before ( selector )

    return type :
    void, element

    content :
    ใช้เพิ่ม element เข้าไป ( หรือย้าย element  ในกรณีที่เอามาจากใน page )
    ด้านหน้า ( หรือก่อนหน้า ) ของ ทุก element ภายใน set

    example :
    $("p").before("<b>Hello</b>");
    $("p").before("b");

  • syntax :
    before ( function ( index ) )

    return type :
    void, element 

    content :
    ใช้เพิ่ม element เข้าไป ( หรือย้าย element  ในกรณีที่เอามาจากใน page )
    ด้านหน้า ( หรือก่อนหน้า ) ของ ทุก element ภายใน set
    โดย function ที่จะต้องคืนค่า html string ทีจะใช้ insert before แต่ละ element ภายใน set

    example :
    $("p").before ( function ( index ) { 
    	if ( index % 2 == 0 )
    	{
    		return "<b>Hello</b>";
    	}else{
    		return "<i>Hello</i>";
    	}
    } );

  • syntax :
    append ( content )

    return type :
    void, element

    content :
    ใช้เพิ่ม content เข้าไปในส่วนท้ายของ ทุก element ภายใน set

    example :
    $("div").append("<b>Hello</b>");
    var appendElement = $("img.special")[0];
    $("div#test").append(appendElement);

  • syntax :
    append ( function ( index, html ) )

    return type :
    void, element

    content :
    ใช้เพิ่ม content เข้าไปในส่วนท้ายของ ( last-element ) ทุก element ภายใน set
    โดย function ที่จะต้องคืนค่า content ทีจะใช้ append เข้าไปในส่วยท้ายของแต่ละ element ภายใน set

    example :
    $("div").append ( function ( index, html ) { 
    	if ( index % 2 == 0 )
    	{
    		return $("img.special")[0];
    	}else{
    		return "<b>No Found Image</b>";
    	}
    } );

  • syntax :
    appendTo ( target )

    return type :
    void, element

    content :
    ใช้ move ทุก element ใน set เข้าไปในส่วนท้ายของ target

    example :
    $("b").appendTo("div");
    var appendToElement = $("div")[0];
    $("b").appendTo(appendToElement);

  • syntax :
    prepend ( content )

    return type :
    void, element

    content :
    ใช้เพิ่ม content ที่กำหนด ลงไปด้านหน้าสุด ( first-element ) ของทุก element ภายใน set
    ( คล้ายๆกับ append() แต่ append() จะเพิ่มไปด้านหลังสุด )
    ( ถ้า content เป็นการอ้างถึง element ภายใน page ก็จะเป็นการย้าย )

    example :
    $("p").prepend("<b>Hello</b>");

  • syntax :
    prepend ( function ( index, html ) )

    return type :
    void, elelment

    content :
    ใช้เพิ่ม content ที่กำหนด ลงไปด้านหน้าสุด ( first-element ) ของทุก element ภายใน set
    ( คล้ายๆกับ append() แต่ append() จะเพิ่มไปด้านหลังสุด )
    ( ถ้า content เป็นการอ้างถึง element ภายใน page ก็จะเป็นการย้าย )
    โดย function ที่จะต้องคืนค่า content ทีจะใช้ append เข้าไปในส่วยท้ายของแต่ละ element ภายใน set

    example :
    $("div").prepend ( function ( index, html ) { 
    	if ( index % 2 == 0 )
    	{
    		return $("img.special")[0];
    	}else{
    		return "<b>No Found Image</b>";
    	}
    } );

  • syntax :
    prependTo ( target )

    return type :
    void, element

    content :
    ใช้ย้าย ทุก element ภายใน set เข้าไปยัง ด้านหน้าสุดของ target
    ( คล้ายๆกับ appendTo() แต่ appendTo() จะเพิ่มไปด้านหลังสุด )

    example :
    $("b").prependTo("div");
    var prependToElement = $("div")[0];
    $("b").prependTo(prependToElement);

  • syntax :
    wrap ( wrapper )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ภายใน set ถูกคลุมด้วย wrapper

    example :
    $("div#dialog").wrap("<div class='popup'></div>");
    $("div#dialog").wrap( $("div#popup")[0] );

  • syntax :
    wrap ( function ( ) )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ภายใน set ถูกคลุมด้วย ค่าที่ถูก return มาจาก function

    example :
    $("p").wrap( function ( ) {
    	
    	return "<div class='" + $(this).text() + "'></div>";
    });
    $("p").wrap( function ( ) {
    	
    	return $("div#popup")[0];
    });

  • syntax :
    wrapInner ( wrapper )

    return type :
    void, element

    content :
    ใช้กำหนดให้ content ของ ทุก element ภายใน set ถูกคลุมด้วย wrapper

    example :
    $("div#dialog").wrapInner("<div class='popup'></div>");
    $("div#dialog").wrapInner( $("div#popup")[0] );

  • syntax :
    wrapInner ( function ( ) )

    return type :
    void, element

    content :
    ใช้กำหนดให้ content ของ ทุก element ภายใน set ถูกคลุมด้วย wrapper

    example :
    $("p").wrapInner( function ( ) {
    	
    	return "<div class='" + $(this).text() + "'></div>";
    });
    $("p").wrapInner( function ( ) {
    	
    	return $("div#popup")[0];
    });

  • syntax :
    wrapAll ( wrapper )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ภายใน set ถูกคลุมด้วย wrapper

    example :
    $("div#dialog").wrapAll("<div class='popup'></div>");
    $("div#dialog").wrapAll( $("div#popup")[0] );

  • syntax :
    unwrap()

    return type :
    void, element

    content :
    ใช้ลบ parent element ของ ทุก element ภายใน set

    example :
    $("button").toggle(function(){
    	
    	$("p").wrap("<div></div>");
    }, function(){
    	
    	$("p").unwrap();
    });

  • syntax :
    insertAfter ( target )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ภายใน set ถูกเพิ่มไว้ด้านหลังของ target

    example :
    var divGroup = $("div#group");
    $("p#group").insertAfter( divGroup );

  • syntax :
    insertBefore ( target )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ภายใน set ถูกเพิ่มไว้ด้านหน้าของ target

    example :
    var divGroup = $("div#group");
    $("p#group").insertBefore( divGroup );

  • syntax :
    context

    return type :
    node

    content :
    ใช้อ้างถึงว่าเป็น node ตาม object ของ JavaScript

    example :
    alert ( $("#dialog").context.tagName );
    alert ( $("#dialog").context.className );

  • syntax :
    selector

    return type :
    string

    content :
    ใช้คืนค่า selector

    example :
    alert ( $("#dialog").selector );
    alert ( $("ul").find("li").filter(".even").selector );

 
Share This Chapter Login with Facebook