اسفند ۱۳, ۱۳۹۷ Mostafa بدون دیدگاه

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

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

مرجع انتخاب گرها (Selectors) در JQuery

Selector ها قسمت مهم کار با jquery هستند.برای اینکه مشخص کنید دستور jquery روی چه عنصری از صفحه وب اعمال شود باید از انتخاب گرها در جی کوئری استفاده نمائید .

با استفاده از جدول زیر می توانید روش دسترسی به هر عنصر را مشاهده نمائید این روش برپایه کار با css ها بنا نهاده شده است :

انتخاب گرمثالشرح مثال
.class. introهر عنصری که از کلاس intro استفاده می کند در نظر می گیرد
#id# firstnameهر عنصری که از id برابر firstname استفاده می کند در نظر می گیرد
**تمام تگ ها را در نظر می گیرد
elementpتمام تگ های p را در نظر می گیرد
element,elementDiv , pتمام تگ های div , p را در نظر می گیرد
element elementdiv pتمام تگ های p داخل تمام تگ هایdiv را در نظر می گیرد
element>elementDiv > pتمام تگ های p که والد آنها تگ div است در نظر می گیرد
element+elementDiv + pتمام تگ های p که بلافاصله بعد از تگ div قرار دارند در نظر می گیرد
[attribute][ target]تمام تگ هایی که از صفت مثلا target استفاده کرده اند در نظر می گیرد
[attribute=value][ target =_blank]تمام تگ هایی که صفت target انها برابر _blank است در نظر می گیرد
[attribute~=value][ title~=flower]تمام تگ هایی که در مقدار صفت title انها کلمه flower وجود دارد در نظر می گیرد
[attribute|=value][ lang|=en]تمام تگ هایی را که مقدار صفت lang آنها با عبارت en شروع می شود در نظر می گیرد
: linkA : linkتمام پیوندهای دیده نشده را در نظر می گیرد
: visitedA : visitedتمام پیوندهای مشاهده شده را در نظر می گیرد
: activeA : activeتمام پیوندهای فعال را در نظر می گیرد ( وقتی ماوس خود را فشرده روی پیوند نگه داشته اید )
: hoverA : hoverتمام پیوندها را وقتی ماوس روی آنها قرار می گیرد در نظر می گیرد
: focusinput: focusزمانیکه تگ input ما فاکوس را در اختیار دارد
: first-letterp: first-letterاولین حرف از هر تگ p را در نظر می گیرد
: first-linep: first-lineاولین خط از تگ p را در نظر می گیرد
: first-childp: first-childهر تگ p که اولین تگ در تگ والد خود است را در نظر می گیرد
: beforep: beforeقبل از محتوای هر p محتوایی را اضافه می کند
: afterp: afterقبل از محتوای تگ p محتوایی را اضافه می کند
: lang(language)p: lang(it)هر تگ p که مقدار ویژگی lang آن با عبارت it شروع شده است را انتخاب می کند
element1~element2p~ ulهر تگ ul که بوسیله تگ p اولویت بالاتری پیدا کرده است انتخاب می کند
[attribute^=value]A [src^=”https”]هر تگ a که ویژگی src آن با https شروع می شود در نظر می گیرد
[attribute$=value]a[src$ =”.pdf”]هر تگ a که ویژگی src ان با عبارت .pdf تمام می شود در نظر می گیرد
[attribute*=value]a[src * =”www.ctboard.com”]هر تگ a که ویزگی Src ان شامل عبارت www.ctboard.com است در نظر می گیرد
: first-of-typep: first-of-typeهر تگ p که اولین تگ p در مجموعه ای باشد که در ان قرار گرفته اند را انتخاب می کند
: last-of-typep: last-of-typeهر تگ p که اخرین تگ p در مجموعه ای باشد که در ان قرار گرفته اند را انتخاب می کند
: only-of-typep: only-of-typeهر تگ p که تنها تگ p در مجموعه ای باشد که در ان قرار گرفته اند را انتخاب می کند
: only-childp: 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-childp: last-childهر تگ p که اخرین فرزند در مجموعه باشد که در ان قرار گرفته است
: root: rootعنصر ریشه شی document را انتخاب می کند
: emptyp: emptyهر تگ p خالی حتی بدون متن را در نظر می گیرد
: target#news: targetلنگرهایی با نام news را انتخاب می کند
: enabledinput: enabledهر تگ input فعال را انتخاب می کند
: disabledinput: disabledهر تگ input غیر فعال را انتخاب می کند
: checkedinput: 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$ آن مطابقت دارند ، را در به صورت یک آرایه در خروجی بر می گرداند .

 

 


برچسب ها
نظرات

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