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

آموزش 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.

 

0/5 ( 0 نظر )
.ez-toc-title-container { text-align: right; display: inline; color: green; font-weight: bolder; direction: ltr; }

این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید!

Share on facebook
Share on google
Share on linkedin
Share on telegram
Share on email
گوگل ادز

راهنمای جامع سرویس گوگل ادز

مقالات اخیر

مقالات تصادفی

فهرست کلی مقالات

دانلود رایگان کتاب الکترونیکی

آموزش تصویری سرویس گوگل آنالیتیکس

کتاب آموزش گوگل آنالیتیکس
آموزش کامل فعال‌سازی HTTPS در وردپرس

دانلود کتاب "فعال‌سازی HTTPS در وردپرس"

دانلود رایگان کتاب الکترونیکی

معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019

دانلود رایگان کتاب الکترونیکی "معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019"