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

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

در دو بخش قبل ، درباره تولید و یا ایجاد محتوا (creating) و درج محتوا (inserting) بطور مفصل صحبت کردیم . در این بخش می خواهیم تغییر محتوا در جی کوئری (altering) را بهمراه مثال های کاربردی بررسی کنیم .

برای شروع کار ، فایلی بنام altering.html در فولدر jq_ch_3 بسازید و مانند قبل ، کتابخانه jquery را به head این فایل اضافه کنید .

سپس کدهای زیر را به بدنه صفحه (body) بیافزایید :

<h1>Altering Document Content</h1>

    <p>In addition to creating and inserting content, the ability to alter the current content of a page is a key scenario in Web development. jQuery has functions tailored to specific situations where content needs to be altered:</p>

    <ul id="list1">

        <li><code>wrap()</code>: wrap the matched elements with the specified content</li>

        <li><code>wrapAll()</code>: wrap content around the matched elements as a group</li>

        <li><code>unWrap()</code>: remove the parents from the matched elements</li>

        <li><code>empty()</code>: remove all the child elements from the matched elements</li>

        <li><code>remove()</code>: removes elements from the page, including any embedded data and event handlers</li>

        <li><code>detach()</code>: removes elements from the page, but maintains embedded data and event handlers</li>

        <li><code>replaceAll()</code>: replaces the matched elements with the specified content</li>

        <li><code>replaceWith()</code>: replaces matched elements with content or the results of a callback function</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">

        $("document").ready(function () {

            $("#example p").wrap("<div style='color:red'/>");

            $("#example p").wrapAll("<div style='border:3px solid red'/>");

            $("#example").empty();

        });

    </script>

لطفا دو دستور دوم و سوم را کامنت کنید تا فقط تابع wrap اجرا شود .

تابع wrap همانطور که از نامش پیداست ، وظیفه اش بسته بندی و در بر گرفتن المان سلکتور با محتوای موردنظر است . بعنوان مثال در دستور زیر ، در اطراف هر پاراگراف در #example ، یک div با رنگ متن قرمز قرار داده می شود :

$("#example p").wrap("<div style='color:red'/>");

خروجی زیر را خواهیم داشت:

ویرایش محتوای صفحات وب توسط جی کوئری

حال اگر روی صفحه view page source را بزنیم ، مشاهده می کنیم که در اطراف هر تگ p یک div با مشخصات فوق تعریف شده است :

altering-content

در مقاله بعد، توابع wrapAll و remove و detach صحبت خواهیم کرد…


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



دیدگاه ها :