متد size در jQuery
متد size ، تعداد عناصر DOM ای که با مشخصات تعیین شده برای آن در پارامتر selector$ ، مطابقت دارند را بر می گرداند .
به عبارت دیگر ،متد size برای شمارش تعداد یک عنصر یا تگ مورد نظر ، بر روی صفحه استفاده می شود .
شکل کلی استفاده از متد size به صورت زیر است :
$(selector).size( ) ;
مثال زیر کاربرد متد size را نشان میدهد .
$("button").click(function(){
alert($("li").size());
});
متد toArray در jQuery
متد toArray ، کلیه عناصری که با مشخصات داده شده در پارامتر selector$ آن مطابقت دارند ، را در به صورت یک آرایه در خروجی بر می گرداند .
شکل کلی استفاده از متد toArray به صورت زیر است :
$(selector).toArray( ) ;
مثال زیر کاربرد متد toArray را نشان میدهد .
$("button").click(function(){
x=$("li").toArray()
for (i=0;i<x.length;i++)
{
alert(x[i].innerHTML);
}
});
متد $.param در jQuery
متد $.param ، می تواند اعضای یک آرایه یا مجموعه خواص یک شی را به صورت پشت سر هم و جفت نام-مقدار ، خوانده و به صفحه بر گرداند .
برای مثال فرض کنید که یک شی 3 خاصیت داشته باشد . خروجی این متد در هنگام استفاده به صورت زیر می باشد :
prop1 = value1 & prop2 = value2 & prop3 = value3 ;
از این رشته خواص و یا اعضای آرایه می توان برای ارسال اطلاعات در روش
get استفاده کرد . این اطلاعات در انتهای آدرس URL صفحه اضافه شده و به
صفحه مقصد ارسال می شوند .
شکل کلی استفاده از متد $.param به صورت زیر است :
$.param( object ) ;
obj : تعیین کننده نام شی یا آرایه ای است که می خواهیم مجموعه اعضا و یا خواص آن را به صورت پشت سر هم نمایش دهیم .
استفاده از این پارامتر اجباری است .
مثال زیر کاربرد متد $.param را نشان میدهد .
$("button").click(function(){
$("div").text($.param(personObj));
});
متد removeData در jQuery
متد removeData ، می تواند اطلاعات اضافه شده به یک عنصر را که قبلا توسط متد ( ) data اضافه شده است ، را حذف نماید .
اگر اطلاعاتی قبلا توسط متد ( ) data ، به عنصر اضافه نشده باشد ، این متد کار نمی کند .
شکل کلی استفاده از متد removeData در این حالت به صورت زیر است :
$( selector ).removeData ( name ) ;
selector : این پارامتر تعیین کننده id عنصری است که می خواهیم اطلاعات آن را حذف نماییم .
name : این پارامتر تعیین کننده نام اطلاعاتی در عنصر مورد نظر است که می خواهید آن را حذف نمایید .
استفاده از این پارامتر اختیاری است .
اگر این پارامتر تعیین نشود ، کلیه اطلاعات موجود در عنصر حذف خواهد شد .
مثال زیر کاربرد متد removeData را نشان میدهد .
$("#btn2").click(function(){
$("div").removeData("greeting");
alert("Greeting is: " + $("div").data("greeting"));
});
متد index در jQuery
متد index ، اندیس عنصر مورد نظر رات نسبت به سایر عناصر مجاور آن خوانده و بر می گرداند .
عنصر می تواند توسط انتخاب کننده های تعیین شده و یا براساس اشیای DOM . اگر عنصر مورد نظر پیدا نشود ، مقدار برگشتی 1- خواهد بود .
پیدا کردن اندیس اولین عنصر مطابق با جستجو نسبت به سایر عناصر مشابه :
به وسیله متد index می توان اندیس اولین عنصر مطابق با اطلاعات داده شده را خوانده و به صفحه برگداند .
شکل کلی استفاده از متد index ، در این حالت به صورت زیر است :
$(selector).index( ) ;
selector : تعیین کننده id عنصری است که می خواهیم اندیس آن را پیدا کنیم .
استفاده از این پارامتر اجباری است .
مثال زیر کاربرد متد index را نشان میدهد .
$("li").click(function(){
alert($(this).index());
});
متد $.noConflict (جلوگیری از تداخل کدها در jQuery)
برخی از فریم ورک های جاوا اسکریپت نیز از علامت $ در کدهای خود استفاده می کنند ، مثل فریم ورکهای BackBone یا GoogleWebToolkit . حال اگر jQuery و یک فریم ورک دیگر در یک صفحه بصورت همزمان از علامت $ استفاده نمایند ، ممکن است در اجرای اسکریپت دچار مشکل شوید و کد شما درست کار نکند .
برای این منظور در jQuery از متد $.noConflict استفاده می شود . با استفاده از این متد دیگر نیاز به بکار بردن علامت $ در کدهای jQuery نبوده و می توانید آن را حذف نمایید . سپس از این علامت در کدهای سایر فریم ورک ها به راحتی و بدون اختلال jQuery استفاده نمایید .
شکل کلی استفاده متد $.noConflict به صورت زیر است :
$.noConflict ( ) ;
مثال زیر کاربرد متد $.noConflict را نشان میدهد .
var jq=$.noConflict();
متد ( ) data در jQuery
متد data ، می تواند اطلاعاتی را به یک عنصر مورد نظر اضافه کرده و یا اینکه اطلاعات آن را خوانده و به صفحه بازگرداند .
نکته : برای حذف اطلاعات اضافه شده از متد ( ) removeData استفاده نمایید .
به وسیله متد data می توانید اطلاعات موجود در یک عنصر HTML را خوانده و به صفحه بر گردانید .
شکل کلی استفاده از متد ( ) data در این حالت به صورت زیر است :
Syntax $( selector ).data ( name ) ;
selector : این پارامتر تعیین کننده id عنصری است که می خواهیم اطلاعات آن را خوانده و به صفحه بر گردانیم .
name : این پارامتر تعیین کننده نام اطلاعاتی در عنصر مورد نظر است که می خواهید آن را خوانده و به صفحه بر گردانید .
استفاده از این پارامتر اختیاری است .
به وسیله متد ( ) data می توان اطلاعات مورد نظر خود را به یک عنصر در صفحه اضافه نمایید .
شکل کلی استفاده از متد ( ) data در این حالت به صورت زیر است :
$( selector ).data ( name , value ) ;
selector : این پارامتر تعیین کننده id عنصری است که می خواهیم اطلاعات آن را خوانده و به صفحه بر گردانیم .
name : این پارامتر تعیین کننده نام اطلاعاتی است که می خواهیم به عنصر مورد نظرمان اضافه نماییم .
استفاده از این پارامتر اجباری است .
value : این پارامتر تعیین کننده اطلاعاتی است که می خواهیم به عنصر مورد نظرمان اضافه نماییم .
استفاده از این پارامتر اجباری است .
مثال زیر کاربرد متد data را نشان میدهد .
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});
متد each در jQuery
متد each ، یک تابع را تعیین کرده و به ازای هر عنصری که با مشخصات داده شده در پارامتر selector$ مطابقت داشته باشد ، یکبار اجرا می کند .
شکل کلی استفاده از متد each به صورت زیر است :
Syntax $( selector ).each( function( index,element ) ) ;
selector : این پارامتر تعیین کننده کلاس یا تگ عنصرهایی است که می خواهیم تابع مورد نظرمان به ازای هر نمونه از آن ، یکبار اجرا شود .
index : تعیین کننده اندیس عنصر مورد نظر است .
element : نشانگر عنصر جاری است . ( "this" هم می تواند استفاده شود ).
مثال زیر کاربرد متد each را نشان میدهد .
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
افکت ( ) toggle در jQuery
در این بخش از آموزش jquery ، افکت toggle را در طراحی سایت آموزش می دهیم.
افکت ( ) toggle بین دو افکت ( ) show و افکت ( ) hide تغییر وضعیت می دهد .
افکت ( ) toggle وضعیت
نمایش و یا عدم نمایش عنصر مورد نظر رابر روی صفحه می سنجد . اگر عنصر در
حال نمایش باشد آن را با استفاده از متد Hide مخفی کرده و اگر عنصر مخفی
باشد آن را با استفاده از متد Show نمایش می دهد .
افکت ( ) toggle برای عناصری که از ابتدای اجرای صفحه مخفی تعیین شده اند ، کار نمی کند .
شکل کلی استفاده از این متد به شرح زیر است :
$( selector ).toggle( speed , easing , callback ) ;
selector : تعیین کننده id عنصری است که می خواهیم افکت ( ) toggle ، بر روی آن اجرا شود .
speed : این پارامتر تعیین کننده سرعت انجام افکت و تغییر حالت عنصر از حالت اول به دوم است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
1) MiliSecond : مدت زمان اجرای افکت بر حسب میلی ثانیه .
2) Slow : سرعت آهسته
3) Fast : سرعت زیاد
easing :این پارامتر تعیین کننده سرعت انجام افکت در ابتدا و انتهای آن است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
1) Swing :سرعت انجام افکت در ابتدا و انتهای فرایند آهسته ولی در وسط آن زیاد است .
2) Liner : سرعت در کل طول فرایند یکسان است .
به وسیله این پارامتر می توانیم یک تابع را تعیین کنیم ، تا در پایان انجام افکت ( ) toggle ، اجرا شود .
function :استفاده از این پارامتر اختیاری است .
مثال زیر کاربرد افکت ( ) toggle را نشان میدهد :
$("button").click(function(){
$("p").toggle();
});
افکت ( ) fadeIn در jQuery
در این بخش از آموزش jquery ، افکت fadeIn را در طراحی سایت آموزش می دهیم.
افکت fadeIn باعث می شود تا عنصر مورد اثر آن به تدریج از حالت مخفی به حالت نمایان در بیاید. افکت fadeIn در یک افکت تصویری با زیاد کردن نور عنصر به تدریج باعث نمایان شدن آن می شود .
بدیهی است این افکت بر روی عناصری قابل اجراست که در ابتدا مخفی باشند . شکل کلی استفاده از این متد به شرح زیر است :
$ ( " selector " ).fadeIn ( speed , callback )
selector :selector عنصری است که این افکت باعث نمایان شدن آن می شود .
speed : این پارامتر اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت نمایان شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین
به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در
آن عنصر به تدریج نمایان شود را نعیین می کنید . مثلا 100 ms .
تعیین
بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت
نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
"slow"
"normal"
"fast"
callback
:توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان
پافتن اجرای افکت و نمایان شدن عنصر مورد نظر ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است .
مثال زیر کاربرد افکت fadeIn را نشان میدهد .
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
با کلیک روی هر button عمل fadein شدن بر روی تگ هایی که ای دی انها div1,div2,dive3 است با سرعت های متفاوت انجام می شود
تعداد صفحات : 93
تگ لینک ( تگ Link )