تغییر محتوای صفحه توسط جی کوئری

تغییر محتوای صفحه توسط جی کوئری

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

فایل html جدیدی بنام content.html در فولدر jq_ch_1 بسازید . مانند فایل مثال قبل در بخش head کتابخانه جی کوئری را add کنید و کدهای زیر را بعد از آن بنویسید :

<script type="text/javascript">

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

            // create some new content

            var newP = $("<p>");

            newP.append("<em>Welcome to Mohtava.info</em>");  

            $("#example").html(newP);        

            $("#creation").prepend("Watch This! ");    

            // change the existing content

            $("#example").html("<h2>This is a new H2</h2>");

            $("#example").text("<h2>This is a new H2</h2>");

        });

    </script>

و متن زیر را در بخش body فایل بنویسید :

<h1 id="intro">Using jQuery to Create/Change Content</h1>

    <p>jQuery makes it very easy to create new page content and change existing page content.</p>

    <h2 id="creation">Content Creation</h2>

    <p>Creating new content is as simple as passing a string of HTML to the $() function.</p>

    <p>For example, <code>$("&lt;p&gt;")</code> creates a new, empty paragraph tag. To add new content to the paragraph, you could simply write <code>$("&lt;p&gt;").append("&lt;em&gt;Hello there&lt;/em&gt;")</code>.</p>

    <h2 id="changing">Changing Content</h2>

    <p>There are multiple ways to change page content using jQuery, depending on your needs.</p>

    <p>The <code>html()</code> and <code>text()</code> functions can be used to directly manipulate the contents of elements, and there are ways to control how content can be inserted and moved around in the page.</p>

    <div id="example">

    </div>

توضیح : در دستور اول یعنی var newP متغیری تعریف کردیم که آغازکننده یک paragraph می باشد (<p>) و در خط بعدی عبارت Welcome to Mohtava.info  را به پاراگراف اضافه می کند . در خط سوم سلکتوری برای انتخاب المانی در صفحه با id=example می باشد که پاراگراف فوق را به آن اضافه کند .

اگر سایر دستورات واقع در بین تگ script را کامنت کنید ، خروجی زیر را خواهید دید :

تولید-تغییر محتوا توسط جی کوئری

یعنی با اجرای دستورا زیر به خروجی فوق می رسیم :

<script type="text/javascript">

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

            // create some new content

            var newP = $("<p>");

            newP.append("<em>Welcome to Mohtava.info</em>");

            $("#example").html(newP);

        });

    </script>

تابع html ، تمام محتوای سلکتور خود را برابر مقدار ورودی در نظر میگیرد یعنی متن آن سلکتور کاملا عوض می شود ولی اگر بخواهیم متنی به بعد از متن داخل سلکتور (مثلا div با کلاس something) اضافه شود از دستور append استفاده میکنیم و اگر بخواهیم متن جدید  به قبل از متن قبلی یعنی بالای متن قبل اضافه شود از prepend استفاده کنید :

$("#creation").prepend("Watch This! ");

با اجرای این دستور ، عبارت Watch This! بالای متن حال حاضر div با آیدی creation اضافه می شود .

همانطور که قبلا گفتیم ، تابع html کل محتوای داخل سلکتور را تغییر می دهد . تابع دیگری برای انجام اینکار وجود دارد بنام text . البته با تابع html تفاوت دارد و آن اینست که هر آنچه در داخل تابع text نوشته شود (اعم از تگ html) عینا در سلکتور نوشته می شود ولی تابع html تگ های html را render میکند . مثلا اگر بنویسیم : text(“<h3>Mohtava.info</h3>”) عبارت <h3>Mohtava.info</h3> عینا بجای محتوای سلکتور قرار می گیرد .

در مقاله بعد ، سراغ معرفی و توضیح رویدادها (events) در جی کوئری خواهیم رفت .


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



دیدگاه ها :