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

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • attr ( name ) ใช้คืนค่า ค่าข้อมูล ของ attribute ที่กำหนด จาก first element ของ set
    attr ( name, value ) ใช้กำหนด ค่าข้อมูลให้กับ attribute ที่กำหนด โดยจะกำหนดให้กับทุก element ภายใน set
    attr ( attributes ) ใช้กำหนด ค่าข้อมูลให้กับ attribute ที่กำหนด โดยจะกำหนดให้กับทุก element ภายใน set
    attr ( attributeName, function ( index, attr ) ) ใช้กำหนด ค่าข้อมูลให้กับ attribute ที่กำหนด โดยจะกำหนดให้กับทุก element ภายใน set
    css ( name ) ใช้คืนค่า ค่าข้อมูลของ css ตาม name ที่กำหนด โดยจะคืนมาเฉพาะค่าของ first element ภายใน set
    css ( name, value ) ใช้กำหนด css เข้าไปในทุก element ภายใน set
    css ( properties ) ใช้กำหนด css เข้าไปในทุก element ภายใน set
    css ( propertyName, function ( index, value ) ) ใช้กำหนด css เข้าไปในทุก element ภายใน set
    removeAttr ( name ) ใช้ลบ attribute ที่กำหนด ออกจาก ทุก element ภายใน set
    addClass ( name ) ใช้เพิ่ม class เข้าไปในทุก element ภายใน set
    addClass ( function ( index, class ) ) ใช้เพิ่ม class เข้าไปในทุก element ภายใน set
    removeClass ( name ) ใช้ลบ class ออกจากทุก element ภายใน set
    removeClass ( function ( index, class ) ) ใช้ลบ class ออกจากทุก element ภายใน set
    toggleClass ( name ) ใช้เพิ่มหรือลบ class ที่กำหนดออกจาก ทุก element ภายใน set
    toggleClass ( function ( index, class ) ) ใช้เพิ่มหรือลบ class ที่กำหนดออกจาก ทุก element ภายใน set
    hasClass ( name ) ใช้ตรวจสอบว่า element ภายใน set มีอย่างน้อย 1 element ที่มี class ที่กำหนดใช่หรือไม่
    val ( value ) ใช้กำหนดค่า value ให้กับ ทุก element ภายใน set
    val () ใช้คืนค่า value ของ first element ภายใน set
    val ( function ( index, value ) ) ใช้กำหนดค่า value ให้กับ ทุก element ภายใน set
    width () ใช้คืนค่า ความกว้าง ของ first element ภายใน set
    width ( value ) ใข้กำหนดค่า ความกว้าง ให้กับ ทุก element ภายใน set
    width ( function ( index, width ) ) ใข้กำหนดค่า ความกว้าง ให้กับ ทุก element ภายใน set
    height () ใช้คืนค่า ความสูง ของ first element ภายใน set
    height ( value ) ใข้กำหนดค่า ความสูง ให้กับ ทุก element ภายใน set
    height ( function ( index, height ) ) ใข้กำหนดค่า ความสูง ให้กับ ทุก element ภายใน set
    scrollLeft () ใช้คืนค่า ตำแหน่ง ของ scroll เมื่อเทียบกับ element หรือ document หรือ windows ในแนวนอน
    scrollLeft ( value ) ใช้เลื่อน scroll ของ element หรือ document หรือ windows ในแนวนอนไปตามจำนวนที่กำหนด
    scrollTop () ใช้คืนค่า ตำแหน่ง ของ scroll เมื่อเทียบกับ element หรือ document หรือ windows ในแนวตั้ง
    scrollTop ( value ) ใช้เลื่อน scroll ของ element หรือ document หรือ windows ในแนวตั้งไปตามจำนวนที่กำหนด
    position () ใช้คืนค่า top และ left ของ first element ภายใน set โดยเทียบจาก parent
    offset ( options [, results ] ) ใช้หาค่า offset ( โดยจะคืนมาแบบ object ที่มี property ได้แก่ left และ top )
    innerHeight () ใช้คืนค่า ขนาดความสูงด้านใน ของ first element ภายใน set
    outerHeight ( [ includeMargin ] ) ใช้คืนค่า ขนาดความสูหงด้านนอก ของ first element ภายใน set
    innerWidth () ใช้คืนค่า ขนาดความกว้างด้านใน ของ first element ภายใน set
    outerWidth ( [ includeMargin ] ) ใช้คืนค่า ขนาดความกว้างด้านนอก ของ first element ภายใน set
  • syntax :
    attr ( name )

    return type :
    string, undefined

    content :
    ใช้คืนค่า ค่าข้อมูล ของ attribute ที่กำหนด จาก first element ของ set
    หรือจะคืนค่า undefined ในกรณีที่ set เป็น empty หรือ first element ไม่มี attributen name ตามที่กำหนด
    ( ใน jQuery สามารถกำหนด attribute ภายใน tag html เป็นอะไรก็ได้ ซึ่ง jQuery สามารถเรียกใช้ได้ด้วย 
    แต่จะไม่ validate html ตามหลักของ w3c )

    example :
    alert ( $("img").attr("custom") );

  • syntax :
    attr ( name, value )

    return type :
    void, element

    content :
    ใช้กำหนด ค่าข้อมูลให้กับ attribute ที่กำหนด โดยจะกำหนดให้กับทุก element ภายใน set
    โดยสามารถกำหนด value แบบ function ได้ด้วย

    example :
    $("*").attr("title", function(index){
    	return "Element at : " + index + " have id : " + this.id;
    });

  • syntax :
    attr ( attributes )

    return type :
    void, element

    content :
    ใช้กำหนด ค่าข้อมูลให้กับ attribute ที่กำหนด โดยจะกำหนดให้กับทุก element ภายใน set

    example :
    $("input").attr({
    	value:	"",
    	title:	"Please enter a value."
    });

  • syntax :
    attr ( attributeName, function ( index, attr ) )

    return type :
    void, element

    content :
    ใช้กำหนด ค่าข้อมูลให้กับ attribute ที่กำหนด โดยจะกำหนดให้กับทุก element ภายใน set

    example :
    $("li", "ul#group").attr( "id", function ( index, attr ) { 
    	if ( index % 2 == 0 )
    	{
    		return "even";
    	}else{
    		return "odd";
    	}
    } );

  • syntax :
    css ( name )

    return type :
    string

    content :
    ใช้คืนค่า ค่าข้อมูลของ css ตาม name ที่กำหนด โดยจะคืนมาเฉพาะค่าของ first element ภายใน set

    example :
    alert( $("img[title]").css("width") );

  • syntax :
    css ( name, value )

    return type :
    void, element

    content :
    ใช้กำหนด css เข้าไปในทุก element ภายใน set

    example :
    $("img").css("width", function() {
    	if ( this.id = "big" ) {
    		return $(this).width() + 50 + "px";
    	} else {
    		return $(this).width() - 50 + "px";
    	}
    });

  • syntax :
    css ( properties )

    return type :
    void, element

    content :
    ใช้กำหนด css เข้าไปในทุก element ภายใน set

    example :
    $("img").css({
    	width:	"300px",
    	height:	"200px"
    });

  • syntax :
    css ( propertyName, function ( index, value ) )

    return type :
    void, element

    content :
    ใช้กำหนด css เข้าไปในทุก element ภายใน set
    โดย function นั้นจะต้องคืนค่า string ทีจะใช้เป็น value ที่ใช้ในแต่ละ element ภายใน set

    example :
    $("div").css ( "font-size", function ( index, value ) { 
    	if ( index % 2 == 0 )
    	{
    		return "10px";
    	}else{
    		return "15px";
    	}
    } );

  • syntax :
    removeAttr ( name )

    return type :
    void, element

    content :
    ใช้ลบ attribute ที่กำหนด ออกจาก ทุก element ภายใน set

    example :
    $("input").removeAttr("value"); 

  • syntax :
    addClass ( name )

    return type :
    void, element

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

    example :
    $("img").addClass("hover");
    $("p").addClass("hover selected");

  • syntax :
    addClass ( function ( index, class ) )

    return type :
    void, element

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

    example :
    $("li", "ul#group").addClass( function ( index, class ) { 
    	if ( index % 2 == 0 )
    	{
    		return "even";
    	}else{
    		return "odd";
    	}
    } );

  • syntax :
    removeClass ( name )

    return type :
    void, element

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

    example :
    $("img").removeClass("hover");
    $("p").removeClass("hover selected");

  • syntax :
    removeClass ( function ( index, class ) )

    return type :
    void, element

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

    example :
    $("li", "ul#group").removeClass( function ( index, class ) { 
    	if ( index % 2 == 0 )
    	{
    		return "even";
    	}else{
    		return "odd";
    	}
    } );

  • syntax :
    toggleClass ( name )

    return type :
    void, element

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

    example :
    $("input").toogleClass("hover");

  • syntax :
    toggleClass ( function ( index, class ) )

    return type :
    void, element

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

    example :
    $("li", "ul#group").toggleClass ( function ( index, class ) {  
    	if ( index % 2 == 0 )
    	{
    		return "hover-even";
    	}else{
    		return "hover-odd";
    	}
    } );

  • syntax :
    hasClass ( name )

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า element ภายใน set มีอย่างน้อย 1 element ที่มี class ที่กำหนดใช่หรือไม่

    example :
    if ( $("img[title]").hasClass("selected") ) {
    	alert ( "yes" );
    }

  • syntax :
    val ( value )

    return type :
    void, element

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

    example :
    $("input").val("Hello, welcome to function.in.th");

  • syntax :
    val ()

    return type :
    string

    content :
    ใช้คืนค่า value ของ first element ภายใน set
    ถ้า first element เป็น multi-select element จะคืนค่า array value ของ selection

    example :
    alert ( $("input").val() );

  • syntax :
    val ( function ( index, value ) )

    return type :
    void, element

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

    example :
    $("input[type=text]", "#formCustomer").val( function ( index, value ) { 
    	return "My id : " + this.id + " and My class : " + this.className;
    } );

  • syntax :
    width ()

    return type :
    number

    content :
    ใช้คืนค่า ความกว้าง ของ first element ภายใน set

    example :
    alert ( $("img").width() );

  • syntax :
    width ( value )

    return type :
    void, element

    content :
    ใข้กำหนดค่า ความกว้าง ให้กับ ทุก element ภายใน set

    example :
    $("img[title]").width(500);

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

    return type :
    void, element

    content :
    ใข้กำหนดค่า ความกว้าง ให้กับ ทุก element ภายใน set

    example :
    $("div").width ( function ( index, width ) {
    	if ( index % 2 == 0 )
    	{
    		return "80px";
    	}else{
    		return "120px";
    	}
    } );

  • syntax :
    height ()

    return type :
    number

    content :
    ใช้คืนค่า ความสูง ของ first element ภายใน set

    example :
    alert ( $("img").height() );

  • syntax :
    height ( value )

    return type :
    void, element

    content :
    ใข้กำหนดค่า ความสูง ให้กับ ทุก element ภายใน set

    example :
    $("img[title]").height(300);

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

    return type :
    void, element

    content :
    ใข้กำหนดค่า ความสูง ให้กับ ทุก element ภายใน set

    example :
    $("div").height ( function ( index, height ) {
    	if ( index % 2 == 0 )
    	{
    		return "100px";
    	}else{
    		return "150px";
    	}
    } );

  • syntax :
    scrollLeft ()

    return type :
    number

    content :
    ใช้คืนค่า ตำแหน่ง ของ scroll เมื่อเทียบกับ element หรือ document หรือ windows ในแนวนอน

    example :
    alert ( $(document).scrollLeft() );

  • syntax :
    scrollLeft ( value )

    return type :
    void, element

    content :
    ใช้เลื่อน scroll ของ element หรือ document หรือ windows ในแนวนอนไปตามจำนวนที่กำหนด

    example :
    $(document).scrollLeft(-10);

  • syntax :
    scrollTop ()

    return type :
    number

    content :
    ใช้คืนค่า ตำแหน่ง ของ scroll เมื่อเทียบกับ element หรือ document หรือ windows ในแนวตั้ง

    example :
    alert ( $(document).scrollTop() );

  • syntax :
    scrollTop ( value )

    return type :
    void, element

    content :
    ใช้เลื่อน scroll ของ element หรือ document หรือ windows ในแนวตั้งไปตามจำนวนที่กำหนด

    example :
    $(document).scrollTop(-10);

  • syntax :
    position ()

    return type :
    object

    content :
    ใช้คืนค่า top และ left ของ first element ภายใน set โดยเทียบจาก parent

    example :
    var myObj = $("#dialog").position();

  • syntax :
    offset ( options [, results ] )

    return type :
    element, object

    content :
    ใช้หาค่า offset ( โดยจะคืนมาแบบ object ที่มี property ได้แก่ left และ top )
    โดยจะเปรียบเทียบระหว่าง first element ภายใน set กับ tag body
    ( หรือจะเปรียบเทียบในรูปแบบอื่นๆ ขึ้นอยู่กับ options ที่กำหนด )
    
    โดย ถ้ากำหนด object results จะทำให้ค่า offset เก็บไว้ที่ object results นี้
    และจะคืนค่า element กลับไป เพื่อสนับสนุนการทำงานแบบ chain method
    แต่ถ้ากไม่กำหนด object results จะคืนค่า object กลับมา
    
    สำหรับ options มี property ที่เป็นไปได้ ได้แก่
    relativeTo (element) ให้กำหนด parent element ที่ต้องการหา offset กับ first element ภายใน set
    โดย element นี้ควรมี position แบบ relative หรือ absolute แต่ถ้าไม่กำหนดก็จะเทียบกับ tag body ดังเดิม
    lite (boolean)  ( default = false )
    scroll (boolean) ให้กำหนด ว่า จะนับรวมค่าการ scroll ด้วยหรือไม่ ( default = true )
    padding (boolean) ให้กำหนดว่า จะนับรวมค่า padding ด้วยหรือไม่ ( default = false )
    border (boolean) ให้กำหนดว่า จะนับรวมค่า border ด้วยหรือไม่ ( default = false )
    margin (boolean) ให้กำหนดว่า จะนับรวมค่า margin ด้วยหรือไม่ ( default = true )

    example :
    var oResult = $("div#dialog").offset( { scroll: false, border: true, padding: true } );

  • syntax :
    innerHeight ()

    return type :
    number

    content :
    ใช้คืนค่า ขนาดความสูงด้านใน ของ first element ภายใน set

    example :
    alert ( $(document).innerHeight() );
    alert ( $("img.logo").innerHeight() );

  • syntax :
    outerHeight ( [ includeMargin ] )

    return type :
    number

    content :
    ใช้คืนค่า ขนาดความสูงด้านนอก ของ first element ภายใน set
    โดย options หมายถึง จะรวม margin ด้วยหรือไม่

    example :
    alert ( $(document).outerHeight( false ) );
    alert ( $(document).outerHeight( true ) );

  • syntax :
    innerWidth ()

    return type :
    number

    content :
    ใช้คืนค่า ขนาดความกว้างด้านใน ของ first element ภายใน set

    example :
    alert ( $(document).innerWidth() );
    alert ( $("img.logo").innerWidth() );

  • syntax :
    outerWidth ( [ includeMargin ] )

    return type :
    number

    content :
    ใช้คืนค่า ขนาดความกว้างด้านนอก ของ first element ภายใน set
    โดย options หมายถึง จะรวม margin ด้วยหรือไม่

    example :
    alert ( $(document).outerWidth( false ) );
    alert ( $(document).outerWidth( true ) );

 
Share This Chapter Login with Facebook