آموزش جی کوئری در پانزده روز : روز چهارم

چهارشنبه, ۳۰ام دی , ۱۳۸۸ | ۱۸ دیدگاه

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

امروز چه کار خواهیم کرد :

  1. پیوست یک فایل جاوا اسکریپت بیرونی به فایل اصلی ( Inbox )
  2. تعریف متغیر های css توسط جی کوئری
  3. اضافه کردن  class به تگ دلخواه توسط جی کوئری
  4. برداشتن class از تگ دلخواه توسط جی کوئری
  5. اضافه کردن class به اولین یا آخرین عنوان لیست
  6. اضافه کردن class به عناوین زوج یا فرد لیست
  7. اضافه کردن class به عنوانی خاص
  8. اضافه کردن class به عنوانی که title خاصی دارد ( مهم )

پیوست یک فایل جاوا اسکریپت بیرونی به فایل اصلی ( Inbox ) :

خب برای تمرین هم که شده امروز می خواهیم دستورات جی کوئری رو در فایل خاص خودش بنویسیم و بعداً فقط در فایل ایندکس آدرس فایل را بدهیم – دقیقاً مانند کاری که با فایل CSS کردیم – بنابر این فایلی با پسوند .js به نام Scripts می سازیم و دستورات جی کوئری را درون آن مینویسیم سپس فایل را درون فولدری که فایل ایندکس درون آن قرار دارد می گذاریم و در فایل ایندکس آدرس فایل Script.js را مشخص می کنیم.
<p align="right"><script src="scripts.js" type="text/javascript"></script></p>

تعریف متغیر های css توسط جی کوئری :
ابتدا در فایل Index یک لیست به ترتیب اعداد از یک تا سی و دو درست می کنیم. به این ترتیب :

<body>
<ul>
<li>list 0</li>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
<li>list 8</li>
<li>list 9</li>
<li>list 10</li>
<li>list 11</li>
<li>list 12</li>
<li>list 13</li>
<li>list 14</li>
<li>list 15</li>
<li>list 16</li>
<li>list 17</li>
<li>list 18</li>
<li>list 19</li>
<li>list 20</li>
<li>list 21</li>
<li>list 22</li>
<li>list 23</li>
<li>list 24</li>
<li>list 25</li>
<li>list 26</li>
<li>list 27</li>
<li>list 28</li>
<li>list 29</li>
<li>list 31</li>
<li>list 32</li>
</ul>
</body>

حال فایل Script.js را باز کنید و دستور زیر را درون آن قرار می دهید:

$(function() {
    $('li').css('color' , "red");
});

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

اضافه کردن class به تگ دلخواه توسط جی کوئری :

برای اینکار یک فایل css جدید به نام defult.css می سازیم و به فایل Index پیوست می کنیم. ( دقیقاً مانند فایل script.js ) :

<link href="default.css" rel="stylesheet" type="text/css" />

فایل css را باز کرده و یک class به نام alert ایجاد می کنیم و رنگ آن را آبی قرار می دهیم :

.alert
{
	color: blue;
}

سپس فایل script.js را باز می کنیم و کدهای قبلی را پاک کرده و کدهای زیر را جایگزین می کنیم :

$(function() {
    $('li').addClass('alert');
});

به این ترتیب با دستور addClass شما به تگ li کلاس جدیدی اضافه کردید ! و لیست سی و دوتایی طبق کلاسی که در css نوشتید به رنگ آبی در میاد. مثلاً اگر در کد بالا به جای alert بنویسید aaa و در فایل css کلاس aaa را سبز تعریف کنید لیست به رنگ سبز در می آید.

برداشتن class از تگ دلخواه توسط جی کوئری :

کافیست به جای addClass از removeClass استفاده کنید تا لیست به رنگ پیشفرض که همیشه مشکی است تبدیل شود :

$(function() {
    $('li').removeClass('alert');
});

اضافه کردن class به اولین یا آخرین عنوان لیست :
برای اضافه کردن class به اولین پست از این کد :

$(function() {
    $('li:first').addClass('alert');
});

و برای اضافه کردن class به آخرین پست از این کد استفده می کنیم :

$(function() {
    $('li:last').addClass('alert');
});

اضافه کردن class به عناوین زوج یا فرد لیست :
برای اضافه کردن class به عناوین زوج از این کد :

$(function() {
    $('li:even').addClass('alert');
});

و برای اضافه کردن class به عناوین فرد از این کد استفده می کنیم :

$(function() {
    $('li:odd').addClass('alert');
});

دوستان دقت کنید که عنوان اول برای کدهای همیشه صفر تعیین می شود ! من برای راحت شدن درک مطلب اسم عنوان اول را List 0 گذاشتم. ولی اسم اصلاً مهم نیست، عنوان اول همیشه صفر و زوج است.

اضافه کردن class به عنوانی خاص :
فرض کنید می خواهید شانزدهمین عنوان لیست دارای class شود. با دانش به اینکه صفر همیشه مقدار اول است از کد زیر استفاده می کنیم. به این ترتیب فقط عنوان پنجم – با احتساب صفر – آبی می شود.

$(function() {
    $('li:eq(4)').addClass('alert');
});

اضافه کردن class به عنوانی که title دارد :
فرض کنید از بین عناوین لیست شما که بعضی از آنها لینک هستند و تمام لینکهای از title برخوردارند شما می خواهید لینکی که دارای title خاصی است دارای class باشد ! بیایید کمی فایل Index را تغییر دهیم :

<body>
<ul>
<li><a href="#" title="Hi !">list 0</a></li>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li><a href="#" title="Hi !">list 4</a></li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
<li>list 8</li>
<li>list 9</li>
<li>list 10</li>
<li><a href="#" title="Hi !">list 11</a></li>
<li>list 12</li>
<li>list 13</li>
<li>list 14</li>
<li>list 15</li>
<li>list 16</li>
<li><a href="#" title="Hi !">list 17</a></li>
<li>list 18</li>
<li>list 19</li>
<li>list 20</li>
<li>list 21</li>
<li>list 22</li>
<li><a href="#" title="Hi !">list 23</a></li>
<li>list 24</li>
<li>list 25</li>
<li>list 26</li>
<li>list 27</li>
<li><a href="#" title="Hi !">list 28</a></li>
<li>list 29</li>
<li>list 31</li>
<li><a href="#" title="byebye">list 32</a></li>
</ul>
</body>

فرض کنید می خواهیم لینکی که title آن byebye است را دارای class کنیم ! برای این کار کافیست در فایل script.js این کد را قرار دهید :

$(function() {
    $('li a[title=byebye]').addClass('alert');
});

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

پستهای مرتبط :

آموزش جی کوئری در پانزده روز : روز سوم

آموزش جی کوئری در پانزده روز : روز دوم

آموزش جی کوئری در پانزده روز : روز اول

مقدمه ای بر آموزش jQuery در ۱۵ روز

Be Sociable, Share!


۱۸ دیدگاه


  1. امین
    ۳۰ دی ۱۳۸۸

    بازم ممنون. ادامه بدین.




  2. امیر
    ۱ بهمن ۱۳۸۸

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

    موفق باشی.




  3. سعید
    ۲ بهمن ۱۳۸۸

    خیلی عالیه
    با قدرت ادامه بده مسیح جان




  4. حسين
    ۲ بهمن ۱۳۸۸

    سلام
    خسته نباشید…خیلی سایت مفیدی دارید…موفق باشید
    حالا یه سوال که فکر میکنم به آژاکس هم ربط داره:
    سایت بالاترین یا سایت digg رو اگه دیده باشید اون قسمت امتیاز دهی به لینکها رو با آژاکس ساختن؟اگه ممکنه توضیح بدید چطوری میشه همچین چیزی ساخت که بعد رای ها توی پایگاه داده mysql هم ذخیره بشه.




  5. مجید
    ۲ بهمن ۱۳۸۸

    خسته نباشید

    عالیه

    ممنون




  6. مهدی
    ۴ بهمن ۱۳۸۸

    عالی بود




  7. مسیح
    ۴ بهمن ۱۳۸۸

    # جمیعاً ممنونم
    # حسین آقا خیلی خوشحالم که سئوال مشکل پرسیدی چون خودم هم یه چرخی زدم ببینم جریان از چه قراره و خودم بسازمش. به هر حال چیزی که پیداست اینه که حتماً باید Mysql برای ثبت در پایگاه داده ، PHP برای اتصال به پایگاه و HTML برای ساخت صفحه رو بلد باشه. حالا اینکه چطوری میشه ساخت و تشخیص IP برای فقط یک بار رای دادن رو بلد نبودم که یاد گرفتم. من می تونم بهت یاد بدم همینجا تو نظرات. ولی خودم با ور رفتن با دو تا لینکی که پایین می دم یاد گرفتم. شما اینا رو ببین اگر بازم سئوال داشتی ازم بپرس در خدمتتم :

    http://tinyurl.com/yafc9fw

    http://tinyurl.com/qr9oo2




  8. Mort3ZA
    ۵ بهمن ۱۳۸۸

    قسمت چهارم رو الآن خوندم. بهترین قسمتش بود تا اینجا.
    ترکیب css با jquery عجب چیزی میشه.
    ولی تمرین نمی‌کنیم یادمون نمیره؟ من تا الآن یه خط هم خودم ننوشتم. زور نباشه هیچ کاری نمی‌کنم من D:

    itt یواش یواش داره میشه شبیه w3scools !
    Thank’s




  9. مسیح
    ۵ بهمن ۱۳۸۸

    پس چرا من فکر کردم خسته کنندس ؟! :دی
    آق مرتضی نمی خواد یه خط هم بنویسی فدات شم. بابا Dreamweaver بریز کد هایی که دانلود می کنی رو یه کم با اون انگولک کن. همین. آموزش dreamweaver هم اگر بلد نیستی آدرس بدم بری بخری ! یا بیا از خودم بگیر اصلاً …




  10. مهسا
    ۱۹ بهمن ۱۳۸۸

    داره یواش یواش از یاد دادن میره به سمت کاسبی انگارها! (;
    ببین ناراحت نشین ها من از اینکه یکی همت کرده یه همچین سایتی راه انداخته خیلی خوشحالم ولی فکر نمی کنین یه خورده مثل سریال های ایرانی شده؟ یعنی آبش رو زیادی زیاد کردین؟

    بعدش راستی مگه آموزش jQuery نیست چرا توش jQueryUI داره؟
    مرسی.




  11. عاطفه
    ۱۹ بهمن ۱۳۸۸

    مهسا خانم jQuery، javascript و سایر زبانهای طراحی وب سایت
    وقتی با Html ترکیب بشن ، کامل میشن بخاطرهمینه که ul داره! شما که تو همه بخش ها استادی!! دیگه چرا؟




  12. masoud
    ۲۶ بهمن ۱۳۸۸

    با وجود ف.ی.ل.ت.ر.ی.ن.گ نظراتم بازم میگم دمت گرم




  13. حسين
    ۳۰ بهمن ۱۳۸۸

    سلام آقا مسیح
    (من همون حسینم که ۶ تا نظر بالاتر سوال کرده بودم…در باره digg و بالاترین)
    آقا لینکایی که گذاشتی خیلی مفید بودن. تقریبا متوجه شدم، دستت درد نکنه.




  14. رسول باغبان
    ۲۳ اسفند ۱۳۸۸

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




  15. میلاد
    ۲۷ فروردین ۱۳۸۹

    سلام خسته نباشید بابت نکات خوب ممنون لطفا روش نوشتن RSSهم بگید




  16. مسيح
    ۱۱ اردیبهشت ۱۳۸۹

    :: مهسا : عطفه خانوم زحمت کشیدن جواب شما رو دادن.
    :: عطفه :‌ مرسی که زحمت کشیدین جواب مهسا خانوم رو دادین !
    :: مسعود :‌ من فکر نمی کنم نظرات فیلتر بشن اینجا و ولی دمت گرم !
    :: حسین :‌قابل شما رو نداره اصلاً ! مرسی ار تشکر . خیلیا وقتی به چیزی که می خوان میرسن میزارن میرن …
    :: رسول باغبان : همین کار رو کردیم دیگه … باید یکم صبر کنی که پلاگین فعال بشه.
    :: میلاد : متوجه نشدم باید چی کار کنم ؟




  17. سعید
    ۲ آذر ۱۳۸۹

    با سلام و خسته نباشید خدمت شما دوست عزیز :

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




  18. HappyMoon
    ۹ اسفند ۱۳۹۰

    بازم مرسی:)



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