آموزش jQuery با مثال‌های کاربردی – بخش سوم

آموزش jQuery با مثال‌های کاربردی – بخش سوم

jQuery Essential Training – Part3

 

در فصل دوم از سری آموزشی jQuery ، توانستیم المان های مورد نظر خود را از صفحه انتخاب کنیم (توسط سلکتور ها selectors) و همچنین فیلترهایی روی آنها اعمال کنیم. سرفصل های مهم فصل دوم عبارتند از:

  • انواع کلی سلکتورها در جی کوئری (کلاس-نام تگ-آیدی)
  • سلکتور فرزند بلاواسطه (child)
  • سلکتور اولاد (Descendant)
  • سلکتور مجاور (Adjacent)
  • فیلترها در جی کوئری (مانند first,last,focus,not)
  • فیلترهای پیشرفته (مانند انتخاب المان هایی که اتریبیوت class دارند یا اتریبیوت lang آنها با عبارت خاصی شروع شود یا آیدی آنها شامل حروف خاصی باشد)
  • فیلترهای فرزند و محتوا (مانند contains,has,parent,nth-child)
  • فیلترهای پیمایش درختی (مانند prev,next,ParentsUntil,find,each)

 

با فصل سوم از آموزش jQuery در خدمتتان هستیم.

 

تغییر محتوای صفحه توسط jQuery:

برای شروع ، فولدر جدید برای ایجاد فایلهای فصل سوم نیاز داریم . فولدری بنام jq_ch_3 بسازید و فایل کتابخانه جی کوئری را به فولدر اضافه کنید .

 

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

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

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

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

 

درج اسکریپت alert در document ready:

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

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

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

 

ایجاد یک Event Handler :

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


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

 

تعریف تابع 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 parag 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:

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


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

بدنه تابع changeContent:

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


    function changeContent() {
        // set the text content of the last paragraph
        $("p:last").text("I've changed the last paragraph");
    }

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

 

رویداد کلیک دکمه changeAll

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



    document.

 


برچسب‌ها:

ایجاد محتواایجاد محتوا در جی کوئریتابع appendتابع attrتابع detachتابع emptyتابع insertAfterتابع insertBeforeتابع removeتابع replaceتابع replaceAllتابع wrapتابع wrapAllدستور prependدستور removeAttr