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

[MoBiN.R]

با سلام خدمت کاربران گرامی و دوستان عزیز انجمن .. در این تاپیک قصد دارم با همکاری هم جلسه های آموزش تکنولوژی JQuery رو قرار بدم .. لازم به ذکره جلسات آموزش ، هر 2 روز یکبار قرار داده میشود و در ضمن از جایی هم کپی پیست نمی شوند . امیدوارم با همکاری هم تاپیک کامل و مرجعی داشته باشیم .

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


طرح سوالات ، مشکلات ، انتقادات و پیشنهادات آموزش های JQuery (Only the registered members can see the link)

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

قبل از شروع :

قبل از شروع آموزش ها لازم هست ابتدا تعریفی از JQuery داشته باشیم :

در یک کلام، jQuery یک کتابخانه جاوا اسکریپت است که انجام یک سری کارها را برای شما بسیار آسان می‌کند و همچنین یک سری امکانات از پیش آماده شده را به شما اراده می‌دهد. حتما سایت هایی رو دیده اید که در هنگام کار انیمیشن ها و افکت های خاصی مثلا داشتم پنل لوگین کشویی در یک طرف سایت یا محو شدن تمامی متن سایت و نمایش یک پیغام و هزاران مثال جالب و زیبا که به سایت شما امکانات و زیبایی خاصی می دهد . در ضمن این رو هم یاد آور بشم که با استفاده از تکنولوژی Ajax هم می توانید کارهایی که JQuery انجام می دهد را انجام دهید ولی سادگی و در عین حال قدرتمند بودن JQuery باعث شده که موضوع این تاپیک JQuery بشود .

لوازم مورد نیاز برای کار با JQuery :


برای کار باید کتابخانه JQuery را داشته باشید که در همین پست آپلود شده و میتوانید دریافت کنید ( آخرین ورژن 1.3.2 )
یک کد ادیتور یا IDE طراحی وب ( مثل DreamWeaver یا Visual Studio و ... ) ( ویژوال استودیو تحت زبان ASP.net پیشنهاد می شود )
آشنایی حداقل با تگ های HTML و کد های JavaScript

در ضمن می توانید JQuery را در هر زبان تحت وب خودتون به کار ببرید .

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

[MoBiN.R]

جلسه اول

برای استفاده از کتابخانه JQuery بعد از دانلود اون باید در تگ <Script> قرار بدین که توابع اون به صفحه لینک بشن . بصورت زیر :


<script type="text/javascript" src="jquery-1.3.2.js"></script>

بعد از اینکار باید کد های JQuery رو بشه جایی نوشت . برای نوشتن کدهای JQuery زیر کدی که در بالا ذکر شد دوباره یک تگ <Script> دیگه باز میکنیم . بصورت زیر :


<script type="text/javascript">

// JQuery Code Here

</script>

در بین تگ بالا تمامی کدهای JQuery نوشته میشوند .

با مثالی که در زیر ذکر می شود کد نویسی JQuery را آغاز می کنیم :

کد CSS مورد نظرمان مینویسیم :



<style>
.box2 {
color:#0F0;
}
</style>

بعد از نوشتن یک تگ پاراگراف در قیمت Body ایجاد میکنیم و متنی را درون اون مینویسیم :


<p>This is JQuery Tuturial</p>

بعد از تمامی این کارها نوبت به کد JQuery میرسه . ما با این کد میخواهیم متن درون پاراگراف را به رنگ سبز تغییر دهیم ( در حالت معمولی مشکی هست و از خاصیت Class خود تگ هم استفاده نمیکنیم ) :



$(function(){
$("p").addClass("box2");
});

کد بالا اولین کد JQuery ما می باشد .

توضیح : در JQuery به این صورت می باشد که ما اول بخشی از صفحه را انتخاب میکنیم و بعد عملیات موردنظرمان را روی آن پیاده میکنیم ..

در اولین خط کد بالا ، دستور $(function(){ را قرار دادیم . این دستور در واقع صفحه ما به Ready یا کدهای HTML اون لودکامل شد کدهای درون خودش را اجرا می کند . بعنی تمامی کدهایی که بین این دستور قرار میگیرد بعد از لود صفحه اجرا خواهند شد :



$(function(){
// Code Here
});

حالا میرسیم به دستور اصلی بعنی :


$("p").addClass("box2");

در دستور بالا همانطور که توضیح دادیم رنگ قرمز در واقع Selector یا انتخاب کننده بخشی از صفحه است که در اینجا ما تگ p را انتخاب کردیم و رنگ سبز عملیات موردنظرمان می باشد که تابع AddClass کد CSS مورد نظرمان که در اول صفحه نوشتیم به تگ پاراگراف وصل میکند .

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

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

طرح سوالات ، مشکلات ، انتقادات و پیشنهادات آموزش های JQuery (Only the registered members can see the link)

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

با تشکر

[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 (Only the registered members can see the link)

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

با تشکر

[MoBiN.R]

جلسه سوم

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

در جلسه قبل انتخاب تگ براساس صفت و مقدار اون رو تا حدودی توضیح دادم و این جلسه میخوام کاملش کنم :

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

این عملگر تگ هایی که با این مقدار شروع می شوند انتخاب می شوند . مثال :



$(function(){
$("a[href ^='Only the registered members can see the link").addClass("red");
});

در مثال بالا صفت href در لینک اگر با Only the registered members can see the link شروع شود انتخاب می شود .

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

این عملگر تگ هایی که با یک عبارت خاص به پایان می رسند رو انتخاب میکنه :


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


انتخاب تگ براساس متن آنها

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


:contains('value')

مثال :


<td>Ali</td>
$("td:contains('Ali')").addClass("red");با استفاده از اینکار تگ هایی که متن آن ها Ali است انتخاب می شوند.

انتخاب تگ براساس موقعیت مکانی : اولین

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

براساس :

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

برای مثال 10 تگ لینک داریم میخواهیم تگ اول لینک انتخاب شود . بصورت زیر عمل میکنیم :


$("a:first").addClass("red");


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

طرح سوالات ، مشکلات ، انتقادات و پیشنهادات آموزش های JQuery (Only the registered members can see the link)

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

با تشکر

[MoBiN.R]

جلسه چهارم

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

بصورت زیر عمل میکنیم :


$("a:last").addClass("red");

تگ N ام براساس شماره :

بصورت زیر عمل میکنیم :



$("a:eq(2)").addClass("red");

توجه داشته باشید اعداد در Jquery از صفر شروع می شوند .

تگ کوچکتر از عدد N براساس شماره :

بصورت زیر عمل میکنیم :

$("a:lt(2)").addClass("red");

با توجه به کد بالا لینک هایی که قبل از لینک سوم در صفحه قرار دارند را انتخاب می کند

تگ بزرگتر از عدد N براساس شماره :

بصورت زیر عمل میکنیم :


$("a:gt(2)").addClass("red");

با توجه به کد بالا لینک هایی که بعد از لینک سوم در صفحه قرار دارند را انتخاب می کند

زوج و فرد :

زوج :


$("a:even").addClass("red");

فرد :


$("a:odd").addClass("red");

پایان جلسه چهارم

طرح سوالات ، مشکلات ، انتقادات و پیشنهادات آموزش های JQuery (Only the registered members can see the link)

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

با تشکر

[MoBiN.R]

دوستان با عرض شرمندگی جلسه بعد امکان داره یه مقدار با تاخیر زده بشه به علت مشغله کاری .. با تشکر

[bahar65]

salam aghaye modir
mishe lotfan rahnamiim konid ke chetor mitoonam ye animationio ke ba jquery sakhte shode ta abad tekrar beshe? vaghti too halgheye for mizaramesh tekrar nemishe.
mamnoon misham agar rahnamaiim konid

[MoBiN.R]

salam aghaye modir
mishe lotfan rahnamiim konid ke chetor mitoonam ye animationio ke ba jquery sakhte shode ta abad tekrar beshe? vaghti too halgheye for mizaramesh tekrar nemishe.
mamnoon misham agar rahnamaiim konid

با درود و تبریک برای ورود به این انجمن .. ببینید دوست عزیز هنوز این بحث به حلقه ها نرسیده .. اما شما میتونید از حلقه while استفاده کنید و درون شرطش عدد 1 رو قرار بدید که بی نهایت ادامه بده

[bahar65]

salam aghaye modir
roozeton bekheir
nemidoonam chera nemitoonam baratoon peyghame khosoosi bezaram:1. (29):

donbale kasi migardam ke ba php va mysql porojamo takmil kone, mikhastam bedoonam shoma forsate anjamesho darin?
agar momkene harche saritar khabaresho behem bedin, mamnoon misham
bye

[MoBiN.R]

salam aghaye modir
roozeton bekheir
nemidoonam chera nemitoonam baratoon peyghame khosoosi bezaram:1. (29):

donbale kasi migardam ke ba php va mysql porojamo takmil kone, mikhastam bedoonam shoma forsate anjamesho darin?
agar momkene harche saritar khabaresho behem bedin, mamnoon misham
bye

با درود .. خیر دوست عزیز من PHP کار نمیکنم .. ASP.Net کار میکنم .. متاسفم .. پیروز و موفق باشید

[shayjan]

توصیه میکنم برا یادگیری بهتر از فایل های ویدئوی آقای نادری حتما استفاده کنید. خیلی تاثیرگذار هست.
از فرانش میتونید دانلود کنید. رایگان هستش