سورس برنامه نویسی ، آموزش ، قالب وردپرس ، اسکریپت ، گرافیک ، آموزش کاربردی، دانلود رایگان ، قالب

تبليغات شما در داده باران
تبلیغات در داده باران

آموزش جامع و کامل جی کوئری بخش یازدهم (پایان)

آموزش جامع و کامل جی کوئری بخش یازدهم (پایان)Reviewed by داده باران on Sep 24Rating:

جهت مطالعه به ادامه مطلب مراجعه فرمائید

مرجع انتخاب گرها (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 زمانی اتفاق می افتد که یک عنصر فرزند ( عنصری که در درون یک عنصر دیگر قرار گرفته است )، فوکوس برنامه را به دست آورد .
حتما بخوانید  قالب HTML تک صفحه ای نمونه کار Origin نسخه ۱٫۰

مرجع افکت ها (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 درج بفرمائید.
امیدوارم آموزشات مورد رضایت شما عزیزان قرار گرفته باشد و توانسته باشم در راستای خدمت به شما گامی برداشته باشم،

نظرات سازنده خودرا در جهت پیشرفت و افزودن مطلب بیشتر  در بخش دیدگاه ها اعلام نمائید

لينك كوتاه اين مطلب : http://www.dadebaran.ir/?p=472

رمز فايل : DADEBARAN.IR




تبلیغات در داده باران
ارسال دیدگاه

قبل از نوشتن دیدگاه به نکات زیر توجه کنید:
    » نظراتی که با تایپ فارسی نباشند تایید نخواهند شد
    » نظرات تبلیغاتی اسپم محسوب میشوند و IP شخص مسدود خواهد شد.

۱ دیدگاه

پاسخ دهید

نکته: نظر شما در انتظار بررسی است و پس از تایید مدیریت در سایت نمایش داده میشود..