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

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

در تاریخ ۳۰ دی ۱۳۸۸ توسط مسیح 1,799 بازدید.

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

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

  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 در ۱۵ روز

اگر از مطلب فوق لذت برده اید آنرا با دوستان خود به اشتراک بگذارید
  • Twitter
  • FriendFeed
  • del.icio.us
  • StumbleUpon
  • Digg
  • Facebook
  • Technorati
  • MySpace
  • RSS

برچسب‌ها: ,

نوشته شده توسط مسیح

مسیح مقدم متولد سال 1365. رشته تحصیلی مهندسی صنایع، فعالیت در زمینه آی تی گرافیک و طراحی سایت. علاقمند به فایر فاکس و گوگلینگ.

۱۶ نظر

امین

۳۰ دی ۱۳۸۸

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

امیر

۰۱ بهمن ۱۳۸۸

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

موفق باشی.

سعید

۰۲ بهمن ۱۳۸۸

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

حسین

۰۲ بهمن ۱۳۸۸

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

مجید

۰۲ بهمن ۱۳۸۸

خسته نباشید

عالیه

ممنون

مهدی

۰۴ بهمن ۱۳۸۸

عالی بود

مسیح

۰۴ بهمن ۱۳۸۸

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

http://tinyurl.com/yafc9fw

http://tinyurl.com/qr9oo2

Mort3ZA

۰۵ بهمن ۱۳۸۸

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

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

مسیح

۰۵ بهمن ۱۳۸۸

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

مهسا

۱۹ بهمن ۱۳۸۸

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

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

عاطفه

۱۹ بهمن ۱۳۸۸

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

masoud

۲۶ بهمن ۱۳۸۸

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

حسین

۳۰ بهمن ۱۳۸۸

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

رسول باغبان

۲۳ اسفند ۱۳۸۸

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

میلاد

۲۷ فروردین ۱۳۸۹

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

مسیح

۱۱ اردیبهشت ۱۳۸۹

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

نظر شما چیست ؟