آموزش jQuery | اختصاصی پرشین بکس

[Technical]

سلام دوستان!! در این موضوع می خواهیم به معرفی و آموزش نصب و اجرا جی کوئری (jQuery) بپردازیم.

حتما اگه با این نام آشنایی ندارید این سوال به ذهن شما خواهد آمد : جی کوئری (jQuery) چیست؟؟

پس به پاسخ آن می پردازیم. جی کوئری یک کتابخانه سبک وزن جاوا اسکریپت است، که امروزه محبوب ترین کتابخانه جاوا اسکریپت به شمار می رود. که گفته می شود نصف وبسایت های موجود درفضای وب از آن استفاده می کنند. از جی کوئری معمولا بر روی وبسایت ها استفاده می کنند، این عنصر باعث میشه که وبلاگ برای کاربر جذاب تر بشه. البته می تونید از اون روی وبلاگتون هم استفاده کنید. جی کوئری یک کتابخانه خیلی بزرگه که میشه بزرگ تمومی نداره!! از یک انتخاب کننده رنگ (Color Picker) تا يك سايت حرفه اي!! جی کوئری از جاوا اسکریپت استفاده می کنه،یعنی در زمان هایی که جی کوئری متولد شد، جاوا در حال ناپدید شدن بود چون که به شدت ضعیف شده بود اما جی کودری سبب زنده شدن مجدد این زبان برنامه نویسی شد!
می توانید دو نمونه از جی کوئری را در این آدرس مشاهده کنید : jQuery UI Accordion - Default functionality
خب اگه به این موضوع علاقه مند شدید به جلو پیش برویم تا آن را بر روی وبلاگ یا وبسایت خود خالی کنیم!


1- جهت شروع: شما نیاز مند یک فضای کار هستید. می تونید از یک وبسایت یا یک وبلاگ همچنین از یک فولدر استفاده کنید. ولی من به شما پیشنهاد می دهم که از یک فضای اینترنتی استفاده کنید.
هشدار : لطفا از دامنه یا وبلاگی استفاده کنید که به آن نیازی ندارید چون که ما در این وبلاگ قرار است تمرینات خود را انجام دهیم. به شما پبشنهاد می دهم که وبلاگ جدیدی درست کنید. جهت این گونه تمرینات آموزشی وب.
بعد از ورود به مدیریت وب، به ویرایش قالب (تغییر سورس و ...) روید در انجا با چنین متونی مواجه می شوید :

همه ی آن را حذف کنید! بله! با زدن همزمان کلید های Ctr+A همه ی آن را انتخاب کنید سپس ان ها را با کلید پس بر (BackSpace) حذف کنید! سپس این تغییرات را ذخیره کنید. بعد به آدرس مورد نظر بروید باید یک صفحه سفید و خالی ببینید (البته شاید تبلیغات هم باشند).

خب این گام اول بود. خسته نباشید!!

 

[siarnold]

پاسخ : آموزش jQuery | اختصاصی پرشین بکس

سلام
واقعا جالبه
خیلی خوشم اومد ممنون
راستی چقد از سرعت وبلاگ رو کاهش میده؟
کم زیاد یا تاثیرش ناچیزه؟

 

[Technical]

پاسخ : آموزش jQuery | اختصاصی پرشین بکس

سلام
واقعا جالبه
خیلی خوشم اومد ممنون
راستی چقد از سرعت وبلاگ رو کاهش میده؟
کم زیاد یا تاثیرش ناچیزه؟

عزیز من! اگه یک بار دیگه بخونید متن رو متوجه می شید که ذکر شده :

جی کوئری یک کتابخانه سبک وزن جاوا اسکریپت است.

بنابراین هیچ گونه تاثیری در سرعت وبلاگ نداره!

- - - Updated - - -

سلام
واقعا جالبه
خیلی خوشم اومد ممنون
راستی چقد از سرعت وبلاگ رو کاهش میده؟
کم زیاد یا تاثیرش ناچیزه؟

عزیز من! اگه یک بار دیگه بخونید متن رو متوجه می شید که ذکر شده :

جی کوئری یک کتابخانه سبک وزن جاوا اسکریپت است.

بنابراین هیچ گونه تاثیری در سرعت وبلاگ نداره!

 

[siarnold]

پاسخ : آموزش jQuery | اختصاصی پرشین بکس

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

 

[Technical]

پاسخ : آموزش jQuery | اختصاصی پرشین بکس


جلسه دوم :

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

خب، حالا که دیگر فضای آماده ای داریم پس این دفعه کار واقعی را شروع می کنیم!! خب پس به سایت جی کوئری سری می زنیم!
http://jquery.com/

در این سایت شما دانلود جی کوئری رو می بینید، روی آن کلید کلیک کنید بايد به این صفحه منتقل شوید:

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

این از این قسمت.
حال باید به آماده سازی جی کوئری یو آی بپردازیم. (jQuery ui ) كلمه ui مخفف User Interface يا همان خدمات کاربر است. فعلا با یو آی کاری نداریم. در این بخش با هیچ چیز کاری نداشتیم حتی می توانید فایل پر از کد را هم ببندید!! این بخش فقط جهت آماده سازی شما بود که در جلسه آینده با این گفته ها کار داریم! پس این جلسه را فراموش نکنید! که بدردمان خواهد خورد!

فعلا بدرود تا جلسه بعد!





- - - Updated - - -


جلسه دوم :

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

خب، حالا که دیگر فضای آماده ای داریم پس این دفعه کار واقعی را شروع می کنیم!! خب پس به سایت جی کوئری سری می زنیم!
http://jquery.com/

در این سایت شما دانلود جی کوئری رو می بینید، روی آن کلید کلیک کنید بايد به این صفحه منتقل شوید:

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

این از این قسمت.
حال باید به آماده سازی جی کوئری یو آی بپردازیم. (jQuery ui ) كلمه ui مخفف User Interface يا همان خدمات کاربر است. فعلا با یو آی کاری نداریم. در این بخش با هیچ چیز کاری نداشتیم حتی می توانید فایل پر از کد را هم ببندید!! این بخش فقط جهت آماده سازی شما بود که در جلسه آینده با این گفته ها کار داریم! پس این جلسه را فراموش نکنید! که بدردمان خواهد خورد!

فعلا بدرود تا جلسه بعد!

 

[Technical]

پاسخ : آموزش jQuery | اختصاصی پرشین بکس

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

بعد از آموزش نصب ببینیم تا کجا می تونیم جلو بریم.

 

[Technical]

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

  <html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="آدرس فایل جی کوئری"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>

​

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

 

[Technical]

پاسخ : آموزش jQuery | اختصاصی پرشین بکس

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

 

[M.Bagheri]

پاسخ : آموزش jQuery | اختصاصی پرشین بکس

درود . درخواستی در کار نیست ! اما من تا ایجا آموزش شما رو دنبال کردم . پست ندادن در این تاپیک به این منظور نیست که کسی آموزش شما رو پیگیری نمیکنه

 

[Technical]

پاسخ : آموزش jQuery | اختصاصی پرشین بکس

این جلسه چهارم نیست! فقط از شما یک درخواست داشتم!

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

ولی من مطمئنم که هیچ کدام از شما این کارها را به صورت عملی انجام نداده اید!!! در جلسه اول نامی از فضای وب ذکر شد! چه کسی این آموزش ها را مرحله به مرحله گام به گام انجام داده است؟؟ شاید هیچ کس!!

اما اگر من اشتباه می کنم و شما این کار ها را انجام داده اید لطفا لینک فضای مجازیتان را در این تاپیک قرار دهید تا نگاهی به آن کنم و ببینم تا چه حدی به شما آموزش دادم.

تشکر!