متد wrapAll در jQuery
در این بخش از آموزش JQuery ، متد wrapAll را شرح میدهیم.
شکل کلی استفاده از متد wrapAll به شرح زیر است :
$(selector).wrapAll(wrappingElement)
مثال زیر کاربرد متد wrapAll را نشان میدهد:
$("button").click(function(){
$("p").wrapAll("<div></div>");
});
متد wrapInner در jQuery
در این بخش از آموزش JQuery ، متد wrapInner را شرح میدهیم.
شکل کلی استفاده از متد wrapInner به شرح زیر است :
$(selector).wrapInner(wrappingElement,function(index))
مثال زیر کاربرد متد wrapInner را نشان میدهد:
$("button").click(function(){
$("p").wrapInner("<b></b>");
});
متد width در jQuery
در این بخش از آموزش JQuery ، متد width را شرح میدهیم.
با استفاده از متد width عرض صفحه وب باز گشت داده می شود
شکل کلی استفاده از متد width به شرح زیر است :
$(selector).width()
مثال زیر کاربرد متد width را نشان میدهد:
$("button").click(function(){
alert($("div").width());
});
متد wrap در jQuery
در این بخش از آموزش JQuery ، متد wrap را شرح میدهیم.
متد wrap ، برای کار با تگ‌های اطراف یک بخش استفاده میشود.
شکل کلی استفاده از متد wrap به شرح زیر است :
$(selector).wrap(wrappingElement,function(index))
مثال زیر کاربرد متد wrap را نشان میدهد:
$("button").click(function(){
$("p").wrap("<div></div>");
});
متد val در jQuery
در این بخش از آموزش JQuery ، متد val را شرح میدهیم.
توسط متد val میتوانیم به محتوا (value ) عناصر موجود در فرم ها دسترسی و مقدارش را تغییر دهیم .
ساختار این دستور به صورت زیر است :
$(selector).val();
$(selector).val(newValue);
متد toggleclass در jQuery
در این بخش از آموزش JQuery ، متد toggleClass را شرح میدهیم.
با متد toggleClass می توان اگر به تگی کلاس خاصی تخصیص داده نشده ،آنرا به تگ اختصاص داد ،در غیر این صورت اگر آن کلاس به آن تگ قبلا تخصیص داده شده ، کلاس از تگ حذف می شود و این تشخیص به طور خودکار توسط متد toggleClass صورت میگیرد.
ساختار این دستور به صورت زیر است :
$(selector).toggleClass(classname,function(index,currentclass),switch)
مثال زیر کاربردمتد toggleClass را نشان میدهد:
در مثال زیر در صورتیکه کلاس blue قبلا به تگ های h1 , h2 , p اعمال نشده است ، اعمال می شود و در صورتیکه قبلا کلاس blue به محتوای تگ های h1 , h2 , p اعمال شده است ، این کلاس از محتوای این تگ ها حذف خواهد شد :
$("h1,h2,p").toggleClass("blue");
متد unwrap در jQuery
در این بخش از آموزش JQuery ، متد unwrap را شرح میدهیم.
متد unwrap عنصر والد از عنصر انتخاب شده را پاک میکند.
ساختار این متد به صورت زیر است :
$(selector).unwrap()
مثال زیر کاربرد متد unwrap را نشان میدهد:
$("button").click(function(){
$("p").unwrap();
});
متد removeProp در jQuery
در این بخش از آموزش JQuery ، متد removeProp را شرح میدهیم.
متد removeProp ، یک یا چندین ویژگی (Property) تعیین شده برای عنصر HTML مورد نظرتان را حذف می کند.
شکل کلی استفاده از متد removeProp به شرح زیر است :
$(selector).removeProp(property)
مثال زیر کاربرد متد removeProp را نشان میدهد:
$("button").click(function(){
var $x = $("div");
$x.prop("color","FF0000");
$x.append("The color property: " + $x.prop("color"));
$x.removeProp("color");
});
متد text در jQuery
در این بخش از آموزش JQuery ، متد text را شرح میدهیم.
متد text دو کار انجام می دهد :
هنگامی که این متد برای بازگرداندن متن استفاده می شود متن تمام عناصری
که با مشصات داده شده مطابقت دارند را برمی گرداند ( این متد علامت های
زبان نوشتن تگ های HTML را در نظر نمی گیرد ) .
هنگامی که این متد برای تغییر متن عنصر به کار می رود متن تمام عناصری که با مشخصات داده شده مطابقت دارند را تغییر می دهد .
شکل کلی استفاده از متد text به شرح زیر است :
خواندن و بازگرداندن متن یک عنصر HTML
به وسیله متد text می توانید متن یک عنصر مثل تگ پاراگراف را خوانده و در خروجی نمایش دهید :
$ ( selector ).text( ) ;
selector : این پارامتر تعیین کننده id عنصری است که می خواهیم متن درون آن را خوانده و به خروجی بر گردانیم .
مثال زیر کاربرد متد text را نشان میدهد:
$("button").click(function(){
$("p").text("Hello world!");
});
متد ( ) remove در jQuery
در این بخش از آموزش JQuery ، متد remove را شرح میدهیم.
متد remove ،
عنصر HTML تعیین شده برای آن را به همراه تمام متن و اشیای فرزندش از صفحه
حذف می کند . این متد همچنین تمام داده ها و رویدادهای مرتبط با آن عنصر
را نیز پاک می کند .
برای مثال فرض کنید که یک پاراگراف در صفحه دارید .
می خواهید کدی طراحی نمایید تا در صورت کلیک کاربر بر روی یک دکمه فرمان ،
عنصر پاراگراف از روی صفحه حذف شود .
شکل کلی استفاده از متد ( ) remove به شرح زیر است :
$ ( selector ).remove ( ) ;
selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید آن را از صفحه حذف نمایید .
مثال زیر کاربرد متد remove را نشان میدهد:
$("button").click(function(){
$("p").remove();
});
متد removeAttr در jQuery
در این بخش از آموزش JQuery ، متد removeAttr را شرح میدهیم.
متد removeAttr ، یک یا چندین خاصیت css تعیین شده برای عنصر HTML مورد نظرتان را حذف می کند . با حذف خاصیت css ، اثر آن بر عنصر از بین می رود .
برای
مثال فرض کنید که یک برای یک عنصر پاراگراف ( تگ < p > ) در صفحه ،
خاصیت رنگ نوشته یا color تعیین کرده اید . با حذف این خاصیت و مقدارش توسط
متد ( ) removeAttr ، رنگ داده شده به آن از بین رقته و به رنگ پیش فرض بر
می گردد .
شکل کلی استفاده از متد removeAttr به شرح زیر است :
$ ( selector ).removeAttr ( attribute ) ;
selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید یک یا چند خاصیت css آن را حذف نمایید .
تعیین این پارامتر اجباری است .
attribute : این پارامتر تعیین کننده خاصیت یا خواص css ای است که می خواهید آنها را حذف نمایید . تعیین این پارامتر اجباری است .
مثال زیر کاربرد متد removeAttr را نشان میدهد:
$("button").click(function(){
$("p").removeAttr("style");
});
متد removeClass در jQuery
در این بخش از آموزش JQuery ، متد removeClass را شرح میدهیم.
متد removeClass ، یک یا چندین کلاس تعیین شده برای عنصر HTML مورد نظرتان را حذف می کند.
شکل کلی استفاده از متد removeClass به شرح زیر است :
$(selector).removeClass(classname,function(index,currentclass))
مثال زیر کاربرد متد removeClass را نشان میدهد:
$("button").click(function(){
$("p").removeClass("intro");
});
متد prop در jQuery
در این بخش از آموزش JQuery ، متد prop را شرح میدهیم.
متد prop ، می تواند دو کار را انجام دهد :
هنگامی که متد prop را برای خواندن مقدار خاصیت یک عنصر HTML به کار می برید ، این متد مقدار خاصیت اولین عنصری که با مشخصات داده شده یکسان است را نمایش می دهد .
ولی هنگامی که برای تغییر مقدار یک خاصیت عنصر HTML به کار می رود ، مقدار خاصیت کلیه عناصری که با مشخصات داده شده مطابقت داشته و در صفحه وجود دارند ، را تغییر می دهد .
خواندن مقدار یک خاصیت عنصر HTML
شکل کلی استفاده از متد ( ) prop در این حالت به شرح زیر است :
$ ( selector ).prop ( property ) ;
selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید مقدار یک خاصیت css آن را بخوانید .
تعیین این پارامتر اجباری است .
property : این پارامتر تعیین کننده نام خاصیتی است که می خواهید مقدار آن را بخوانید .
تعیین این پارامتر اجباری است .
تغییر مقدار یک خاصیت عنصر HTML به مقدار دلخواه
شکل کلی استفاده از متد ( ) prop در این حالت به شرح زیر است :
$ ( selector ).prop ( property , value ) ;
selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید مقدار یک خاصیت css آن را به یک مقدار جدید تغییر دهید .
تعیین این پارامتر اجباری است .
property : این پارامتر تعیین کننده نام خاصیتی است که می خواهید مقدار آن را به یک مقدار جدید تغییر دهید .
تعیین این پارامتر اجباری است .
value : این پارامتر تعیین کننده مقدار جدیدی است که می خواهید برای خاصیت css عنصر HTML قرار دهید .
تعیین این پارامتر اجباری است .
تغییر مقدار چند خاصیت css یک عنصر HTML به مقادیر دلخواه
شکل کلی استفاده از متد ( ) prop در این حالت به شرح زیر است :
$ ( selector ).prop ( { property 1 : value 1 , property 2 : value 2 , ... } ) ;
مثال زیر کاربرد متد prop را نشان میدهد:
$("button").click(function(){
var $x = $("div");
$x.prop("color","FF0000");
$x.append("The color property: " + $x.prop("color"));
$x.removeProp("color");
});
متد prepend در jQuery
در این بخش از آموزش JQuery ، متد prepend را شرح میدهیم.
متد prepend مطالب را در آغاز عناصر انتخاب شده درج میکند.
شکل کلی استفاده از متد prepend به شرح زیر است :
$(selector).prepend(content,function(index,html))
مثال زیر کاربرد متد prepend را نشان میدهد:
$("button").click(function(){
$("p").prepend("<b>Prepended text</b>");
});
متد prependTo در jQuery
در این بخش از آموزش JQuery ، متد prependTo را شرح میدهیم.
متد prependTo ، می تواند عنصر HTML تعیین شده برای آن را به ابتدای یک عنصر دیگر HTML اضافه نماید .
برای
مثال فرض کنید که یک تگ div و یک پاراگراف ( تگ div ) دارید . می خواهید
کدی طراحی نمایید تا در هنگام کلیک کاربر بر روی یک دکمه فرمان ، عنصر
پاراگراف به انتدای تگ div اضافه شود . برای این منظور باید از متد prependTo استفاده نمایید .
شکل کلی استفاده از متد prependTo به شرح زیر است :
$ ( content ).prependTo ( selector ) ;
این پارامتر تعیین کننده عنصر HTML ای
است که می خواهید آن را به ابتدای عنصر مورد نظر خود اضافه نمایید . ( این
پارامتر باشد از نوع تگ های HTML باشد ).
استفاده از این پارامتر اجباری است .
content
: اگر عنصر HTML ای که می خواهید آن را در ابتدای عنصر دیگر وارد نمایید ،
از قبل در صفحه وجود داشته باشد ، در هنگام اضافه شدن از مکان خود به
ابتدای عنصر مورد نظر منتقل می شود .
selector : این پارامتر تعیین کننده id عنصری است که می خواهید عنصر مورد نظر خود را به ابتدای آن اضافه نمایید .
استفاده از این پارامتر اجباری است .
مثال زیر کاربرد متد prependTo را نشان میدهد:
$("button").click(function(){
$("<span>www.pars-soft.ir</span>").prependTo("p");
});
متد outerWidth در jQuery
در این بخش از آموزش JQuery ، متد outerWidth را شرح میدهیم.
متد outerWidth عرض بیرونی اولین عنصر انتخاب شده در HTML را برمیگرداند.
ساختار این متد به صورت زیر است :
$(selector).outerWidth(includeMargin)
مثال زیر کاربرد متد outerWidth را نشان میدهد:
$("button").click(function(){
alert($("div").outerWidth());
});
تصویر زیر نیز کاربرد این متد را نشان میدهد.
متد position در jQuery
در این بخش از آموزش JQuery ، متد position را شرح میدهیم.
متد position ، مختصات محل قرار گیری یک عنصر را بر حسب عنصر مادر ( parent ) آن تعیین کرده و به صفحه بر می گرداند .
این تابع متد position مختصات
عنصر مورد نظر را با دو مقدار عددی نمایش می دهد که یکی تعیین کننده میزان
فاصله از بالای عنصر مادر ( parent ) است است که به آن top می گویند . عدد
دوم تعیین کننده میزان فاصله از سمت چپ عنصر مادر ( parent ) است که به آن
left می گویند .
واحد خروجی این مثال بر حسب پیکسل px می باشد .
شکل کلی استفاده از متد ( ) position به شرح زیر است :
$ ( " selector " ).position ( ) ;
selector : این پارامتر تعیین کننده id عنصری است که می خواهید مختصات آن را نمایش دهید .
مثال زیر کاربرد متد position را نشان میدهد:
$("button").click(function(){
x=$("p").position();
alert("Top: " + x.top + " Left: " + x.left);
});
متد offsetParent در jQuery
در این بخش از آموزش JQuery ، متد offsetParent را شرح میدهیم.
متد offsetParent ،موقعیت عنصر انتخاب شده را نسبت به والدین (Parent) خود نمایش میدهد.
ساختار این متد به صورت زیر است :
$(selector).offsetParent()
مثال زیر کاربرد متد offsetParent را نشان میدهد
$("button").click(function(){
$("p").offsetParent().css("background-color","red");
});
متد outerHeight در jQuery
در این بخش از آموزش JQuery ، متد outerHeight را شرح میدهیم.
متد outerHeight ارتفاع بیرونی اولین عنصر انتخاب شده در HTML را برمیگرداند.
ساختار این متد به صورت زیر است :
$(selector).outerHeight(includeMargin)
متد offset در jQuery
در این بخش از آموزش JQuery ، متد offset را شرح میدهیم.
متد offset ،برای عنصر HTML تعیین شده مختصات آفست را نسبت به سند تنظیم میکند.
ساختار این متد در حالت set به صورت زیر است :
مختصات آفست را تنظیم میکند.
$(selector).offset({top:value,left:value})
متد insertBefore در jQuery
در این بخش از آموزش JQuery ، متد insertBefore را شرح میدهیم.
متد insertBefore ، یک متن یا کنترل HTML را قبل از عنصر مورد نظرتان در صفحه وارد می نماید .
در متد insertBefore بایستی یک متن یا عنصر HTML را انتخاب کرده و سپس تعیین نمایید تا قبل از چه عنصری در صفحه وارد شود .
برای
مثال فرض کنید یک پاراگراف در صفحه دارید و می خواهید کدی طراحی نمایید تا
در صورت کلیک کاربر بر روی یک دکمه فرمان ، متن جدیدی به ابتدای پاراگراف
اضافه شود .
شکل کلی استفاده از متد ( ) insertBefore به شرح زیر است :
$ ( content ).insertBefore ( " selector " ) ;
متد ( ) insertAfter در jQuery
در این بخش از آموزش JQuery ، متد insertAfter را شرح میدهیم.
متد insertAfter ، یک متن یا کنترل HTML را بعد از عنصر مورد نظرتان در صفحه وارد می نماید .
در متد insertAfter بایستی یک متن یا عنصر HTML را انتخاب کرده و سپس تعیین نمایید تا پس از چه عنصری در صفحه وارد شود .
برای
مثال فرض کنید یک پاراگراف در صفحه دارید و می خواهید کدی طراحی نمایید تا
در صورت کلیک کاربر بر روی یک دکمه فرمان ، متن جدیدی به انتهای پاراگراف
اضافه شود .
متد scrollLeft در jQuery
در این بخش از آموزش JQuery ، متد scrollLeft را شرح میدهیم.
متد scrollLeft ،برای عنصر HTML تعیین شده اسکرول افقی تنظیم میکند .
ساختار این متد در حالت set به صورت زیر است :
اسکرول را به حالت افقی تنظیم میکند.
$(selector).scrollLeft(position)
ساختار این متد در حالت Return به صورت زیر است :
موقعیت افقی اسکرول زا برمیگرداند.
متد replaceWith در jQuery
در این بخش از آموزش JQuery ، متد replaceWith را شرح میدهیم.
متد replaceWith ، عنصر HTML تعیین شده را با محتوای جدید جایگزین میکند.
ساختار این متد به صورت زیر است :
$(selector).replaceWith(content,function(index))
مثال زیر کاربرد متد replaceWith را نشان میدهد :
$("button").click(function(){
$("p:first").replaceWith("Hello world!");
});
متد innerWidth در jQuery
در این بخش از آموزش JQuery ، متد innerWidth را شرح میدهیم.
متد innerWidth عرض عناصر را با در نظر گرفتن مقدار padding انها بر می گرداند.
مثال :
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
متد innerHeight در jQuery
در این بخش از آموزش JQuery ، متد innerHeight را شرح میدهیم.
متد innerHeight ارتفاع عناصر را با در نظر گرفتن مقدار padding انها بر می گرداند.
مثال :
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
متد replaceAll در jQuery
در این بخش از آموزش JQuery ، متد replaceAll را شرح میدهیم.
متد replaceAll ، عنصر HTML تعیین شده برای آن را با تمام عناصر HTML مورد نظر شما در صفحه ، عوض می کند .
فرض
کنید در یک صفحه چندین پاراگراف ( تگ < p > ) دارید . می خواهید کدی
طراحی نمایید تا در هنگام اجرای آن ، تمامی پاراگراف های صفحه یا مثلا
پاراگراف های عضو یک کلاس خاص ، با یک تگ span عوض شوند . در این حالت باید از متد replaceAll استفاده نمایید .
ساختار این متد به صورت زیر است :
content : این پارامتر تعیین کننده عنصر HTML یا متنی است که می خواهید آن را به جای عنصر HTML مورد نظرتان در صفحه قرار دهید .$ ( content ).replaceAll ( selector ) ;
متد ( ) height در jQuery
در این بخش از آموزش JQuery ، متد height را شرح میدهیم.
متد height در jQuery , می تواند مقدار ارتفاع یک عنصر HTML را خوانده و بر گرداند و یا به وسیله آن مقدار ارتفاع عنصر را به یک مقدار دلخواه تغییر دهید .
برای مثال اگر یک عنصر div داشته باشیم که ارتفاع آن px 300 باشد ، با استفاده از متد ( ) height می توان دو کار را انجام داد :
مقدار ارتفاع آن را که px 300 است ، به صفحه برگدانیم .
مقدار جدیدی را برای ارتفاع عنصر تعیین کرده و آن را به مقدار جدید تغییر دهید .
نکته : همانطور که در تصویر زیر نمایش داده ایم ، متد height شامل
حاشیه بیرونی ( margin ) ، حاشیه درونی ( padding ) و خطوط حاشیه عنصر (
border ) نمی شود و فقط ارتفاع خود عنصر را بر می گرداند .
متد ( ) html در jQuery
در این بخش از آموزش JQuery ، متد html را شرح میدهیم.
متد html در jQuery دو کار را انجام می دهد :
برای مثال می توانید محتویات یک پاراگراف در صفحه را به مقدار دلخواه خود تغییر دهید .
استفاده از متد html در حالت اول :
شما می توانید به وسیله این متد ، محتویات درونی یک عنصر را بخوانید . شکل کلی استفاده از متد html در حالت اول به شرح زیر است :
$ ( " selector " ).html ( ) ;
selector : این پارامتر تعیین کننده ID عنصری است که می خواهید محتویات درونی آن را بخوانید .
متد hasClass در jQuery
در این بخش از آموزش JQuery ، متد hasClass را شرح میدهیم.
متد hasClass مشخص میکند که آیا عنصر دارای کلاس classname هست یا خیر .
ساختار این متد به صورت زیر است :
$(selector).hasClass(classname)
مثال زیر کاربرد متد hasClass را نشان میدهد :
$("button").click(function(){
alert($("p").hasClass("intro"));
});
تعداد صفحات : 4
تگ لینک ( تگ Link )