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

آموزش 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"); 
}

 

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

0/5 (0 نظر)

اطلاعات مقاله

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

فرم ارسال دیدگاه درباره

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

امکان ارسال کامنت برای این مقاله وجود ندارد.

دیدگاه کاربران درباره

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

دیدگاهی وجود ندارد