آموزش کامل JQuery به زبان فارسی + بحث و تبادل نظر و سوالات مربوط ×××

[Bill Gates]

سلام

به طور اختصاصی امروز حسّ اینکار اومد تا براتون آموزش Jquery قرار بدم به صورت کاملا فارسی !


#1

Jquery یک کتابخانه مربوط به JS هستش که کاربردش امروزه بیش از حدّ تصور رفته . شکل کلی استفاده در صفحات HTML به صورت زیر هستش :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

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

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

#2
در قسمت بعدی میخوام شما رو با چند نمونه از کتابخانه Jquery آشنا کنم به کد زیر توجه کنید :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

این کدی میباشد که برنامه نویسان جاوا اسکریپت آنرا در برنامه های خود بکار میبرند (منظور سبک نوشتار هستش) . این کد مربوط به Option صفحه ای که اجرا یا درحال اجرا است میباشد یعنی " window " پس این کد مربوط به کار با صفحه میباشد .
کدی که در بالا قرار دادم میاد زمانی که صفحه کاملا بالا اومده (دانلود شده) یک پیغام " Welcome " به صورت alert به ما نشون میده . که با کمی فکر خلاق با همین کد ساده میشه خیلی کارها در آینده انجام داد . مثل نمایش بنر های تبلیغاتی . شما میدانید که بنر های تبلیغاتی در بعضی سایت ها جلو لود شدن محتوا را میگیرند و زمان بسیاری را صرف میکنند شما با اینکار میتونید کاری کنید که وقتی محتوای سایت کامل دانلود شد بنر های تبلیغاتی را نشان دهید
معمولا برای انجام یک عملیات ما کدهامون رو بین function() {} قرار میدم که بعدا توضیح مربوط به این را هم میدهم .




پایان قسمت اول

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

تا کامل شدن آموزش تاپیک قفل ...

[Bill Gates]

قسمت دوم :


#1
الان میخوایم آموزش قبلی که درباره محتوای صفحه نوشتیم رو کاملتر کنیم و با کدهای بیشتری آشنا بشیم . وقت های زیادی شده که بخوایم وقتی روی یکی از تگ ها مورد نظر ما کلیک میکنیم یا دابل کلیک یا ... بخوایم رویداد خاصی انجام بگیره خیلی وقت ها از تگ a استفاده میکردم و خیلی وقت ها هم از روش های دیگه استفاده میکردیم . اما کتابخانه Jquery یک امکان جالب را در اختیار ما میزاره تا با محتوای صفحه ( تگ ها و ... (سورس)) بتونیم بهتر کار و مدیریت کنیم به عنوان مثال :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

در کد بالا در قسمتی که نوشته شده ما باید کد هایی که میخوایم رو قرار بدیم که یک مثال ساده در پایین براتون قرار میدم :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

در اینجا ما اومدیم براش تعریف کردیم که برای تگ " a " در هرجای صفحه که مربوط به لینکدهی هم هست کلیک شد ( .click ( این بیاد یک Alert به ما نشون بده . مثال کامل :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

ما در این مثال کتابخانه را باز کردیم آموزشی که اکنون دادیم رو استفاده کردیم . و وقتی روی jQuery کلیک میکنیم یک پیغام حاوی " As you can see , ... " به ما نشان داده میشود و پس از زدن OK ما به صفحه لینک شده وارد میشویم .
تعریف های دیگری نیز به جای تگ "a" میتوان انجام داد که در آینده آموزش میدهیم . طبق گفته های آموزش قبلی نیز کارهای که میخوایم انجام بدیم در function() {} قرار میگیرد . و قبل از آن یک بررسی رویداد میباشد
.onclick یا ... که به اونها Event میگوییم میتونید در لینک زیر با اونها آشنا بشین :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

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

پایان قسمت دوم
نویسنده : امیر سلیمانی

[Bill Gates]

سلام
قسمت سوم :

#1
ما الان قصد داریم تا CSS را با کتابخانه Jquery ترکیب کنیم و این دو را به هم دیگر پیوند بزنیم . برای اینکار میخوام از یک مثال ساده شروع کنم تا هدف مارو کاملا درک کنید .
برای شروع اول ما در قسمت Head استایل زیر را تعریف میکنیم :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

در اینجا بر روی تگ " a " یک کلاس استایل به نام test ساختیم و فونت آن را Bold کردیم کد بالا نیز در تگ Head در HTML قرار میگیرد .
در مرحله بعدی ما میام به وسیله کد زیر :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

استایل test رو به تمامی تگ های "a" انتقال میدیم و الان که تست کنیم میبینیم که هرجا از این تگ استفاده شده باشه به حالتی که در استایل تعریف کردیم ( در اینجا bold شدن فونت ) در می آید .
برای افزودن و ترکیب چندین کلاس تعریف شده در استایل نیز تنها کافیست به شکل زیر عمل کنیم :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

در اینجا مشاهده میکنید که جلوی P یک first نوشتم . خب منظور اینجا در این میباشد که اولین تگ P یا هر تگی که تعریف کردم رو فقط بهش استایلی که وارد کردم قرار داده بشه . حال میتوان جای first از کلماتی مانند :
last : اولین تگ تعریف شده قبل از کد جاوا اسکریپتی که اجرا شده .
first : اولین تگ تعریف شده در کد ما
end و ... دیگر کلماتی که خودتان باید فهمیده باشین چه چیز هایی میتونند باشند .
یک مثال کامل از این آموزش :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

برای استفاده از چند استایل :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

پایان قسمت سوم
نویسنده : امیر سلیمانی

[Bill Gates]

سلام
* یک نکته ای بود که میخواستم بهتون بگم که دچار اشتباه نشید برای تست مثال ها نیازی به Apache یا ... ندارید و به طوری ساده میتونید در یک فایل .html آنرا آزمایش کنید .

قسمت چهارم


#1

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

خب به خط اول این کد که آشنایی دارید در خط دوم یک event اضافه شده که در آموزش بخش دوم به شما گفتم و لینکی برای لیست event ها دادم . این میاد کاری که قرار انجام بشه رو خنثی میکنه یعنی لینک خنثی میشه و عملیاتی که میخوایم انجام میگیره
در خط بعد که کد :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

استفاده شده hide یک افکت در این کتابخانه میباشد و $(this) منظور این میباشد که این رویداد برروی شیء که تعریف کردیم انجام بگیرد نه جای دیگه . Slow هم سرعت hide شدن شیء مربوطه میباشد .
کد اصلی به طور کل افکت Hide رو به طور Slow به تگ های " a " قرار میده و جلوه زیبایی در صورت کاربر مناسب به سایت میبخشد .

مثال کامل :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

افکت ها به طور کلی به این صورت نوشته میشوند :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

-----
میخوام در وسط این آموزش در رابطه با Tag های که در بین آموزش ها میگم بنویسم . همیشه ممکن هستش تگ نباشه و به وسیله ID بخوایم شناسایی کنیم مثلا :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

در اینجا ما فهمیدیم که برای ارتباط به وسیله ID در قسمت target میتونیم به این صورت عمل کنیم : #target و تنها یک # قبل از نام آن اضافه میکنیم . مانند قبل بعد از مشخص کردن تنظیمات اصلی با اضافه کردن یک " , " و استفاده از function() {} کاری که پس از پایان کار مد نظر ما بود را قرار میدهیم
-----
برای مشاهده و توضیحات انواع افکت ها به صفحه زیر مراجعه کنید :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

+ همراه مثال برای استفاده کنندگاه Jquery


پایان قسمت چهارم
نویسنده : امیر سلیمانی

[Ultimator]

دوستان لطفا تا تکمیل شدن آموزش ها از ارسال پست خود داری کنید

سپاس

[Bill Gates]

سلام

تاپیک برای پرسش و پاسخ و بحث و بررسی کتابخانه JQuery باز شده است .


تشکر//

[aref_nk2010]

این jquery به چه دردی می خوره ! کجا بکار می برند ؟!

[Bill Gates]

سلام

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

[DaRiOuShJh]

آخرین پست این تاپیک مربوط به 120 روز قبل است و جزو تاپیک های قدیمی انجمن محسوب میشود!

ای ماشالله
حیفه این تاپیکه بخوابه

من تو فکره کلا یه سایت فارسی برای جاوااسکریپت و مخصوصا این library ها بودم ولی دیدم خودم تکی نمیرسم هر کاری کنم
دست تنها نمیشه از این حرکت ها زد

[Phoenix_17]

سلام خدمت همه.
من می خواستم این قسمت رو دوباره راه بندازم و آموزش jQuery رو از اول برای دوستان بزارم.
البته قرار نیست مطالب رو از خودم بنویسم و از سایت w3schools.com براتون ترجمه می کنم.
فقط من تو این سایت، تازه شروع به کار کردم و نمی دونم باید تو این تاپیک بزارمشون یا یه تاپیک جدید درست کنم.
اگه تو این تاپیک بزارم، قفل کردن تاپیک چی میشه؟