آموزش جی کوئری [jQuery] با مثال‌های کاربردی

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

jQuery Essential Training

برگرفته از ویدیوی آموزشی Lynda.com

جی کوئری چیست ؟

کتابخانه ای از جاوا اسکریپت است که رایگان و متن باز (Open Source) می باشد و در اکثر مرورگرهای موجود بخوبی کار میکند (Cross Browser) . همچنین بسادگی قابل فهم و توسعه می باشد .

جی کوئری می تواند براحتی با css و Javascript تعامل داشته باشد و پلاگین های بسیار زیادی در اینترنت (بصورت رایگان و متن باز) وجود دارد که می توانیم از آنها در پروژه خود استفاده کنیم و یا ایده بگیریم . همانطور که در تصویر فوق (لوگوی جی کوئری) مشخص است ، شعار جی کوئری write less, do more می باشد . به این معنی که کمتر بنویس ، بیشتر انجام بده . به زبان خودمانی یعنی با کد کمتر بازدهی بیشتری خواهید داشت . وب سایت اصلی و مرجع جی کوئری Jquery.com می باشد که دوستانی که با زبان انگلیسی آشنایی بیشتری دارند ، راحت تر می توانند از آموزش ها و پلاگین های این سایت استفاده کنند .

استفاده از IDE مناسب :

برای شروع کد نویسی ، نرم افزاری نیاز دارید که کدهای JQuery را در آن بنویسید . می توانید از یکی از نرم افزارهای Visual Studio – Brackets – Sublime Text استفاده کنید :

https://www.sublimetext.com/

http://brackets.io/

https://www.visualstudio.com/

بنده از نرم افزار Visual Studio استفاده می کنم . اکثر مقالات این دوره آموزشی نیازی به سرور ندارند ولی در مقاله ای که به Ajax می رسیم باید از وب سرور استفاده کنیم زیرا Ajax با سرور در تعامل است .

دانلود جی کوئری :

با مراجعه به وب سایت جی کوئری (http://jquery.com/download/) مشاهده می کنید که در کل دو نسخه جی کوئری داریم . یکی Compressed Production و دیگری نسخه UnCompressed Development . در زمان نگارش این مقاله ، نسخه 1.12.2 از جی کوئری در دسترس می باشد .

فعلا از نسخه دوم یعنی غیر فشرده استفاده می کنیم و بنابراین روی لینک مربوط به آن راست کلیک کرده (مطابق تصویر زیر) و Save Link As را بزنید :

تا اینجا جی کوئری را معرفی کردیم و لزوم استفاده از آن را توضیح دادیم . و همچنین کتابخانه جی کوئری را از سایت Jquery.com دانلود نمودیم . در این بخش ، اولین فایل html را در این سری آموزشی ایجاد می کنیم و در آن به کتابخانه جی کوئری رفرنس می دهیم .

ایجاد فایل html :

فولدری بنام jq_ch_1  ایجاد کنید و فایل کتابخانه jquery که دانلود کردید را داخل آن بریزید . نرم افزار ویژوال استودیو را باز کنید . در همین فولدر فایلی با فرمت html و نام selectors بسازید .

افزودن رفرنس کتابخانه jQuery به سایت:

در تگ head این فایل کد زیر را بنویسید :

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

با اینکار رفرنس کتابخانه جی کوئری را به وب سایت خود اضافه نمودیم .

تست صحت کارکرد جی کوئری:

حال می خواهیم کدی بنویسیم که متوجه شویم جی کوئری لود شده است یا خیر :

<script type="text/javascript">
   $("document").ready(function () {
       $("body").append("<p>Jquery is Loaded !</p>");
 });
</script>

توضیح : این کد را باید بعد از رفرنس کتابخانه جی کوئری بنویسید . علامت $ عبارت خلاصه jquery می باشد . پس می توانیم بجای $ از کلمه jquery نیز استفاده کنیم ولی $ بیشتر مرسوم می باشد . عبارت  $(“body”) یک selector است و بدین معنی می باشد که عملیاتی که بعد از آن گفته بیان می شود روی body اعمال می شود . در نهایت زمانی که داکیومنت ready باشد عبارت Jquery is Loaded ! در بدنه وب سایت نوشته می شود .

درج محتوا توسط کدهای جاوا اسکریپت:

اگر میخواستیم عبارت فوق را توسط جاوا اسکریپت بنویسیم باید کدی بصورت زیر را بنویسیم :

window.addEventListener("DOMContentLoaded", function(evt) { 
 var elem = document.getElementsByTagName("body")[0]; 
 var para = document.createElement("p"); 
 var text = document.createTextNode("The page just loaded!"); 
 para.appendChild(text); elem.appendChild(para); 
});

مشاهده می کنید که در جاوااسکریپت باید 6 خط کد بنویسیم ولی جی کوئری همین کار را در دو خط انجام می دهد !

در این سری آموزشی ، ابتدا به معرفی مختصر موارد زیر می پردازیم و سپس در بخش های بعدی ، بطور مفصل تر درباره موضوعات زیر صحبت خواهیم کرد :

• سلکتور ها (Selectors)
• رویدادها (Events)
• انیمیشن ها (Animations)

تا اینجا، با نحوه افزودن رفرنس کتابخانه جی کوئری در یک صفحه وب آشنا شدیم و شروع به نوشتن کدهای جاوا اسکریپتی کردیم . در این بخش میخواهیم در مورد موضوع مهم و اساسی در یادگیری جی کوئری ، یعنی سلکتورها (selectors) صحبت کنیم.

سلکتور در jQuery چیست؟

به عباراتی مانند $(“body”) و $(“p”) سلکتور می گویند . که تمام پاراگراف های موجود در صفحه را انتخاب می کند . حال اگر بخواهیم بگوییم اولین پاراگراف را انتخاب کن باید از فیلترها (Filters) استفاده کنیم . بدین صورت : $(“p:first”)

سلکتورهای کلاس و آیدی در جی کوئری:

نکته 1): فرض کنیم می خواهید دکمه یا لینکی را که آیدی btn1 دارد را انتخاب (select) کنید . باید سلکتور را بصورت $(“#btn1”) بنویسیم . علامت # بیانگر آیدی المان می باشد .

نکته 2): فرض کنید می خواهید المانی در صفحه را که کلاس css ای بنام btn1 دارد را انتخاب کنیم . سلکتور بصورت $(“.btn1”) خواهد بود .

برای مثالهای بعدی ، متن زیر را در بخش body فایل selectors.html بنویسید :

<h1 id="intro">Introduction to jQuery Selectors and Filters</h1>
<p>Selectors and Filters provide a way of finding and extracting information from Web pages.</p>
<h2 class="selectors">Selectors</h2>
<p>Selectors are used to select parts of the Web page using a common CSS-style syntax.</p>
<p>For example, $("p") will select all of the paragraph tags in a document and return them as a list that can be further operated upon.</p>
<h2 class="filters">Filters</h2>
<p>Filters are used to further refine the results returned from selectors.</p>
<p>For example, $("p:first") will select the first paragraph in the returned set from $("p").</p>

بنابراین تا کنون فایل html دارای کدهای زیر است :

برای اینکه حاشیه تمام پاراگراف های صفحه را قرمز رنگ کنیم ، عبارت زیر را در بخش script بنویسید :

$("p").css("border", "3px solid red");

توضیح : برای اعمال استایل های css به سلکتور ، از تابع css استفاده می کنیم که دو پارامتر می گیرد ، اولی نام property و دومی مقدار آن که در اینجا border : 3px solid red می باشد . خروجی بصورت تصویر زیر می باشد :

$(".selectors").css("border", "3px solid red"); //1 
$("#intro").css("border", "3px solid red"); //2 
$("p:first").css("border", "3px solid red"); //3 
$("h2:not(.selectors)").css("border", "3px solid red"); //4

شرح دستورات فوق:

• خط1: برای اینکه استایل بالا روی تمام المان هایی که کلاس selector دارند اعمال شود

• خط2: اعمال استایل css روی المانهای با آیدی intro

• خط3: اعمال حاشیه قرمز رنگ به اولین پاراگراف

• خط4: انتخاب المان یا المان هایی که دارای کلاس selector نیستند

در بخش قبل ، به معرفی سلکتور های جی کوئری پرداختیم و مثالهایی در این زمینه را بررسی کردیم . در این بخش، با نحوه تغییر محتوای یک صفحه وب توسط دستورات جی کوئری آشنا می شویم .

تغییر محتوای یک صفحه وب توسط جی کوئری:

فایل html جدیدی بنام content.html در فولدر jq_ch_1 بسازید . مانند فایل مثال قبل در بخش head کتابخانه جی کوئری را add کنید و کدهای زیر را بعد از آن بنویسید :

$("document").ready(function () {
 //create some new content
  var newP = $("<p></p>"); 
  newP.append("<em>Welcome to Mohtavaban.com</em>"); 
  $("#example").html(newP); 
  $("#creation").prepend("Watch This! ");
 //change the existing content
  $("#example").html("<h2>This is a new H2</h2>");
  $("#example").text("<h2>This is a new H2</h2>");
});

و متن زیر را در بخش body فایل بنویسید :

<h1 id="intro">
 Using jQuery to Create/Change Content
</h1>

<p>
 jQuery makes it very easy to create new page content and change existing page content.
</p>

<h2 id="creation">
 Content Creation
</h2>

<p>
 Creating new content is as simple as passing a string of HTML to the $() function.
</p>

<p>
 For example, $("<p>") creates a new, empty paragraph tag. To add new content to the paragraph, you could simply write $("<p>").append("<em>Hello there</em>").
</p>

<h2 id="changing">
 Changing Content
</h2>

<p>
 There are multiple ways to change page content using jQuery, depending on your needs.
</p>

<p>
 The html() and text() functions can be used to directly manipulate the contents of elements, and there are ways to control how content can be inserted and moved around in the page.
</p>

<div id="example"></div>

توضیح : در دستور اول یعنی var newP متغیری تعریف کردیم که آغازکننده یک paragraph می باشد (<p>) و در خط بعدی عبارت Welcome to Mohtavaban.com  را به پاراگراف اضافه می کند . در خط سوم سلکتوری برای انتخاب المانی در صفحه با id=example می باشد که پاراگراف فوق را به آن اضافه کند .

اگر سایر دستورات واقع در بین تگ script را کامنت کنید ، خروجی زیر را خواهید دید :

یعنی با اجرای دستورات زیر به خروجی فوق می رسیم :

$("document").ready(function () {
 // create some new content
 var newP = $("<p></p>"); 
 newP.append("<em>Welcome to Mohtavaban.com</em>"); 
 $("#example").html(newP);
});

تابع html ، تمام محتوای سلکتور خود را برابر مقدار ورودی در نظر میگیرد یعنی متن آن سلکتور کاملا عوض می شود ولی اگر بخواهیم متنی به بعد از متن داخل سلکتور (مثلا div با کلاس something) اضافه شود از دستور append استفاده میکنیم و اگر بخواهیم متن جدید  به قبل از متن قبلی یعنی بالای متن قبل اضافه شود از prepend استفاده کنید :

$("#creation").prepend("Watch This! ");

با اجرای این دستور ، عبارت Watch This! بالای متن حال حاضر div با آیدی creation اضافه می شود .

همانطور که قبلا گفتیم ، تابع html کل محتوای داخل سلکتور را تغییر می دهد . تابع دیگری برای انجام اینکار وجود دارد بنام text . البته با تابع html تفاوت دارد و آن اینست که هر آنچه در داخل تابع text نوشته شود (اعم از تگ html) عینا در سلکتور نوشته می شود ولی تابع html تگ های html را render میکند . مثلا اگر بنویسیم text(“<h3>Mohtavaban.com</h3>”) عبارت <h3>Mohtavaban.com</h3> عینا بجای محتوای سلکتور قرار می گیرد .

در بخش قبل ، بطور مختصر درباره تولید و تغییر محتوای یک صفحه وب توسط append و prepend صحبت کردیم . در این بخش می خواهیم بطور اجمالی  رویدادها (events) در جی کوئری را مورد بررسی قرار دهیم .

رویدادها (events) در جی کوئری:

بعنوان مثال وقتی موس از روی یک div با id=example کنار می رود (Mouse Over) یک رویداد رخ داده است . به مثال ساده زیر دقت کنید :

پیاده سازی رویدادهای MouseMove و MouseLeave

در این مثال می خواهیم رویدادهای MouseMove و MouseLeave را پیاده سازی کنیم .

یک فایل html جدید بنام events ایجاد کنید و کتابخانه جی کوئری را نیز به آن اضافه کنید .

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

استایل زیر را بنویسید:

#example { 
 height:300px; 
 width:300px; 
 border:2px outset red; 
}

اسکریپت زیر را بنویسید:

$("document").ready(function () { 
 $("#example").on("mousemove", OnMouseMove); 
 $("#example").on("mouseleave",OnMouseLeave); 
}); 
function OnMouseMove() { 
 $("#example").html("Mouse In !"); 
} 
function OnMouseLeave() { 
 $("#example").html("Mouse Out !"); 
}

و سپس تگ div زیر را در body صفحه اضافه کنید :

<div id="example"></div>

 توضیح : ابتدا به باکس با آیدی example عرض و طول و حاشیه داده ایم و سپس در script ، رویدادهای Mouse Leave و Mouse Move را صدا زده ایم و در نهایت در بدنه صفحه ، div با آیدی example را تعریف کرده ایم .

در بخش قبل ، بطور مختصر در باره رویدادهای جی کوئری صحبت کردیم . اکنون در این بخش می خواهیم به معرفی و توضیح مختصر انیمیشن در جی کوئری بپردازیم . در فصلهای آینده ، بطور مفصل تر در این باره صحبت خواهیم کرد.

پیاه سازی انیمیشن در jQuery توسط تابع animation:

قابلیت جالب دیگر در جی کوئری انیمیشن ها می باشند که توسط تابع animate پیاده سازی می شوند . در مثالی که برای انیمیشن ها در نظر گرفتیم ، یک button داریم با آیدی go و مانند مثالهای قبل ، یک div داریم با آیدی testDiv . میخواهیم با زدن دکمه Go ، انیمیشن هایی روی div اعمال شود.

ایجاد فایل animation.html و درج دستورات لازم:

فایل جدیدی بنام animation.html بسازید و مانند مثالهای قبل ، کتابخانه جی کوئری را به بخش head آن بیافزایید . حال در بدنه فایل html یعنی تگ body کدهای زیر را بنویسید :

<button id="go">Go !</button>
<div id="testDiv"></div>

استایل های css موردنیاز:

میخواهیم استایلی را به باکس مذکور اعمال کنیم . پس کدهای زیر را داخل تگ head بنویسید :

#testDiv { 
 position: relative; 
 width: 150px; 
 height: 100px; 
 margin: 10px; 
 padding: 20px; 
 background: #b3c8d0; 
 border: 1px solid black; 
 font-size: 16pt; 
 cursor: pointer; 
}

دستورات داخل بلاک script:

در این مرحله به سراغ دستورات داخل بلاک script می رویم که کدهای جی کوئری لازم را برای صدا زدن تابع انیمیشن در آنجا تعریف کنیم .

توضیح کلی : می خواهیم باکس فوق ، بعد از فشردن دکمه Go ، ابتدا طولش 400px شود و سپس ارتفاعش یعنی height به 400px برسد . در مرحله بعد از سمت چپ صفحه 200px فاصله بگیرد و در نهایت نیز border آن ضخیم شود .

به کد زیر دقت کنید :

$("#go").click(function() { 
 $("#testDiv")
 .animate({width: 400}, 300) 
 .animate({height: 300}, 400) 
 .animate({left: 200}, 500) 
 .animate({top: "+=100", borderWidth: 10}, "slow") 
});

شرح تابع animation در jQuery:

مشاهده می کنید که 4 بار از تابع animate استفاده کرده ایم و به ترتیب width , height , left , borderWidth را تحت تاثیر قرار داده ایم . بعنوان مثال animate({width:400px}, 300) به این معنی می باشد که در طول مدت زمان 300 میلی ثانیه ، طول div را از هر چه که هست به 400 پیکسل برسان .

نکته : در دستور آخر دو عملیات روی div بطور همزمان اعمال می شود . گفته ایم که با سرعت slow بطور همزمان div هم از بالا 100 پیکسل فاصله بگیرد و هم ضخامتش به 10 پیکسل برسد .

سلکتورها در جی‌کوئری (jQuery Selectors):

ابتدا یک فولدر بنام jq_ch_2 ایجاد کنید . سپس فایلی بنام selectors.html بسازید و کتابخانه جی کوئری را مانند فصل اول ، به تگ head این فایل اضافه کنید . حال کدهای زیر را در بدنه فایل html یعنی تگ body وارد کنید :

<h1>
 Using Basic jQuery Selectors
</h1>

<p>
 Selectors are used to do exactly what their name implies: select content within a Web page.
</p>

<p>
 They use a very CSS-like syntax in order to do this. To take a few examples:
</p>

<ul id="list1">
 <li class="a">
  $("<i>tag</i>"): Select all of the <tag> elements
 </li>
 <li class="a">
  $("<i>.className</i>"): Select all elements that have the <i>className</i> class applied
 </li>
 <li class="b">
  $("#identifier"): Select the element with the id of <i>identifier</i>
 </li>
 <li class="b">
  $("<i>tag.className</i>"): Select all <tag> elements that have the <i>className</i> class applied
 </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>

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

$("p").css("border", "3px solid blue"); 
$(".a").css("border", "3px solid blue "); 
$("#example").css("border", "3px solid blue "); 
$("p.b").css("border", "3px solid blue ");

انواع سلکتورها در جی کوئری:

بهتر است ابتدا انواع سلکتور را در jquery بیان کنیم :

مشاهده می کنید که بطور کلی سلکتور ها در جی کوئری به سه بخش تقسیم می شوند:

• انتخاب المان توسط نام تگ (Tag name)
• انتخاب المان توسط آیدی (Identifier)
• انتخاب المان توسط نام کلاس (Class name)

انتخاب تمام پاراگرافهای صفحه:

اکنون به سراغ توضیح اولین مثال فصل دوم می رویم . در بخش script خطوط دوم به بعد را کامنت کنید تا فقط خط اول اجرا شود یعنی :

$("p").css("border", "3px solid blue");

بعد از باز کردن فایل selectors.html واقع در فولدر jq_ch_2 ، با خروجی زیر روبرو می شویم :

همانطور که مشاهده می کنید تمام پاراگرافهای صفحه انتخاب شده اند و دستور حاشیه آبی روی آنها اعمال شده است .

انتخاب پاراگرافهای دارای کلاس مشخص:

در حالت بعدی ، دستور زیر را اجرا کنید (سایر خطوط را کامنت کنید) :

$("p.b").css("border", "3px solid blue");

توضیح : این سلکتور بدین معنی است که تمام پاراگرافهایی که دارای کلاس b هستند را انتخاب کن . با توجه به اینکه تنها یک پاراگراف با این خاضیت در صفحه وجود دارد ، خروجی بصورت زیر خواهد شد :

فیلترها در جی‌کوئری (jQuery Filters):

خاصیتی که برای فیلتر کردن المان های انتخابی در صفحه بکار می روند مانند last و first و odd و even .

انواع فیلترهای جی کوئری :

<h1>
 Using Basic jQuery Filters
</h1>

<p>
 jQuery filters are used to refine the results that are returned from selectors.
</p>

<p>
 A few examples:
</p>

<ul id="list1">
 <li class="a">
  $("p:first"): of the returned <p> tags, select the first one
 </li>
 <li class="a">
  $("p:even"): select the even-number <p> tags
 </li>
 <li class="b">
  $("a:gt(1)"): of the <a> tags, select all those after the 0th and 1st
 </li>
 <li class="b">
  $("p:not(p:eq(2))"): select all the <p> tags except the one at index 2
 </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>

$("document").ready(function () { 
 $("#example p:first").css("border", "3px solid green"); 
 $("#example p:last").css("border", "3px solid green "); 
});

مثالی از فیلترهای even و odd در jQuery

برای تمرین بعدی دو خط زیر را به دستورات جی کوئری اضافه کنید (دستورات first و last را comment کنید) :

$("#example p:even").css("border", "3px solid red"); 
$("#example p:odd").css("border", "3px solid red");

ابتدا خط دوم یعنی odd را کامنت کنید و سپس فایل filters.html را در مرورگر خود اجرا کنید . خروجی زیر را خواهید دید :

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

نکته : ایندکس ها از عدد صفر شروع می شوند پس پاراگراف اول که ایندکس 0 (عدد زوج) دارد انتخاب شده است .

فیلتر odd نیز به همین ترتیب عمل می کند با این تفاوت که ایندکس های 1 و 3 را انتخاب می کند .

در تمرین بعدی دستورات زیر را داریم :

$("#example .a:first").css("border", "3px solid green"); 
$("#example .b:even").css("border", "3px solid green");

توضیح : سلکتور $(“#example .a:first”) بدین مفهوم است که اولین المانی را انتخاب کن که اولا داخل div با آیدی example باشد و دوما کلاس a داشته باشد .

مثالی از فیلترهای gt و lt و equal و not

تمرین بعدی درباره فیلترهای بزرگتر-مساوی-کوچکتر می باشد . دستورات زیر را در بخش script فایل خود بنویسید و سایر دستورات را کامنت کنید :

$("#example p:gt(1)").css("border", "3px solid green"); 
$("#example p:not(p:eq(2))").css("border", "3px solid green");

توضیح : سلکتور اول یعنی #example p:gt(1) می گوید تمام پاراگراف هایی را انتخاب کن که اولا در محدوده div با آیدی example باشند دوما ایندکس آنها از یک بزرگتر باشد (یعنی پاراگرافهای سوم به بعد) . بنابراین خروجی دستور اول به شکل زیر خواهد بود :

توضیح دستور دوم : در این سلکتور یعنی $(“#example p:not(p:eq(2))) قضیه را کمی پیچیده کردیم !

این selector بدین معنی است که اولا مانند سایر مثال های این بخش درون تگ div با آیدی example باشد . ثانیا با عبارت (expression) داخل فیلتر not مطابقت نداشته باشد یعنی ایندکس پاراگراف 2 نباشد . بنابراین بجز پاراگراف سوم (ایندکس 2) سایر پاراگراف ها را انتخاب می کند . خروجی بصورت زیر است :

سلکتورهای پیشرفته در جی کوئری:

در این قسمت می خواهیم سلکتور های پیچیده تر (سلسله مراتبی-Hierarchy) را با هم بررسی کنیم .

سلکتور فزرند بی واسطه (Child Selector) :

برای انتخاب فرزند مستقیم یک والد (Parent) بکار میرود که توسط کاراکتر < مشخص می شود . به مثال زیر توجه کنید :

فایلی بنام advanced_selectors.html در فولدر jq_ch_2 بسازید و مانند مثالهای قبل ، به کتابخانه جی کوئری رفرنس بدهید . کدهای زیر را در بخش بدنه صفحه بنویسید :

<h1>
 jQuery Hierarchy Selectors
</h1>

<p>
 To select elements based on their position in the document tree, use the Hierarchy Selectors.
</p>

<p>
 The Hierarchy Selectors work by examining the position of target elements relative to other elements:
</p>

<ul id="list1">
 <li>
  $(parent > child): selects child elements that are immediate descendants of the parent
 </li>
 <li>
  $(ancestor descendant): selects descendant elements as long as they have an ancestor element somewhere above them
 </li>
 <li>
  $(prev + next): selects the next element if it is immediately preceded by a prev element
 </li>
 <li>
  $(prev ~ siblings): selects all siblings elements that come after a prev 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>

 و در بخش head آن ، script جی کوئری را مطابق زیر تعریف کنید :

$("document").ready(function () { 
 $("div > p").css("border", "3px solid yellow"); 
});

توضیح : در اسکریپت جی کوئری فوق، گفتیم که پاراگراف هایی را انتخاب کن که فرزند بی واسطه (مستقیم) تگ div باشند سپس رنگ border آنها را زرد کن (مطابق تصویر زیر) :

سلکتور اولاد (Descendant Selector) :

بیانگر فرزندان یک والد و نیز نوه ها و نتیجه ها و … می باشد ! بدین معنی که مهم نیست المان بصورت بی واسطه فرزند والد باشد و فقط باید زیرمجموعه والد باشد . مثال زیر را بررسی کنید :

دستور جی کوئری زیر را به بخش head اضافه کنید و دستور قبلی را کامنت کنید :

$("document").ready(function () { 
 $("div > p").css("border", "3px solid yellow"); 
});

توضیح : سلکتور $(“div p.a”) بدین مفهوم است که تمام پاراگرافهایی که دارای کلاس a هستند و نیز زیرمجموعه تگ div باشند را انتخاب کن .

سلکتور مجاور (Adjacent Selector) :

برای انتخاب المانی که دقیقا بعد از المان اول آمده است . بطور مثال در سلکتور $(“a + b”) گفته شده که المان b را که دقیقا مجاور به المان a می باشد را انتخاب کن . به مثال واضح تر زیر دقت کنید :

دستور زیر را در بخش مربوطه بنویسید :

$("ul + div").css("border", "3px solid yellow");

این سلکتور بدین معنی می باشد که تگ div را که بلافاصله بعد از ul آمده است را انتخاب کن . بنابراین خروجی در این حالت بصورت تصویر زیر می شود :

مشاهده می کنید که کل div با آیدی example انتخاب شده است (زیرا مجاور تگ ul می باشد)

سلکتور هم‌خانواده‌های بعد (Next Siblings Selector) :

به این معنی است که تمام هم خانواده های بعد از المان اول را انتخاب کن . با مرور مثال زیر ، مطلب کاملا برایتان روشن خواهد شد :

دستور زیر را در script بنویسید :

$("#para1 ~ p").css("border", "3px solid yellow");

سلکتور $(“#para1 ~ p”) بدین معنی است که تمام پاراگرافهایی که هم خانواده (sibling) المانی با آیدی para1 می باشند و بعد از آن تعریف شده اند را انتخاب کن . خروجی بصورت زیر می شود :

فیلترهای پیشرفته در جی کوئری:

در بخش قبل ، در مورد سلکتورهای پیشرفته (Advanced Selectors) در جی کوئری (Jquery) صحبت کردیم . در این بخش موضوع مورد بررسی ما ، فیلترهای پیشرفته می باشد .

ابتدا فایلی بنام advanced_filters.html در فولدر jq_ch_2 بسازید و در آن به کتابخانه جی کوئری رفرنس بدهید . کدهای زیر را به بدنه صفحه اضافه کنید :

<h1>
 Using Attribute Filters
</h1>

<p>
 Attribute filters are used to select elements in the Web page that have attribute values matching a given set of criteria.
</p>

<p>
 Some examples include:
</p>

<ul id="list1">
 <li class="a">
  [attr]: element has an attribute named <i>attr</i>
 </li>
 <li class="a">
  [attr=val]: element has an attribute whose value is "val"
 </li>
 <li class="b">
  [attr^=val]: element has an attribute whose value starts with "val"
 </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>

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

$("document").ready(function () { 
 $("p[class]").css("border", "3px solid orange"); 
 $("p[id=para1]").css("border", "3px solid orange"); 
 $("p[id^=para]").css("border", "3px solid orange"); 
 $("p[id^=para][lang*=en-]").css("border", "3px solid orange"); 
});

توضیح : لطفا خطوط دوم تا چهارم را کامنت کنید تا فقط دستور اول اجرا شود .

انتخاب المان‌های دارای اتریبیوت class:

در اولین سلکتور یعنی $(“p[class]”)  گفتیم پاراگراف هایی را انتخاب کن که اتریبیوت کلاس دارند (مهم نیست مقدار آن چیست) . بنابراین با توجه به کد داخل بدنه صفحه ، دو پاراگراف دارای این خاصیت هستند (خروجی تصویر زیر) :

سلکت المان با آیدی مشخص در جی کوئری:

در دستور جی کوئری بعدی یعنی کد زیر ، مقدار اتریبیوت را بطور صریح اعلام کرده ایم :

$("p[id=para1]").css("border", "3px solid orange");

توضیح : در سلکتور $(“p[id=para1]”) گفتیم پاراگرافی را انتخاب کن که آیدی آن para1 باشد .

سلکت پاراگراف هایی که آیدی شان با عبارتی مشخص شروع می شود:

در دستور بعدی داریم :

$("p[id^=para]").css("border", "3px solid orange");

علامت فلش به سمت بالا (up arrow) بدین معنیست که میخواهیم پاراگراف هایی را انتخاب کنیم که id آنها با عبارت para شروع شوند . بنابراین خروجی زیر را خواهیم داشت :

انتخاب پاراگرافهایی که اتریبیوت lang آنها شامل عبارت خاصی باشد:

در مثال بعدی از فیلترهای جی کوئری ، دستور زیر را داریم :

$("p[id^=para][lang*=en-]").css("border", "3px solid orange");

در این فیلتر ما دنبال المانی با دو اتریبیوت مذکور می گردیم . گفتیم که پاراگرافهایی را انتخاب کن که اولا آیدی آنها با para شروع شوند . ثانیا اتریبیوت lang آنها شامل عبارت en- باشد .

نکته : فیلتر ^= به معنی شروع شدن با (starts with) و عبارت *= به معنی شامل عبارت (contains) بودن می باشد .

بنابراین خروجی به شکل زیر خواهد بود :

فیلترهای فرزند و محتوا (Child and Content Filters) :

ابتدا فایلی بنام child_and_content.html در فولدر jq_ch_2  ایجاد کرده و مطابق معمول ، در تگ فایل ، به کتابخانه jquery  رفرنس بدهید .

در بدنه (body) صفحه ، کدهای زیر را بنویسید :

<h1>
 Using Child and Content Filters
</h1>

<p>
 These selectors are used to retrieve content that matches certain conditions, such as whether they contain certain content, whether they are visible/hidden, or whether they are in a certain position within their parent.
</p>

<ul id="list1">
 <li class="a">
  :contains('text'): select elements that contain specific text
 </li>
 <li class="a">
  :parent: select elements have at least one child node (element or text)
 </li>
 <li class="a">
  :has(<i>selector</i>): select elements that contain at least one element that matches the selector
 </li>
 <li class="a">
  :first-child: select elements that are the first child of their parents
 </li>
 <li class="a">
  :last-of-type: select elements that are the last of their type among siblings
 </li>
 <li class="a">
  :nth-child(): select elements that are the nth child of their parent
 </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>

و برای بخش script کدهای زیر را تعریف کنید :

$("document").ready(function () { 
 $("p:contains('3')").css("border", "3px solid blue"); 
 $("p:parent").css("border", "3px solid blue"); 
 $("div:has(p[class=a])").css("border", "3px solid blue"); 
});

دستورات دوم و سوم را فعلا کامنت کنید تا دستور اول اجرا شود .

فیلتر contains در جی کوئری:

 در سلکتور (‘3’)p:contains از فیلتر contains استفاده شده است که به این مفهوم است که پاراگرافی را select کن که شامل عدد 3 باشد . بنابراین خروجی زیر را داریم :

فیلتر parent در جی کوئری:

در مثال بعدی از فیلتر والد (parent) استفاده کرده ایم :

$("p:parent").css("border", "3px solid blue");

سلکتور $(“p:parent”) به این معنی است که پاراگراف هایی را انتخاب کن که والد حداقل یک فرزند باشند یعنی حداقل یک فرزند داشته باشند . با اجرای دستور فوق ، خروجی زیر در انتظارتان خواهد بود :

نکته : همانطور که مشاهده می کنید هیچیک از پاراگراف های این صفحه دارای فرزند نمی باشند ولی دستور جی کوئری روی آنها اعمال شده است . این بدین خاطر است که فیلتر parent ، نوشته داخل تگ p را نیز یک فرزند تلقی می کند و بنابراین به اطراف تمام پاراگراف های این صفحه حاشیه آبی رنگ داده است .

فیلتر has در جی کوئری:

در مثال بعدی از فیلتر has استفاده کرده ایم :

$("div:has(p[class=a])").css("border", "3px solid blue");

سلکتور $(“div:has(p[class=a])”) به این معنی است : به دنبال div بگرد که شامل حداقل یک پاراگراف با کلاس a باشد .

فیلترهای فرزند (child) در jQuery:

اکنون سراغ فیلترهای child می رویم . دستورات زیر را در بخش script بنویسید :

$("div p:first-child").css("border", "3px solid blue");
$("div p:last-of-type").css("border", "3px solid blue"); 
$("div p:nth-child(3)").css("border", "3px solid blue"); 
$("div p:nth-child(2n)").css("border", "3px solid blue");

فیلتر first-child در جی کوئری:

ابتدا سه خط آخر را کامنت کنید تا فقط دستور جی کوئری زیر اجرا شود :

$("div p:first-child").css("border", "3px solid blue");

سلکتور $(“div p:first-child”) بدین معنی می باشد که پاراگرافی را انتخاب کن که اولین فرزند تگ div باشد . با توجه به اینکه در بدنه صفحه کدهای زیر را داریم :

<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>

پاراگراف اول (که کلاس a دارد) انتخاب (select) می شود . حال اگر بین تگ div و اولین تگ p یک تگ دیگر مانند <h1> تعریف کنیم ، دیگر آن پاراگراف انتخاب نخواهد شد . زیرا اولین فرزند div نیست .

فیلتر last-of-type در جی کوئری:

در تمرین بعدی دستور زیر را داریم :

$("div p:last-of-type").css("border", "3px solid blue");

فیلتر last-of-type در بالا بدین معنی می باشد که آخرین پاراگرافی را انتخاب کن که در تگ div باشد . پس پاراگراف آخر یعنی عبارت زیر انتخاب می شود :

<p id="para5" lang="en-gb">
This is paragraph 5
</p>

فیلتر nth-child در جی کوئری:

در دستور بعدی داریم :

$("div p:nth-child(3)").css("border", "3px solid blue");

فیلتر (nth-child(3 بدین معنی است که سومین فرزند از نوع داده شده (پاراگراف) را انتخاب کن . ایندکس در این فیلتر از عدد 1 شروع می شود یعنی مطابق تصویر زیر ، پاراگراف سوم انتخاب می شود :

انتخاب پاراگراف های با مضرب 2:

سلکتور آخر در این بخش بصورت زیر تعریف شده است :

$("div p:nth-child(2n)").css("border", "3px solid blue");

مجدد از فیلتر nth-child استفاده شده است با این تفاوت که عبارتی را به آن اضافه کردیم . کلمه 2n اینگونه کار می کند که فرزندان با ایندکس 0و2و4و6و…… (مضرب 2) انتخاب می شوند . پس خروجی زیر را داریم :

اگر بجای 2n بنویسیم 2n+1 ایندکس های فرد را انتخاب می کند مانند 1و3و5و…  این فیلتر شبیه فیلتر odd و even عمل می کند . اگر بخواهیم مضارب عدد 3 انتخاب شوند (3و6و9و…) باید بنویسیم 3n .

پیمایش درختی در جی کوئری (jQuery Traversing Tree):

همانطور که می دانید یک فایل html دارای تگ هایی است که بصورت زیرشاخه ای و درختی به هم مرتبط هستند . <html> والد <body> و تگ های <title> و <body> هم نژاد (sibling) هم می باشند . برای واضح تر شدن مطلب به تصویر زیر دقت کنید :

ایجاد یک فایل بنام traversing.html:

برای شروع کار ، یک فایل بنام traversing.html در فولدر jq_ch_2 بسازید و بعد از اضافه کردن کتابخانه جی کوئری ، کدهای زیر را به body صفحه اضافه کنید :

<h1>
 Using jQuery Document Traversal Features
</h1>

<p>
 The DOM of a Web page is organized as a tree structure. The elements in the page have family-like names to refer to their positions relative to other elements.
</p>

<p>
 For example, the HEAD and BODY tags are "children" of the HTML tag, and are "siblings" of each other. They have the HTML tag as their "parent". jQuery provides functions for navigating the document tree and processing sets of elements, such as:
</p>

<ul id="list1">
 <li>
  children(): Retrieves all the child elements of the matched elements, except text nodes
 </li>
 <li>
  prev(), next(), parent(): used to traverse the family relationships of an element
 </li>
 <li>
  find(): search within a given element to find elements that match a selector expression
 </li>
 <li>
  each(): loops over a set of matched elements and calls a function for each one
 </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>

تعریف تابع ()children برای انتخاب فرزندان در jQuery:

حال اسکریپت زیر را اضافه کنید :

$("#example").children().css("border", "3px solid purple");

مشاهده می کنید که از تابع children() برای انتخاب فرزندان المان با آیدی example استفاده شده است . بنابراین border تمام فرزندان به رنگ بنفش در می آید . تصویر زیر :

توابع next و prev

در مثال بعدی از prev() و next() استفاده می کنیم :

var elem = $("#para1"); 
elem.prev().css("border", "3px solid red"); 
elem.next().css("border", "3px solid green"); 
elem.parents().css("border", "3px solid blue");

توضیح : ابتدا المان با آیدی para1 را در متغیری بنام elem میریزد و سپس به عنصر قبلی یعنی prev حاشیه قرمزرنگ می دهد و به المان بعدی یعنی next حاشیه سبز و در نهایت توسط parents() کل والدین و اجداد para1 انتخاب می شوند و حاشیه آبی رنگ می گیرند . خروجی زیر را مشاهده کنید :

همانطور که مشاهده می کنید ، حاشیه آبی رنگ بر روی اجداد المان #para1 اعمال شده است یعنی روی #example و body و html .

دستور ParentsUntil در جی کوئری:

اگر بخواهیم این حاشیه به باکس #example محدود شود باید از دستور ParentsUntil استفاده کنیم و دستور قبلی را کامنت کنیم :

elem.parentsUntil($("body")).css("border", "3px solid blue");

توضیح : فیلتر parentsUntil(“body”) بدین معنیست که والدین تا تگ body را انتخاب کن یعنی فقط div با آیدی example . پس خروجی در این حالت بشکل زیر خواهد شد :

به گراف زیر که در زمینه prev , next , parent , parentsUntil می باشد توجه کنید :

فیلتر find در jQuery:

فیلتر find ، همانطور که از نامش پیداست ، عمل پیدا کردن المان را انجام می دهد . به مثال زیر دقت کنید :

دستور زیر را در بخش مربوطه بنویسید :

("#example").find("#para4").css("border", "3px solid red");

این سلکتور در درخت زیرشاخه #example می گردد و المان با آیدی #para4 را پیدا می کند و border آنرا  قرمز رنگ می کند .

فیلتر each در jQuery:

دستور زیر را در بخش script بنویسید :

var leftmargin = 0; 
var border = 3; 
$("#example p").each(function (index, element) { 
 $(element).css("border", border + "px solid red") .css("margin-left", leftmargin); 
 border += 2; leftmargin += 10; 
});

این مثال کمی پیچیده تر از مثالهای قبل می باشد . تابع each روی المانهای سلکتور حلقه میزند . در این مثال روی پاراگراف های واقع در #example حلقه میزند . تابع each دو آرگومان می گیرد که اولی index و دومی element می باشد . در هربار اجرای حلقه ، دو بار css فراخوانی می شود که در اولی border المان را 2 واحد ضخیم تر می کنیم و در دومی فاصله از چپ یعنی margin-left را 10 واحد زیاد می کنیم . خروجی تابع فوق بصورت زیر خواهد بود :

تغییر محتوای صفحه توسط 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 داخل سلکتور را بهمراه مطالبش برمیگرداند . خروجی به شکل زیر خواهد شد :

ایجاد یک 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"); 
}

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

آموزش کتابخانه جی کوئری با مثال های کاربردی در اینجا به پایان می رسد. امیدوارم استفاده لازم را برده باشید. لطفا از طریق فرم ارسال دیدگاه با ما در تماس باشید.