رفتن به مطلب
محفل من
Mostafa

آموزش گام به گام Jquery

پست های پیشنهاد شده

JQuery چیست ؟ ( جی کوئری چیست ؟)

jQuery یک کتابخانه از جاوا اسکریپت است که پیمایش اسناد اچ تی ام ال ، رسیدگی به رویدادها، متحرک سازی و تعاملات ای جکس (AJAX) را به منظور توسعه سریع وب تسهیل می کند. jQuery به گونه ای طراحی شده است تا روشی را که با آن جاوا اسکریپت را می نویسید تغییر دهد.

جی کوئری چیست ؟ یک چارچوب جاوا اسکریپت است که هدف آن آسان ساختن استفاده از  جاوا اسکریپت در صفحات طراحی وب سایت شماست.

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

جی کوئری جایگزینی برای جاوا اسکریپت نیست و با این که برخی میانبرهای نحوی نوشتاری را در اختیارتان می گذارد اما کدی که هنگام استفاده از جی کوئری خواهید نوشت هنوز هم جاوا اسکریپت می باشد.

آموزش جیکوئری تلاش می کند تا بسیاری از دستورات پیچیده  جاوا اسکریپت نظیر فراخوانی های  ای جکس (AJAX) و عملیاتهای DOM را ساده تر کند تا بتوانید این اعمال را بدون این که دانش زیادی درباره جاوا اسکریپت داشته باشید به اجرا بگذارید. شما می توانید  تقریباً برای انجام هر کاری یک پلاگین جی کوئری را پیدا نمائید.

چرا JQuery استفاده کنیم ؟

شما با آموزش jquery به راحتی با کمترین دانش برنامه نویسی میتوانید نحوه کد نویسی jquery رو درک کنید.

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

کاربرد های jquery

یکی از کاربرد های مهم jquery داشتن دستورات بسیار ساده و قابل درک در زمینه بکار گیری تکنولوژِی ای جکس می باشد. به طوری که  می توانید یک طراحی سایت را با کمک jquery به صورت فول ای جکس طراحی کنید.

ویژگی‌های کلیدی jQuery

ایجاد امکان دسترسی به بخشهایی از یک صفحه بدون نیاز به ابزارهای جاوا اسکریپت و عدم نیاز به کد نویسی های زیاد.
جی کوئری مکانیسم سریع و موثری برای جستجو ، یافتن و انتخاب بخشهای مورد نظر از یک صفحه را بدون نیاز به ابزار جاوا اسکریپت، در اختیار ما قرار میدهد.
امکان تغییر ظاهر یک صفحه؛ البته  آموزش CSS ابزار قدرتمندی در تغییر صفحات بما میدهد اما قادر به انجام اینکار در مرورگرهای مختلف که استانداردهای متفاوتی دارند، نیست. اما جی کوئری براحتی میتواند هر نوع مرورگری را ساپورت کند و حتی قادر است که مختصات ویژه صفحات وب را، حتی بعد از دستکاری و تغییر ساختاری و ظاهر، دوباره تغییر دهد.
جی کوئری نه تنها تغییرات ظاهری و ناچیز را، بلکه صرفا با چند کلیک ساده، می‌تواند محتوای صفحات مورد نظر کاربر را هم تغییر کلی بدهد و مثلا متن یا عکسی را تغییر داده و یا تصویر یا لیستی را درون متنهای آن صفحه اضافه و یا از آن حذف کند. حتی میتواند تمام ساختار HTML صفحات را کاملا تغییر دهد.
یکی از امکانات کتابخانه جی کوئری کنترل و جلوگیری از اتفاقات غیرمنتظره ایست که بهنگام کلیک کردن یک کاربر بر یک لینک رخ میدهند و مثلا باعث کند شدن یا درهمریختگی مرورگرها میشوند. ابزار event-handler در جی کوئری این وظیفه را بسادگی و بدون نیاز به استفاده از جاوا اسکریپت انجام میدهد.
افزودن انیمیشن (Fade) به یک صفحه؛ کسب فیدبک از (یا به) کاربران، امری بسیار مهم است و جی کوئری این ویژگی را بسادگی با استفاده از امکاناتی همچون Fade و غیره بما میدهد.
کسب اطلاعات از یک سرور بدون نیاز به ریفرش کردن آن صفحه (که اصطلاحا به آن AJAX می‌گویند) جی کوئری اینکار را بدون نیاز به دانستن مختصات ویژه هر سرور و صرفا با مراجعه مستقیم به نتایج آن صفحه (محتویات سرور) انجام میدهد.
ساده سازی عملکردهای مشترک / تکراری جاوا اسکریپت : جی کوئری علاوه بر انجام بسیار ساده تغییرات کلی در متن و ظاهر صفحات وب، حتی قادر به ساده تر کردن عملیات ساختار سازی همچون Iteration And Array Manipulation هم هست.

چرا jQuery بهتر از سایر ابزارها است؟

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

ارایه و شناسایی و تغییر مختصات صفحات وب، متضمن آشنایی طراحان وب با کدها و خطاهای مربوط به CSS و … است ، ولی جی کوئری این کار را برای طراحان آسانتر نموده است.
ساپورت های Extension در جی کوئری طوری تنظیم شده اند که پلاگینها را میتوان بسادگی اضافه یا حذف نمود و ساختار درونی Basic jQuery طوری نوشته شده که بهنگام دانلود براحتی برای سایر آیتم های صفحه وب قابل شناسایی اند و براحتی با ایجاد ماژول‌های ساده میتوان تغییرشان داد.
یکی از مشکلات طراحی سایت و طراحان وب همانا متفاوت بودن پیش شرط ها و مختصات مرورگرها و عدم هماهنگی آنها با یکدیگر و یا با نرم افزار های جدید است. جی کوئری قادر است که با هر مرورگری کار کرده و با کاهش کدها و ساده سازی کار را آسانتر کند.
با استفاده از تکنیک Implicit Iteration قادر خواهید بود که بسیاری از لوپ ها را بصورت دسته جمعی (و نه تک به تک) بررسی و در وقت صرفه جویی کرده و بدین ترتیب نیاز به کدنویسی طولانی نداشته باشید.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

نصب و راه اندازی  JQuery

برای اینکه بتوانیم از امکانات jquery استفاده کنیم بایستی  آخرین نسخه کتابخانه jquery رو از سایت jquery.com دانلود کنیم .

سه مدل برای دانلود وجود دارد :

Minified : که خیلی فشرده شده و برای استفاده تجاری استفاده میشه و ۱۵ کیلوبایت هم می باشد.(به دلیل لود شدن سریع)
Uncompressed : که به صورت غیر فشرده هست و حجمش حدود ۹۴ کیلو بایت می باشد. و برای توسعه یا فراگیری مورد استفاده قرار میگیرد.
Packed : حجمی حدود ۲۹ کیلوبایت داره و به صورت gzip فشرده نشده .

بعد از دانلود شما باید کتابخانه را در صفحات خود نصب کنید .

طریق نصب جی کوئری به دو صورت  inline  و  external می باشد.

اما نحوه نوشتن کدها نیز به همین دو روش میباشد :

به صورت inline : در این روش کدها در همان صفحه ای که میخواهیم جیکوئری را فراخوانی کنیم نوشته میشود ، توصیه میشود از این روش کمتر استفاده کنید.
به صورت external : در این حالت شما یک فایل با پسوند sample.js ایجاد میکنید. و تمامی کد های خود را در این فایل مینویسید. و سپس فایل sampale.js را در صفحات خود فراخوانی میکنید.

قواعد دستوری جیکوئری ( Jquery )

با قواعد دستوری جیکوئری شما میتوانید  عناصر HTML را انتخاب کنید و عملیات مورد نظر خود را بر روی آنها انجام  دهید.

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

$ : برای دسترسی به جیکوئری  به کار میرود.

selector : برای جستجوی عناصر HTML  به کار میرود.

action() : عملی را که که بر روی عنصر بایستی  انجام شود مشخص میکند.

این مثال المنت جاری را مخفی میکند:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

برای یک کلاس خاص :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

برای یک ID خاص :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

برای یک تگ خاص :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

در ادامه ی آموزش jquery ، این موارد به طور کامل توضیح داده خواهد شد.

انتخاب گر ها در جی کوئری (Jquery Selectors)

سلکتور همونطور که از اسمش پیداست برای انتخاب کردن المنت ها (جهت اعمال کد روی اون‌ها) در جی کوئری بکار میرود. برای انتخاب یه عنصر HTML به صورت مستقیم میتوانیم آن را  فراخوانی کنیم.

انتخاب همه عناصر (*)

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

با کد زیر میتوانید همه عناصر صفحه رو فراخوانی کنید.در این مثال همه عناصر با کلیک شدن ، hide میشوند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب عناصر در حال حرکت (animated)

با کد زیر میتوانیم عناصری را که درحال حرکت هستند را انتخاب کنیم:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب عناصر با خصوصیت دلخواه
برای انتخاب عناصر بر اساس خصوصیت ها از کد زیر استفاده میکنیم.
کد زیر لینک هایی که خاصیت href آنها با عبارت http شروع شود را hide میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

کد زیر لینک هایی که خاصیت hreflang آنها en باشد یا با -en شروع شوند را hide میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

کد زیر عکس‌هایی را که خاصیت Alt آنها  برابر با www.pars-soft.ir باشد را  hide میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

کد زیر عکسهایی را که شامل کلمه www.ctboard.com باشند را انتخاب میکند و  hide میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

کد زیر همه لینک‌هایی که خصوصیت href آنها با کلمه”html” تموم میشود  را انتخاب میکند و  hide میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

کد زیر فقط div هایی را که خصوصیت کلاس آنها  myclass باشد را انتخاب میکند و  hide میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

کد زیر فقط div هایی را که خصوصیت کلاس آنها  myclass نباشد را انتخاب میکند و  hide میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب دکمه ها

کد زیر به همه button ها حاشیه ۳ پیکسلی میدهد . در این کد نحوه اعمال یک کد CSS به یک عنصر را می ببینید.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب چک‌باکس ها

کد زیر به همه چک‌باکس ها  حاشیه ۳ پیکسلی میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

اگه بخوایم این نوع کدها فقط در محدوده یک عنصر خاص کار کنند ، به راحتی میتوانیم از اسم کلاس‌ها ، IDها یا تگ ها استفاده کنیم:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب Input های از نوع File
برای انتخاب Input هایی که خصوصیت type آن‌ ها مقدار file دارد و برای انتخاب یک فایل جهت آپلود در سایت استفاده میشوند :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب عنصرهای check شده
این سلکتور checkbox ها و radio هایی را  که تیک خورده اند (انتخاب شده اند) را انتخاب میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

در کد زیر با انتخاب هر دکمه رادیویی موجود در صفحه ، مقدار value آن ، در یک عنصر جدید که کلاس .log دارد ، نمایش داده میشود :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب عناصر فرزند

درست مثل CSS میتوانیم در jQuery هم ، عناصر فرزند رو فراخوانی کنیم :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب بر اساس محتوا
با کد contains میتوانیم عنصری که متن خاصی داخلش وجود دارد را انتخاب کنیم.
کد زیر هر پاراگرافی که کلمه ctboard.com داخلش باشد را  نارنجی میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب عنصرهای غیرفعال (disabled)
کد زیر کلمه “DISABLED” را در همه input هایی که غیرفعال شدند مینویسد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب عنصرهای فعال (enabled)
کد زیر برای همه input هایی که فعال هستند حاشیه قرمز میگذارد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب عناصر خالی
برای عناصری که هیچ متن یا تگی داخلشان نباشد. مثل تگ های زیر:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

کد زیر همه تگ‌های خالی که داخل تگ body باشند را انتخاب میکند ، متن Empty Tag را داخلشان مینویسد و رنگ پیش زمینه آنها را قرمز میکند :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب بر اساس اندیس
با استفاده از eq میتوانیم از بین تعدادی عنصر یکسان ، عنصری با شماره خاص رو انتخاب کنیم.
اگه یه لیست با ۳ تا li داشته باشیم ، شماره اندیس این سها li از ۰ تا ۲ هست (شمارش اندیس‌ها از ۰ شروع میشه)
برای انتخاب عنصر اول:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

برای انتخاب عنصر دوم:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب زوج و فرد

کد زیر پاراگراف‌های زوج رو آبی میکند:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

کد زیر پاراگراف‌های فرد رو قرمز میکند:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب چند عنصر
برای انتخاب یه عنصر، از کدزیر  استفاده میکنیم :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

برای انتخاب چند تا عنصر ، کافیست نام عنصر را به همراه کاما “,” اضافه کنیم :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

کد بالا همه عناصری که کلاس myclass1 و myclass2 و myclass3 دارند را انتخاب میکند و رنگشان را به نارنجی تغییر میدهد.

انتخاب عنصر اول
“first” عنصر اول را از بین تعدادی عنصر انتخاب میکند.کد زیر اولین پاراگراف رو انتخاب میکند و border قرمز را به آن میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب first-child یا فرزند اول
first-child عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. کد زیر اولین پاراگراف داخل تگ div را انتخاب میکند  و border قرمز را به آن میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب عنصر آخر
“Last” عنصر آخر را از بین تعدادی عنصر انتخاب میکند.کد زیر آخرین پاراگراف را انتخاب میکند و border سبز را به آن میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب last-child یا فرزند آخر
first-child عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. تقریبا شبیه Last کار میکند.کد زیر آخرین پاراگراف داخل تگ div را انتخاب میکند و border قرمز را به آن میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب فرزند n ام
nth-child فرزند n ام را از بین تعدادی عنصر انتخاب میکند. کد زیر سومین پاراگراف داخل تگ div را انتخاب میکند و رنگ متنش را آبی میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب عنصر دارای خصوصیت
با این انتخابگر میشود عناصری را انتخاب کرد که Attribute های خاصی دارند.مثلا با کد زیر همه عکس‌هایی که خصوصیت Alt داشته باشند را انتخاب میکند و  border قرمز را به آن میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

منفی کردن انتخابگر با not
هنگامی که میخواهیم نتیجه را برعکس کنیم از این انتخابگر استفاده میکنیم ، کد زیر  به چک باکس های تیک خورده border سه پیکسلی میدهد.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

کد زیر  به چک باکس های تیک خورده border سه پیکسلی میدهد ، که با اضافه کردن :not ، چک باکس های تیک نخورده رو انتخاب میکنیم:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

gt: انتخاب عناصر بزرگتر
اگه چندتا پاراگراف داشته باشیم و بخواهیم پیش زمینه پاراگراف سوم به بعد را عوض کنیم، میتوانیم از انتخابگر gt (Greater than…) استفاده کنیم:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

کد بالا از بین همه پاراگراف ها، فقط پاراگراف سوم به بعد (۴ و ۵ و ۶ و…) را انتخاب میکند.

lt: انتخاب عناصر کوچیکتر
برای انتخاب عناصر قبل از مورد مشخص شده استفاده میشود :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

کد بالا از بین همه پاراگراف ها، فقط پاراگراف‌های قبل از پاراگراف سوم را انتخاب میکند (پاراگراف ۱ و ۲)و  پیش زمینه آنها را  نارنجی مکیند.

انتخاب عناصر تک فرزند “only-child”
ممکنه این جمله رو متوجه نشید:
“اگه عنصری ، تنها عنصرِ عنصر والدِ خودش باشه ، انتخاب میشود”
پس بیشتر توضیح میدم:
اگه داخل عنصر والد ، ۲ تا عنصر فرزند داشته باشیم:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

یعنی ul پدر ، ۲تا فرزند li داره ، ولی اگر فقط یک فرزند داشته باشد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

سلکتور only-child در جی کوئری ، فقط عناصری را انتخاب میکند که هیچ عنصر مشابهی ، قبل یا بعد آنها وجود نداشته باشد. در کد زیر ، فقط li هایی که تک فرزند باشند ، border آبی میگیرند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

انتخاب first-child یا فرزند اول
first-child عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. تقریبا شبیه first کار میکند. کد زیر اولین پاراگراف داخل تگ div را انتخاب میکند و border قرمز به آن میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

رویداد ها در جی کوئری (Jquery Events)

متدهای دسترسی به رویداد در JQuery جزء توابع اصلی و هسته ی اصلی جی کوئری هستند. Event Handler ها متدهایی هستند که وقتی «اتفاقی در صفحه HTML رخ می دهد» صدا زده می شوند.

در زیر چند مثال از متدهای رویداد در جی کوئری آورده شده است:

مقید کردن یک تابع به رویداد ready یک صفحه (وقتی که لود شدن صفحه کامل شد)

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مقید کردن یک تابع به یک رویداد کلیک بر روی عناصر انتخاب شده

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مقید کردن یک تابع به رویداد دابل کلیک بر روی عناصر انتخاب شده

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مقید کردن یک تابع به رویداد فوکوس بر روی عناصر انتخاب شده

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مقید کردن یک تابع به رویداد عبور ماوس از روی عناصر انتخاب شده

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

رویداد ( ) ready در jQuery

در این بخش از آموزش JQuery ، رویداد ready را  در طراحی سایت شرح میدهیم.

رویداد ( ) ready در یک صفحه وب زمانی اتفاق می افتد که شی DOM به طور کامل لود شده و همچنین صفحه نیز به طور کامل لود شده باشد ( حتی تصاویر آن ) .
به دلیل اینکه رویداد ( ) ready پس از لود شدن کامل صفحه اتفاق می افتد ، مکان مناسبی برای قرار دادن کدها و توابع jQuery است .
شما می توانید رویدادها و توابعی که می خواهید به محض تمام شدن عملیات load صفحه ، اجرا شوند را در این تابع قرار دهید .
شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

یا می توان بدون به کار بردن نام سند بر روی صفحه جاری نیز ، تابع را اجرا نمود .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

document :این پارامتر تعیین کننده صفحه یا سندی است که می خواهیم تابع در آن اجرا شود . مقدار documnet به صفحه جاری اشاره دارد .
function :نام تابعی است که می خواهیم به محض لود شدن صفحه ، اجرا شود .

مثال زیر کاربرد رویداد ( ) ready را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

این رویداد زمانی اجرا می شود که صفحه وب ما بطور کامل بارگذاری شود.
رویداد ( ) click در jQuery

در این بخش از آموزش JQuery ، رویداد click را در طراحی سایت  شرح میدهیم.

رویداد click زمانی اتفاق می افتد که کاربر بر روی عنصر مورد نظر کلیک نماید . با این رویداد برای مثال می توان کدی طراحی کرد که در هنگام کلیک کاربر بر روی یک عنصر رنگ پس زمینه آن عوض شده و یا عنصر مخفی شود .
شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : selector کنترلی است که کاربر بر روی آن کلیک می کند .
function : این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .

مثال زیر کاربرد رویداد click را نشان میدهد:

وقتی که کاربر روی یک عنصر html ای کلیک می کند اجرا می شود

مثلا هر وقت روی محتوای هر تگ p کلیک شد آن محتوا مخفی شود :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

رویداد ( ) dblclick در jQuery

در این بخش از آموزش JQuery ، رویداد dblclick را در طراحی سایت  شرح میدهیم.

رویداد dblclick زمانی اتفاق می افتد که کاربر بر روی عنصر مورد نظر دابل کلیک نماید . با رویداد dblclick برای مثال می توان کدی طراحی کرد که در هنگام دابل کلیک کاربر بر روی یک عنصر رنگ پس زمینه آن عوض شده و یا عنصر مخفی شود .
شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : selector کنترلی است که کاربر بر روی آن دابل کلیک می کند .

function : این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .

مثال زیر کاربرد رویداد dblclick را نشان میدهد:

وقتی که کاربر روی یک عنصر html ای ، دابل کلیک می کند اجرا می شود.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

رویداد mouseenter در jQuery

در این بخش از آموزش JQuery ، رویداد mouseenter را  در طراحی سایت شرح میدهیم.

رویداد mouseenter زمانی اتفاق می افتد که اشاره گر ماوس وارد محتوای تگ html می شود.
شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد رویداد mouseenter را نشان میدهد.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

وقتی که اشاره گر ماوس وارد محتوای تگ html می شود.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

رویداد mouseleave در jQuery

در این بخش از آموزش JQuery ، رویداد mouseleave را  در طراحی سایت شرح میدهیم.

رویداد mouseleave زمانی اتفاق می افتد که  اشاره گر ماوس محتوای تگ html ترک می کند .
شکل کلی استفاده از این متد به شرح زیر است :

$(selector).mouseleave(function)

مثال زیر کاربرد رویداد mouseleave را نشان میدهد.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

رویداد ( ) mousedown در jQuery

در این بخش از آموزش JQuery ، رویداد mousedown را در طراحی سایت  شرح میدهیم.

رویداد mousedown زمانی اتفاق می افتد که دکمه سمت چپ موس را بر روی عنصر مورد نظر فشار دهید .
رویداد mousedown می تواند دو کار را انجام دهد :

۱- باعث رخ دادن رویداد mousedown برای عنصر مورد نظر می شود . شکل استفاده از این حالت به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

۲- باعث اجرا شدن تابع یا دستوری در هنگام فشرده شده دکمه موس بر روی عنصر مورد نظر می شود . شکل استفاده از این حالت به صورت زیر است :

$ ( " selector " ).mousedown ( functoin ) ;

مثال زیر کاربرد رویداد mousedown را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

زمانیکه دکمه ماوس روی عنصر مورد نظر فشرده می شود.
رویداد ( ) mouseup در jQuery

در این بخش از آموزش JQuery ، رویداد mouseup را  در طراحی سایت شرح میدهیم.

رویداد mouseup زمانی اتفاق می افتد که دکمه فشرده شده موس را بر روی عنصر مورد نظر ، رها دهید .
رویداد mouseup می تواند دو کار را انجام دهد :

۱ – باعث رخ دادن رویداد mouseup برای عنصر مورد نظر می شود . شکل استفاده از این حالت به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

۲ – باعث اجرا شدن تابع یا دستوری در هنگام فشرده شدن دکمه موس بر روی عنصر مورد نظر و پس از رها کردن آن می شود . شکل استفاده از این حالت به صورت زیر است :

$ ( " selector " ).mouseup ( functoin ) ;

مثال زیر کاربرد رویداد mouseup را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

زمانیکه دکمه ماوس روی عنصر مورد نظر رها می شود
رویداد ( ) hover در jQuery

در این بخش از آموزش JQuery ، رویداد hover را در طراحی سایت  شرح میدهیم.

رویداد ( ) hover ، دو تابع را تعیین می کند که در هنگام عبور موس از روی عنصر مورد نظر ، اجرا می شوند . تابع اول در هنگام ورود موس بر روی عنصر و تابع دوم در هنگام خروح عنصر از روی عنصر اجرا می شود .
این رویداد هر دو رویداد mouseenter و رویداد mouseleave را فعال می کند .
شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : selector ، تعیین کننده id عنصری است که می خواهیم رویداد ( ) hover در هنگام عبور از روی آن اتفاق بیفتد .

inFunction : این تابع زمانی اتفاق می افتد که رویداد mouseenter رخ می دهد . یعنی زمانی که موس بر روی عنصر مورد نظر وارد می شود .
outFunction : این تابع زمانی اتفاق می افتد که رویداد mouseleave رخ می دهد . یعنی زمانی که موس از روی عنصر مورد نظر خارج می شود .
نکته مهم : اگر فقط یک تابع در دستور رویداد ( ) hover تعیین شود ، این تابع برای هر رویداد اجرا می شود .

$("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); });

این رویداد دو function دارد . و این دو ترکیبی از رویدادهای mouseenter(), mouseleave() هستند . اولین تابع زمانیکه ماوی وارد عنصر html می شود اجرا می شود و دومین تابع زمانیکه اشاره گر عنصر را ترک می کند .

مثال زیر کاربرد رویداد hover را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

رویداد ( ) focus در jQuery

در این بخش از آموزش JQuery ، رویداد focus را در طراحی سایت  شرح میدهیم.

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : selector کنترل یا عنصری است که فوکوس برنامه را به دست می آورد .
function : این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .

مثال زیر کاربرد رویداد focus را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

زمانیکه عنصری از یک فرم فاکوس را در اختیار می گیرد این رویداد اجرا می شود

رویداد ( ) blur در jQuery

در این بخش از آموزش JQuery ، رویداد blur را در طراحی سایت  شرح میدهیم.

رویداد blur در jQuery زمانی اتفاق می افتد که کنترل یا عنصر مورد نظر فوکوس  برنامه را از دست می دهد. می تولنید کدها و توابع مورد نظر خود را طوری طراحی کنید که در هنگام رخ دادن این رویداد ، اجرا شوند .

شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : selector عنصر مورد نظری است که فوکوس برنامه را از دست می دهد . مثل یک کادر ورود متن که پس از پرکردن آن توسط کاربر و کلیک بر روی چیزی دیگر ، فوکوس را از دست می دهد .

function : این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .

مثال زیر کاربرد رویداد blur را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

زمانیکه عنصرمورد نظر از فرم فاکوس را از دست می دهد
رویداد ( ) change در jQuery

در این بخش از آموزش JQuery ، رویداد change را در طراحی سایت  شرح میدهیم.

رویداد change زمانی اتفاق می افتد که در کنترل یا عنصر مورد نظر تغییری ایجاد می شود. این رویداد معمولا برای کنترل هایی مثل کادر متن ، گزینه های انتخاب و یا منوهای کرکره ایی که محتویات یا حالات آنها قابل تغییر هستند ، به کار می رود .
زمانی که شما متن یک کنترل متن را تغییر داده و یا گزینه یک کادر انتخابی را عوض می کنید ، رویداد change اتفاق می افتد . شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : selector کنترلی است که کاربر آن را تغییر می دهد .
function : این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .

مثال زیر کاربرد رویداد change را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

این رویداد فقط برای عناصر درون فرم کاربرد دارد و زمانی فراخوانی می شود که محتوای یک عنصر تغییر کند.

رویداد ( ) submit در jQuery

در این بخش از آموزش JQuery ، رویداد submit را در طراحی سایت  شرح میدهیم.

رویداد ( ) submit زمانی اتفاق می افتد که یک فرم submit شده و به سرور ارسال شود .
برای مثال از رویداد ( ) submit می توان برای صدور یک پیام هشدار به کاربر ، برای اعلام submit شدن فرم استفاده کرد . رویداد ( ) submit فقط با تگ form کار می کند .
شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

یا

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر تعیین کننده id فرمی است که submit شده است .
function : تعیین کننده تابعی است که می خواهیم پس از submit شدن فرم ، اجرا شود .

مثال زیر کاربرد رویداد ( ) submit را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

رویداد ( ) toggle در jQuery

در این بخش از آموزش JQuery ، رویداد toggle را در طراحی سایت  شرح میدهیم.

رویداد toggle بین دو افکت ( ) show و افکت ( ) hide تغییر وضعیت می دهد .

رویداد toggle وضعیت نمایش و یا عدم نمایش عنصر مورد نظر رابر روی صفحه می سنجد . اگر عنصر در حال نمایش باشد آن را با استفاده از متد Hide مخفی کرده و اگر عنصر مخفی باشد آن را با استفاده از متد Show نمایش می دهد . این متد برای عناصری که از ابتدای اجرای صفحه مخفی تعیین شده اند ، کار نمی کند .

شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : تعیین کننده id عنصری است که می خواهیم افکت ( ) toggle ، بر روی آن اجرا شود .
speed : این پارامتر تعیین کننده سرعت انجام افکت و تغییر حالت عنصر از حالت اول به دوم است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
۱) MiliSecond : مدت زمان اجرای افکت بر حسب میلی ثانیه .
۲) Slow : سرعت آهسته
۳) Fast : سرعت زیاد
easing : این پارامتر تعیین کننده سرعت انجام افکت در ابتدا و انتهای آن است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
۱) Swing :سرعت انجام افکت در ابتدا و انتهای فرایند آهسته ولی در وسط آن زیاد است .
۲) Liner : سرعت در کل طول فرایند یکسان است .
function : به وسیله این پارامتر می توانیم یک تابع را تعیین کنیم ، تا در پایان انجام افکت ( ) toggle ، اجرا شود .
استفاده از این پارامتر اختیاری است .

مثال زیر کاربرد رویداد toggle را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

رویداد ( ) unload در jQuery

در این بخش از آموزش JQuery ، رویداد unload را در طراحی سایت  شرح میدهیم.

رویداد unload زمانی اتفاق می افتد که کاربر از صفحه جاری خارج می شود . برای مثال یکی ار استفاده های جالب این رویداد ، می تواند صدور یک پیام خداحافظی برای کاربر در زمانی که می خواهد صفحه را ببندد ، باشد .
رویداد unload در مواقع زیر رخ می دهد :

کلیک کاربر بر روی لینکی که باعث خروج از صفحه جاری و رفتن به صفحه دیگری می شود .
یک آدرس جدید در نوار آدرس مرورگر نوشته شده و کلید Enter را بزنید .
کلیدهای forward ( رفتن به جلو ) و backward ( رفتن به عقب ) را در مرورگر کلیک نمایید .
پنجره جاری مرورگر بسته شود .
صفحه مجدد لود و فراخوانی شود .
رویداد unload ، می تواند کد یا تابعی را در زمانی که صفحه جاری بسته می شود ، اجرا نماید .
شکل کلی استفاده از رویداد ( ) unload به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

function : این پارامتر تعیین کننده تابعی است که می خواهیم در هنگام رخ دادن رویداد ( ) unload ، اجرا شود .
چند نکته :

نکته ۱ : رویداد ( ) unload فقط بایستی با شی window به کار برود .
نکته ۲ : رویداد ( ) unload ممکن است در مرورگر های مختلف ، عملکرد متفاوتی داشته باشد . آن را در مرورگرهای مورد نظر خود تست نمایید .

مثال زیر کاربرد رویداد unload را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

رویداد ( ) select در jQuery

در این بخش از آموزش JQuery ، رویداد select را در طراحی سایت  شرح میدهیم.

رویداد select زمانی اتفاق می افتد که متن موجود در یک کادر متن ( textfield ) یا textarea ، انتخاب شود .
این رویداد دو کار را انجام می دهد :

باعث بروز و رخ دادن رویداد select برای یک کادر متن می شود . یعنی همانند این است که متن آن را انتخاب نماییم :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : تعیین کننده id عنصری است که می خواهیم متن آن را انتخاب نماییم .

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : تعیین کننده id عنصری است که می خواهیم متن آن را انتخاب نماییم و یا متنش انتخاب می شود .

مثال زیر کاربرد رویداد select را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

رویداد ( ) resize در jQuery

در این بخش از آموزش JQuery ، رویداد resize را در طراحی سایت  شرح میدهیم.

رویداد resize زمانی اتفاق می افتد که اندازه پنجره مرورگر تغییر نماید .
رویداد resize هم می تواند باعث تغییر اندازه پنجره مرورگر شده و یا اینکه در هنگام نغییر اندازه آن ، تابع تعیین شده را اجرا نماید .
شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

یا

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر تعیین کننده نام پنجره ای است که می خواهید در هنگام تغییر اندازه آن ، رویداد انجام شود . معمولا مقدار این پارامتر window بوده ، که به پنجره جاری مرورگر اشاره می کند .
function : این پارامتر تابعی را تعیین می کند که می خواهیم در هنگام تغییر اندازه پنجره مرورگر اجرا شود .

مثال زیر کاربرد رویداد resize را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

رویداد ( ) scroll در jQuery

در این بخش از آموزش JQuery ، رویداد scroll را در طراحی سایت  شرح میدهیم.

رویداد scroll زمانی اتفاق می افتد که کاربر در یک عنصر صفحه ، عمل scroll ( بالا و پایین رفتن ) را انجام دهد .
این رویداد برای تمام عناصری که دارای خاصیت scroll هستند ، مثل صفحه ( window , textarea و … ) وجود دارد .
رویداد scroll هم می تواند باعث scroll یک عنصر شده و یا اینکه در هنگام scroll آن عنصر ، یک تابع تعیین شده را اجرا نماید . شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

یا

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر ، تعیین کننده id عنصری است که عمل scroll بر روی آن انجام می شود .
function : این پارامتر تابعی را تعیین می کند که می خواهیم در هنگام scroll عنصر مورد نظرمان اجرا شود .

مثال زیر کاربرد رویداد scroll را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

رویداد ( ) focusin در jQuery

در این بخش از آموزش JQuery ، رویداد focusin را در طراحی سایت  شرح میدهیم.

رویداد focusin زمانی اتفاق می افتد که یک عنصر فرزند ( عنصری که در درون یک عنصر دیگر قرار گرفته است )، فوکوس برنامه را به دست آورد . عنصری که در هر لحظه انتخاب شده و تمرکز برنامه بر روی آن است ، فوکوس برنامه را در اختیار دارد . دقت کنید که برای رخ دادن این رویداد ، باید یک عنصر فرزند فوکوس را به دست آورد و نه خود عنصر . بدیهی است این رویداد در مورد تگ هایی که عنصر فرزند ندارند ، اجرا نمی شود .
برای مثال فرض کنید که یک تگ div طراحی کرده ایم که در درون آن دو کادر متن قرار دارد . زمانی که هر کدام از کادرهای متین درون آن ، فوکوس برنامه را به دست آورد ، این رویداد اتفاق می افتد .
شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

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

مثال زیر کاربرد رویداد focusin را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

تابع Callback در jquery

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

مثال با تابع Callback

در مثال زیر تابع  alert  بعد از اجرا شدن  افکت hide  اجرا میشود:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال بدون تابع Callback

در مثال زیر تابع  alert  قبل از اجرا شدن افکت hide  اجرا میشود:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

دستورات پشت سر هم (زنجیره ای) در جی کوئری

در جی کوئری می‌توان از خصوصیت فراخوانی زنجیره‌ای متدھا استفاده نمود و این باعث می‌شود چندین کد فقط در یک سطر قرار گیرد و در نتیجه کد بسیار مختصر گردد.

در مثال زیر می‌خواهیم تمام عناصر  تگ <div>  در صورتی که دارای کلاس notLongForThisWorld باشند را مخفی (با فید شدن) کنیم.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

یکی از مزیت‌های اکثر متدهای قابل اجرا بروی مجموعه عناصر انتخاب شده آن است که خروجی خود آنها مجموعه‌ای دیگر است. به این معنا که خروجی این متد، آماده اعمال یک متد دیگر است.
فرض کنید در مثال بالا بخواهیم پس از مخفی کردن هر تگ <div> بخواهیم یک کلاس به نام removedبه آن بیافزاییم. به این منظور می‌توان کدی مانند زیر نوشت:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

این زنجیره متدها می‌توانند به هرتعداد ادامه پیدا کند.
افکت ( ) fadeOut در jQuery

در این بخش از آموزش jquery ، افکت fadeOut را در طراحی سایت آموزش می دهیم.

افکت fadeOut باعث می شود تا عنصر مورد اثر آن به تدریج از حالت نمایان به حالت مخفی در بیاید. این افکت در یک افکت تصویری با کم کردن نور عنصر به تدریج باعث مخفی شدن آن از دید کاربر می شود .

شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector :عنصری است که این افکت باعث مخفی شدن آن می شود .

speed :این پارامتر اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر به تدریج مخفی شود را نعیین می کنید . مثلا ۱۰۰ ms .
تعیین بر اساس ۳ حالت کلی زیر : در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت مخفی شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
“slow”
“normal”
“fast”

callback : توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان یافتن اجرای افکت و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است .
مثال زیر کاربرد افکت fadeOut را نشان میدهد:

مثال زیر تمام تگ <p> موجود در صفحه که مرئی و قابل دیده شدن میباشند  را به تدریج محو می کند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال دیگر :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

افکت ( ) fadeTo در jQuery

در این بخش از آموزش jquery ، افکت fadeTo را در طراحی سایت آموزش می دهیم.

افکت fadeTo میزان شفافیت و وضوح نمایش یک عنصر را به تدریج به یک مقدار تعیین شده از سوی کاربر تغییر می دهد .
به عبارت دیگر افکت fadeTo میزان نور نمایش یک عنصر را کم یا زیاد می کند . شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : selector عنصری است که این افکت باعث تغییر وضوح نمایش آن می شود .

speed : این پارامتر در این متد اجباری بوده و حتما باید مقدار دهی شود . در غیر این صورت افکت کار نخواهد کرد .
این پارامتر سرعت تغییر وضوح تصویر عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن وضوح تصویرعنصر تغییر کند را نعیین می کنید . مثلا ۱۰۰ ms .
تعیین بر اساس ۳ حالت کلی زیر : در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت تغییر وضوح تصویر عنصر را آرام ، معمولی و یا سریع انتخاب می نمایید .
“slow”
“normal”
“fast”

opacity :این پارامتر در این متد اجباری بوده و حتما باید مقدار دهی شود . در غیر این صورت افکت کار نخواهد کرد . .
این پارامتر میزان تغییر وضوح تصویر عنصر را تعیین می کند . مقداری که به این پارامتر می توان داد باید عددی بین ۰.۰ تا ۱ باشد و هر چه عدد انتخاب شده کمتر باشد ، وضوح تصویر عنصر هم کمتر خواهد بود .
callback : توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان یافتن اجرای افکت و تغییر وضوح تصویر عنصر مورد نظر ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است .

مثال زیر کاربرد افکت fadeTo را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر روش استفاده از متد fade را با مقادیر متفاوت نشان می دهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

افکت ( ) hide در jQuery

در این بخش از آموزش jquery ، افکت hide را در طراحی سایت آموزش می دهیم.

افکت ( ) hide باعث مخفی شدن عنصر مورد نظر می شود . عمکلرد این افکت بسیار شبیه به افکت fadeOut می باشد . بوسیله افکت ( ) hide  می توانید این اختیار را به کاربر بدهید تا عناصری را که در صفحه لازم ندارد ، مخفی کند .
شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector :selector عنصری است که این افکت باعث مخفی شدن آن می شود .
speed : این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی شود را نعیین می کنید . مثلا ۱۰۰ ms .
تعیین بر اساس ۳ حالت کلی زیر : در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت مخفی شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
“slow”
“normal”
“fast”

callback : توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است .

مثال زیر کاربرد افکت ( ) hide را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

با افکت Hide در جی کوئری شما میتواند یک عنصر در HTML را مخفی کنید.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

افکت ( ) show در jQuery

در این بخش از آموزش jquery ، افکت show را در طراحی سایت آموزش می دهیم.

افکت show عنصری که مخفی است را نمایان می کند . عملکرد این افکت همانند افکت fadeIn می باشد . بدیهی است عنصری که با این افکت نمایان می شود باید در ابتدا مخفی باشد .
افکت show بر روی عناصری که با یکی از افکت های hide یا fadeOut در jQuery مخفی شده اند و یا خاصیت display آنها در css برابر با none باشد ، اثر خواهد داشت .
شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : selector عنصری است که این افکت باعث نمایان شدن آن می شود .

speed :این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت نمایان شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر نمایان شود را نعیین می کنید . مثلا ۱۰۰ ms .
تعیین بر اساس ۳ حالت کلی زیر : در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
“slow”
“normal”
“fast”

توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و نمایان شدن عنصر مورد نظر ، آن تابع اجرا شود .
callback :به کار بردن این پارامتر اختیاری است .

با افکت show در جی کوئری شما میتواند یک عنصر در HTML را از حالت مخفی خارج کنید.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

پارامترهای اختیاری برای این دستور “slow”, “fast” , “milliseconds” میباشند .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

افکت ( ) slideDown در jQuery

در این بخش از آموزش jquery ، افکت SlideDown را در طراحی سایت آموزش می دهیم.

افکت slideDown با افزایش تدریجی ارتفاع یک عنصر مخفی ، آن را از حالت مخفی به حالت نمایان در می آورد . در واقع این افکت این کار را در قالب یک افکت تصویری انجام می دهد . بدیهی است این افکت بر روی عنصری موثر است که در ابتدا مخفی باشد .
افکت slideDown بر روی عناصری که با یکی از افکت های hide یا fadeOut در jQuery مخفی شده اند و یا خاصیت display آنها درcss برابر با none باشد ، اثر خواهد داشت .

کار  افکت slideDown این است  که کشویی باز میکند.

شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد افکت slideDown را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

هر وقت روی محتویات تگی که از ای دی به نام pars-soft.ir استفاده می کند کلیک شود محتویات تگی که از ای دی panel استفاده می کند بصورت اسلایدی نمایش داده شود .

افکت ( ) slideUp در jQuery

در این بخش از آموزش jquery ، افکت SlideUp را در طراحی سایت آموزش می دهیم.

افکت slideUp با کاهش تدریجی ارتفاع یک عنصر باعث مخفی شدن آن می شود . در واقع این افکت این کار را در قالب یک افکت تصویری انجام می دهد .

کار افکت slideUp  این است  که کشویی میبندد.

شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : selector عنصری است که این افکت باعث مخفی شدن آن می شود .

speed : این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی شود را نعیین می کنید . مثلا ۱۰۰ ms .
تعیین بر اساس ۳ حالت کلی زیر : در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت مخفی شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
“slow”
“normal”
“fast”

callback : توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است .

مثال زیر کاربرد افکت slideUp را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

افکت ( ) animate در jQuery

در این بخش از آموزش jquery ، افکت animate را در طراحی سایت آموزش می دهیم.

افکت  animate بوسیله تغییر یک یا چند خاصیت CSS عنصر مورد نظر از یک حالت اولیه به مقداری جدید یک عمل انیمیشن را انجام می دهد . مقدار خاصیت یا خاصیت های CSS تعیین شده برای تغییر در عنصر مورد نظر توسط یک افکت ( ) animate بصورت آهسته از مقدار اولیه به مقدار ثانویه تغییر می کنند که باعث ایجاد یک حالت انیمیشن می شود .
فرض کنید یک تگ div به رنگ پس زمینه سبز دارید . مقدار خاصیت height ( ارتفاع ) آن در حالت اولیه px 100 است . می خواهید بوسیله خاصیت ( ) animate مقدار ارتفاع آن را به px 300 افزایش دهید . در هنگام اجرای ( ) animate ارتفاع عنصر به صورت آهسته از ۱۰۰ به ۳۰۰ افزایش می یابد و باعث ایجاد یک افکت تصویری می شود .
افکت ( ) animate فقط با خواص CSS ای که مقادیر آنها عددی است مثل (Height : 30 px ) کار می کند و نمی تواند آن را با خواصی که مقدار رشته ای دارند مثل ( background-color:red ) به کار ببرید .

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربردافکت  animate را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

هرگاه روی دکمه ای از نوع button کلیک کردیم جلوه انیمیشن روی محتویات تگ div انجام شود و …

افکت ( ) delay در jQuery

در این بخش از آموزش jquery ، افکت delay را در طراحی سایت آموزش می دهیم.

افکت delay باعث ایجاد یک تاخیر در اجرای افکت دیگری می شود .

برای مثال فرض کنید که یک افکت ( ) fadeIn را برای یک عنصر تعیین کرده اید . این افکت در هنگام کلیک کاربر بر روی دکمه فرمان اجرا می شود . اما می خواهید کاری کنید تا مثلا ۳ ثانیه بعد از کلیک کاربر بر روی دکمه فرمان ، افکت ( ) fadeIn اجرا شود . برای این منظور بایستی ازافکت delay به همراه آن استفاده کنید .
شکل کلی استفاده ازاین افکت بصورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر تعیین کننده id عنصری است که می خواهیم در اجرای یک افکت بر روی آن ، تاخیر ایجاد نماییم .

speed : این پاراتر تعیین کننده مدت زمان تاخیر در اجرای افکت است .
انواع مقادیر ممکن عبارتند از :
MiliSecond : مدت زمان تاخیر در اجرای افکت بر حسب میلی ثانیه .
Slow : سرعت آهسته .
Fast : سرعت زیاد .
مثال زیر کاربرد افکت delay را نشان میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

در خط ۱  با کلیک روی محتوای تگ button تابع اجرا شود

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

افکت ( ) slideToggle در jQuery

در این بخش از آموزش jquery ، افکت SlideToggle را در طراحی سایت آموزش می دهیم.

افکت slideToggle همانند یک عملگر دوجانبه بین دو افکت slideUp و افکت slideDown بر روی عنصر مورد اثر خود عمل می کند .
به عبارت دیگر افکت slideToggle ابتدا وصغیت نمایش و یا عدم نمایش عنصر را بررسی کرده و در صورتی که آن عنصر نمایان باشد ، با کاهش تدریجی ارتفاع آن باعث مخفی شدن عنصر می شود . و چنانچه عنصر مخفی باشد با افزایش تدریجی ارتفاع آن ، عنصر را نمایان می سازد .
افکت slideToggle کاربرد بسیار سودمندی می تواند داشته باشد . به وسیله آن می توانید این اختیار را به کاربر بدهید تا عناصری را که می خواهد در صفحه مخفی کرده و یا آنها را نمایان سازد .

کار افکت slideToggle این است که حلقه وار افکت میدهد .

شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector :selector عنصری است که این افکت باعث مخفی و یا نمایان شدن آن می شود .
speed :این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت مخفی و یا نمایان شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی یا نمایان شود را نعیین می کنید . مثلا ۱۰۰ ms .
تعیین بر اساس ۳ حالت کلی زیر : در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت مخفی یا نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .

"slow" "normal" "fast"

callback :توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان یافتن اجرای افکت ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است .

مثال زیر کاربردافکت slideToggle را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

افکت ( ) stop در jQuery

در این بخش از آموزش jquery ، افکت stop را در طراحی سایت آموزش می دهیم.

به کار بردن افکت stop باعث توقف انجام یک عمل یا انیمیشن برای عنصر مورد نظر می شود . برای مثال فرض کنید که یک تگ Div دارید که می خواهید ارتفاع آن را از ۱۰۰ به ۵۰۰ پیکسل افزایش دهید . انجام این کار چند ثانیه طول می کشد . می توانید دکمه فرمانی قرار دهید تا با اجرای  افکت stop انجام انیمیشن فوق را برای تگ Div ، مثلا در وسط فرایند متوقف سازد .
شکل کلی استفاده از این افکت بصورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : selector تعیین کننده id عنصری است که می خواهیم اجرای یک افکت بر روی آن با متد ( ) stop متوقف شود .

stopAll : این پارامتر یک مقدار Boolean را تعیین می کند . مقدار پیش فرض آن false است ولی اگر روی true تنظیم شود، در هنگام اجرای افکت stop ، کلیه انیمیشن های مرتبط با این افکت را به صورت یکباره متوقف می سازد .
استفاده از این پارامتر اختیاری است .
goToEnd : این پارامتر یک مقدار Boolean را تعیین می کند . مقدار پیش فرض آن false است ولی اگر روی true تنظیم شود ، در هنگام اجرای افکت stop ،انیمیشن های مرتبط با آن را به یکباره متوقف کرده و به مرحله آخر می رساند .
استفاده از این پارامتر اختیاری است .

مثال زیر کاربرد افکت stop را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

افکت ( ) toggle در jQuery

در این بخش از آموزش jquery ، افکت toggle را در طراحی سایت آموزش می دهیم.

افکت ( ) toggle بین دو افکت ( ) show و افکت ( ) hide تغییر وضعیت می دهد .

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

شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : تعیین کننده id عنصری است که می خواهیم افکت ( ) toggle ، بر روی آن اجرا شود .
speed : این پارامتر تعیین کننده سرعت انجام افکت و تغییر حالت عنصر از حالت اول به دوم است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
۱) MiliSecond : مدت زمان اجرای افکت بر حسب میلی ثانیه .
۲) Slow : سرعت آهسته
۳) Fast : سرعت زیاد
easing :این پارامتر تعیین کننده سرعت انجام افکت در ابتدا و انتهای آن است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
۱) Swing :سرعت انجام افکت در ابتدا و انتهای فرایند آهسته ولی در وسط آن زیاد است .
۲) Liner : سرعت در کل طول فرایند یکسان است .
به وسیله این پارامتر می توانیم یک تابع را تعیین کنیم ، تا در پایان انجام افکت ( ) toggle ، اجرا شود .
function :استفاده از این پارامتر اختیاری است .

مثال زیر کاربرد افکت ( ) toggle را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

افکت ( ) fadeIn در jQuery

در این بخش از آموزش jquery ، افکت fadeIn را در طراحی سایت آموزش می دهیم.

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector :selector عنصری است که این افکت باعث نمایان شدن آن می شود .
speed : این پارامتر اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت نمایان شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر به تدریج نمایان شود را نعیین می کنید . مثلا ۱۰۰ ms .
تعیین بر اساس ۳ حالت کلی زیر : در این حالت با انتخاب یکی از ۳ مقدار زیر سرعت نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
“slow”
“normal”
“fast”

callback :توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و نمایان شدن عنصر مورد نظر ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است .

مثال زیر کاربرد افکت fadeIn را نشان میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

با کلیک روی هر button عمل fadein شدن بر روی تگ هایی که ای دی انها div1,div2,dive3 است با سرعت های متفاوت انجام می شود
متد addclass

در این بخش از آموزش JQuery ، متد addClass را در طراحی سایت ، شرح میدهیم.

متد addClass می تواند یک کلاس css را به تگ یا تگهای مختلف تخصیص دهد.

در مثال زیر با استفاده از متد addClass کلاس important به تمام تگ های از نوع div اعمال می شود :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) after در jQuery

در این بخش از آموزش JQuery ، متد after را شرح میدهیم.

به وسیله متد after در jQuery ، می توانید محتویات مورد نظر خود ( می تواند شامل متن یا تگ های HTML باشد ) را پس از عنصر مورد نظر خود ، در صفحه HTML وارد نمایید .
برای مثال فرض کنید که یک پاراگراف در صفحه دارید . به وسیله این متد می توانید یک پاراگراف یا یک تگ دیگر HTML را پس از آن عنصر ، به صفحه اضافه نمایید .
شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : عنصر مورد نظری است که می خواهید محتویات مورد نظرتان را پس از آن ، در صفحه وارد نمایید .

content : تعیین کننده محتویاتی است که می خواهید پس از عنصر مورد نظر در صفحه وارد نمایید . این محتویات می تواند شامل متن یا سایر تگ های HTML باشد .

مثال زیر کاربرد متد after را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) append در jQuery

در این بخش از آموزش JQuery ، متد append را شرح میدهیم.

توسط متد append در jQuery می توانید یک متن را به ادامه یک پاراگراف دیگر اضافه نمایید . متن اضافه شده به ادامه پاراگراف اضافه می شود نه اینکه در سطر بعد ( برخلاف متد ( ) after ) .
از متد append برای زمانی استفاده می شود که بخواهید یک متن را به ادامه یک پاراگراف موجود در صفحه اضافه نمایید .
شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : پاراگراف یا عنصر مورد نظری است که می خواهید متن مورد نظرتان را به ادامه آن اضافه نمایید .

content : تعیین کننده محتویاتی است که می خواهید به ادامه عنصر مورد نظر در صفحه اضاافه نمایید . این محتویات می تواند شامل متن باشد .

مثال زیر کاربرد  متد append را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) appendTo در jQuery

در این بخش از آموزش JQuery ، متد appendTo را شرح میدهیم.

متد appendTo برای اضافه کردن المنت های HTML در ابتدای عنصر انتخاب شده استفاده میشود.

مثال زیر کاربرد متد appendTo را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) attr در jQuery

در این بخش از آموزش JQuery ، متد attr را شرح میدهیم.

متد attr در jQuery ، برای ۲ منظور می تواند به کار برده شود .

مقدار تعیین شده برای خواص عناصر را خوانده و به کاربر نمایش می دهد .

برای مثال فرض کنید که برای خاصیت عرض ( width ) یک عنصر عکس < img > مقدار ۲۰۰px را تعیین کرده اید . این متد می تواند این مقدار را خوانده و به کاربر نمایش دهد .

می تواند مقدار خاصیت عناصر را تعیین کرده و یا در صورت نیاز تغییر دهد .

برای مثال به وسیله این متد می توانید سایز فونت یک پاراگراف < p > را به مقدار ۱۴pt تغییر دهید .

کاربرد اول – نمایش مقدار خاصیت یک عنصر

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را نمایش دهیم .

attribute : نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را استخراج کرده و به کاربر نمایش دهد .

کاربرد دوم – تغییر مقدار خاصیت یک عنصر

در کاربرد دوم این متد می خواهیم به شما نمایش دهیم چگونه می توان مقدار خاصیت یک عنصر را به مقدار مورد نظرمان تغییر دهیم .

شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : عنصر مورد نظری است که می خواهیم مقدار یک خاصیت آن را به مقدار دلخواه تغییر دهیم .

attribute : نام خاصیتی از عنصر مورد نظر است که این متد قرار است مقدار آن را تغییر دهید . برای مثال مقدار خاصیت عرض width یک عنصر را به یک مقدار دیگر تغییر دهیم .
value : مقدار جدیدیتعیین شده است که می خواهیم مقدار خاصیت را به آن مقدار ، تغییر دهیم .

مثال زیر کاربرد متد attr را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) before در jQuery

در این بخش از آموزش JQuery ، متد before را شرح میدهیم.

از متد before در jQuery برای وارد نمودن یک متن یا پاراگراف در سطر قبلی یک پاراگراف استفاده می شود .
متد before متن مورد نظر شما را به سطر قبلی پاراگراف تعیین شده در صفحه ، اضافه می کند .
شکل کلی استفاده از این متد به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : عنصر مورد نظری است که می خواهید محتویات مورد نظرتان را قبل از آن ، در صفحه وارد نمایید .

content : تعیین کننده محتویاتی است که می خواهید قبل از عنصر مورد نظر در صفحه وارد نمایید . این محتویات می تواند شامل متن یا سایر تگ های HTML باشد .

مثال زیر کاربرد متد before را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد clone در jQuery

در این بخش از آموزش JQuery ، متد clone را شرح میدهیم.

متد clone برای اضافه کردن المنت های HTML در ابتدای عنصر انتخاب شده استفاده میشود.
ساختار این متد به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد clone را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) css در jQuery

در این بخش از آموزش JQuery ، متد css را شرح میدهیم.

متد css در jQuery می تواند یک یا چند خاصیت css یک عنصر HTML موجود در صفحه را برگردانده و یا به مقدار دلخواه تغییر دهد .
به عبارت دیگر شما به وسیله متد css می توانید به مقدار خواص css یک عنصر مورد نظر دسترسی داشته و یا آن خواص را به مقدار دلخواه تغییر دهید .
برای مثال می توانید به مقدار خاصیت رنگ نوشته یک پاراگراف ( خاصیت Color ) دسترسی داشته و یا آن را به یک مقدار دلخواه تغییر دهید .
دسترسی به مقدار خاصیت css یک عنصر

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : عنصر مورد نظری است که می خواهید محتویات مقدار یک خاصیت CSS آن را خوانده و یا به مقدار دلخواه تغییر دهید .

property : این پارامتر تعیین کننده خاصیت css عنصری است که می خواهید مقدار آن را خوانده و یا به یک مقدار جدید تغییر دهید .

در زمانی که شما می خواهید مقدار خاصیت css یک عنصر HTML را بخوانید ، این متد مقدار آن خاصیت را برای اولین عنصری از نوع تعیین شده که در صفحه پیدا کند ، بر می گرداند .
مثلا اگر بخواهید رنگ متن یک پاراگراف را در صفحه بخوانید ، این متد رنگ اولین پاراگراف موجود در صفحه را بر می گرداند . مگر دقیقا در دستور خود ، id پاراگراف مورد نظر را تعیین نمایید .

مثال زیر کاربرد متد css را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) detach در jQuery

در این بخش از آموزش JQuery ، متد detach را شرح میدهیم.

متد detach عنصر HTML تعیین شده برای آن ( شامل تمام متن و اشیای فرزند ) را از روی صفحه پاک می کند . اما اطلاعات و رویدادهای شی مورد نظر بر روی صفحه باقی می مانند .
متد detach همچنین یک کپی از عنصر پاک شده را در خود نگه داشته و بعدا می توانید آن عنصر را مجددا به صفحه وارد نمایید .
برای مثال فرض کنید یک پاراگراف یا عکس را بر روی صفحه دارید . به وسیله این متد می توانید آن را از روی صفحه بردارید .

شکل کلی استفاده از متد detach به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector :  این پارامتر تعیین کننده id عنصر HTML ی است که می خواهید آن را از صفحه پاک کنید .

برای حذف کامل یک عنصر ( حذف عنصر به همراه تمامی متن و رویدادهای مربوط به آن ) از متد ( ) remove استفاده نمایید .
برای پاک کردن محتویات داخلی یک عنصر و نه حذف آن از صفحه ، از متد ( ) empty استفاده نمایید .

مثال زیر کاربرد متد detach را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) empty در jQuery

در این بخش از آموزش JQuery ، متد empty را شرح میدهیم.

متد empty ، محتویات متنی و سایر اشیای فرزند عنصر HTML تعیین شده برای آن را پاک می کند .
نکته مهم درباره متد empty اینست که این متد خود عنصر و یا خواص آن را حذف نمی کند ، بلکه فقط محتویات درونی آن را خالی می کند . بنابراین عنصر همچنان بر روی صفحه قرار داشته و قابل دسترس است .
برای مثال می توانید به وسیله متد ( ) empty ، محتویات درون یک پاراگراف یا آیتم های موجود در یک لیست HTML را پاک نمایید و

شکل کلی استفاده از متد empty به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر تعیین کننده id عنصر HTML ی است که می خواهید محتویات درون آن را پاک کنید .

مثال زیر کاربرد متد empty را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد hasClass در jQuery

در این بخش از آموزش JQuery ، متد hasClass را شرح میدهیم.

متد hasClass مشخص میکند که آیا عنصر دارای کلاس classname هست یا خیر .
ساختار این متد به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد hasClass را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) height در jQuery

در این بخش از آموزش JQuery ، متد height را شرح میدهیم.

متد height در jQuery , می تواند مقدار ارتفاع یک عنصر HTML را خوانده و بر گرداند و یا به وسیله آن مقدار ارتفاع عنصر را به یک مقدار دلخواه تغییر دهید .

برای مثال اگر یک عنصر div داشته باشیم که ارتفاع آن px 300 باشد ، با استفاده از متد ( ) height می توان دو کار را انجام داد :

مقدار ارتفاع آن را که px 300 است ، به صفحه برگدانیم .

مقدار جدیدی را برای ارتفاع عنصر تعیین کرده و آن را به مقدار جدید تغییر دهید .
نکته : همانطور که در تصویر زیر نمایش داده ایم ، متد height شامل حاشیه بیرونی ( margin ) ، حاشیه درونی ( padding ) و خطوط حاشیه عنصر ( border ) نمی شود و فقط ارتفاع خود عنصر را بر می گرداند .

استفاده از متد ( ) height در حالت اول – خواندن ارتفاع یک عنصر :

گفتیم که در حالت اول متد ( ) height ، از این متد برای خواندن مقدار ارتفاع یک عنصر و بازگرداندن آن مقدار به صفحه استفاده می شود . شکل کلی استفاده از متد ( ) height در حالت اول به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

استفاده از متد ( ) height در حالت دوم – تنظیم ارتفاع یک عنصر :

گفتیم که در حالت دوم متد height ، از این متد برای تنظیم مقدار ارتفاع یک عنصر به یک مقدار جدید استفاده می شود . شکل کلی استفاده از متد ( ) height در حالت دوم به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

value : مقدار مورد نظر

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

متد ( ) html در jQuery

در این بخش از آموزش JQuery ، متد html را شرح میدهیم.

متد html در jQuery دو کار را انجام می دهد :

به وسیله این متد می توانید محتویات درونی یک عنصر HTML یا همان خاصیت innerHtml آن را خوانده و به صفحه برگردانید . برای مثال می توان به محتویات درونی یگ تگ پاراگراف اشاره کرد .
به وسیله این متد می توانید محتویات درونی یک عنصر HTML را به مقدار دلخواه خود تغییر دهید .

برای مثال می توانید محتویات یک پاراگراف در صفحه را به مقدار دلخواه خود تغییر دهید .

استفاده از متد html در حالت اول :

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر تعیین کننده ID عنصری است که می خواهید محتویات درونی آن را بخوانید .


متد innerHeight در jQuery

در این بخش از آموزش JQuery ، متد innerHeight را شرح میدهیم.

متد innerHeight  ارتفاع عناصر را با در نظر گرفتن مقدار padding انها بر می گرداند.

مثال :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد replaceAll در jQuery

در این بخش از آموزش JQuery ، متد replaceAll را شرح میدهیم.

متد replaceAll ، عنصر HTML تعیین شده برای آن را با تمام عناصر HTML مورد نظر شما در صفحه ، عوض می کند .
فرض کنید در یک صفحه چندین پاراگراف ( تگ < p > ) دارید . می خواهید کدی طراحی نمایید تا در هنگام اجرای آن ، تمامی پاراگراف های صفحه یا مثلا پاراگراف های عضو یک کلاس خاص ، با یک تگ span  عوض شوند . در این حالت باید از متد replaceAll استفاده نمایید .

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

content : این پارامتر تعیین کننده عنصر HTML یا متنی است که می خواهید آن را به جای عنصر HTML مورد نظرتان در صفحه قرار دهید .
تعیین این پارامتر اجباری است .
selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید آن را با یک عنصر جدید مورد نظرتان عوض کنید .
تعیین این پارامتر اجباری است .

مثال زیر کاربرد متد replaceAll را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد replaceWith در jQuery

در این بخش از آموزش JQuery ، متد replaceWith را شرح میدهیم.

متد replaceWith ، عنصر HTML تعیین شده را با محتوای جدید جایگزین میکند.

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد replaceWith را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد innerWidth در jQuery

در این بخش از آموزش JQuery ، متد innerWidth را شرح میدهیم.

متد innerWidth عرض  عناصر را با در نظر گرفتن مقدار padding انها بر می گرداند.

مثال :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) insertAfter در jQuery

در این بخش از آموزش JQuery ، متد insertAfter را شرح میدهیم.

متد insertAfter ، یک متن یا کنترل HTML را بعد از عنصر مورد نظرتان در صفحه وارد می نماید .
در متد insertAfter بایستی یک متن یا عنصر HTML را انتخاب کرده و سپس تعیین نمایید تا پس از چه عنصری در صفحه وارد شود .
برای مثال فرض کنید یک پاراگراف در صفحه دارید و می خواهید کدی طراحی نمایید تا در صورت کلیک کاربر بر روی یک دکمه فرمان ، متن جدیدی به انتهای پاراگراف اضافه شود .

شکل کلی استفاده از متد ( ) insertAfter به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

content : این پارامتر تعیین کننده متن یا id عنصر HTML ای است که می خواهید محتویات آن را پس از عنصر مورد نظر در صفحه وارد نمایید .
selector : تعیین کننده id عنصری است که می خواهید متن یا عنصر دیگر HTML خود را پس از آن در صفحه وارد نمایید .

مثال زیر کاربرد  متد insertAfter را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد scrollLeft در jQuery

در این بخش از آموزش JQuery ، متد scrollLeft را شرح میدهیم.

متد scrollLeft ،برای عنصر HTML تعیین شده اسکرول افقی تنظیم میکند .

ساختار این متد در حالت set به صورت زیر است :

اسکرول را به حالت افقی تنظیم میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

ساختار این متد در حالت Return به صورت زیر است :

موقعیت افقی اسکرول زا برمیگرداند.

$(selector).scrollLeft()

مثال زیر کاربرد متد scrollLeft را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد insertBefore در jQuery

در این بخش از آموزش JQuery ، متد insertBefore را شرح میدهیم.

متد insertBefore ، یک متن یا کنترل HTML را قبل از عنصر مورد نظرتان در صفحه وارد می نماید .
در متد insertBefore بایستی یک متن یا عنصر HTML را انتخاب کرده و سپس تعیین نمایید تا قبل از چه عنصری در صفحه وارد شود .
برای مثال فرض کنید یک پاراگراف در صفحه دارید و می خواهید کدی طراحی نمایید تا در صورت کلیک کاربر بر روی یک دکمه فرمان ، متن جدیدی به ابتدای پاراگراف اضافه شود .

شکل کلی استفاده از متد ( ) insertBefore به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

content : این پارامتر تعیین کننده متن یا id عنصر HTML ای است که می خواهید محتویات آن را قبل از عنصر مورد نظر در صفحه وارد نمایید .
selector : تعیین کننده id عنصری است که می خواهید متن یا عنصر دیگر HTML خود را قبل از آن در صفحه وارد نمایید .

مثال زیر کاربرد متد insertBefore را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد offset در jQuery

در این بخش از آموزش JQuery ، متد offset را شرح میدهیم.

متد offset ،برای عنصر HTML تعیین شده مختصات آفست را نسبت به سند تنظیم میکند.

ساختار این متد در حالت set به صورت زیر است :

مختصات آفست را تنظیم میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

ساختار این متد در حالت Return به صورت زیر است :

مختصات آفست را برمیگرداند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد offset را نشان میدهد

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد offsetParent در jQuery

در این بخش از آموزش JQuery ، متد offsetParent را شرح میدهیم.

متد offsetParent ،موقعیت عنصر انتخاب شده را نسبت به والدین (Parent) خود نمایش میدهد.

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد offsetParent را نشان میدهد

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد outerHeight در jQuery

در این بخش از آموزش JQuery ، متد outerHeight را شرح میدهیم.

متد outerHeight ارتفاع بیرونی اولین عنصر انتخاب شده در HTML را برمیگرداند.

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد outerHeight را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد outerWidth در jQuery

در این بخش از آموزش JQuery ، متد outerWidth را شرح میدهیم.

متد outerWidth عرض بیرونی اولین عنصر انتخاب شده در HTML را برمیگرداند.

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد outerWidth را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد position در jQuery

در این بخش از آموزش JQuery ، متد position را شرح میدهیم.

متد position ، مختصات محل قرار گیری یک عنصر را بر حسب عنصر مادر ( parent ) آن تعیین کرده و به صفحه بر می گرداند .

این تابع متد position مختصات عنصر مورد نظر را با دو مقدار عددی نمایش می دهد که یکی تعیین کننده میزان فاصله از بالای عنصر مادر ( parent ) است است که به آن top می گویند . عدد دوم تعیین کننده میزان فاصله از سمت چپ عنصر مادر ( parent ) است که به آن left می گویند .
واحد خروجی این مثال بر حسب پیکسل px می باشد .

شکل کلی استفاده از متد ( ) position به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر تعیین کننده id عنصری است که می خواهید مختصات آن را نمایش دهید .

مثال زیر کاربرد متد position را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد prepend در jQuery

در این بخش از آموزش JQuery ، متد prepend را شرح میدهیم.

متد prepend مطالب را در آغاز  عناصر انتخاب شده درج میکند.

شکل کلی استفاده از متد prepend به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد prepend را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد prependTo در jQuery

در این بخش از آموزش JQuery ، متد prependTo را شرح میدهیم.

متد prependTo ، می تواند عنصر HTML تعیین شده برای آن را به ابتدای یک عنصر دیگر HTML اضافه نماید .
برای مثال فرض کنید که یک تگ div و یک پاراگراف ( تگ div ) دارید . می خواهید کدی طراحی نمایید تا در هنگام کلیک کاربر بر روی یک دکمه فرمان ، عنصر پاراگراف به انتدای تگ div اضافه شود . برای این منظور باید از متد prependTo استفاده نمایید .

شکل کلی استفاده از متد prependTo به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

این پارامتر تعیین کننده عنصر HTML ای است که می خواهید آن را به ابتدای عنصر مورد نظر خود اضافه نمایید . ( این پارامتر باشد از نوع تگ های HTML باشد ).
استفاده از این پارامتر اجباری است .
content : اگر عنصر HTML ای که می خواهید آن را در ابتدای عنصر دیگر وارد نمایید ، از قبل در صفحه وجود داشته باشد ، در هنگام اضافه شدن از مکان خود به ابتدای عنصر مورد نظر منتقل می شود .
selector : این پارامتر تعیین کننده id عنصری است که می خواهید عنصر مورد نظر خود را به ابتدای آن اضافه نمایید .
استفاده از این پارامتر اجباری است .

مثال زیر کاربرد متد prependTo را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

متد prop در jQuery

در این بخش از آموزش JQuery ، متد prop را شرح میدهیم.

متد prop ، می تواند دو کار را انجام دهد :

مقدار یک یا چند خاصیت یک عنصر HTML را خوانده و به صفحه بر می گرداند .
می تواند مقدار یک یا چند خاصیت یک عنصر HTML را به مقدار تعیین شده و مورد نظر شما تغییر دهد .

هنگامی که متد prop را برای خواندن مقدار خاصیت یک عنصر HTML به کار می برید ، این متد مقدار خاصیت اولین عنصری که با مشخصات داده شده یکسان است را نمایش می دهد .

ولی هنگامی که برای تغییر مقدار یک خاصیت عنصر HTML به کار می رود ، مقدار خاصیت کلیه عناصری که با مشخصات داده شده مطابقت داشته و در صفحه وجود دارند ، را تغییر می دهد .

خواندن مقدار یک خاصیت عنصر HTML

شکل کلی استفاده از متد ( ) prop در این حالت به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید مقدار یک خاصیت css آن را بخوانید .
تعیین این پارامتر اجباری است .
property : این پارامتر تعیین کننده نام خاصیتی است که می خواهید مقدار آن را بخوانید .


تعیین این پارامتر اجباری است .

تغییر مقدار یک خاصیت عنصر HTML به مقدار دلخواه

شکل کلی استفاده از متد ( ) prop در این حالت به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید مقدار یک خاصیت css آن را به یک مقدار جدید تغییر دهید .
تعیین این پارامتر اجباری است .
property : این پارامتر تعیین کننده نام خاصیتی است که می خواهید مقدار آن را به یک مقدار جدید تغییر دهید .
تعیین این پارامتر اجباری است .
value : این پارامتر تعیین کننده مقدار جدیدی است که می خواهید برای خاصیت css عنصر HTML قرار دهید .
تعیین این پارامتر اجباری است .

تغییر مقدار چند خاصیت css یک عنصر HTML به مقادیر دلخواه

شکل کلی استفاده از متد ( ) prop در این حالت  به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد prop را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) remove در jQuery

در این بخش از آموزش JQuery ، متد remove را شرح میدهیم.

متد remove ، عنصر HTML تعیین شده برای آن را به همراه تمام متن و اشیای فرزندش از صفحه حذف می کند . این متد همچنین تمام داده ها و رویدادهای مرتبط با آن عنصر را نیز پاک می کند .
برای مثال فرض کنید که یک پاراگراف در صفحه دارید . می خواهید کدی طراحی نمایید تا در صورت کلیک کاربر بر روی یک دکمه فرمان ، عنصر پاراگراف از روی صفحه حذف شود .

برای حذف عنصر از صفحه بدون پاک شدن اطلاعات و رویدادهای مرتبط به آن از متد ( ) detach استفاده نمایید .
برای اینکه متن و یا محتویات یک عنصر را پاک کرده ، ولی عنصر همچنان بر روی صفحه وجود داشته باشد از متد ( ) empty استفاده نمایید .

شکل کلی استفاده از متد ( ) remove به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید آن را از صفحه حذف نمایید .

مثال زیر کاربرد متد remove را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد removeAttr در jQuery

در این بخش از آموزش JQuery ، متد removeAttr را شرح میدهیم.

متد removeAttr ، یک یا چندین خاصیت css تعیین شده برای عنصر HTML مورد نظرتان را حذف می کند . با حذف خاصیت css ، اثر آن بر عنصر از بین می رود .
برای مثال فرض کنید که یک برای یک عنصر پاراگراف ( تگ < p > ) در صفحه ، خاصیت رنگ نوشته یا color تعیین کرده اید . با حذف این خاصیت و مقدارش توسط متد ( ) removeAttr ، رنگ داده شده به آن از بین رقته و به رنگ پیش فرض بر می گردد .

شکل کلی استفاده از متد removeAttr به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر تعیین کننده id عنصر HTML ای است که می خواهید یک یا چند خاصیت css آن را حذف نمایید .
تعیین این پارامتر اجباری است .
attribute : این پارامتر تعیین کننده خاصیت یا خواص css ای است که می خواهید آنها را حذف نمایید . تعیین این پارامتر اجباری است .
مثال زیر کاربرد متد removeAttr را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد removeClass در jQuery

در این بخش از آموزش JQuery ، متد removeClass را شرح میدهیم.

متد removeClass ، یک یا چندین کلاس تعیین شده برای عنصر HTML مورد نظرتان را حذف می کند.
شکل کلی استفاده از متد removeClass به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد removeClass را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد removeProp در jQuery

در این بخش از آموزش JQuery ، متد removeProp را شرح میدهیم.

متد removeProp ، یک یا چندین ویژگی (Property) تعیین شده برای عنصر HTML مورد نظرتان را حذف می کند.
شکل کلی استفاده از متد removeProp به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد removeProp را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد text در jQuery

در این بخش از آموزش JQuery ، متد text را شرح میدهیم.

متد text دو کار انجام می دهد :

می تواند متن موجود در یک عنصر HTML مثل یک تگ را خوانده و به صفحه برگرداند .
می تواند متن یک عنصر HTML مثل تگ پاراگراف را به متن دلخوه و تعیین شده تغییر دهد .

هنگامی که این متد برای بازگرداندن متن استفاده می شود متن تمام عناصری که با مشصات داده شده مطابقت دارند را برمی گرداند ( این متد علامت های زبان نوشتن تگ های HTML را در نظر نمی گیرد ) .
هنگامی که این متد برای تغییر متن عنصر به کار می رود متن تمام عناصری که با مشخصات داده شده مطابقت دارند را تغییر می دهد .

شکل کلی استفاده از متد text به شرح زیر است :

خواندن و بازگرداندن متن یک عنصر HTML

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر تعیین کننده id عنصری است که می خواهیم متن درون آن را خوانده و به خروجی بر گردانیم .

مثال زیر کاربرد متد text را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد toggleclass در jQuery

در این بخش از آموزش JQuery ، متد toggleClass را شرح میدهیم.

با متد toggleClass می توان اگر به تگی کلاس خاصی تخصیص داده نشده ،آنرا به تگ اختصاص داد ،در غیر این صورت اگر آن کلاس به آن تگ قبلا تخصیص داده شده ، کلاس از تگ حذف می شود و این تشخیص به طور خودکار توسط متد toggleClass صورت میگیرد.

ساختار این دستور به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربردمتد toggleClass را نشان میدهد:

در مثال زیر در صورتیکه کلاس blue قبلا به تگ های h1 , h2 , p اعمال نشده است ، اعمال می شود و در صورتیکه قبلا کلاس blue به محتوای تگ های h1 , h2 , p اعمال شده است ، این کلاس از محتوای این تگ ها حذف خواهد شد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد unwrap در jQuery

در این بخش از آموزش JQuery ، متد unwrap را شرح میدهیم.

متد unwrap عنصر والد از عنصر انتخاب شده را پاک میکند.

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد unwrap را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد val در jQuery

در این بخش از آموزش JQuery ، متد val را شرح میدهیم.

توسط متد val میتوانیم به محتوا (value ) عناصر موجود در فرم ها دسترسی و مقدارش را تغییر دهیم .

ساختار این دستور به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد  متد val را نشان میدهد:

به مثال های زیر توجه نمایید :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مقدار value عنصر input با آیدی name را بر میگرداند .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

هنگامی که پنجره dropdown باز است مقدار انتخابی را برمیگرداند .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مقدار انتخاب شده عنصر select با کلاس foo را روی مقدار two تنظیم میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مقدار چک باکس انتخاب شده را بر میگرداند .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مقدار انتخاب شده از دکمه های رادیویی در گروه با نام bar را بر میگرداند.

متد wrap در jQuery

در این بخش از آموزش JQuery ، متد wrap را شرح میدهیم.

متد wrap ، برای کار با تگ‌های اطراف یک بخش استفاده میشود.

شکل کلی استفاده از متد wrap به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد wrap را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد wrapAll در jQuery

در این بخش از آموزش JQuery ، متد wrapAll را شرح میدهیم.

شکل کلی استفاده از متد wrapAll به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد wrapAll را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد wrapInner در jQuery

در این بخش از آموزش JQuery ، متد wrapInner را شرح میدهیم.

شکل کلی استفاده از متد wrapInner به شرح زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد wrapInner را نشان میدهد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

Ajax در Jquery چگونه است ؟

Ajax مختصر شده عبارت Asynchronous JavaScript and XML میباشد . این تکنولوژی اولین بار برای استفاده از داده های Xml در جاوا اسکریپت ایجاد شد.

Ajax یک زبان برنامه نویسی نیست . بلکه تکنولوژی برای ارتباط با سرور از طریق جاوااسکریپت و ایجاد صفحات داینامیک میباشد .
ایجاکس در jquery

در jquery توابعی برای کار با ایجاکس وجود دارد که کار را با این تکنولوژی بسیار آسان نموده است . توسط این توابع میتوان تبادل اطلاعات را با سرور بصورت TXT , HTML , XML و JASON و با استفاده از دو متد GET و POST انجام داد .

و شما میتوانید اطلاعات نتیجه که از سرور بدست می آید را در عنصر انتخابی (selector) به نمایش در آورید .
Ajax در Jquery چگونه است ؟

Ajax مختصر شده عبارت Asynchronous JavaScript and XML میباشد . این تکنولوژی اولین بار برای استفاده از داده های Xml در جاوا اسکریپت ایجاد شد.

Ajax یک زبان برنامه نویسی نیست . بلکه تکنولوژی برای ارتباط با سرور از طریق جاوااسکریپت و ایجاد صفحات داینامیک میباشد .
ایجاکس در jquery

در jquery توابعی برای کار با ایجاکس وجود دارد که کار را با این تکنولوژی بسیار آسان نموده است . توسط این توابع میتوان تبادل اطلاعات را با سرور بصورت TXT , HTML , XML و JASON و با استفاده از دو متد GET و POST انجام داد .

و شما میتوانید اطلاعات نتیجه که از سرور بدست می آید را در عنصر انتخابی (selector) به نمایش در آورید .
متد ( ) Ajax در jQuery

در این بخش از آموزش JQuery ، متد ajax را شرح میدهیم.

از متد ajax ، برای ارسال یک درخواست Ajax به سرور استفاده می شود .
تمامی متدهای Ajax در jQuery از متد ajax برای ارسال درخواست خود استفاده می کنند . اما در زمانی که هیچ کدام از آنها را نتوان به کار برد ، باید از متد ( ) Ajax استفاده کرد .
شکل کلی استفاده از این متد بصورت زیر است :

$.ajax( { name:value , name:value , … } ) ;

مقادیر پیش فرض را می توانید به صورت جفت های نام-مقدار تعیین نمایید .

مثال زیر کاربرد متد ajax را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

در زیر ، انواع مقادیر ممکن برای جفت های نام-مقدار را معرفی کرده ایم :
async : این پارامتر یک مقدار Boolean را تعیین می کند که آیا درخواست به صورت تبادل اطلاعاتی به سرور ارسال شود یا خیر . مقدار پیش فرض true است .
( beforeSend ( xhr : به وسیله این پارامتر می توان یک تابع را تعیین کرد تا قبل از ارسال درخواست به سرور اجرا شود .
cashe : این پارامتر یک مقدار Boolean را تعیین می کند ، که آیا صفحات دریافتی از سرور باید در حافظه Cashe ذخیره شوند یا خیر . مقدار پیش فرض true است .
(complete (xhr,status : این پارامتر یک تابع را تعیین می کند تا در هنگام پایان یافتن درخواست اجرا شود . مقدار پیش فرض true است .
data : تعیین کننده اطلاعاتی است که می خواهید به سرور ارسال نمایید .
error : این پارامتر تعیین کننده یک تابع است تا در صورتی که درخواست ناموفق بود ، اجرا شود .
password : این پارامتر یک رمز عبور را برای استفاده در درخواست HTTP تعیین می کند . مقدار پیش فرض true است .
proccessData : این پارامتر یک مقدار Boolean را تعیین می کند که آیا اطلاعاتی که قرار است به سرور ارسال شوند ، باید به صورت QueryString باشند یا خیر . مقدار پیش فرض true است .
success : این پارامتر یک تابع را تعیین می کند تا در صورت اجرای موفق درخواست اجرا شود .
timeout : مدت زمانی است که برای اجرای درخواست به میلی ثانیه تعیین می شود .
type : این پارامتر نوع درخواست را تعیین می کند ( GET یا POST ) .
url : این پارامتر آدرس صفحه مقصد که باید درخواست به آن ارسال شود را تعیین می کند . مقدار پیش فرض صفحه جاری است .
username : این پارامتر یک نام کاربری را برای استفاده در درخواست HTTP تعیین می کند .

متد ( ) ajaxComplete در jQuery

در این بخش از آموزش JQuery ، متد ajaxComplete را شرح میدهیم.

متد ajaxComplete ، یک تابع را تعیین می کند تا پس از اتمام درخواست Ajax اجرا شود .
برخلاف متد ( ) ajaxSuccess ، این متد تابع تعیین شده برای آن را اجرا می کند ، حتی اگر در خواست Ajax با موفقیت اجرا نشود .
شکل کلی استفاده از متد ajaxComplete بصورت زیر است :

$( selector ).ajaxComplete( function( event , xhr , options ) ) ;

function : نام تابعی است که می خواهیم پس از اتمام درخواست های Ajax اجرا شود .
استفاده از این پارامتر اجباری است .

event : در بر گیرنده شی event است .
xhr : در بر گیرنده شی XmlHttpRequest است .
options : در برگیرنده تنظیمات ( optoions ) در درخواست Ajax است .

مثال زیر کاربرد متد ajaxComplete را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) ajaxError در jQuery

در این بخش از آموزش JQuery ، متد ajaxError را شرح میدهیم.

متد ajaxError ، یک تابع را تعیین می کند تا در صورتی که در خواست Ajax با errro مواجه شد ، اجرا شود .
برای مثال به وسیله این متد می توان پیام هشداری را به کاربر مبنی بر انجام ناموفقیت آمیز درخواست Ajax ، به کاربر اعلام کرد .
شکل کلی استفاده از این متد بصورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

function : نام تابعی است که می خواهیم در صورت بروز error در اجرای درخواست های Ajax ، اجرا شود .
استفاده از این پارامتر اجباری است .

event : در بر گیرنده شی event است .
xhr : در بر گیرنده شی XmlHttpRequest است .
options : در برگیرنده تنظیمات ( optoions ) در درخواست Ajax است .

مثال زیر کاربرد متد ajaxError را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) ajaxSend در jQuery

در این بخش از آموزش JQuery ، متد ajaxSend را شرح میدهیم.

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

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

event : در بر گیرنده شی event است .
xhr : در بر گیرنده شی XmlHttpRequest است .
options : در برگیرنده تنظیمات ( optoions ) در درخواست Ajax است .

مثال زیر کاربرد متد ajaxSend را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

متد ( ) ajaxSetup در jQuery

در این بخش از آموزش JQuery ، متد ajaxSetup را شرح میدهیم.

به وسیله متد ajaxSetup ، می توان مقادیر پیش فرضی را برای استفاده در درخواست Ajax ، تعیین نمود .
شکل کلی استفاده از این متد بصورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مقادیر پیش فرض را می توانید به صورت جفت های نام-مقدار تعیین نمایید .

مثال زیر کاربرد متد ajaxSetup را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

در زیر ، انواع مقادیر ممکن برای جفت های نام-مقدار را معرفی کرده ایم :

async: این پارامتر یک مقدار Boolean را تعیین می کند که آیا درخواست به صورت تبادل اطلاعاتی به سرور ارسال شود یا خیر . مقدار پیش فرض true است .
(beforeSend ( xhr: به وسیله این پارامتر می توان یک تابع را تعیین کرد تا قبل از ارسال درخواست به سرور اجرا شود .
cashe : این پارامتر یک مقدار Boolean را تعیین می کند ، که آیا صفحات دریافتی از سرور باید در حافظه Cashe ذخیره شوند یا خیر . مقدار پیش فرض true است .
(complete ( xhr , status: این پارامتر یک تابع را تعیین می کند تا در هنگام پایان یافتن درخواست اجرا شود . مقدار پیش فرض true است .
data : تعیین کننده اطلاعاتی است که می خواهید به سرور ارسال نمایید .
error : این پارامتر تعیین کننده یک تابع است تا در صورتی که درخواست ناموفق بود ، اجرا شود .
password : این پارامتر یک رمز عبور را برای استفاده در درخواست HTTP تعیین می کند . مقدار پیش فرض true است .
proccessData : این پارامتر یک مقدار Boolean را تعیین می کند که آیا اطلاعاتی که قرار است به سرور ارسال شوند ، باید به صورت QueryString باشند یا خیر . مقدار پیش فرض true است .
success: این پارامتر یک تابع را تعیین می کند تا در صورت اجرای موفق درخواست اجرا شود .
timeout: مدت زمانی است که برای اجرای درخواست به میلی ثانیه تعیین می شود .
type: این پارامتر نوع درخواست را تعیین می کند ( GET یا POST ) .
url: این پارامتر آدرس صفحه مقصد که باید درخواست به آن ارسال شود را تعیین می کند . مقدار پیش فرض صفحه جاری است .
username: این پارامتر یک نام کاربری را برای استفاده در درخواست HTTP تعیین می کند .

متد ( ) ajaxStart در jQuery

در این بخش از آموزش JQuery ، متد ajaxStart را شرح میدهیم.

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

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

مثال زیر کاربرد متد ajaxStart را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) ajaxStop در jQuery

در این بخش از آموزش JQuery ، متد ajaxStop را شرح میدهیم.

به وسیله متد ajaxStop می توان یک تابع را تعیین کرد تا در زمان پایان یافتن ارسال و انجام تمام درخواست های Ajax به سرور ، اجرا شود .
در واقع از متد ajaxStop می توان برای تعیین یک دستور یا کد ، برای اجرا پس از پایان یافتن انجام درخواست های Ajax در سرور ، استفاده نمود .
هنگامی که یک درخواست ajax تمام می شود ، jQuery چک می کند که آیا درخواست دیگری وجود دارد یا خیر . اگر درخواست ajax دیگری وجود نداشته باشد ، آنگاه ajax تابع این متد را اجرا می کند .
شکل کلی استفاده از این متد بصورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

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

مثال زیر کاربرد متد ajaxStop را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) ajaxSuccess در jQuery

در این بخش از آموزش JQuery ، متد ajaxSuccess را شرح میدهیم.

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

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

event : در بر گیرنده شی event است .
xhr : در بر گیرنده شی XmlHttpRequest است .
options : در برگیرنده تنظیمات ( optoions ) در درخواست Ajax است .

مثال زیر کاربرد متد ajaxSuccess را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد $.get در jQuery

در این بخش از آموزش JQuery ، متد get را شرح میدهیم.

متد get ، با استفاده از یک درخواست HTTP GET ، اطلاعات مورد نظر را از سرور می خواند .
حالت های مختلفی برای استفاده از این متد وجود دارد که به تشریح هر یک می پردازیم :

خواندن اطلاعات از یک فایل ” test.php ” ، بدون در نظر گرفتن خروجی آن :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

خواندن اطلاعات از یک فایل ” test.php ” و ارسال همزمان اطلاعات اضافه به همراه درخواست ، بدون در نظر گرفتن خروجی آن :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

خواندن اطلاعات از فایل ” test.php ” و ارسال همزمان آرایه ای از داده ها به همراه درخواست ، بدون در نظر گرفتن خروجی آن:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

خواندن اطلاعات از فایل ” test.php ” و نمایش اطلاعات در خروجی :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

شکل کلی استفاده از متد get به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

url : تعیین کننده آدرس فایلی است که می خواهید متد آن را از سرور درخواست کرده و بخواند .استفاده از این پارامتر اجباری است .
data :این پارامتر تعیین کننده اطلاعاتی است که می خوهیم همراه درخواست خود به سرور ارسال نماییم.استفاده از این پارامتر اختیاری است .
function : این پارامتر تعیین کننده تابعی است که می خواهید هنگام ارسال درخواست Ajax به سرور ، اجرا شود . استفاده از این پارامتر اختیاری است . این تابع خود می تواند چندین پارامتر نیز داشته باشد :

data : در بر گیرنده اطلاعات خروجی از درخواست است .
status : .این پارامتر تعیین کننده وضعیت درخواست است که می تواند چندین حالت داشته باشد :

success : موفق .
notmodified : هنوز اعمال یا بررسی نشده.
error : اشکال در ارسال یا پردازش درخواست .
timeout : مدت زمان کافی برای اجرای درخواست تمام شده است .
parseerror : خواندن و اجرای درخواست با مشکل مواجه شده است .
xhr : در بر گیرنده شی XmlHttpRequest است .

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

xml : یک فایل XML.
html : فایل HTML .
text : یک متن ساده String .
Script : درخواست را به صورت یک اسکریپت اجرا کرده و نتیجه را به صورت متن ساده بر می گرداند .

مثال زیر کاربرد متد get را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) ajaxScript در jQuery

در این بخش از آموزش JQuery ، متد getScript را شرح میدهیم.

به وسیله متد getScript ، می توان یک اسکریپت را با استفاده از روش HTTP GET ، از سرور خوانده و اجرا نمود .
سپس از نتیجه حاصل در صفحه استفاده کرد .
شکل کلی استفاده از این متد بصورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

url : تعیین کننده آدرس فایل اسکریپتی است که می خواهید متد آن را از سرور درخواست کرده و بخواند .

استفاده از این پارامتر اجباری است .

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

استفاده از این پارامتر اختیاری است .
این تابع خود می تواند دارای ۲ پارامتر نیز باشد :

response : شامل جواب برگشتی از سرور است .
status : این پارامتر تعیین کننده وضعیت درخواست است که می تواند چندین حالت داشته باشد :

success : موفق .
notmodified : هنوز اعمال یا بررسی نشده.
error : اشکال در ارسال یا پردازش درخواست .
timeout : مدت زمان کافی برای اجرای درخواست تمام شده است .
parseerror : خواندن و اجرای درخواست با مشکل مواجه شده است .

مثال زیر کاربرد متد getScript را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) load در jQuery

در این بخش از آموزش JQuery ، متد load را شرح میدهیم.

متد load ، اطلاعات مورد نظر را از سرور ( از یک فایل یا اسکریپت ) خوانده و در عنصر مورد نظر ، بر روی صفحه قرار می دهد ( اطلاعات ان را به روز رسانی می کند ) .
برای مثال فرض کنید که متنی را در یک فایل بر روی سرور ذخیره کرده اید ، می توانید با قرار دادن یک دکمه فرمان و تعیین تابع ( ) load در کد آن ، کاری کنید تا در صورت کلیک کاربر بر روی دکمه فرمان ، متن ذخیره شده در فایل ، مثلا در یک تگ div بر روی صفحه قرار داده شود .
شکل کلی استفاده از متد load بصورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

url : تعیین کننده آدرس فایلی است که می خواهیم اطلاعات را از روی آن بخوانیم .

استفاده از این پارامتر اجباری است .

data : این پارامتر تعیین کننده اطلاعاتی است که می خوهیم همراه درخواست خود به سرور ارسال نماییم.استفاده از این پارامتر اختیاری است .
function : این پارامتر تعیین کننده تابعی است که می خواهید هنگامی که متد ( ) load به پایان رسید ، اجرا شود . این تابع خود می تواند چندین پارامتر نیز داشته باشد :استفاده از این پارامتر اختیاری است .

response : در بر گیرنده اطلاعات خروجی از درخواست است .
status : .این پارامتر تعیین کننده وضعیت درخواست است که می تواند چندین حالت داشته باشد :

success : موفق .
notmodified : هنوز اعمال یا بررسی نشده.
error : اشکال در ارسال یا پردازش درخواست .
timeout : مدت زمان کافی برای اجرای درخواست تمام شده است .
parseerror : خواندن و اجرای درخواست با مشکل مواجه شده است .

xhr : در بر گیرنده شی XmlHttpRequest است

مثال زیر کاربرد متد load را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) post در jQuery

در این بخش از آموزش JQuery ، متد post را شرح میدهیم.

وسیله متد post ، می توان فایلی را از سرور با استفاده از یک درخواست HTTP POST خواند .
سپس از نتیجه خروجی بر روی صفحه استفاده نمود .
شکل کلی استفاده از این متد بصورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

URL : تعیین کننده آدرس فایلی است که می خواهیم اطلاعات را از سرور درخواست کرده و بخوانیم . استفاده از این پارامتر اجباری است .
data : این پارامتر تعیین کننده اطلاعاتی است که می خوهیم همراه درخواست خود به سرور ارسال نماییم.استفاده از این پارامتر اختیاری است .
function : این پارامتر تعیین کننده تابعی است که می خواهید هنگامی که متد ( ) post به پایان رسید ، اجرا شود . این تابع خود می تواند چندین پارامتر نیز داشته باشد :
استفاده از این پارامتر اختیاری است .

data : در بر گیرنده اطلاعات خروجی از درخواست است .
status : .این پارامتر تعیین کننده وضعیت درخواست است که می تواند چندین حالت داشته باشد :

success : موفق .
notmodified : هنوز اعمال یا بررسی نشده.
error : اشکال در ارسال یا پردازش درخواست .
timeout : مدت زمان کافی برای اجرای درخواست تمام شده است .
parseerror : خواندن و اجرای درخواست با مشکل مواجه شده است .

xhr : در بر گیرنده شی XmlHttpRequest است .

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

xml : یک فایل XML.
html : فایل HTML .
text : یک متن ساده String .
Script : درخواست را به صورت یک اسکریپت اجرا کرده و نتیجه را به صورت متن ساده بر می گرداند .

مثال زیر کاربرد متد post را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد ( ) post در jQuery

در این بخش از آموزش JQuery ، متد post را شرح میدهیم.

وسیله متد post ، می توان فایلی را از سرور با استفاده از یک درخواست HTTP POST خواند .
سپس از نتیجه خروجی بر روی صفحه استفاده نمود .
شکل کلی استفاده از این متد بصورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

URL : تعیین کننده آدرس فایلی است که می خواهیم اطلاعات را از سرور درخواست کرده و بخوانیم . استفاده از این پارامتر اجباری است .
data : این پارامتر تعیین کننده اطلاعاتی است که می خوهیم همراه درخواست خود به سرور ارسال نماییم.استفاده از این پارامتر اختیاری است .
function : این پارامتر تعیین کننده تابعی است که می خواهید هنگامی که متد ( ) post به پایان رسید ، اجرا شود . این تابع خود می تواند چندین پارامتر نیز داشته باشد :
استفاده از این پارامتر اختیاری است .

data : در بر گیرنده اطلاعات خروجی از درخواست است .
status : .این پارامتر تعیین کننده وضعیت درخواست است که می تواند چندین حالت داشته باشد :

success : موفق .
notmodified : هنوز اعمال یا بررسی نشده.
error : اشکال در ارسال یا پردازش درخواست .
timeout : مدت زمان کافی برای اجرای درخواست تمام شده است .
parseerror : خواندن و اجرای درخواست با مشکل مواجه شده است .

xhr : در بر گیرنده شی XmlHttpRequest است .

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

xml : یک فایل XML.
html : فایل HTML .
text : یک متن ساده String .
Script : درخواست را به صورت یک اسکریپت اجرا کرده و نتیجه را به صورت متن ساده بر می گرداند .

مثال زیر کاربرد متد post را نشان میدهد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد each در jQuery

متد each ، یک تابع را تعیین کرده و به ازای هر عنصری که با مشخصات داده شده در پارامتر selector$ مطابقت داشته باشد ، یکبار اجرا می کند .
شکل کلی استفاده از متد each به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر تعیین کننده کلاس یا تگ عنصرهایی است که می خواهیم تابع مورد نظرمان به ازای هر نمونه از آن ، یکبار اجرا شود .
index : تعیین کننده اندیس عنصر مورد نظر است .
element : نشانگر عنصر جاری است . ( “this” هم می تواند استفاده شود ).

مثال زیر کاربرد متد each را نشان میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد index در jQuery

متد index ، اندیس عنصر مورد نظر رات نسبت به سایر عناصر مجاور آن خوانده و بر می گرداند .
عنصر می تواند توسط انتخاب کننده های تعیین شده و یا براساس اشیای DOM . اگر عنصر مورد نظر پیدا نشود ، مقدار برگشتی ۱- خواهد بود .

پیدا کردن اندیس اولین عنصر مطابق با جستجو نسبت به سایر عناصر مشابه :

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : تعیین کننده id عنصری است که می خواهیم اندیس آن را پیدا کنیم .
استفاده از این پارامتر اجباری است .

مثال زیر کاربرد متد index را نشان میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد $.noConflict (جلوگیری از تداخل کدها در jQuery)

برخی از فریم ورک های جاوا اسکریپت نیز از علامت $ در کدهای خود استفاده می کنند ، مثل فریم ورکهای BackBone یا GoogleWebToolkit . حال اگر jQuery و یک فریم ورک دیگر در یک صفحه بصورت همزمان از علامت $ استفاده نمایند ، ممکن است در اجرای اسکریپت دچار مشکل شوید و کد شما درست کار نکند .

برای این منظور در jQuery از متد $.noConflict استفاده می شود . با استفاده از این متد دیگر نیاز به بکار بردن علامت $ در کدهای jQuery نبوده و می توانید آن را حذف نمایید . سپس از این علامت در کدهای سایر فریم ورک ها به راحتی و بدون اختلال jQuery استفاده نمایید .
شکل کلی استفاده متد $.noConflict به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد $.noConflict را نشان میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد $.param در jQuery

متد $.param ، می تواند اعضای یک آرایه یا مجموعه خواص یک شی را به صورت پشت سر هم و جفت نام-مقدار ، خوانده و به صفحه بر گرداند .
برای مثال فرض کنید که یک شی ۳ خاصیت داشته باشد . خروجی این متد در هنگام استفاده به صورت زیر می باشد :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

از این رشته خواص و یا اعضای آرایه می توان برای ارسال اطلاعات در روش get استفاده کرد . این اطلاعات در انتهای آدرس URL صفحه اضافه شده و به صفحه مقصد ارسال می شوند .
شکل کلی استفاده از متد $.param به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

obj : تعیین کننده نام شی یا آرایه ای است که می خواهیم مجموعه اعضا و یا خواص آن را به صورت پشت سر هم نمایش دهیم .
استفاده از این پارامتر اجباری است .

مثال زیر کاربرد متد $.param را نشان میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد removeData در jQuery

متد removeData ، می تواند اطلاعات اضافه شده به یک عنصر را که قبلا توسط متد ( ) data اضافه شده است ، را حذف نماید .
اگر اطلاعاتی قبلا توسط متد ( ) data ، به عنصر اضافه نشده باشد ، این متد کار نمی کند .

شکل کلی استفاده از متد removeData در این حالت به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

selector : این پارامتر تعیین کننده id عنصری است که می خواهیم اطلاعات آن را حذف نماییم .
name : این پارامتر تعیین کننده نام اطلاعاتی در عنصر مورد نظر است که می خواهید آن را حذف نمایید .
استفاده از این پارامتر اختیاری است .
اگر این پارامتر تعیین نشود ، کلیه اطلاعات موجود در عنصر حذف خواهد شد .

مثال زیر کاربرد  متد removeData را نشان میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد size در jQuery

متد size ، تعداد عناصر DOM ای که با مشخصات تعیین شده برای آن در پارامتر selector$ ، مطابقت دارند را بر می گرداند .
به عبارت دیگر ،متد size برای شمارش تعداد یک عنصر یا تگ مورد نظر ، بر روی صفحه استفاده می شود .
شکل کلی استفاده از متد size به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد size را نشان میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

متد toArray در jQuery

متد toArray ، کلیه عناصری که با مشخصات داده شده در پارامتر selector$ آن مطابقت دارند ، را در به صورت یک آرایه در خروجی بر می گرداند .
شکل کلی استفاده از متد toArray به صورت زیر است :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال زیر کاربرد متد toArray را نشان میدهد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

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

Selector ها قسمت مهم کار با 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.ctboard.com”] هر تگ a که ویزگی Src ان شامل عبارت www.ctboard.com است در نظر می گیرد
: 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$ آن مطابقت دارند ، را در به صورت یک آرایه در خروجی بر می گرداند .

 

 

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری
    • 1 Posts
    • 3 Views
    • 1 Posts
    • 3 Views
    • 1 Posts
    • 4 Views
    • 1 Posts
    • 4 Views
    • 1 Posts
    • 9 Views
    • 1 Posts
    • 7 Views
    • 1 Posts
    • 9 Views

  • سفارش پروژه برنامه نویسی

×
×
  • اضافه کردن...