PDA

View Full Version : آموزش: آمورش jQuery


abdorreza
جمعه 25 شهریور 1390, 15:39 عصر
سلام

آموزش jQuery

منبع http://w3schools.com


این هم PDF آموزش jQuery

لینک دانلود :
http://abdorreza.persiangig.com/jQuery/jQuery.zip
abdorreza
جمعه 25 شهریور 1390, 15:46 عصر
چه چيزي را بايد بدانيد

قبل از اينكه يادگيري jQuery را شروع كنيد بايد دانش اوليه از موارد زير را داشته باشيد:

HTML
CSS
JavaScript



jQuery چيست ؟
jQuery يك كتابخانه از توابع JavaScript است.
jQuery يك كتابخانه سبك JavaScript‌ است. (نوشتن كمتر ، انجام كارهاي بيشتر)


كتابخانه jQuery شامل ويژگي هاي زير ميباشد :

انتخاب هاي عنصر HTML (HTML element)
دستكاري عنصر HTML (HTML element)
دستكاري CSS
توابع رويداد HTML
انيميشن ها و افكت هاي JavaScript
پيمايش و اصلاح HTML DOM
AJAX
ابزارهاي مفيد (Utilities)



اضافه كردن كتابخانه jQuery به صفحه هايتان

كتابخانه jQuery در يك فايل ذخيره شده است كه شامل همه ي متدهاي jQuery ميباشد.
اضافه كردن jQuery به صفحه ي وب با اضافه كردن خط زير :

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

لطفا توجه داشته باشيد كه تگ <script> بايد داخل بخش <head> باشد.


مثال ابتدايي jQuery
مثال زير نشان ميدهد متد hide() در jQuery همه ي عناصر <p> را در سند HTML پنهان ميكند.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>



دانلود jQuery

دو نسخه از jQuery براي دانلود در دسترس ميباشد : يكي minified و يكي غير فشرده (براي اشكال زدايي يا مطالعه).
هر دو نسخه را ميتوانيد از jQuery.com دانلود كنيد :
http://docs.jquery.com/Downloading_jQuery#Download_jQuery


جايگزين براي دانلود

اگر نميخواهيد كتابخانه ي jQuery را روي كامپيوترتان ذخيره كنيد ، ميتوانيد از كتابخانه jQuery‌ ميزبان از Google يا Microsoft استفاده كنيد.


Google
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>



Microsoft
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
</head>
abdorreza
جمعه 25 شهریور 1390, 15:51 عصر
با jQuery ميتوانيد عناصر HTML را انتخاب (پرس و جو) كنيد و اقداماتي (actions) را روي آنها انجام دهيد.


مثال هايي از سينتكس jQuery

نشان ميدهد متد hide() در jQuery عنصر HTML جاري را مخفي ميكند.

$(this).hide()

نشان ميدهد متد hide() در jQuery عنصر با id=”test” را مخفي مبكند.

$("#test").hide()

نشان ميدهد متد hide() در jQuery همه ي عناصر <p> را مخفي ميكند.

$("p").hide()

نشان ميدهد متد hide()‌ در jQuery همه ي عناصر با class=”test” را مخفي ميكند.

$(".test").hide()


سينتكس jQuery

سينتكس jQuery براي انتخاب (selecting) عناصر HTML و دستكاري برخي اعمال (action) روي عنصر (عنصرها) ساخته شده است.

سينتكس پايه :

$(selector).action()

• علامت $ براي تعريف jQuery‌
• يك (selector) براي پرس و جو يا پيدا كردن عناصر HTML
• يك عمل (action) jQuery براي دستكاري روي عنصر (عنصرها)


مثال ها :


$(this).hide() - مخفي كردن عنصر جاري
$(“p”).hide() - مخفي كردن همه ي پاراگراف ها
$(“p.test”).hide() - مخفي كردن همه ي پاراگرافهاي با class=”test”
$(“#test”).hide() - مخفي كردن عنصر با id=”test”


تابع آماده بودن سند

ممكن است توجه كرده باشيد كه همه ي متدهاي jQuery در مثال هاي ما داخل يك تابع document.ready() هستند :

$(document).ready(function(){

// jQuery functions go here...

});


بخاطر اين است كه از اجرا شدن هر كد jQuery قبل از پايان لود سند جلوگيري كنيم (آماده باشد).
در اينجا تعدادي مثال از اقداماتي كه ميتواند شكست بخورد اگر توابع قبل از لود كامل سند اجرا شود را آورده ايم :
• سعي كردن براي مخفي كردن عنصري كه وجود ندارد
• سعي كردن براي گرفتن اندازه ي تصويري كه لود نشده است
abdorreza
جمعه 25 شهریور 1390, 15:54 عصر
انتخابگرهاي jQuery به شما اجازه ميدهند عناصر HTML را بعنوان يك گروه يا يك عنصر واحد انتخاب و دستكاري كنيد.

انتخابگرهاي jQuery (jQuery Selectors)

در فصل قبل تعدادي مثال در باره ي چگونگي انتخاب عناصر مختلف HTML ديديم .
اين يك نقطه ي كليدي براي يادگيري اين است كه jQuery ، چگونه انتخاب دقيقي از عناصري كه شما ميخواهيد بر روي آنها اعمال اثر كنيد ، خواهد داشت.
انتخابگرهاي jQuery به شما اجازه ي انتخاب عناصر HTML (يا گروههايي از عناصر) را با نام عنصر ، نام ويژگي (attribute) يا با محتوا ميدهد.


انتخابگرهاي عنصر jQuery (jQuery Element Selectors)

jQuery از انتخاب گرهاي CSS براي انتخاب عناصر HTML‌ استفاده ميكند.
$(“p”) همه ي عناصر <p> را انتخاب ميكند.
$(“p.intro”) همه ي عناصر <p> با class=”intro” را انتخاب ميكند.
$(“p#demo”) همه ي عناصر <p> با id=”demo” را انتخاب ميكند.


انتخابگرهاي خاصيت jQuery (jQuery Attribute Selectors)
jQuery براي انتخاب عناصر با خاصيت هاي داده شده از عبارات Xpath استفاده ميكند.
$(“[href]”) همه ي عناصر با خاصيت href را انتخاب ميكند.
$(“[href=’#’]”) همه ي عناصر با مقدار href برابر يا “#” را انتخاب ميكند.
$(“[href!=’#’]”) همه ي عناصر با خاصيت href مخالف با “#” را انتخاب ميكند.
$(“[href$=’.jpg’]”) همه ي عناصر با خاصيت href كه به “.jpg” ختم ميشوند را انتخاب ميكند.


انتخابگرهاي CSS jQuery (jQuery CSS Selectors)
انتخابگرهاي CSS در jQuery ميتواند براي تغيير خواص CSS عناصر HTML‌ استفاده شود.
مثال زير رنگ زمينه ي همه ي عناصر p را به زرد تغيير ميدهد :

$("p").css("background-color","yellow");


مثال هاي بيشتر



$(this) عنصر HTML جاري
$("p") همه ي عناصر <p>
$("p.intro") همه ي عناصر <p> با class=”intro”
$("p#intro") همه ي عناصر <p> با id="intro"
$("p#intro:first") اولين عنصر <p> با id=”intro”
$(".intro") همه ي عناصر با class=”intro”
$("#intro") اولين عنصر با id=”intro”
$("ul li:first") اولين عنصر <li> از هر <ul>
$("[href$='.jpg']") همه ي عناصر با خاصيت href كه با “.jpg” خاتمه پيدا ميكنند
$("div#intro .head") همه ي عناصر با class=”head” داخل يك <div> با id=”intro”


ميتوانيد از تست كننده ي انتخابگرهاي jQuery ، براي تجربه با انتخابگرهاي متفاوت استفاده كنيد :
http://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&jqsel=p.intro,%23choose
abdorreza
جمعه 25 شهریور 1390, 16:00 عصر
امان از دست اين اديتور كه همه ي متون انگليسي رو به هم ميريزه !!!!

اگه بدرد بخوره بگين كاملشو بصورت PDF همينجا بزارم.
hjran abdpor
جمعه 25 شهریور 1390, 19:30 عصر
با سلام دوست عزیز .
اگه میتونید PDF ش را بزاردید.
raha1986
شنبه 26 شهریور 1390, 15:45 عصر
سلام
ممنون میشم

یه سوال JQuery یک چارچوب برای جاوااسکریپت نیست؟

آیا میشه اطلاعاتی راجع به این چارچوب که مزایا معایب و برترری هاش نسبت به سایر پلت فرم ها چیه؟ راستش میخوام اون رو با سایر پلت فرم ها مثل Adobe flex و یا Silverlight مقایسه کنم

ممنون میشم جوابم رو زود ببدین.
abdorreza
یک شنبه 27 شهریور 1390, 00:07 صبح
سلام

فكر كنم شما خودت بيشتر از من اطلاعات داريد !!!!!

تا اونجايي كه من ميدونم jQuery كتابخانه اي از توابع JavaScript‌ است كه كار ما رو تو نوشتن بعضي از توابع مثل انيميشن با JavaScript ، تغيير HTML ، تغيير CSS و ... راحت كرده.

و باز هم تا اونجايي كه من اطلاع دارم بيشتر سايتهاي بزرگ مثل BBC از jQuery استفاده ميكنند.
khadem1386
یک شنبه 27 شهریور 1390, 02:42 صبح
اول بگم که خیلی بدرد بخوره آقا دست شما درد نکنه دوم:

سوال داشتم: این کدی که شما گذاشته بودید را من توی یک فایل html خالی ریختم ولی کار نکرد رفتم توی w3school هم کد اصلی را برداشتم ولی بازهم کار نمی کنه؟


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>



به نظر شما مشکل سر چیه؟
ricky22
یک شنبه 27 شهریور 1390, 08:38 صبح
اول بگم که خیلی بدرد بخوره آقا دست شما درد نکنه دوم:

سوال داشتم: این کدی که شما گذاشته بودید را من توی یک فایل html خالی ریختم ولی کار نکرد رفتم توی w3school هم کد اصلی را برداشتم ولی بازهم کار نمی کنه؟



به نظر شما مشکل سر چیه؟
مشکل این هست که رفرنس jQuery را در صحفه قرار نداده اید.
این طور فرض کنید که کد هایی که می نویسید توابع یک کتاب خانه ی دیگر است پس برای این که کد ها کار کنند باید کتاب خانه مورد نظر در صحفه باشد/
پست 2 همین تاپیک را مشاهده کنید.
abdorreza
دوشنبه 28 شهریور 1390, 10:55 صبح
سلام به همه

ببخشید که قرار دادن فایل های PDF دیر شد

سیستم قاطی کرده بود

این هم PDF آموزش jQuery

لینک دانلود :
http://abdorreza.persiangig.com/jQuery/jQuery.zip

(این PDF ها به پست اول هم اضافه شدند)