جهت مطالعه به ادامه مطلب مراجعه فرمائید
مرجع انتخاب گرها (Selectors) در JQuerySelector ها قسمت مهم کار با jquery هستند.برای اینکه مشخص کنید دستور jquery روی چه عنصری از صفحه وب اعمال شود باید از انتخاب گرها در جی کوئری استفاده نمائید .
با استفاده از جدول زیر می توانید روش دسترسی به هر عنصر را مشاهده نمائید این روش برپایه کار با css ها بنا نهاده شده است :
| انتخاب گر | مثال | شرح مثال |
| .class | . intro | هر عنصری که از کلاس intro استفاده می کند در نظر می گیرد |
| #id | # firstname | هر عنصری که از id برابر firstname استفاده می کند در نظر می گیرد |
| * | * | تمام تگ ها را در نظر می گیرد |
| element | p | تمام تگ های p را در نظر می گیرد |
| element,element | Div , p | تمام تگ های div , p را در نظر می گیرد |
| element element | div p | تمام تگ های p داخل تمام تگ هایdiv را در نظر می گیرد |
| element>element | Div > p | تمام تگ های p که والد آنها تگ div است در نظر می گیرد |
| element+element | Div + p | تمام تگ های p که بلافاصله بعد از تگ div قرار دارند در نظر می گیرد |
| [attribute] | [ target] | تمام تگ هایی که از صفت مثلا target استفاده کرده اند در نظر می گیرد |
| [attribute=value] | [ target =_blank] | تمام تگ هایی که صفت target انها برابر _blank است در نظر می گیرد |
| [attribute~=value] | [ title~=flower] | تمام تگ هایی که در مقدار صفت title انها کلمه flower وجود دارد در نظر می گیرد |
| [attribute|=value] | [ lang|=en] | تمام تگ هایی را که مقدار صفت lang آنها با عبارت en شروع می شود در نظر می گیرد |
| : link | A : link | تمام پیوندهای دیده نشده را در نظر می گیرد |
| : visited | A : visited | تمام پیوندهای مشاهده شده را در نظر می گیرد |
| : active | A : active | تمام پیوندهای فعال را در نظر می گیرد ( وقتی ماوس خود را فشرده روی پیوند نگه داشته اید ) |
| : hover | A : hover | تمام پیوندها را وقتی ماوس روی آنها قرار می گیرد در نظر می گیرد |
| : focus | input: focus | زمانیکه تگ input ما فاکوس را در اختیار دارد |
| : first-letter | p: first-letter | اولین حرف از هر تگ p را در نظر می گیرد |
| : first-line | p: first-line | اولین خط از تگ p را در نظر می گیرد |
| : first-child | p: first-child | هر تگ p که اولین تگ در تگ والد خود است را در نظر می گیرد |
| : before | p: before | قبل از محتوای هر p محتوایی را اضافه می کند |
| : after | p: after | قبل از محتوای تگ p محتوایی را اضافه می کند |
| : lang(language) | p: lang(it) | هر تگ p که مقدار ویژگی lang آن با عبارت it شروع شده است را انتخاب می کند |
| element1~element2 | p~ ul | هر تگ ul که بوسیله تگ p اولویت بالاتری پیدا کرده است انتخاب می کند |
| [attribute^=value] | A [src^=”https”] | هر تگ a که ویژگی src آن با https شروع می شود در نظر می گیرد |
| [attribute$=value] | a[src$ =”.pdf”] | هر تگ a که ویژگی src ان با عبارت .pdf تمام می شود در نظر می گیرد |
| [attribute*=value] | a[src * =”www.dadebaran.ir”] | هر تگ a که ویزگی Src ان شامل عبارت لینکی (برای مثال : www.dadebaran.ir) است در نظر می گیرد |
| : first-of-type | p: first-of-type | هر تگ p که اولین تگ p در مجموعه ای باشد که در ان قرار گرفته اند را انتخاب می کند |
| : last-of-type | p: last-of-type | هر تگ p که اخرین تگ p در مجموعه ای باشد که در ان قرار گرفته اند را انتخاب می کند |
| : only-of-type | p: only-of-type | هر تگ p که تنها تگ p در مجموعه ای باشد که در ان قرار گرفته اند را انتخاب می کند |
| : only-child | p: only-child | هر تگ p که تنها تگ تگ موجود در مجموعه ای باشد که در ان قرار گرفته است را انتخاب می کند |
| : nth-child(n) | p: nth-child(2) | هر تگ p که دومین تگ در مجموعه ای باشد که در ان قرار گرفته اند را انتخاب می کند |
| : nth-last-child(n) | p: nth-last-child(2) | هر تگ p که از اخر ، دومین تگ در مجموعه ای باشد که در ان قرار گرفته اند را انتخاب می کند |
| : nth-of-type(n) | p: nth-of-type(2) | هر تگ p که دومین تگp بین تگ های p در مجموعه ای باشد که در ان قرار گرفته اند را انتخاب می کند |
| : nth-last-of-type(n) | p: nth-last-of-type(2) | هر تگ p که از آخر ، دومین تگp بین تگ های p در مجموعه ای باشد که در ان قرار گرفته اند را انتخاب می کند |
| : last-child | p: last-child | هر تگ p که اخرین فرزند در مجموعه باشد که در ان قرار گرفته است |
| : root | : root | عنصر ریشه شی document را انتخاب می کند |
| : empty | p: empty | هر تگ p خالی حتی بدون متن را در نظر می گیرد |
| : target | #news: target | لنگرهایی با نام news را انتخاب می کند |
| : enabled | input: enabled | هر تگ input فعال را انتخاب می کند |
| : disabled | input: disabled | هر تگ input غیر فعال را انتخاب می کند |
| : checked | input: checked | هر تگ input انتخاب شده را انتخاب می کند در مورد لیستهای انتخاب radio , checkbox |
| : not(selector) | : not(p) | هر تگ دیگری به جز تگ های p را انتخاب می کند |
| : : selection | : : selection | قسمتی از یک عنصر را که توسط کاربر انتخاب شده استرا در نظر می گیرد |
مرجع رویدادها (Events) در JQuery
در این بخش از آموزش JQuery به معرفی مهمترین و پرکاربردترین رویدادهای زبان jQuery می پردازیم .
رویدادها اتفاقاتی هستند که بر روی عناصر موجود در صفحات وب انجام می شوند مثل کلیک کردن و یا عبور موس از روی آن . شما می توانید کدهای مورد نظر خود را طوری طراحی کنید که پس از اجرای یک رویداد خاص اجرا شوند .
لیست زیر شامل مهمترین رویداد ها در jquery می باشد :
| نام رویداد | شرح |
| ()ready | این رویداد ready زمانی اجرا می شود که صفحه وب ما بطور کامل بارگذاری شود |
| ()click | وقتی که کاربر روی یک عنصر html ای کلیک می کند رویداد click اجرا می شود |
| ()dblclick | وقتی که کاربر روی یک عنصر html ای دابل کلیک می کند رویداد dblclick اجرا می شود |
| ()mouseenter | وقتی که اشاره گر ماوس وارد محتوای تگ html می شود رویداد mouseenter اجرا می شود |
| ()mouseleave | وقتی که اشاره گر ماوس محتوای تگ html ترک می کند رویداد mouseleave اجرا می شود |
| ()mousedown | زمانیکه دکمه ماوس روی عنصر مورد نظر فشرده می شود رویداد mousedown اجرا می شود |
| ()mouseup | زمانیکه دکمه ماوس روی عنصر مورد نظر رها می شود رویداد mouseup اجرا می شود |
| ()hover | رویداد hover دو function دارد . و این دو ترکیبی از رویداد mouseenter و رویداد mouseleave میباشد. |
| ()focus | زمانیکه عنصری از یک فرم فاکوس را در اختیار می گیرد رویداد focus اجرا می شود |
| ()blur | زمانیکه عنصرمورد نظر از فرم فاکوس را از دست می دهد رویداد blur اجرا می شود |
| ()Change | رویداد change فقط برای عناصر درون فرم کاربرد دارد و زمانی فراخوانی می شود که محتوای یک عنصر تغییر کند |
| ()submit | رویداد submit زمانی اتفاق می افتد که یک فرم submit شده و به سرور ارسال شود . |
| ()toggle | رویداد toggle بین دو افکت ( ) show و افکت ( ) hide تغییر وضعیت می دهد . |
| ()unload | رویداد unload زمانی اتفاق می افتد که کاربر از صفحه جاری خارج می شود . برای مثال یکی ار استفاده های جالب این رویداد ، می تواند صدور یک پیام خداحافظی برای کاربر در زمانی که می خواهد صفحه را ببندد ، باشد . |
| ()select | رویداد select زمانی اتفاق می افتد که متن موجود در یک کادر متن ( textfield ) یا textarea ، انتخاب شود . |
| ()resize | رویداد resize زمانی اتفاق می افتد که اندازه پنجره مرورگر تغییر نماید . |
| ()scroll | رویداد scroll زمانی اتفاق می افتد که کاربر در یک عنصر صفحه ، عمل scroll ( بالا و پایین رفتن ) را انجام دهد . |
| ()focusin | رویداد focusin زمانی اتفاق می افتد که یک عنصر فرزند ( عنصری که در درون یک عنصر دیگر قرار گرفته است )، فوکوس برنامه را به دست آورد . |
مرجع افکت ها (Effeccts) در JQuery
افکت ها در jQuery یکی از مهمترین و پرکاربردترین قابلیت ها در این زبان هستند که به طراحان وب سایت در زمینه طراحی سایت امکانات گسترده و جذابی را می دهند .
افکت ها در jQuery شامل تعدادی متد از پیش تعریف شده هستند که برای مثال به شما امکان می دهند عناصر مورد نظر خود را مخفی و نمایان کرده و یا نحوه نمایش آن را تغییر دهید .
استفاده از افکت ها در jQuery بسیار ساده و شبیه رویداد ها در این زبان هستند . بهتر است قبل از مطالعه این بخش ، بخش آموزش رویدادها در jQuery را مطالعه نمایید
. در لیست زیر به معرفی مهمترین افکت ها در jQuery پرداخته ایم :
| نام افکت | شرح |
| ()fadeIn | افکت fadeIn باعث می شود عنصر مورد اثر خود را به آرامی از حالت نمایان به حالت مخفی در بیاورد . |
| ()fadeOut | افکت fadeOut باعث می شود عنصر مورد اثر خود را به آرامی از حالت مخفی به حالت نمایان در بیاورد . |
| ()fadeTo | افکت fadeTo میزان وضوح نمایش عنصر مورد اثر خود را به یک میزان دلخواه تغییر می دهد . |
| ()hide | افکت hide عنصر مورد اثر خود را مخفی می کند . |
| ()show | افکت show عنصر مورد اثر خود را نمایان می کند . |
| ()slideDown | افکت slideDown با افزایش تدریجی ارتفاع ، عنصر مورد اثر خود را نمایان می کند . |
| ()slideUp | افکت slideUp با کاهش تدریجی ارتفاع ، عنصر مورد اثر خود را مخفی می کند . |
| ()animate | افکت animate بوسیله تغییر یک یا چند خاصیت CSS عنصر مورد نظر از یک حالت اولیه به مقداری جدید یک عمل انیمیشن را انجام می دهد . |
| ()delay | افکت delay باعث ایجاد یک تاخیر در اجرای افکت دیگری می شود . |
| ()slideToggle | افکت slideToggle همانند یک عملگر دوجانبه بین دو افکت slideUp و slideDown بر روی عنصر مورد اثر خود عمل می کند |
| ()stop | به کار بردن افکت stop باعث توقف انجام یک عمل یا انیمیشن برای عنصر مورد نظر می شود . |
| ()toggle | افکت ( ) toggle بین دو افکت show وافکت hide تغییر وضعیت می دهد . |
مرجع توابع کار با Html و Css در JQuery
در این بخش از آموزش JQuery به معرفی مهمترین و پرکاربردترین مرجع توابع کار با Html و Css در JQuery می پردازیم .
لیست زیر شامل مهمترین مرجع توابع کار با Html و Css در جیکوئری می باشد :
| نام متد | شرح |
| ()after | به وسیله متد after در jQuery ، می توانید محتویات مورد نظر خود ( می تواند شامل متن یا تگ های HTML باشد ) را پس از عنصر مورد نظر خود ، در صفحه HTML وارد نمایید . |
| ()attr | متد attr مقدار تعیین شده برای خواص عناصر را خوانده و به کاربر نمایش می دهد می تواند مقدار خاصیت عناصر را تعیین کرده و یا در صورت نیاز تغییر دهد . |
| ()append | از متد append برای زمانی استفاده می شود که بخواهید یک متن را به ادامه یک پاراگراف موجود در صفحه اضافه نمایید . |
| ()before | متد before متن مورد نظر شما را به سطر قبلی پاراگراف تعیین شده در صفحه ، اضافه می کند . |
| ()css | متد css در jQuery می تواند یک یا چند خاصیت css یک عنصر HTML موجود در صفحه را برگردانده و یا به مقدار دلخواه تغییر دهد . |
| ()detach | متد detach عنصر HTML تعیین شده برای آن ( شامل تمام متن و اشیای فرزند ) را از روی صفحه پاک می کند . اما اطلاعات و رویدادهای شی مورد نظر بر روی صفحه باقی می مانند . |
| ()empty | متد empty ، محتویات متنی و سایر اشیای فرزند عنصر HTML تعیین شده برای آن را پاک می کند . |
| ()html | به وسیله متد html می توانید محتویات درونی یک عنصر HTML یا همان خاصیت innerHtml آن را خوانده و به صفحه برگردانید . برای مثال می توان به محتویات درونی یگ تگ پاراگراف اشاره کرد . به وسیله این متد می توانید محتویات درونی یک عنصر HTML را به مقدار دلخواه خود تغییر دهید . |
| ()height | متد height در jQuery , می تواند مقدار ارتفاع یک عنصر HTML را خوانده و بر گرداند و یا به وسیله آن مقدار ارتفاع عنصر را به یک مقدار دلخواه تغییر دهید . |
| ()insertAfter | متد insertAfter ، یک متن یا کنترل HTML را بعد از عنصر مورد نظرتان در صفحه وارد می نماید . |
| ()insertBefore | متد insertBefore ، یک متن یا کنترل HTML را قبل از عنصر مورد نظرتان در صفحه وارد می نماید . |
| ()position | متد position ، مختصات محل قرار گیری یک عنصر را بر حسب عنصر مادر ( parent ) آن تعیین کرده و به صفحه بر می گرداند . |
| ()prependTo | متد prependTo ، می تواند عنصر HTML تعیین شده برای آن را به ابتدای یک عنصر دیگر HTML اضافه نماید . |
| ()prop | متد prop مقدار یک یا چند خاصیت یک عنصر HTML را خوانده و به صفحه بر می گرداند . می تواند مقدار یک یا چند خاصیت یک عنصر HTML را به مقدار تعیین شده و مورد نظر شما تغییر دهد . |
| ()remove | متد remove ، عنصر HTML تعیین شده برای آن را به همراه تمام متن و اشیای فرزندش از صفحه حذف می کند . این متد همچنین تمام داده ها و رویدادهای مرتبط با آن عنصر را نیز پاک می کند . |
| ()removeAttr | متد removeAttr ، یک یا چندین خاصیت css تعیین شده برای عنصر HTML مورد نظرتان را حذف می کند . با حذف خاصیت css ، اثر آن بر عنصر از بین می رود . |
| ()replaceAll | متد replaceAll ، عنصر HTML تعیین شده برای آن را با تمام عناصر HTML مورد نظر شما در صفحه ، عوض می کند . |
| ()replaceWith | متد replaceWith ، عنصر HTML تعیین شده را با محتوای جدید جایگزین میکند. |
| ()text | متد text می تواند متن موجود در یک عنصر HTML مثل یک تگ را خوانده و به صفحه برگرداند . می تواند متن یک عنصر HTML مثل تگ پاراگراف را به متن دلخوه و تعیین شده تغییر دهد . |
| ()toggleClass | با متد toggleClass می توان اگر به تگی کلاس خاصی تخصیص داده نشده ،آنرا به تگ اختصاص داد ،در غیر این صورت اگر آن کلاس به آن تگ قبلا تخصیص داده شده ، کلاس از تگ حذف می شود و این تشخیص به طور خودکار توسط متد toggleClass صورت میگیرد. |
| ()val | متد val در jQuery , می تواند مقدار خاصیت value یک عنصر را خوانده و یا به یک مقدار دلخواه تنظیم نماید . |
| ()width | متد width در jQuery , می تواند مقدار عرض یک عنصر HTML را خوانده و بر گرداند و یا به وسیله آن مقدار عرض عنصر را به یک مقدار دلخواه تغییر دهید . |
| ()before | متد before متن مورد نظر شما را به سطر قبلی پاراگراف تعیین شده در صفحه ، اضافه می کند . |
| ()wrap | متد wrap در jQuery , المنت های تعیین شده برای آن را به دور عنصر یا عناصر مورد نظر قرار می دهد . |
مرجع توابع کار با Ajax در JQuery
در بخش آموزش Ajax توضیح مفصلی از کاربردهای Ajax دادیم ، Ajax تکنولوژی تبادل اطلاعات و به روز رسانی صفحات وب ، بدون لود شدن مجدد و کامل صفحه است .
در لیست زیر ، متدهای کار با Ajax در زبان jQuery قرار داده شده است:
| نام متد | شرح |
| ()$.ajax | متد ajax یک درخواست Ajax را به سرور ارسال می کند . |
| ()ajaxComplete | به وسیله متد ajaxComplete می توانید یک تابع را تعیین نمایید ، تا در هنگام اتمام درخواست Ajax ارسال شده ، اجرا شود . |
| ()ajaxError | به وسیله متد ajaxError می توانید یک تابع را تعیین نمایید ، تا در هنگام اتمام درخواست Ajax اگر error رخ داد ، اجرا شود . |
| ()ajaxSend | به وسیله متد ajaxSend می توانید یک تابع را تعیین نمایید تا قبل از ارسال درخواست Ajax به سرور ، اجرا شود . |
| ()ajaxSetup | به وسیله متد ajaxSetup می توانید مقادیر پیش فرضی را برای درخواست های بعدی Ajax تعیین نمایید . |
| ()ajaxStart | به وسیله متد ajaxStart می توانید یک تابع را تعیین نمایید تا همزمان با اولین در خواست Ajax ، اجرا شود . |
| ()ajaxStop | به وسیله متد ajaxStop می توانید یک تابع را تعیین نمایید ، تا در هنگام پایان یافتن تمامی درخواست های Ajax ، اجرا شود . |
| ()ajaxSuccess | به وسیله متد ajaxSuccess می توانید یک تابع را تعیین نمایید تا پس از پایان موفقیت آمیز تمامی درخواست های Ajax به سرور ، اجرا شود . |
| ()$.get | متد get اطلاعات را با استفاده از یک درخواست Ajax HTTP GET ، از سرور می خواند . |
| ()$.getScript | متد getScript یک اسکریپت جاوا اسکریپت را به وسیله یک درخواست Ajax HTTP GET ، از سرور خوانده و اجرا می کند . |
| ()load | متد load اطلاعات را از سرور خوانده و آن را در عنصر مورد نظر اعمال می کند . |
| ()$.post | متد post اطلاعات را از سرور به وسیله یک متد Ajax HTTP POST ، دریافت می کند . |
| ()serialize | متد serialize می تواند اطلاعات یک فرم را به صورت پشت سرهم و جفت نام-مقدار خوانده و به انتهای آدرس صفحه ، جهت ارسال اضافه نماید . |
| ()serializeArray | متد serializeArray می تواند اطلاعات یک فرم را به صورت آرایه درآورده و ارسال نماید . |
توابع کاربردی متفرقه در JQuery
در این بخش از آموزش JQuery به معرفی مهمترین و پرکاربردترین توابع متفرقه در جی کوئری می پردازیم .
لیست زیر شامل مهمترین توابع کاربردی متفرقه در JQuery می باشد :
| نام متد | شرح |
| ()data | متد data ، می تواند اطلاعاتی را به یک عنصر مورد نظر اضافه کرده و یا اینکه اطلاعات آن را خوانده و به صفحه بازگرداند . |
| ()each | متد each ، یک تابع را تعیین کرده و به ازای هر عنصری که با مشخصات داده شده در پارامتر selector$ مطابقت داشته باشد ، یکبار اجرا می کند . |
| ()index | متد index ، اندیس عنصر مورد نظر رات نسبت به سایر عناصر مجاور آن خوانده و بر می گرداند . |
| ()$.noConflict | با استفاده از متد $.noConflict دیگر نیاز به بکار بردن علامت $ در کدهای jQuery نبوده و می توانید آن را حذف نمایید |
| ()param.$ | متد $.param ، می تواند اعضای یک آرایه یا مجموعه خواص یک شی را به صورت پشت سر هم و جفت نام-مقدار ، خوانده و به صفحه بر گرداند . |
| ()removeData | متد removeData ، می تواند اطلاعات اضافه شده به یک عنصر را که قبلا توسط متد ( ) data اضافه شده است ، را حذف نماید . |
| ()size | متد size ، تعداد عناصر DOM ای که با مشخصات تعیین شده برای آن در پارامتر selector$ ، مطابقت دارند را بر می گرداند . |
| ()toArray | متد toArray ، کلیه عناصری که با مشخصات داده شده در پارامتر selector$ آن مطابقت دارند ، را در به صورت یک آرایه در خروجی بر می گرداند . |
در آخر :
ضمن تقدیر و تشکر از شما بازدیدکنندگان گرامی ، در جهت حمایت و تلاش هرچه بیشتر لطفاً / خواهشاً کپی رایت را رعایت و در صورت کپی برداری منبع را با نام www.dadeBaran.ir درج بفرمائید.
امیدوارم آموزشات مورد رضایت شما عزیزان قرار گرفته باشد و توانسته باشم در راستای خدمت به شما گامی برداشته باشم،
نظرات سازنده خودرا در جهت پیشرفت و افزودن مطلب بیشتر در بخش دیدگاه ها اعلام نمائید
ممنونم خیلی خوب بود