شروع کار با جی کوئری

توسط amir abbas | دیدگاه ها (5) | بازتاب ها (1)

در مقالات قبل، فریم ورک جی کوئری را معرفی کردم. در این مقاله ما کار با جی کوئری را شروع خواهیم کرد. برای شروع کار باید فایل jQuery را از سایت اصلیش دریافت کنیم. برای راحتی کار، آخرین نسخه jQuery را به همراه فایل XHTML تمرینی در پایان مقاله برای دانلود قرار داده ام. در این مقاله ما ساده ترین کار را انجام می دهیم. اینجا سعی می کنیم که یک کلاسی CSS را با استفاده از jQuery به تگ blockquote داخل صفحه اختصاص بدهیم.

برای شروع کار متنی را از مقاله آینده وبلاگ نویسی کپی کردم و بخش از متن را داخل blockquote قرار دادم. از آنجاییکه من padding و margin تمامی عناصر داخل صفحه را صفر کرده ام، در حال حاضر هیچ تفاوتی بین متن داخل تگ p و blockquote وجود ندارد. به این تصویر دقت کنید:

همانطور که در تصاویر مشخص است در حال حاضر هیچ فرقی بین متن داخل p و blockquote وجود ندارد. در بخش دستورات CSS، کلاسی را برای blockquote آماده کردم که این تگ را به شکلی مجزا از متن معمولی نمایش دهد. حال می خواهیم این کلاس ساخته شده را با استفاده از jQuery به صفحه اضافه کنیم.

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

نخست فایل جی کوئری را به صفحه پیوست می کنیم و پس از آن باید فایل js خودمان را که دستوراتمان را قرار است در آن بنویسیم را به صفحه پیوست می کنیم. دقت کنید که اول باید فایل جی کوئری را اضافه کنید و سپس فایل خودتان را در غیر این صورت دستورات شما کار نخواهد کرد.

      <script type='text/javascript' src='jquery-1.2.6.pack.js'></script>
      <script type='text/javascript' src='design.js'></script>
</body>

در بین دستورات CSS ، کلاسی به نام quote آماده شده است. می خواهیم این کلاس را به تمامی blockquote های داخل صفحه اختصاص دهیم. حال باید فایل design.js را بسازیم. نام فایل مهم نیست. می توانید نام آن را هر چه دوست دارید بگذارید. برای ساخت این فایل می توانید از notepad استفاده کنید. Notepad را باز کنید و file > save as را بزنید، در بخش file name باید نام فایل را به همراه پسوند js بنویسید و کل عبارت را داخل علامت نقل قول ( ” ” )  قرار دهید و ذخیره کنید تا فایل شما آماده شود.

حال همین فایل design.js را باز می کنیم تا دستورات را داخل آن بنویسیم.

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

$('blockquote')

دقت کنید که نام تگ را باید بدون علامت های < و > بنویسید و نام تگ باید حتما در بین علامت نقل قول ” یا ‘ قرار بگیرد.

در مرحله بعدی ما باید از یک متد استفاده کنیم تا کلاس مورد نظرمان را به تگ های blockquote اضافه کنیم. متدی در جی کوئری وجود دارد که دقیقا به همین منظور طراحی شده است. متد addClass به شما این قدرت را می دهد که به هر عنصری که در صفحه جستجو کرده اید ، هر کلاسی که دوست دارید را اختصاص بدهید. کلاسی که ما آماده کرده بودیم ، quote بود. حال این کلاس را به blockquote ها اضافه می کنیم. کدی که می نویسیم باید به این شکل باشد:

$('blockquote').addClass('quote');

نام کلاس را باید بدون نقطه آغازین بنویسیم و مانند بخش قبل ، نام کلاس باید بین علامت نقل قول باشد. در پایان خط هم سمیکالن ( ; ) قرار می دهیم. در جاوا اسکریپت هر زمان که دستورات یک خط تمام می شود باید در پایان خط علامت سمیکالن را قرار دهیم.

اکنون جی کوئری در داخل کد صفحه جستجو می کند و لیستی از تمامی تگ های blockquote ایجاد می کند. سپس کلاس quote را به همه آنها اضافه می کند ( در فایل مثالی که آماده شده است تنها یک تگ blockquote وجود دارد ولی شما می توانید فایل را ویرایش کنید و به تعداد دلخواه تگ blockquote به آن اضافه کنید و نتیجه را ببینید. )

اگر ما تنها همین یک خط را در داخل فایل design.js قرار دهیم کافیست ولی این کد به محض لود شدن صفحه اجرا خواهد شد. گاهی اوقات این اجرا شدن به قدری سریع اتفاق می افتد که هنوز صفحه لود نشده و عملا اتفاق خاصی نمیافتد و کلاس مورد نظر ما به blockquote ها اختصاص نمی یابد. ما باید زمان اجرا شدن جاوا اسکریپت را به تاخیر بیندازیم تا اول صفحه load شود ، سپس فایل جاوا اسکریپت اجرا شود. به همین خاطر باید از event handler ها استفاده کنیم. event handler های مختلفی وجود دارد و اگر jQuery یک event handler مخصوص به خودش برای این منظور نداشت ما مجبور بودیم از handler ای به نام onload استفاده کنیم . این handler اجرای جاوا اسکریپت را به تاخیر می اندازد تا صفحه به طور کامل به همراه تصاویرش load شود و پس از آن فایل جاوا اسکریپت اجرا خواهد شد. برای استفاده از این handler ما باید یک تابعی (function) بنویسیم که دستورمان داخل آن قرار گیرد. بدین شکل :

function quoteclass() {
     $('blockquote').addClass('quote');
     }

سپس باید این تابع را به تگ body پیوست کنیم. بدین شکل:
<body onload="quoteclass();">

استفاده از این handler سه ضعف عمده دارد :
1- شما مجبور خواهید بود که فایل HTML خود را ویرایش کرده و تابع را به تگ body اضافه کنید
2- برای اجرا شدن جاوا اسکریپت باید صبر کنید تا تمامی تصاویر نیز load بشوند. در صورتی که صفحه مملو از تصاویر باشد باید زمان زیادی را منتظر باشید تا جاوا اسکریپت اجرا شود.
3- در هر بار تنها می توان یک behavior را به body اضافه کرد و در صورتی که بخواهید behavior های دیگر را نیز به صفحه اضافه کنید، این کار به راحتی امکان پذیر نیست و مجبورید توابع دیگری برای این منظور بنویسید.

جی کوئری برای راحتی کاربران یک handler مخصوص به خود دارد که هیچ یک از ضعف های ذکر شده را ندارد. نخست اینکه این handler منتظر لود شدن تصاویر نمی ماند و بعد از load شدن فایل HTML اجرا خواهد شد، دیگر اینکه هر تعداد behavior را که بخواهید می توانید استفاده کنید و محدودیتی بابت تعداد behavior ها نخواهید داشت و علاوه بر این مواردی که ذکر شد هیچ احتیاجی به ویرایش فایل XHTML خود ندارید. از این handler باید به این شکل استفاده کنیم

$(document).ready(function() {
});

اکنون هر وقت بخواهیم دستوری را به جمع دستورات اضافه کنیم باید آن را در میان این handler بنویسیم به این شکل :

$(document).ready(function() {
    $('blockquote').addClass('quote');
});

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

شاید برای دوستان سوال باشد که چرا ما این مراحل طولانی را برای اضافه کردن یک کلاس طی کرده ایم در حالی که به راحتی می توانیم به blockquote ها با استفاده از خود CSS هر سبکی را که دوست داریم اعمال کنیم. پاسخ این است که جی کوئری قادر است که حتی بعد از load شدن صفحه کلاس ها را اضافه و یا کم کند در صورتی که با استفاده از CSS این کار امکان پذیر نیست. این ساده ترین کاری بود که با جی کوئری می توانستیم انجام دهیم. مقالات بعدی حاوی مطالب پیشرفته و کاربردی خواهد بود.

فایل های تمرینی این مقاله را می توانید از اینجا دریافت کنید.

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

برچسب ها: ،
عنوان ها: jQuery

بازتاب ها & بازخوان ها

[...] آشنایی با JQuery می تونید به این پست و این پست آقای امیر عباس مراجعه [...]

بازخوان توسط راهنمای کامل توابع JQuery و MooTools به صورت CHM « نوشته های یک برنامه نویس در آذر 30, 1387 @ 9:18 ب.ظ

دیدگاه ها

مطلب خوب و مفیدی بود.

من یه سوال داشتم. من می خوام بدون جی کوئری هنگام لود صفحه یک کد یا مثلا تابع اجرا بشه.
خیلی گشتم window.onload رو پیدا کردم که الان اینجا خوندم بعد از لود شدن کامل صفحه اجرا میشه.
من نیاز دازم مثلا بخشی از صفحه رو بصورت پیش فرض با جاوا اسکریپت نمایش ندم.

ممنون میشم کمک کنید.

دیدگاه توسط امیرحسین در شهریور 17, 1387 @ 3:43 ب.ظ

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

دیدگاه توسط amir abbas در شهریور 17, 1387 @ 4:44 ب.ظ

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

می شه فایل jQuery رو هم جایی آپلود کنید.

من نتونستم دانلودش کنم
گوگل اجازه دانلود نمی ده

دیدگاه توسط mohammad در مهر 3, 1387 @ 11:57 ب.ظ

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

دیدگاه توسط کامران در آبان 13, 1387 @ 9:22 ب.ظ

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

دیدگاه توسط یه بنده در دی 2, 1387 @ 11:14 ق.ظ

دیدگاه خود را بنویسید

خط و پاراگراف به طور خودکار شکسته خواهند شد، آدرس ایمیل هیچگاه نمایش داده نخواهد شد، HTML مجاز: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

(لازم)

(لازم)


View this post on FriendFeed
  • August 17, 2008 at 11:15 pm امیرعباس - Little Savage
    این اولین مقاله از سری مقالاتی هست که برای آموزش جی کوئری نوشتم. یه خورده طولانی شده ولی خلاصه تر نمیشه نوشت. امکان داره مجبور بشم که یه قسمت هایی رو با فیلم آموزشی بسازم چون خیلی طولانی میشه. سعی کردم تا جایی که میشه ساده بنویسم. نمیدونم موفق شدم یا نه
  • August 18, 2008 at 1:31 am Po0¥à
    بدک نشده برای اول کار ، به نظر من تا می شه باید در مورد این جی کوئری مطلب نوشت ، یه چیزای مثل آیفون ایناس که با ورود خودشون تغییرات زیادی ایجاد می کنن. ضمن اینکه کاربران بیشتر علاقه دارند با کار های که میشه انجام داد آشنا بشن تا خود برنامه رو از پایه یاد بگیرن. اضافه کردن لایت باکس و یا مواردی از این قبیل خیلی می تونه جذاب باشه ، منم خودم این کار رو شروع کردم و چه در روزنامه و چه در بلاگم در ادامه بحث جی کوئری به این مسائل پرداخته ام.
  • August 18, 2008 at 1:35 am Po0¥à
    راستی در مورد این پلاگین فرفر که از وردپرس مطالب رو می فرسته و می خونه ، به نظر من یا خیلی مشکل داره یا کلا نحوه تفکر برنامه نویسش با نمونه مشابه مووبل تایپ فرق می کنه ، این دوتا پلاگین کارشون یکیه منتها پلاگین مووبل تایپ به نظر من یوزر فرندلی تر و بهتره ، البته فک نکنم کار زیادی داشته باشه تبدیل نحوه کار نمونه وردپرس به مووبل تایپ ، سعی می کنم موقع طراحی بلاگ خودم این کارو انجام بدم :دی
  • August 18, 2008 at 10:31 am امیرعباس - Little Savage
    اتفاقا به نظرم مشکلاتش از نسخه ام تی کمتر باشه. با یونی کد مشکلی نداره. از الان شکل ظاهر زیاد جالب نیست چون نمی خوام برای هماهنگ کردنش با این قالب وقت بذارم. کامنت های فر فر رو هم مجزا نمایش میده که مشخص باشه کامنت از کجا اومده. اگر کامنت ها با هم مخلوط باشه بعضی وقت ها مشخص نیست کی جواب کیو داده ولی اینطوری به نظرم نظمش بیشتره

Add a comment on FriendFeed