جهت مطالعه به ادامه مطلب مراجعه فرمائید
متد addclass
در این بخش از آموزش JQuery ، متد addClass را در طراحی سایت ، شرح میدهیم. متد addClass می تواند یک کلاس css را به تگ یا تگهای مختلف تخصیص دهد. در مثال زیر با استفاده از متد addClass کلاس important به تمام تگ های از نوع div اعمال می شود : کد php:
|
$(“div”).addClass(“important”);
|
|
متد ( ) after در jQuery
در این بخش از آموزش JQuery ، متد after را شرح میدهیم. به وسیله متد after در jQuery ، می توانید محتویات مورد نظر خود ( می تواند شامل متن یا تگ های HTML باشد ) را پس از عنصر مورد نظر خود ، در صفحه HTML وارد نمایید . برای مثال فرض کنید که یک پاراگراف در صفحه دارید . به وسیله این متد می توانید یک پاراگراف یا یک تگ دیگر HTML را پس از آن عنصر ، به صفحه اضافه نمایید . شکل کلی استفاده از این متد به شرح زیر است : کد php:
|
$ ( ” selector ” ).after ( content ) ;
|
|
selector : عنصر مورد نظری است که می خواهید محتویات مورد نظرتان را پس از آن ، در صفحه وارد نمایید .content : تعیین کننده محتویاتی است که می خواهید پس از عنصر مورد نظر در صفحه وارد نمایید . این محتویات می تواند شامل متن یا سایر تگ های HTML باشد . مثال زیر کاربرد متد after را نشان میدهد : کد php:
|
$(“button”).click(function(){ $(“p”).after(“<p>Hello world!</p>”); });
|
|
متد ( ) append در jQuery
در این بخش از آموزش JQuery ، متد append را شرح میدهیم. توسط متد append در jQuery می توانید یک متن را به ادامه یک پاراگراف دیگر اضافه نمایید . متن اضافه شده به ادامه پاراگراف اضافه می شود نه اینکه در سطر بعد ( برخلاف متد ( ) after ) . از متد append برای زمانی استفاده می شود که بخواهید یک متن را به ادامه یک پاراگراف موجود در صفحه اضافه نمایید . شکل کلی استفاده از این متد به شرح زیر است : کد php:
|
Syntax $ ( ” selector ” ).append ( content ) ;
|
|
selector : پاراگراف یا عنصر مورد نظری است که می خواهید متن مورد نظرتان را به ادامه آن اضافه نمایید .content : تعیین کننده محتویاتی است که می خواهید به ادامه عنصر مورد نظر در صفحه اضاافه نمایید . این محتویات می تواند شامل متن باشد . مثال زیر کاربرد متد append را نشان میدهد : کد php:
|
$ ( ” p#P1 ” ).append ( ” < b > This is what you want to add < /b > ” ) ;
|
|
متد ( ) appendTo در jQueryدر این بخش از آموزش JQuery ، متد appendTo را شرح میدهیم. متد appendTo برای اضافه کردن المنت های HTML در ابتدای عنصر انتخاب شده استفاده میشود. مثال زیر کاربرد متد appendTo را نشان میدهد : کد php:
|
$(“button”).click(function(){ $(“<span>Hello World!</span>”).appendTo(“p”); });
|
|
متد ( ) attr در jQueryدر این بخش از آموزش JQuery ، متد attr را شرح میدهیم. متد attr در jQuery ، برای ۲ منظور می تواند به کار برده شود . مقدار تعیین شده برای خواص عناصر را خوانده و به کاربر نمایش می دهد . برای مثال فرض کنید که برای خاصیت عرض ( width ) یک عنصر عکس < img > مقدار ۲۰۰px را تعیین کرده اید . این متد می تواند این مقدار را خوانده و به کاربر نمایش دهد . می تواند مقدار خاصیت عناصر را تعیین کرده و یا در صورت نیاز تغییر دهد . برای مثال به وسیله این متد می توانید سایز فونت یک پاراگراف < p > را به مقدار ۱۴pt تغییر دهید . کاربرد اول – نمایش مقدار خاصیت یک عنصر در کاربرد اول این متد می خواهیم به شما نمایش دهیم چگونه می توان مقدار خاصیت یک عنصر را استخراج کرده و سپس نمایش دهیم . شکل کلی استفاده از این متد به شرح زیر است : کد php:
|
$ ( ” selector ” ).attr ( atrribute ) ;
|
|
selector : عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را نمایش دهیم .attribute : نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را استخراج کرده و به کاربر نمایش دهد .
کاربرد دوم – تغییر مقدار خاصیت یک عنصردر کاربرد دوم این متد می خواهیم به شما نمایش دهیم چگونه می توان مقدار خاصیت یک عنصر را به مقدار مورد نظرمان تغییر دهیم .
شکل کلی استفاده از این متد به شرح زیر است : کد php:
|
$ ( ” selector ” ).attr ( atrribute , value ) ;
|
|
selector : عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را به مقدار دلخواه تغییر دهیم .attribute : نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را تغییر دهید . برای مثال مقدار خاصیت عرض width یک عنصر را به یک مقدار دیگر تغییر دهیم . value : مقدار جدیدیتعیین شده است که می خواهیم مقدار خاصیت را به آن مقدار ، تغییر دهیم . مثال زیر کاربرد متد attr را نشان میدهد : کد php:
|
$(“button”).click(function(){ $(“img”).attr(“width”,”500″); });
|
|
متد ( ) before در jQueryدر این بخش از آموزش JQuery ، متد before را شرح میدهیم. از متد before در jQuery برای وارد نمودن یک متن یا پاراگراف در سطر قبلی یک پاراگراف استفاده می شود . متد before متن مورد نظر شما را به سطر قبلی پاراگراف تعیین شده در صفحه ، اضافه می کند . شکل کلی استفاده از این متد به شرح زیر است : کد php:
|
$ ( ” selector ” ).before ( content ) ;
|
|
selector : عنصر مورد نظری است که می خواهید محتویات مورد نظرتان را قبل از آن ، در صفحه وارد نمایید .content : تعیین کننده محتویاتی است که می خواهید قبل از عنصر مورد نظر در صفحه وارد نمایید . این محتویات می تواند شامل متن یا سایر تگ های HTML باشد . مثال زیر کاربرد متد before را نشان میدهد : کد php:
|
$(“button”).click(function(){ $(“p”).before(“<p>Hello world!</p>”); });
|
|
متد clone در jQueryدر این بخش از آموزش JQuery ، متد clone را شرح میدهیم. متد clone برای اضافه کردن المنت های HTML در ابتدای عنصر انتخاب شده استفاده میشود. ساختار این متد به صورت زیر است : کد php:
|
$(selector).clone(true|false)
|
|
مثال زیر کاربرد متد clone را نشان میدهد :کد php:
|
$(“button”).click(function(){ $(“p”).clone().appendTo(“body”); });
|
|
متد ( ) css در jQueryدر این بخش از آموزش JQuery ، متد css را شرح میدهیم. متد css در jQuery می تواند یک یا چند خاصیت css یک عنصر HTML موجود در صفحه را برگردانده و یا به مقدار دلخواه تغییر دهد . به عبارت دیگر شما به وسیله متد css می توانید به مقدار خواص css یک عنصر مورد نظر دسترسی داشته و یا آن خواص را به مقدار دلخواه تغییر دهید . برای مثال می توانید به مقدار خاصیت رنگ نوشته یک پاراگراف ( خاصیت Color ) دسترسی داشته و یا آن را به یک مقدار دلخواه تغییر دهید .
دسترسی به مقدار خاصیت css یک عنصر
شما می توانید به مقدار یک خاصیت css عنصر مورد نظرتان دسترسی داشته و مقدار آن را به صفحه برگردانید . شکل کلی استفاده از متد css در حالت دسترسی به مقدار خاصیت css به صورت زیر است : کد php:
|
$ ( ” selector ” ).css ( property ) ;
|
|
selector : عنصر مورد نظری است که می خواهید محتویات مقدار یک خاصیت CSS آن را خوانده و یا به مقدار دلخواه تغییر دهید .property : این پارامتر تعیین کننده خاصیت css عنصری است که می خواهید مقدار آن را خوانده و یا به یک مقدار جدید تغییر دهید . در زمانی که شما می خواهید مقدار خاصیت css یک عنصر HTML را بخوانید ، این متد مقدار آن خاصیت را برای اولین عنصری از نوع تعیین شده که در صفحه پیدا کند ، بر می گرداند . مثلا اگر بخواهید رنگ متن یک پاراگراف را در صفحه بخوانید ، این متد رنگ اولین پاراگراف موجود در صفحه را بر می گرداند . مگر دقیقا در دستور خود ، id پاراگراف مورد نظر را تعیین نمایید . مثال زیر کاربرد متد css را نشان میدهد : کد php:
|
$(“button”).click(function(){ $(“p”).css(“color”,”red”); });
|
|
متد ( ) detach در jQueryدر این بخش از آموزش JQuery ، متد detach را شرح میدهیم. متد detach عنصر HTML تعیین شده برای آن ( شامل تمام متن و اشیای فرزند ) را از روی صفحه پاک می کند . اما اطلاعات و رویدادهای شی مورد نظر بر روی صفحه باقی می مانند . متد detach همچنین یک کپی از عنصر پاک شده را در خود نگه داشته و بعدا می توانید آن عنصر را مجددا به صفحه وارد نمایید . برای مثال فرض کنید یک پاراگراف یا عکس را بر روی صفحه دارید . به وسیله این متد می توانید آن را از روی صفحه بردارید .شکل کلی استفاده از متد detach به شرح زیر است : کد php:
|
$ ( ” selector ” ).detach ( ) ;
|
|
selector : این پارامتر تعیین کننده id عنصر HTML ی است که می خواهید آن را از صفحه پاک کنید .برای حذف کامل یک عنصر ( حذف عنصر به همراه تمامی متن و رویدادهای مربوط به آن ) از متد ( ) remove استفاده نمایید . برای پاک کردن محتویات داخلی یک عنصر و نه حذف آن از صفحه ، از متد ( ) empty استفاده نمایید . مثال زیر کاربرد متد detach را نشان میدهد : کد php:
|
$(“button”).click(function(){ $(“p”).detach(); });
|
|
متد ( ) empty در jQueryدر این بخش از آموزش JQuery ، متد empty را شرح میدهیم. متد empty ، محتویات متنی و سایر اشیای فرزند عنصر HTML تعیین شده برای آن را پاک می کند . نکته مهم درباره متد empty اینست که این متد خود عنصر و یا خواص آن را حذف نمی کند ، بلکه فقط محتویات درونی آن را خالی می کند . بنابراین عنصر همچنان بر روی صفحه قرار داشته و قابل دسترس است . برای مثال می توانید به وسیله متد ( ) empty ، محتویات درون یک پاراگراف یا آیتم های موجود در یک لیست HTML را پاک نمایید وشکل کلی استفاده از متد empty به شرح زیر است : کد php:
|
$ ( ” selector ” ).empty ( ) ;
|
|
selector : این پارامتر تعیین کننده id عنصر HTML ی است که می خواهید محتویات درون آن را پاک کنید .مثال زیر کاربرد متد empty را نشان میدهد : کد php:
|
$(“button”).click(function(){ $(“div”).empty(); });
|
|
متد hasClass در jQueryدر این بخش از آموزش JQuery ، متد hasClass را شرح میدهیم. متد hasClass مشخص میکند که آیا عنصر دارای کلاس classname هست یا خیر . ساختار این متد به صورت زیر است : کد php:
|
$(selector).hasClass(classname)
|
|
مثال زیر کاربرد متد hasClass را نشان میدهد : کد php:
|
$(“button”).click(function(){ alert($(“p”).hasClass(“intro”)); });
|
|
متد ( ) height در jQueryدر این بخش از آموزش JQuery ، متد height را شرح میدهیم. متد height در jQuery , می تواند مقدار ارتفاع یک عنصر HTML را خوانده و بر گرداند و یا به وسیله آن مقدار ارتفاع عنصر را به یک مقدار دلخواه تغییر دهید . برای مثال اگر یک عنصر div داشته باشیم که ارتفاع آن px 300 باشد ، با استفاده از متد ( ) height می توان دو کار را انجام داد : مقدار ارتفاع آن را که px 300 است ، به صفحه برگدانیم .مقدار جدیدی را برای ارتفاع عنصر تعیین کرده و آن را به مقدار جدید تغییر دهید . نکته : همانطور که در تصویر زیر نمایش داده ایم ، متد height شامل حاشیه بیرونی ( margin ) ، حاشیه درونی ( padding ) و خطوط حاشیه عنصر ( border ) نمی شود و فقط ارتفاع خود عنصر را بر می گرداند .
استفاده از متد ( ) height در حالت اول – خواندن ارتفاع یک عنصر : گفتیم که در حالت اول متد ( ) height ، از این متد برای خواندن مقدار ارتفاع یک عنصر و بازگرداندن آن مقدار به صفحه استفاده می شود .
شکل کلی استفاده از متد ( ) height در حالت اول به شرح زیر است : کد php:
|
$ ( ” selector ” ).height ( ) ;
|
|
استفاده از متد ( ) height در حالت دوم – تنظیم ارتفاع یک عنصر : گفتیم که در حالت دوم متد height ، از این متد برای تنظیم مقدار ارتفاع یک عنصر به یک مقدار جدید استفاده می شود .شکل کلی استفاده از متد ( ) height در حالت دوم به شرح زیر است : کد php:
|
$ ( ” selector ” ).height ( value ) ;
|
|
value : مقدار مورد نظر
متد ( ) html در jQuery
در این بخش از آموزش JQuery ، متد html را شرح میدهیم. متد html در jQuery دو کار را انجام می دهد : به وسیله این متد می توانید محتویات درونی یک عنصر HTML یا همان خاصیت innerHtml آن را خوانده و به صفحه برگردانید . برای مثال می توان به محتویات درونی یگ تگ پاراگراف اشاره کرد . به وسیله این متد می توانید محتویات درونی یک عنصر HTML را به مقدار دلخواه خود تغییر دهید . برای مثال می توانید محتویات یک پاراگراف در صفحه را به مقدار دلخواه خود تغییر دهید . استفاده از متد html در حالت اول : شما می توانید به وسیله این متد ، محتویات درونی یک عنصر را بخوانید . شکل کلی استفاده از متد html در حالت اول به شرح زیر است : کد php:
|
$ ( ” selector ” ).html ( ) ;
|
|
selector : این پارامتر تعیین کننده ID عنصری است که می خواهید محتویات درونی آن را بخوانید .
متد innerHeight در jQuery
در این بخش از آموزش JQuery ، متد innerHeight را شرح میدهیم. متد innerHeight ارتفاع عناصر را با در نظر گرفتن مقدار padding انها بر می گرداند.مثال : کد php:
|
$(“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 استفاده نمایید . ساختار این متد به صورت زیر است : کد php:
|
$ ( content ).replaceAll ( selector ) ;
|
|
content : این پارامتر تعیین کننده عنصر HTML یا متنی است که می خواهید آن را به جای عنصر HTML مورد نظرتان در صفحه قرار دهید .تعیین این پارامتر اجباری است . selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید آن را با یک عنصر جدید مورد نظرتان عوض کنید . تعیین این پارامتر اجباری است . مثال زیر کاربرد متد replaceAll را نشان میدهد : کد php:
|
$(“button”).click(function(){ $(“<span>Hello world!</span>”).replaceAll(“p:last”); });
|
|
متد replaceWith در jQuery
در این بخش از آموزش JQuery ، متد replaceWith را شرح میدهیم. متد replaceWith ، عنصر HTML تعیین شده را با محتوای جدید جایگزین میکند.ساختار این متد به صورت زیر است : کد php:
|
$(selector).replaceWith(content,function(index))
|
|
مثال زیر کاربرد متد replaceWith را نشان میدهد :کد php:
|
$(“button”).click(function(){ $(“p:first”).replaceWith(“Hello world!”); });
|
|
متد replaceWith در jQuery
در این بخش از آموزش JQuery ، متد replaceWith را شرح میدهیم.
متد replaceWith ، عنصر HTML تعیین شده را با محتوای جدید جایگزین میکند. ساختار این متد به صورت زیر است : کد php:
|
$(selector).replaceWith(content,function(index))
|
|
مثال زیر کاربرد متد replaceWith را نشان میدهد :کد php:
|
$(“button”).click(function(){ $(“p:first”).replaceWith(“Hello world!”); });
|
|
متد replaceWith در jQuery
در این بخش از آموزش JQuery ، متد replaceWith را شرح میدهیم.
متد replaceWith ، عنصر HTML تعیین شده را با محتوای جدید جایگزین میکند. ساختار این متد به صورت زیر است : کد php:
|
$(selector).replaceWith(content,function(index))
|
|
مثال زیر کاربرد متد replaceWith را نشان میدهد :کد php:
|
$(“button”).click(function(){ $(“p:first”).replaceWith(“Hello world!”); });
|
|
متد replaceWith در jQuery
در این بخش از آموزش JQuery ، متد replaceWith را شرح میدهیم. متد replaceWith ، عنصر HTML تعیین شده را با محتوای جدید جایگزین میکند. ساختار این متد به صورت زیر است : کد php:
|
$(selector).replaceWith(content,function(index))
|
|
مثال زیر کاربرد متد replaceWith را نشان میدهد :کد php:
|
$(“button”).click(function(){ $(“p:first”).replaceWith(“Hello world!”); });
|
|
متد replaceWith در jQuery
در این بخش از آموزش JQuery ، متد replaceWith را شرح میدهیم. متد replaceWith ، عنصر HTML تعیین شده را با محتوای جدید جایگزین میکند. ساختار این متد به صورت زیر است : کد php:
|
$(selector).replaceWith(content,function(index))
|
|
مثال زیر کاربرد متد replaceWith را نشان میدهد :کد php:
|
$(“button”).click(function(){ $(“p:first”).replaceWith(“Hello world!”); });
|
|
متد replaceWith در jQueryدر این بخش از آموزش JQuery ، متد replaceWith را شرح میدهیم. متد replaceWith ، عنصر HTML تعیین شده را با محتوای جدید جایگزین میکند. ساختار این متد به صورت زیر است : کد php:
|
$(selector).replaceWith(content,function(index))
|
|
مثال زیر کاربرد متد replaceWith را نشان میدهد :کد php:
|
$(“button”).click(function(){ $(“p:first”).replaceWith(“Hello world!”); });
|
|
متد innerWidth در jQueryدر این بخش از آموزش JQuery ، متد innerWidth را شرح میدهیم. متد innerWidth عرض عناصر را با در نظر گرفتن مقدار padding انها بر می گرداند. مثال : کد php:
|
$(“button”).click(function(){ var txt=””; txt+=”Inner width: ” + $(“#div1”).innerWidth() + “</br>”; txt+=”Inner height: ” + $(“#div1”).innerHeight(); $(“#div1”).html(txt); });
|
|
متد ( ) insertAfter در jQueryدر این بخش از آموزش JQuery ، متد insertAfter را شرح میدهیم. متد insertAfter ، یک متن یا کنترل HTML را بعد از عنصر مورد نظرتان در صفحه وارد می نماید . در متد insertAfter بایستی یک متن یا عنصر HTML را انتخاب کرده و سپس تعیین نمایید تا پس از چه عنصری در صفحه وارد شود . برای مثال فرض کنید یک پاراگراف در صفحه دارید و می خواهید کدی طراحی نمایید تا در صورت کلیک کاربر بر روی یک دکمه فرمان ، متن جدیدی به انتهای پاراگراف اضافه شود . شکل کلی استفاده از متد ( ) insertAfter به شرح زیر است : کد php:
|
$ ( content ).insertAfter ( ” selector ” ) ;
|
|
content : این پارامتر تعیین کننده متن یا id عنصر HTML ای است که می خواهید محتویات آن را پس از عنصر مورد نظر در صفحه وارد نمایید .selector : تعیین کننده id عنصری است که می خواهید متن یا عنصر دیگر HTML خود را پس از آن در صفحه وارد نمایید . مثال زیر کاربرد متد insertAfter را نشان میدهد : کد php:
|
$(“button”).click(function(){ $(“<span>Hello world!</span>”).insertAfter(“p”); });
|
|
متد scrollLeft در jQueryدر این بخش از آموزش JQuery ، متد scrollLeft را شرح میدهیم. متد scrollLeft ،برای عنصر HTML تعیین شده اسکرول افقی تنظیم میکند .ساختار این متد در حالت set به صورت زیر است : اسکرول را به حالت افقی تنظیم میکند. کد php:
|
$(selector).scrollLeft(position)
|
|
ساختار این متد در حالت Return به صورت زیر است :موقعیت افقی اسکرول زا برمیگرداند. کد php:
مثال زیر کاربرد متد scrollLeft را نشان میدهد :کد php:
|
$(“button”).click(function(){ alert($(“div”).scrollLeft()); });
|
|
متد insertBefore در jQueryدر این بخش از آموزش JQuery ، متد insertBefore را شرح میدهیم. متد insertBefore ، یک متن یا کنترل HTML را قبل از عنصر مورد نظرتان در صفحه وارد می نماید . در متد insertBefore بایستی یک متن یا عنصر HTML را انتخاب کرده و سپس تعیین نمایید تا قبل از چه عنصری در صفحه وارد شود . برای مثال فرض کنید یک پاراگراف در صفحه دارید و می خواهید کدی طراحی نمایید تا در صورت کلیک کاربر بر روی یک دکمه فرمان ، متن جدیدی به ابتدای پاراگراف اضافه شود . شکل کلی استفاده از متد ( ) insertBefore به شرح زیر است : کد php:
|
$ ( content ).insertBefore ( ” selector ” ) ;
|
|
content : این پارامتر تعیین کننده متن یا id عنصر HTML ای است که می خواهید محتویات آن را قبل از عنصر مورد نظر در صفحه وارد نمایید .selector : تعیین کننده id عنصری است که می خواهید متن یا عنصر دیگر HTML خود را قبل از آن در صفحه وارد نمایید .مثال زیر کاربرد متد insertBefore را نشان میدهد
کد php:
|
$(“button”).click(function(){ $(“<span>Hello world!</span>”).insertBefore(“p”); });
|
|
متد offset در jQueryدر این بخش از آموزش JQuery ، متد offset را شرح میدهیم. متد offset ،برای عنصر HTML تعیین شده مختصات آفست را نسبت به سند تنظیم میکند. ساختار این متد در حالت set به صورت زیر است :مختصات آفست را تنظیم میکند. کد php:
|
$(selector).offset({top:value,left:value})
|
|
ساختار این متد در حالت Return به صورت زیر است :مختصات آفست را برمیگرداند. کد php:
مثال زیر کاربرد متد offset را نشان میدهدکد php:
|
$(“button”).click(function(){ var x=$(“p”).offset(); alert(“Top: ” + x.top + ” Left: ” + x.left); });
|
|
متد offsetParent در jQueryدر این بخش از آموزش JQuery ، متد offsetParent را شرح میدهیم. متد offsetParent ،موقعیت عنصر انتخاب شده را نسبت به والدین (Parent) خود نمایش میدهد. ساختار این متد به صورت زیر است : کد php:
|
$(selector).offsetParent()
|
|
مثال زیر کاربرد متد offsetParent را نشان میدهدکد php:
|
$(“button”).click(function(){ $(“p”).offsetParent().css(“background-color”,”red”); });
|
|
متد outerHeight در jQueryدر این بخش از آموزش JQuery ، متد outerHeight را شرح میدهیم. متد outerHeight ارتفاع بیرونی اولین عنصر انتخاب شده در HTML را برمیگرداند. ساختار این متد به صورت زیر است : کد php:
|
$(selector).outerHeight(includeMargin)
|
|
مثال زیر کاربرد متد outerHeight را نشان میدهد:کد php:
|
$(“button”).click(function(){ alert($(“div”).outerHeight()); });
|
|
تصویر زیر نیز کاربرد این متد را نشان میدهد.
متد outerWidth در jQuery
در این بخش از آموزش JQuery ، متد outerWidth را شرح میدهیم. متد outerWidth عرض بیرونی اولین عنصر انتخاب شده در HTML را برمیگرداند. ساختار این متد به صورت زیر است : کد php:
|
$(selector).outerWidth(includeMargin)
|
|
مثال زیر کاربرد متد outerWidth را نشان میدهد:کد php:
|
$(“button”).click(function(){ alert($(“div”).outerWidth()); });
|
|
تصویر زیر نیز کاربرد این متد را نشان میدهد.
متد position در jQuery در این بخش از آموزش JQuery ، متد position را شرح میدهیم. متد position ، مختصات محل قرار گیری یک عنصر را بر حسب عنصر مادر ( parent ) آن تعیین کرده و به صفحه بر می گرداند . این تابع متد position مختصات عنصر مورد نظر را با دو مقدار عددی نمایش می دهد که یکی تعیین کننده میزان فاصله از بالای عنصر مادر ( parent ) است است که به آن top می گویند . عدد دوم تعیین کننده میزان فاصله از سمت چپ عنصر مادر ( parent ) است که به آن left می گویند . واحد خروجی این مثال بر حسب پیکسل px می باشد . شکل کلی استفاده از متد ( ) position به شرح زیر است : کد php:
|
$ ( ” selector ” ).position ( ) ;
|
|
selector : این پارامتر تعیین کننده id عنصری است که می خواهید مختصات آن را نمایش دهید . مثال زیر کاربرد متد position را نشان میدهد: کد php:
|
$(“button”).click(function(){ x=$(“p”).position(); alert(“Top: ” + x.top + ” Left: ” + x.left); });
|
|
متد prepend در jQuery در این بخش از آموزش JQuery ، متد prepend را شرح میدهیم. متد prepend مطالب را در آغاز عناصر انتخاب شده درج میکند. شکل کلی استفاده از متد prepend به شرح زیر است : کد php:
|
$(selector).prepend(content,function(index,html))
|
|
مثال زیر کاربرد متد prepend را نشان میدهد:
کد php:
|
$(“button”).click(function(){
|
|
کد php:
|
$(“p”).prepend(“<b>Prepended text</b>”); });
|
|
متد prependTo در jQuery در این بخش از آموزش JQuery ، متد prependTo را شرح میدهیم. متد prependTo ، می تواند عنصر HTML تعیین شده برای آن را به ابتدای یک عنصر دیگر HTML اضافه نماید . برای مثال فرض کنید که یک تگ div و یک پاراگراف ( تگ div ) دارید . می خواهید کدی طراحی نمایید تا در هنگام کلیک کاربر بر روی یک دکمه فرمان ، عنصر پاراگراف به انتدای تگ div اضافه شود . برای این منظور باید از متد prependTo استفاده نمایید . شکل کلی استفاده از متد prependTo به شرح زیر است :
کد php:
|
$ ( content ).prependTo ( selector ) ;
|
|
این پارامتر تعیین کننده عنصر HTML ای است که می خواهید آن را به ابتدای عنصر مورد نظر خود اضافه نمایید . ( این پارامتر باشد از نوع تگ های HTML باشد ). استفاده از این پارامتر اجباری است . content : اگر عنصر HTML ای که می خواهید آن را در ابتدای عنصر دیگر وارد نمایید ، از قبل در صفحه وجود داشته باشد ، در هنگام اضافه شدن از مکان خود به ابتدای عنصر مورد نظر منتقل می شود . selector : این پارامتر تعیین کننده id عنصری است که می خواهید عنصر مورد نظر خود را به ابتدای آن اضافه نمایید . استفاده از این پارامتر اجباری است . مثال زیر کاربرد متد prependTo را نشان میدهد: کد php:
|
$(“button”).click(function(){ $(“<span>www.dadebaran.ir</span>”).prependTo(“p”); });
|
|
متد prop در jQuery در این بخش از آموزش JQuery ، متد prop را شرح میدهیم. متد prop ، می تواند دو کار را انجام دهد : مقدار یک یا چند خاصیت یک عنصر HTML را خوانده و به صفحه بر می گرداند . می تواند مقدار یک یا چند خاصیت یک عنصر HTML را به مقدار تعیین شده و مورد نظر شما تغییر دهد . هنگامی که متد prop را برای خواندن مقدار خاصیت یک عنصر HTML به کار می برید ، این متد مقدار خاصیت اولین عنصری که با مشخصات داده شده یکسان است را نمایش می دهد . ولی هنگامی که برای تغییر مقدار یک خاصیت عنصر HTML به کار می رود ، مقدار خاصیت کلیه عناصری که با مشخصات داده شده مطابقت داشته و در صفحه وجود دارند ، را تغییر می دهد . خواندن مقدار یک خاصیت عنصر HTML شکل کلی استفاده از متد ( ) prop در این حالت به شرح زیر است : کد php:
|
$ ( selector ).prop ( property ) ;
|
|
selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید مقدار یک خاصیت css آن را بخوانید . تعیین این پارامتر اجباری است . property : این پارامتر تعیین کننده نام خاصیتی است که می خواهید مقدار آن را بخوانید . تعیین این پارامتر اجباری است . تغییر مقدار یک خاصیت عنصر HTML به مقدار دلخواه شکل کلی استفاده از متد ( ) prop در این حالت به شرح زیر است : کد php:
|
$ ( selector ).prop ( property , value ) ;
|
|
selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید مقدار یک خاصیت css آن را به یک مقدار جدید تغییر دهید . تعیین این پارامتر اجباری است . property : این پارامتر تعیین کننده نام خاصیتی است که می خواهید مقدار آن را به یک مقدار جدید تغییر دهید . تعیین این پارامتر اجباری است . value: این پارامتر تعیین کننده مقدار جدیدی است که می خواهید برای خاصیت css عنصر HTML قرار دهید . تعیین این پارامتر اجباری است . تغییر مقدار چند خاصیت css یک عنصر HTML به مقادیر دلخواه شکل کلی استفاده از متد ( ) prop در این حالت به شرح زیر است : کد php:
|
$ ( selector ).prop ( { property 1 : value 1 , property 2 : value 2 , … } ) ;
|
|
مثال زیر کاربرد متد prop را نشان میدهد: کد php:
|
$(“button”).click(function(){ var $x = $(“div”); $x.prop(“color”,”FF0000″); $x.append(“The color property: ” + $x.prop(“color”)); $x.removeProp(“color”); });
|
|
متد ( ) remove در jQuery
در این بخش از آموزش JQuery ، متد remove را شرح میدهیم. متد remove ، عنصر HTML تعیین شده برای آن را به همراه تمام متن و اشیای فرزندش از صفحه حذف می کند . این متد همچنین تمام داده ها و رویدادهای مرتبط با آن عنصر را نیز پاک می کند . برای مثال فرض کنید که یک پاراگراف در صفحه دارید . می خواهید کدی طراحی نمایید تا در صورت کلیک کاربر بر روی یک دکمه فرمان ، عنصر پاراگراف از روی صفحه حذف شود . برای حذف عنصر از صفحه بدون پاک شدن اطلاعات و رویدادهای مرتبط به آن از متد ( ) detach استفاده نمایید . برای اینکه متن و یا محتویات یک عنصر را پاک کرده ، ولی عنصر همچنان بر روی صفحه وجود داشته باشد از متد ( ) empty استفاده نمایید . شکل کلی استفاده از متد ( ) remove به شرح زیر است : کد php:
|
$ ( selector ).remove ( ) ;
|
|
selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید آن را از صفحه حذف نمایید . مثال زیر کاربرد متد remove را نشان میدهد: کد php:
|
$(“button”).click(function(){ $(“p”).remove(); });
|
|
متد removeAttr در jQuery در این بخش از آموزش JQuery ، متد removeAttr را شرح میدهیم. متد removeAttr ، یک یا چندین خاصیت css تعیین شده برای عنصر HTML مورد نظرتان را حذف می کند . با حذف خاصیت css ، اثر آن بر عنصر از بین می رود . برای مثال فرض کنید که یک برای یک عنصر پاراگراف ( تگ < p > ) در صفحه ، خاصیت رنگ نوشته یا color تعیین کرده اید . با حذف این خاصیت و مقدارش توسط متد ( ) removeAttr ، رنگ داده شده به آن از بین رقته و به رنگ پیش فرض بر می گردد . شکل کلی استفاده از متد removeAttr به شرح زیر است : کد php:
|
$ ( selector ).removeAttr ( attribute ) ;
|
|
selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید یک یا چند خاصیت css آن را حذف نمایید . تعیین این پارامتر اجباری است . attribute : این پارامتر تعیین کننده خاصیت یا خواص css ای است که می خواهید آنها را حذف نمایید . تعیین این پارامتر اجباری است . مثال زیر کاربرد متد removeAttr را نشان میدهد: کد php:
|
$(“button”).click(function(){ $(“p”).removeAttr(“style”); });
|
|
متد removeClass در jQuery در این بخش از آموزش JQuery ، متد removeClass را شرح میدهیم. متد removeClass ، یک یا چندین کلاس تعیین شده برای عنصر HTML مورد نظرتان را حذف می کند. شکل کلی استفاده از متد removeClass به شرح زیر است : کد php:
|
$(selector).removeClass(classname,function(index,currentclass))
|
|
مثال زیر کاربرد متد removeClass را نشان میدهد: کد php:
|
$(“button”).click(function(){ $(“p”).removeClass(“intro”); });
|
|
متد removeProp در jQuery در این بخش از آموزش JQuery ، متد removeProp را شرح میدهیم. متد removeProp ، یک یا چندین ویژگی (Property) تعیین شده برای عنصر HTML مورد نظرتان را حذف می کند. شکل کلی استفاده از متد removeProp به شرح زیر است : کد php:
|
$(selector).removeProp(property)
|
|
مثال زیر کاربرد متد removeProp را نشان میدهد: کد php:
|
$(“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 مثل یک تگ را خوانده و به صفحه برگرداند . می تواند متن یک عنصر HTML مثل تگ پاراگراف را به متن دلخوه و تعیین شده تغییر دهد . هنگامی که این متد برای بازگرداندن متن استفاده می شود متن تمام عناصری که با مشصات داده شده مطابقت دارند را برمی گرداند ( این متد علامت های زبان نوشتن تگ های HTML را در نظر نمی گیرد ) . هنگامی که این متد برای تغییر متن عنصر به کار می رود متن تمام عناصری که با مشخصات داده شده مطابقت دارند را تغییر می دهد . شکل کلی استفاده از متد text به شرح زیر است : خواندن و بازگرداندن متن یک عنصر HTML به وسیله متد text می توانید متن یک عنصر مثل تگ پاراگراف را خوانده و در خروجی نمایش دهید : کد php:
selector : این پارامتر تعیین کننده id عنصری است که می خواهیم متن درون آن را خوانده و به خروجی بر گردانیم . مثال زیر کاربرد متد text را نشان میدهد: کد php:
|
$(“button”).click(function(){ $(“p”).text(“Hello world!”); });
|
|
متد toggleclass در jQuery در این بخش از آموزش JQuery ، متد toggleClass را شرح میدهیم. با متد toggleClass می توان اگر به تگی کلاس خاصی تخصیص داده نشده ،آنرا به تگ اختصاص داد ،در غیر این صورت اگر آن کلاس به آن تگ قبلا تخصیص داده شده ، کلاس از تگ حذف می شود و این تشخیص به طور خودکار توسط متد toggleClass صورت میگیرد. ساختار این دستور به صورت زیر است : کد php:
|
$(selector).toggleClass(classname,function(index,currentclass),switch)
|
|
مثال زیر کاربردمتد toggleClass را نشان میدهد: در مثال زیر در صورتیکه کلاس blue قبلا به تگ های h1 , h2 , p اعمال نشده است ، اعمال می شود و در صورتیکه قبلا کلاس blue به محتوای تگ های h1 , h2 , p اعمال شده است ، این کلاس از محتوای این تگ ها حذف خواهد شد : کد php:
|
$(“h1,h2,p”).toggleClass(“blue”);
|
|
متد unwrap در jQuery در این بخش از آموزش JQuery ، متد unwrap را شرح میدهیم. متد unwrap عنصر والد از عنصر انتخاب شده را پاک میکند. ساختار این متد به صورت زیر است : کد php:
مثال زیر کاربرد متد unwrap را نشان میدهد: کد php:
|
$(“button”).click(function(){ $(“p”).unwrap(); });
|
|
متد val در jQuery در این بخش از آموزش JQuery ، متد val را شرح میدهیم. توسط متد val میتوانیم به محتوا (value ) عناصر موجود در فرم ها دسترسی و مقدارش را تغییر دهیم .ساختار این دستور به صورت زیر است : کد php:
|
$(selector).val(); $(selector).val(newValue);
|
|
مثال زیر کاربرد متد val را نشان میدهد: به مثال های زیر توجه نمایید : کد php:
مقدار value عنصر input با آیدی name را بر میگرداند . کد php:
|
$(‘select.foo option:selected’).val();
|
|
هنگامی که پنجره dropdown باز است مقدار انتخابی را برمیگرداند . کد php:
|
$(‘select.foo’).val(‘two’);
|
|
مقدار انتخاب شده عنصر select با کلاس foo را روی مقدار two تنظیم میکند. کد php:
|
$(‘input:checkbox:checked’).val();
|
|
مقدار چک باکس انتخاب شده را بر میگرداند . کد php:
|
$(‘input:radio[name=bar]:checked’).val();
|
|
مقدار انتخاب شده از دکمه های رادیویی در گروه با نام bar را بر میگرداند.
متد width در jQuery در این بخش از آموزش JQuery ، متد width را شرح میدهیم.با استفاده از متد width عرض صفحه وب باز گشت داده می شودشکل کلی استفاده از متد width به شرح زیر است : کد php:
مثال زیر کاربرد متد width را نشان میدهد: کد php:
|
$(“button”).click(function(){ alert($(“div”).width()); });
|
|
متد wrap در jQuery در این بخش از آموزش JQuery ، متد wrap را شرح میدهیم.متد wrap ، برای کار با تگهای اطراف یک بخش استفاده میشود. شکل کلی استفاده از متد wrap به شرح زیر است : کد php:
|
$(selector).wrap(wrappingElement,function(index))
|
|
مثال زیر کاربرد متد wrap را نشان میدهد: کد php:
|
$(“button”).click(function(){ $(“p”).wrap(“<div></div>”); });
|
|
متد wrapAll در jQuery در این بخش از آموزش JQuery ، متد wrapAll را شرح میدهیم. شکل کلی استفاده از متد wrapAll به شرح زیر است : کد php:
|
$(selector).wrapAll(wrappingElement)
|
|
مثال زیر کاربرد متد wrapAll را نشان میدهد: کد php:
|
$(“button”).click(function(){ $(“p”).wrapAll(“<div></div>”); });
|
|
متد wrapInner در jQuery در این بخش از آموزش JQuery ، متد wrapInner را شرح میدهیم. شکل کلی استفاده از متد wrapInner به شرح زیر است : کد php:
|
$(selector).wrapInner(wrappingElement,function(index))
|
|
مثال زیر کاربرد متد wrapInner را نشان میدهد: کد php:
|
$(“button”).click(function(){ $(“p”).wrapInner(“<b></b>”); });
|
|
