خواندن ۳ دقیقه·۵ سال پیش

جابجایی، حذف و جایگزینی عناصر صفحه با jQuery(جابجایی)

سلام

اگه برنامه نویس وب باشید به خوبی با jQuery و کاربرد های متنوع اون آشنایی دارید.

کتابخونه jQuery یکی از بهترین کتابخونه های JS هست که کارهای عجیب غریبی میشه باهاش کرد.

یادم میاد وقتی می خواستم jQuery یاد بگیرم هر چی سرچ می کردم بیشتر نتایج مربوط بود به ساخت افکت های fade و slide که خودش داره و در کل بیشتر مربوط به ساخت انواع افکت. همین باعث شد فک کنم این یه کتابخونست برای ساخت افکت. اما بعد فهمیدم توی دریای امکانات jQuery، ساخت افکت فقط یه جزیرشه.

یکی از امکاناتی که jQuery داره و من زیاد ازش استفاده می کنم(معمولا برای سایت مشتری ها) امکان جابجایی، حذف یا جایگزینی المان های صفحه هست. خب من برنامه نویس وردپرسم و جوری که آموزش دیدم(بر خلاف خیلی از برنامه نویس های وردپرس) سعی می کنم برای حل مشکلات مشتری تا حدی که میشه قالب و افزونه ها رو ویرایش نکنم و از به دنبال راه حل های جایگزین باشم(همیشه حداقل یک راه حل دوم وجود داره).

خیلی وقت ها مشتری میاد میگه مثلا توضیحات مطلب که نوشته رو من میخوام جابجا کنم و بندازم توی فلان قسمت از مطلب. خب راه های مختلفی وجود داره اما راحت ترین راه(بخوانید: بدترین راه د:) اینه که قالب رو ویرایش کنید و تگ مربوط به توضیحات رو جابجا کنید.

اما یه راه دیگه هم وجود داره که یکم پیچیده تره(نه خیلی ولی یکم نیاز داره حوصله داشته باشید) استفاده از jQuery هست.

خوشبختانه jQuery توابع مختلفی داره که میشه باهاش یه المان رو جابجا کرد.

.append();
.appendTo();
.prepend();
.prependTo();

خب هر کدوم سر جای خودشون کاربرد دارن.

اما اگه ببینید دوتا از توابع یه To آخرشون اضافه دارن. فرق اینها با توابع ساده(append , prepend) توی اینه که موقع نوشتن این که چه المانی باید منتقل بشه توی چه المانی فرق بر عکس هست.(جلوتر بهتر متوجه میشید د:)

مثلا این کد رو ببینید:

<!DOCTYPE html>
<html>
    <head>
        <title>Moving using jQuery</title>
    </head>
    <body>
        <div id=&quotmyDiv1&quot>
            <p>Move me, please!</p>
        </div>
        <div id=&quotmyDiv2&quot>
            <h1>Virgool :D</h1>
        </div>
    </body>
</html>

میخوایم تگ p رو از #myDiv1 منتقل کنیم به #myDiv2. خب کد jQuery که باید بنویسم خیلی ساده و یک خطیه:

$( &quot#myDiv2&quot ).append( $( &quot#myDiv1 p&quot ) );

حالا اگه میخواستیم از appendTo() استفاده کنیم، اینجوری میشه:

$( &quot#myDiv1 p&quot ).appendTo( &quot#myDiv2&quot );

خیلی ساده. یعنی توی append، مقصد رو سمت چپ می نویسیم، توی appendTo، مقصد رو سمت راست می نویسیم.(شخصا appendTo رو ترجیح میدم د:)

اما حالا فرق append با prepend توی چیه؟

همه چیشون مثل همه و فقط توی این زمینه فرق دارن که append میاد اون چیزی که میخواید منتقل کنید رو به آخر مقصد منتقل می کنه.(یعنی مثلا توی کد بالا میره بعد از h1)

اما prepend میاد به اول تگ مقصد منتقلش میکنه.(قبل از h1). نحوه نوشتن prepend هم کاملا مثل append هست فقط هر جا دیدید نوشته append شما بزارید prepend.

مثال عملی از کاربرد append و prepend رو می تونید توی این صفحه ببینید:

http://zobyar.com/?p=6839

صفحه رو اگه به حالت گوشی در بیارید، توضیحات منتقل میشه توی یه تگ دیگه.

اینم لینک اسکریپتی که این کار رو میکنه:

http://zobyar.com/wp-content/plugins/zobyar/assets/js/zobyar.js

آموزش بعدی برای حذف عناصر از صفحه هست.

برنامه نویسیجاوا اسکریپتjqueryطراحی سایتبرنامه نویسی وب

محمدجعفر خواجه

برنامه نویس وردپرس که دوست داره بعضی از اطلاعاتش رو با بقیه به اشتراک بزاره! د:

شاید از این پست‌ها خوشتان بیاید