-
-
-
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 ) );
