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



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)
  • ایجاد افکت و حرکات انیمیشین
  • توسعه دادن پلاگین ها
  • برنامه‌های کوچک سودمند

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

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

نمونه کد

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
comment دیدگاه کاربران
Alireza crs

ایول جی کوئری… 😀 😀 😀
یه سوال داشتم.چطور میشه توی 7لرن مطلب گذاشت؟اصلا میشه گذاشت؟

لقمان آوند

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

4web

سلام خسته نباشید
اگه میشه به صورت ویدیویی بزارین اینطوری یاد گیری راحت تر هست ممنون از زحماتتون

وحید صالحی

سلام
نگران نباشید به صورت ویدئویی هستش…

shatel

سلام
جی کوئری کتابخانه جاوا اسکریپت هست
یعنی چی؟؟؟
سطح پایین تر بگید؟؟؟
😥

وحید صالحی

سلام
مثلا زبان فارسی را در نظر بگیرید که بسیار گسترده است. حال ما درنظر داریم یه کتاب کوچک بنویسم و برای 2000 لغت پرکاربرد زبان فارسی علامت های اختصاری در نظر بگیریم، به عنوان مثال برای لغت «در» یک معادل در نظر می‌گیریم:
در = ^-^
با این علامت های اختصاری ما می توانیم کلمات و جملات خاصی را به صورت خیلی مختصیر و مفید بنویسیم. حال اگر یک متن را با این علامت های اختصاری بنویسیم و آن کتاب مرجع را نیز در اختیار شخص ثالثی قرار دهیم، آن شخص می تواند علامت ها را دیده و با مراجعه به کتاب مرجع، متن اصلی را مشاهده کنید.
کار JQuery هم در واقع به همین صورت است. جی کوئری یک فایل javascript چند هزار خطی هست که در آن یک سری کارهایی که طراحان وب با جاوا اسکریپت انجام میدادند را، خلاصه کرده است. به عنوان مثال برای مخفی کردن یک DIV کافی است که به اندازه یک نیم خط کد بنویسم (در حالی که قبلا باید ده‌ها خط کد جاوا اسکریپت برای این کار نوشته می‌شد)
خود فایل JQuery در واقع حکم همان کتاب مرجع را دارد. به همین خاطر است که اگر شما فایل اصلی جی کوئری را به صفحه لینک نکنید و دستورات خودتان را بر اساس قوانین جی کوئری بنویسید، اتفاقی نمی‌افتد و در واقع دستوران برای شما کار نخواهند کرد. (چون در این حالت دستورات هست ولی کتاب مرجع نیست که مرورگر وب بفهمد هر دستور چه معنایی می‌دهد)
البته باید در نظر داشت که خود فریم ورک‌ها هم محدودیت دارند، چون کل یک زبان برنامه نویسی را پوشش نمی‌دهند و یا گاها سنگین هستند (چون مثلا ما به همه توابع داخل یه فریم‌ورک احتیاجی نداریم (در مورد مثال کتاب مرجع هم ممکن است کسی به همه 2000 لغت احتیاجی نداشته باشد)

Masood

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

وحید صالحی

ممنون دوست عزیز

alijam2

ممنون وحید جان.قابل فهم تر از این نمیشد.زنده باشید دوست من

rezanoor

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

وحید صالحی

سلام
خواهش میکنم انشاا… بزودی شروع میشه…

meyti pugo

ممنون

fiamm

با سلام
ممنون عالی بود

alinaghavi

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

وحید صالحی

سلام
ممنون دوست عزیز حتما …

f_talebi

ممنون
من از جی کوئری چیزی نمیدونم ولی میخوایم یادش بگیرم. امیدوارم با مطالب شما بتونم یادش بگیرم. یعنی میشه!!؟!

لقمان آوند

ایشالله ….
آموزشها رو پیگیری کنید .

redevil

استادان من
لطف کنید لینک در انتهای هر آموزش اضافه کنید که با کمک آن به آموزش بعدی راهنمایی شویم.

وحید صالحی

در انتهای صفحه هر آموزش در قسمت مطالب مرتبط لینک قسمتهای قبلی و بعدی وجود داره…

f_talebi

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

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

نمیدونم چرا

وحید صالحی

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

آموزش jquery

با تشکر

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

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

ارسال نظرات

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