مجموعه آموزش های تکنولوژی JQuery

[MoBiN.R]

جلسه دوم

در ابتدای جلسه مثالی دیگر از جلسه قبل و نسبت دادن کلاس میزنم ( البته در مورد نسبت دادن کلاس فکر کنم شما به این فکر میکنید که میشه به راحتی با مشخصه class هر تگ کلاس CSS رو به اون تگ نسبت داد - ولی باید بگم این تنها کار این متد AddClass() و انتخاب کننده تگ نیست . بلکه کارهای پیشرفته تری هم برای انتخاب تگ انجام میده که در این جلسه و جلسه های آتی یاد میگیریم ) :

در مثال زیر میخواهیم جدولی ایجاد کنیم و سطر های این جدول رو به رنگ قرمز تغییر بدم :

در اول کار ابتدا جدول خودمون رو بصورت زیر ایجاد میکنیم :

<table>
<tr><td>Item 1</td></tr>
<tr><td>Item 2</td></tr>
<tr><td>Item 2</td></tr>
</table>

بعد از ایجاد جدول کلاس CSS موردنظرمون برای قرمز کردن سطر های جدول ایجاد میکنیم :

.red {
    color: #FF0000;
}

و در آخر کار با استفاده از متد AddClass کلاس CSS موردنظرمون رو به سطرهای جدول به صورت زیر وصل میکنیم :

$(function(){
$("tr").addClass("red");
});

مباحث این جلسه

انتخاب تگ براساس صفت و مقدار آن

در اول بحث توضیح دادم که کار انتخاب گر تگ تنها کار آن انتخاب براساس نام تگ نیست . بلکه میتوان تگ ها را با استفاده از صفت آن ها مثلا براساس مقداری که در صفت href در تگ <a> است انتخاب کرد .

براس انتخاب تگ ها براساس مقدار صفت آنها به صورت زیر عمل میکنیم :

یک نمونه تگ لینک :

<a href="book.pdf">Click Me</a>

مثال :

نام تگ[نام صفت]='مقدار صفت'

مثال :

a[href='book.pdf']

با استفاده این روش تگی انتخاب میشود که مقدار صفت href آن برابر book.pdf باشد . مثال کاربردی :

همان مثال قبلی می باشد فقط با این تغییر که به جای جدول از لینک استفاده کردیم :

<a href="book.pdf">Book 1</a>
<a href="book2.pdf">Book 2</a>
<a href="book3.pdf">Book 3</a>

و با دستور JQuery زیر میتوانید به لینک هایی که آدرسشان book.pdf است کلاس red را نسبت دهید :

$(function(){
$("a[href='book.pdf").addClass("red");
});

استفاده از کاراکترهای ویژه :

عملگر * در انتخاب گر

با استفاده از این عملگر میتوانید تگی را انتخاب کنید که صفتی که انتخاب کردید این متن را درون خود دارد یا نه و آنهایی که دارند انتخاب می شوند :

$(function(){
$("a[href *='.pdf").addClass("red");
});

پایان جلسه دوم

طرح سوالات ، مشکلات ، انتقادات و پیشنهادات آموزش های JQuery

جلسه های بعد در روزهای آینده .. ادامه دارد ..

با تشکر