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

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

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

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

<h1>Inserting Document Content</h1>

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

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

       <ul id=”list1”>

              <li class=”a”><code>append()</code>: Appends content to the inside of the matched elements</li>

              <li class=”a”><code>prepend()</code>: Prepends content to the inside of the matched elements</li>

              <li class=”a”><code>appendTo()</code>: Appends the specified content to the inside of the matched elements</li>

              <li class=”a”><code>prependTo()</code>: Prepends the specified content to the inside of the matched elements</li>

    </ul>

    <ul>

              <li class=”a”><code>after()</code>: Appends content to the outside of the matched elements</li>

              <li class=”a”><code>before()</code>: Prepends content to the outside of the matched elements</li>

              <li class=”a”><code>insertAfter()</code>: Takes the specified content and appends it outside of the specified elements</li>

              <li class=”a”><code>insertBefore()</code>: Takes the specified content and prepends it outside of the specified elements</li>

       </ul>

    <div id=”example”>

        <p class=”a”>This is paragraph 1</p>

        <p id=”para1”>This is paragraph 2</p>

        <p class=”b”>This is paragraph 3</p>

        <p id=”para4” lang=”en-us”>This is paragraph 4</p>

        <p id=”para5” lang=”en-gb”>This is paragraph 5</p>

    </div>

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

<script type=”text/javascript” src=”jquery-1.12.2.js”></script>

    <script type=”text/javascript”>

        $(“document”).ready(function () { 

        });

    </script>

سپس دستورات جی کوئری زیر را به بخش 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("**");

            $("<p>New Para</p>").insertAfter("#example p:first");

            $("<p>New Para</p>").insertBefore("#example p:last");

 

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

insertafter

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

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

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

$("<p>New Para</p>").insertAfter("#example p:first");

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

$("<p>New Para</p>").insertBefore("#example p:last");

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


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



دیدگاه ها :