جی کوئری به زبان ساده (مقدمه-آشنایی با جی کوئری)

- visibility ۳۲ mode_comment

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

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

 مقدماتی

  1. آشنایی با جی کوئری
  2. نحوه استفاده از کتابخانه جی کوئری
  3. بررسی syntax های جی کوئری
  4. بررسی selector ها  و event ها در جی کوئری
  5. استفاده از کد های جی کوئری بصورت یه فایل خارجی(external file)
  6. افکت ها در جی کوئری

پیشرفته

  1. بررسی متد انیمیشن در جی کوئری
  2. بررسی توابع callback و متد chaning در جی کوئری
  3. html در جی کوئری
  4. نفوظ در دستورات css توسط جی کوئری
  5. بررسی متد no conflict
  6. ایجاد و بررسی event handler ها
  7. کار با پلاگین های light box و easying و پلاگین های کاربردی دیگر و نحوه استفاده از آنها
  8. ajax در جی کوئری
  9. بررسی جی کوئری UI (مخفف user interface)
  10. و مباحث کاربردی دیگر...

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

مقدمه زبان جاوا اسکریپت یک زبان برنامه نویسی منطقی است که در طراحی صفحات وب کاربرد فراوان دارد. این زبان در برنامه نویسی سمت کلاینت مورد استفاده قرار می گیرد. مدیریت خصوصیات اشیاء درون صفحه وب و کنترل رویدادهای آنها از جمله قابلیت های این زبان است. اما جیکوئری چیست؟ به زبان ساده جیکوئری یک کتابخانه جاوا اسکریپت است که روال های جاری برنامه نویسی تحت وب را ساده می کند. این ساده سازی از دسترسی به عناصر و اشیاء وب سایت تا کنترل رویدادهای آن ها می باشد و همچنین یک سری امکانات از پیش آماده شده را به شما اراده می‌دهد. درسالهای متمادی، جاوااسکریپت هم یادگیریش سخت بود و منبع آموزشی خوب براش کم پیدا می شد، هم کاربرد قابل قبولی براش نبود و هم باعث مشکلات امنیتی میشد. اما با گذشت زمان، رونق گرفتن AJAX، بیشتر شدن ایده های سمت کلاینت افزایش امنیت مرورگرها که به دلیل توسعه مرورگرها بود، جاوااسکریپت خواهان بیشتری پیدا کرد.اما وقتیjQuery متولد شد، اوضاع کلی فرق کرد. JQuery یک فریمورک جاوا اسکریپت می باشد. اما اصلاً یک فریمورک چیست؟ و فقط مورد نیاز یک برنامه‌نویس است یا یک طراح وب هم می‌تواند از آن بهره ببرد؟ فریم‌ورک در اصل محیطی است که برای یک زبان برنامه نویسی خاص ایجاد می‌شود و شما از آن محیط استفاده می کنید تا کار برایتان آسان‌تر شود. کافیست مقداری در سایت های هر کدام از فرمورک ها نگاهی به کد نویسی و syntex هر فریمورک بیندازید. اینجاست که در همین مرحله ابتدایی شما jquery رو انتخاب میکنید. فقط به خاطر اینکه به راحتی با کمترین دانش برنامه نویسی میتوانید نحوه کد نویسی jqueryرو درک کنید. جی کوئری خیلی زود محبوب شد رشد و توسعه عالی و سریعی داشت به نحوی که خیلی از برنامه ها و اسکریپت های تحت وب که برای خود اسم و نامی دارند. همانند wordpress و سایت های بزرگی چون یاهو و گوگل , قسمت هایی از کارهاشون از این فریمورک استفاده کرده اند.

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

جی‌کوئری یا jQuery یک کتابخانه جاوااسکریپت سبک وزن چند مرورگری می‌باشد که برای ساده کردن نوشتن اسکریپ‌های سمت-مشتری دراچ تی ام ال (HTML) طراحی شده است.جی کوئری امروزه محبوبترین کتابخانه جاوااسکریپت در حال استفاده است. جی کوئری نرم‌افزار بازمتن و رایگان است که تحت دو پروانه GPL و MIT منتشر می‌شود.دستور زبان جی کوئری به گونه‌ای طراحی شده است که عمل هدایت یه پرونده را آسان تر کرده باشد، بدین صورت که می‌توان حرکات انیمیشین ایجاد کرد و رویدادهایی در صفحه استفاده کند و به وسیله آن می‌توان نرم‌افزارهای مبتنی بر ای‌جکس را ایجاد و توسعه داد. جی کوئری همچنین این اختیار را به برنامه نویسان می‌دهد که پلاگین هایی برای کتابخانه جاوااسکریپت ایجاد کنند. جدا از این‌ها جی کوئری به توسعه دهندگان این اختیار را می‌دهد که تکه برنامه‌های سطح پایین مبادله‌ای (ارتباط مرورگر با کاربر) و یا انیمیشنی و حتی افکت‌های پیشرفته و سطح بالا و ایجاد اشیا فرضی را ایجاد کنند. به کارگیری همه این اجزای جی کوئری کمک می‌کند صفحات وب قدرتمند و داینامیک (پویا) داشته باشیم. کتابخانه جی‌کوئری معمولاً تنها یک فایل حاوااسکریپت است که شامل همه DOMها و Eventها و افکت‌های و تابع‌های مربوط به ای‌جکس می‌شود. فایل جی‌کوئری را می‌توان به طرق مختلفی به صفحه وب متصل کرد که در ادامه این روش‌ها را معرفی می‌کنیم.

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

ویژگی‌های jQuery جی کوئری مکانیسم سریع و موثری برای جستجو ، یافتن و انتخاب بخشهای مورد نظر از یک صفحه را بدون نیاز به ابزار جاوا اسکریپت، در اختیار ما قرار میدهد. افزودن انیمیشن (Fade) به یک صفحه؛ کسب فیدبک از (یا به) کاربران، امری بسیار مهم است و جی کوئری این ویژگی را بسادگی با استفاده از امکاناتی همچون Fade و غیره بما میدهد. امکان تغییر ظاهر یک صفحه؛ البته CSS ابزار قدرتمندی در تغییر صفحات به ما میدهد اما قادر به انجام اینکار در مرورگرهای مختلف که استانداردهای متفاوتی دارند، نیست. اما جی کوئری براحتی میتواند هر نوع مرورگری را ساپورت کند و حتی قادر است که مختصات ویژه صفحات وب را، حتی بعد از دستکاری و تغییر ساختاری و ظاهر، دوباره تغییر دهد. کسب اطلاعات از یک سرور بدون نیاز به ریفرش کردن آن صفحه (که اصطلاحا به آن AJAX می‌گویند) جی کوئری اینکار را بدون نیاز به دانستن مختصات ویژه هر سرور و صرفا با مراجعه مستقیم به نتایج آن صفحه (محتویات سرور) انجام میدهد.

ویژگی های کلیدی جی کوئری:

  • قابلیت اجرا بر روی کلیه مرورگرهای رایج (cross brossing)- (مانند اینترنت اکسپلورر، فایرفاکس، کروم و...)
  • قابلیت دستکاری و تغییر خصوصیات  CSS
  • متحرک سازی و قرار دادن افکت روی عناصر وب سایت
  • کار با ایجکس
  • دسترسی به عناصر موجود در پرونده و تغییر و دستکاری آنها
  • کنترل اسان و قدرتمند تر رویدادها(Events)
  • ایجاد افکت و حرکات انیمیشین
  • توسعه دادن پلاگین ها
  • برنامه‌های کوچک سودمند

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

برای اینکه جی کوئری رو بهتر درک کنید در لینک زیر یک مثال  از جی کوئری قرار داده ام  روی اون کلیک و نتیجه رو مشاهده کنید  و منتظر جلسه اول این دوره آموزشی باشید فعلا...

نمونه کد

comment دیدگاه کاربران
f_talebi

آقای صالحی و آقای آوند عزیز ، از طریق ایمیلم متوجه شدم که برای نظرم پاسخ دادین، ولی من نمیتونم پاسخ ها روببینم!!!با 3مرورگر کروم،موزیلا و ie هم امتحان کردم نشد. به این صورت برام نمایش داده میشن:

http://upload7.ir/images/47032784332382262460.png

نمیدونم چرا

وحید صالحی

دوست عزیز در صفحه مرود نظر یک بار کلید های ctrl+F5 همزمان فشار دهید …

با تشکر

sana_esi

سلام .یه سوال دارم با jquery میتونیم دستوراتAjax را هم بنویسیم.من گیج شدم یسری کد ajax را دیدم که با jqury بود در صورتی که دستورات ajaxیجوره دیگه بودن؟؟؟؟؟؟؟؟؟؟؟؟

وحید صالحی

بله میشه ولی syntax ش فرق میکنه…

nasrin

salam ba puzesh man sabtenamam kardam vali chera linke dl filma ro nemibinam?

کیوان علی محمدی

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

nasrin2549

ba durud
linke dl cd haye amuzeshi nist ke man filmasho dl konam?

سلام

کپی با ذکر منبع آزاده؟ 🙄

لقمان آوند

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

علیرضا

خدا قوت خیلی سایت خوبی دارین

خیلی ممنون از سایتتون

Mk Designer

سلام
واقعا تشکر میکنم از سازنده این آموزش ها

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2