درج محتوا در جی کوئری بخش سوم

برای تمرین توابع مقاله قبل و استفاده از آنها در مثال عملی ، فایل جدیدی بنام inserting.html در فولدر jq_ch_3  بسازید و در head آن به کتابخانه جی کوئری رفرنس بدهید .

لطفا کدهای زیر را به بدنه صفحه اضافه کنید :


    

Inserting Document Content

Content can be inserted at various points in the document, relative to existing content, using a variety of jQuery methods built for each purpose.

There are two sets of insertion functions: one set for inserting content inside of other content, and one for inserting outside of other content.

  • append(): Appends content to the inside of the matched elements
  • prepend(): Prepends content to the inside of the matched elements
  • appendTo(): Appends the specified content to the inside of the matched elements
  • prependTo(): Prepends the specified content to the inside of the matched elements
  • after(): Appends content to the outside of the matched elements
  • before(): Prepends content to the outside of the matched elements
  • insertAfter(): Takes the specified content and appends it outside of the specified elements
  • insertBefore(): Takes the specified content and prepends it outside of the specified elements

This is paragraph 1

This is paragraph 2

This is paragraph 3

This is paragraph 4

This is paragraph 5

و تگ head این فایل را فعلا بصورت زیر تعریف کنید :

jquery

سپس دستورات جی کوئری زیر را به بخش script فوق اضافه کنید :


    $("#example p").append(" with some content appended"); // line 1
    $("#example p").prepend("Hello! "); // line 2
    $("#example p:last").appendTo("#example p:first"); // line 3
    $("#example p:last").prependTo("#example p:first"); // line 4

توضیح : در دستور line 1 تابع append را صدا زدیم تا متن موردنظر را بعد از متن موجود در پاراگراف های #example درج کند . در صورتی که دستورات بعدی را کامنت کنیم ، خروجی دستور خط اول به شکل زیر خواهد بود :

مثال تابع append

 

در دستور خط دوم کلمه Hello! را بعد از محتوای حال حاضر پاراگرافهای #example درج می کنیم.

در دستور line 3 از تابع appendTo استفاده کرده ایم :


  $("#example p:last").appendTo("#example p:first"); // line 3

 اما نحوه کاربرد این تابع در اینجا جالب می باشد . بدین صورت که آخرین پاراگراف #example را بعد از اولین پاراگراف (p:first) درج می کند و آنرا در واقع جابجا می کند . به تصویر زیر که خروجی این دستور است توجه کنید :

تابع appendto

مشاهده می کنید که پاراگراف ۵ یعنی (This is paragraph 5) بعد از پاراگراف ۱ آمده است .

در دستور چهارم نیز مانند دستور سوم ، از این روش استفاده شده است :


   $("#example p:last").prependTo("#example p:first"); // line 4

با این تفاوت که آخرین پاراگراف را قبل از اولین پاراگراف درج می کند . پس خروجی زیر را داریم :

مثال تابع prepend

مثال هایی برای توابع before , after , insertAfter , insertBefore :

لطفا ابتدا دستورات جی کوئری را که در بالا نوشتیم را کامنت کنید و سپس دستورات زیر را بعد از آنها اضافه کنید :


    $("#example p").after("**");
    $("#example p").before("**");
    $("

New Para

").insertAfter("#example p:first"); $("

New Para

").insertBefore("#example p:last");

دستورات دوم به بعد را کامنت کرده تا فقط دستور خط اول اجرا شود . در این دستور ، عبارت ** را بعد از تمام پاراگرافهای #example درج می کنیم . خروجی زیر را خواهیم داشت :

insertafter

در دستور دوم یعنی before ، عبارت ** را قبل از پاراگرافهای فوق درج می کنیم :


  $("#example p").before("**");

در دستور سوم ، تابع جدید بنام insertAfter را مشاهده می کنیم . این تابع ، عبارت موردنظر ما را بعد از سلکتور درج میکند که در این مثال ، سلکتور برابر اولین پاراگراف #example می باشد :


    $("

New Para

").insertAfter("#example p:first");

در دستور چهارم ، تابع جدید بنام insertBefore را مشاهده می کنیم . این تابع ، عبارت موردنظر ما را قبل و خارج از سلکتور درج میکند که در این مثال ، سلکتور برابر آخرین پاراگراف #example می باشد :


      $("

New Para

").insertBefore("#example p:last");

winkدر مقاله بعدی، با نحوه تغییر محتوا توسط جی کوئری آشنا می شویم. پس با ما باشید


تاریخ انتشار : ۱۵ خرداد ۱۳۹۵



دیدگاه ها :