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


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

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

شروع کار :

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

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

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


  

Creating new document content

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.

  • html(str): can be used to retrieve or set the HTML content of an element
  • text(str): used to retrieve or set the text content of an element

This is paragraph 1

This is paragraph 2

This is paragraph 3

This is paragraph 4

This is paragraph 5

و 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("

Hi there!

"); }

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


    // create a new 

and set the content of para1 to it var newItem = $("

This is a new paragraph

"); $("#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) توسط جی کوئری در یک صفحه وب صحبت خواهیم کرد .



دیدگاه ها :