تولید محتوا در جی کوئری

تولید محتوا در جی کوئری

به مقاله اول از بخش سوم آموزش جی کوئری خوش آمدید . 

در فصل دوم توانستیم المان های مورد نظر خود را از صفحه انتخاب کنیم (توسط سلکتور ها selectors) . اکنون در این فصل میخواهیم محتوای المانهای صفحه را دستکاری کنیم (manipulating content) بعنوان مثال محتوایی کم یا اضافه کنیم و غیره .

شروع کار :

برای شروع ، فولدر جدید برای ایجاد فایلهای فصل سوم نیاز داریم . فولدری بنام jq_ch_3 بسازید و فایل کتابخانه جی کوئری (در تاریخ نگارش این مقاله نسخه jquery-1.12.2.js در دسترس است) را به فولدر اضافه کنید .

اکنون فایلی بنام creating.html تعریف کنید و در بخش head آن ، به کتابخانه جی کوئری رفرنس بدهید . یعنی تا کنون کدهای این فایل مانند زیر می باشد :

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>chapter 3-1 – Creating !</title>

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

    <script type="text/javascript">

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

        });

    </script>

</head>

<body>

</body>

</html>

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

<h1>Creating new document content</h1>

    <p>jQuery makes the creation and manipulation of document content very easy. Rather than having to directly use the verbose DOM methods, you can roll several operations into just a few function calls.</p>

    <ul id="list1">

        <li><code>html(<i>str</i>)</code>: can be used to retrieve or set the HTML content of an element</li>

        <li><code>text(<i>str</i>)</code>: used to retrieve or set the text content of an element</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>

    <div>

        <button id="create">Create Content</button>

        <button id="change">Change Content</button>

        <button id="changeAll">Change All</button>

    </div>

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

<script type="text/javascript">

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

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

        });

    </script>

توضیح : تابع alert یک باکس دیالوگ را اجرا می کند که محتویاتش را از داخل div با آیدی example میگیرد . تابع html کلیه تگ های html داخل سلکتور را بهمراه مطالبش برمیگرداند . خروجی به شکل زیر خواهد شد :

تولید محتوا توسط jquery

ایجاد یک Event Handler :

برای اینکه وقتی دکمه ای در صفحه فشرده می شود ، کارهای موردنظر ما انجام شود ، باید رویداد click دکمه را فراخوانی کنیم . بنابراین اسکریپت زیر را به بعد از دستور بالا اضافه کنید (دستور بالا را کامنت کنید) :

document.getElementById("create").addEventListener("click", function (evt) {

                createContent();

            });

و تابع createContent() را بصورت زیر تعریف کنید :

            function createContent() {

                // use the html() function to change the content of the div

                $("#example").html("<p>Hi there!</p>");

            }

توضیح : ابتدا دکمه با آیدی create را انتخاب کرده و سپس رویداد کلیک (click) آنرا شخصی سازی میکنیم و می گوییم با کلیک شدن این دکمه ، تابع createContent فراخوانی شود . همانطور که در بدنه این تابع می بینید ، محتویات المان #example را برابر Hi There!  قرار داده است . همچنین می توان محتوای یک پاراگراف را با فشردن دکمه تغییر داد مانند دستورات ذیل :

                // create a new <p> and set the content of para1 to it

                var newItem = $("<p>This is a new paragraph</p>");

                $("#para1").html(newItem);

در صورتی که دستور قبلی را کامنت کنیم ، و دو دستور فوق را اجرا کنیم ، محتویات  #para1  برابر This is a new paragrapgh خواهد شد .

حال می خواهیم دکمه change را در صفحه پیدا کنیم و رویداد کلیک آنرا صدا بزنیم :

document.getElementById("change").addEventListener("click", function (evt) {

                changeContent();

            });

برای تابع بعدی یعنی changeContent داریم :

function changeContent() {

                // set the text content of the last paragraph

                $("p:last").text("I've changed the last paragraph");

            }

توضیح : در تابع فوق ، محتوای آخرین پاراگراف را برابر عبارت مذکور قرار دادیم .

در مرحله بعد میخواهیم برای دکمه changeAll رویداد کلیک تعریف کنیم :

document.getElementById("changeAll").addEventListener("click", function (evt) {

                changeAllTheContent();

            });

و تابع changeAllTheContent بصورت زیر است :

function changeAllTheContent() {

                $("#example p").text("I've changed all the paragraphs!");

            }

که در این تابع تمام پاراگراف ها را با  متن بالا تغییر محتوا داده ایم . خروجی تابع changeAll بصورت زیر خواهد بود :

تولید محتوا در جی کوئری

نکته : مشاهده کردید که در رویداد create از تابع html استفاده کردیم و در رویداد  change از تابع text . همانطور که در مقالات قبل ذکر شد ، تفاوت این دو تابع اینست که html تگ های داخل خود را parse میکند و مثلا <b>mohtava.info</b>  بصورت mohtava.info یعنی bold شده نمایش می دهد . ولی تابع text محتویات داخل خود را عینا به خروجی می دهد .

در مقاله بعد درباره نحوه درج محتوا (inserting content) توسط جی کوئری در یک صفحه وب صحبت خواهیم کرد .


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



دیدگاه ها :