PDA

View Full Version : حرفه ای: اموزش JQuery



binyaft
جمعه 05 شهریور 1389, 16:50 عصر
سلام دوستان من از امروز میخوام jquery رو در این تاپیک اموزش بدم
نظرات و پیشنهادات خودتونو از طریق پیغام خصوصی بفرستید
از نوشتن مطالب غیر ضروری خود داری کنید
نکته : این تاپیک در صورت حمایت کاربران ادامه خواهد پیدا کرد

binyaft
شنبه 06 شهریور 1389, 10:42 صبح
سلام دوستان

بخش اول :
جی کئوری چیست؟

جی کئوری یه فریم ورک مبتنی بر جاوا اسکریپت است که از محبوبیت زیادی بر خوردار است
جی کئوری به دست اقای john resig ایجاد شده و هنوز هم در حال توسعه است ، جی کئوری اپن سوروس است
و به دو نوع ارائه میشود
نوع اول به صورت فشرده فقط برای استفاده در صفحات ( چیزی از کدش سر در نمیاری )
نوع دوم برای توسعه و کمتر برای استفاده در صفحات ( این نوع بیشتر برای توسعه مورد استفاده قرار میگیره چون کد هاش خواناست )
خود اقای john resig الان یکی از کارمندان بنیاد موزیلا است ، جالبه بدونید که ایشون بخش ترجمه متن گوگل رو توسعه دادند

خوب میریم سر آموزش

اول جی کئوری رو دانلود کنید jquery.com اگر نتونستید ضمیمه همین تاپیک هست
خوب حالا یه صفحه بسازید با پسوند html یا htm
بعد اونو باز کنید و کد زیر رو بریزید داخلش



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


برای انتخاب یک ID یا Class یا tag باید از $ و یا jquery استفاده بشه ( به صورت زیر )



$('#div') OR jQuery('#div')


این کد کار همون get_element_by_id رو میکنه

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

اما میرم سر وقت اولین کد جی کئوری



$('document').ready(function(){

}


این کد باید در تمام کد های جی کئوری باشه
کار این کد :
چک میکنه که صفحه کامل لود شده یا نه اگه لود شده بود حالا شروع میکنه به اجریا زیر کد هاش
بقیه اموزش ها در تاپیک بعدی ....

binyaft
یک شنبه 07 شهریور 1389, 18:24 عصر
سلام امروز به معرفی event های jquery میپردازیم
لیست event ها http://www.w3schools.com/jquery/jquery_ref_events.asp
طرز استفاده از event ها

$('#div').event_name(function(){

// Codes


});

event ها در اصل رویداد های یک جز صفحه هستند که مثلا وقتی روی یک جز کلیک شد قلان کار رو بکن و یا وقتی موس رفت روی یک جز از صفحه ، مثلا یک div

اولین event به نام click

این event وقتی فعال میشه که ما از روی یکی از اجزای صفحه کلیلک کنیم
مثال

$('#div').click(function(){

alert('Jquery Events!');


});

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

<div id="div">Hi</div>
بعد به jQuery گفتیم که هر وقت روی #div کلیک شد یه پیام به صورت زیر نمایش بده


alert('Jquery Events!');

binyaft
یک شنبه 07 شهریور 1389, 22:00 عصر
رویداد ( event ) بعدی ما hover هستش
این رویداد وقتی فعال میشه که ما نشانگر موس رو ببریم روی یکی از اجزای صفحه
مثال

$('#div').hover(function(){

alert('Jquery Events!');


});


مثل نوشته بالا ما یک عنصر در صفحه داریم به شکل زیر


<div id="div">Hi</div>

و وقتی که رویداد فعال میشه یک پیام به صورت زیر به کاربر نمایش داده میشه


alert('Jquery Events!');

کد کاملشو هم میزارم


<script type="text/javascript" src="jquery.js"></script>
<script>
$('document').ready(function(){

$('#div').hover(function(){

alert('Jquery Events!');

});

});
</script>

<div id="div"> HI </div>

binyaft
دوشنبه 08 شهریور 1389, 11:54 صبح
سلام به همه امیدوارم حالتو خوب باشه ، از کاربرانی که منو همراهی میکنن تشکر میکنم :تشویق:
امروز یه رویداد جدید به نام dblclick رو معرفی میکنم
این رویداد وقتی فعال میشه که شما روی جز مورد نظر دوبل کلیلک کنی
مثال
$('#div').dblclick(function(){

alert('Jquery Events!');


});

مثل مثال بالا ما یه div داریم با ای دیه div
خوب تمام کد رو هم میزارم

<script type="text/javascript" src="jquery.js"></script>
<script>
$('document').ready(function(){

$('#div').dblclick(function(){

alert('Jquery Events!');

});

});
</script>

<div id="div"> HI </div>

binyaft
سه شنبه 09 شهریور 1389, 18:58 عصر
واقعا ممنون
از اینکه این آموزش رو قرار دادید
خواهش میکنم :قلب:
از این به بعد سعی کنید برای تشکر فقط از کلید تشکر استفاده کنید ، ممنون

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

کد مثال :

$('#text').click(function(){
alert('CLICK!');
});

$('#text').blur(function(){
alert('blur');
});

در صفحه ما یک تکست فیلد داریم با ای دیه text به صورت زیر
<input type="text" id="text">

حالا ما هر وقت روی تکست فیلد کلیک کنیم پیام میده click و هر وقت بیرون از تکست فیلد کلیک کنیم پیام میده blur
این قابلیت بیشتر برای تغییر رنگ فیلد ها وقتی روشون کلیک میشه و از حالته انتخاب در میان بدرد میخوره
مثلا من داخل وبسایت خودم از این قابلیت استفاده کردم ( ادرسش داخل امضام هست )

<script>
$('document').ready(function(){
$('#text').click(function(){
alert('CLICK!');
});

$('#text').blur(function(){
alert('blur');
});
});


</script>

<input type="text" id="text">

binyaft
پنج شنبه 11 شهریور 1389, 13:31 عصر
سلام به همه دوستان
اگر بخواهیم تمام رویداد هارو بنویسیم و مثال بزنیم یکم روند اموزش کند
من رویداد های مونده رو فقط یه توضیح میدم و در تاپیک بعد به اموزش استایل ها در سی اس اس میپردازم
امیدوارم دوستان هم منو همراهی کنن

change

این رویداد وقتی فعال میشود که جز مورد نظر تغییر کند
http://api.jquery.com/change/

keydown

این رویداد زمانی فعال میشود که کلیدی از صفحه کلید پایین باشد
بیشتر برای نمایش زنده نوشته های یک فیلد به کار میرود یا جستجوی آژاکسی

keydown

این رویداد برعکس رویداد keydown هست

keypress

این رویداد زمانی فعال میشود که کلیدی از صفحه کلید فشرده شود

mouseup

وقتی شما بر روی چیزی کلیک میکنید دو حالت به وجود میاید
اول اینکه موس به سمت پایین میرود mousedown
و دوم اینکه موس به سمت بالا میاید mouseup

mouseover

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

mouseout

این رویداد زمانی فعال میشود که موس از حوضه یک جز خارج شود

mousemove

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

mouseenter

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

mouseleave

زمانی فعال میشود که موس از یک جز خارج شود

ready

زمانی فعال میشود که جز مورد نظر به طور کامل لود شده باشد

resize

زمانی فعال میشود که جز مورد نظر تغییر اندازه شود

scroll

زمانی فعال میشود که کاربر scroll نماید

select

زمانی فعال میشود که متن select شود

toggle

مثال رو ببینید مفهومش بیشتره http://api.jquery.com/toggle/


2 -3 تا رویداد دیگه هم هست که به کار نمیاد
در بحث اینده تغییر سی اس اس رو اموزش مید م
در صورت داشتن سوال پیام خصوصی بفرستید یا با ای دی یاهو تماس بگیرید !

binyaft
جمعه 12 شهریور 1389, 14:23 عصر
سلام به همه دوستان امروز بخش سی اس اس رو اموزش میدم
در جی کئوری یک تابع هست به نام css که مقدار سی اس اس یک جز رو بر میگردونه یا اونو تغییر میده
جی کئوری از اسکریپت sizzle برای انتخاب و تغییر دستورات سی اس اس استفاده میکند
تابع css به صورت زیر مورد استفاده قرار میگیره
این یکی مقدار رو بر میگردونه

$(selector).css(name);
و این یکی مقادیر سی اس اس رو تغییر میده

$(selector).css(name,value);
خوب حالا میریم سر اولین کد
با کد زیر شما میتونید مقدار سی اس اس یک جز از صفحه رو بر گردونید

alert($('#mydiv').css('color'));
و کد اچ تی ام ال
<div id="mydiv" style="color:red;font-size:8pt;">hello</div>
حالا وقتی کد رو اجرا میکنید مرورگر یه پیام میده و مینویسه red
حالا اگه به جای color بنویسید font-size مرورگر 8pt رو بر میگردونه
به صورت زیر
alert($('#mydiv').css('font-size'));
و اما اگر بخواهیم مقدار سی اس اس رو تغییر بدیم به این تابع 2 تا ارگومان میدیم
به صورت زیر
$('#mydiv').css('color','blue');
حالا بعد از اجرای کد رنگ div ما میشه ابی
حالا اگر بخواهیم چند تا دستور css رو تغییر بدیم
به صورت زیر
$('#mydiv').css({'color':'yellow','font-size':'10pt'});
کد اچ تی ام ال در مثال بالای برای این مثال هم هست
<div id="mydiv" style="color:red;font-size:8pt;">hello</div>

بقیه اموزش در تاپیک بعدی

binyaft
شنبه 13 شهریور 1389, 13:59 عصر
سلام
ادامه امورش بخش CSS در جی کئوری :
در جی کئوری دو تابع وجود دارده به نام های width و height که طول و عرض عناصر رو تعیین میکنند
به صورت زیر
$('#mydiv').height('100px').width('200px');
میتونید فقط طول یا عرض رو تغییر بدید
به صورت زیر
$('#mydiv').height('100px');
و یا
$('#mydiv').width('100px');

اموزش بعدی مربوط میشه به تابع attr

صابر طهماسبی
شنبه 13 شهریور 1389, 14:34 عصر
نوع اول به صورت فشرده فقط برای استفاده در صفحات ( چیزی از کدش سر در نمیاری )
نوع دوم برای توسعه و کمتر برای استفاده در صفحات ( این نوع بیشتر برای توسعه مورد استفاده قرار میگیره چون کد هاش خواناست )


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


min : در این حالت فضاهای و کامنت ها حذف شده اند
pack : در این حالت علاوه بر min شدن کدها حالت رمز نگاری پیدا کرده اند که حجمش از min کمتر است اما به کمی پردازش و دیکود در مرورگر نیاز دارد

اما در کل min کم حجم و سریعتر است.

binyaft
یک شنبه 14 شهریور 1389, 19:57 عصر
سلام
ممنون از صابر طهماسبی عزیز که اطلاعات رو تکمیل کردند
خوب حالا میریم سر اموزش تابع attr در جی کئوری
تابع attr برای تغییر و یا برگرداندن یک صفت در سند html کاربرد دارد ، به صورت زیر

alert($('#link').attr('href'));

و یه کد اچ تی ام ال

<a href="http://www.google.com/" id="link">[link]</a>

وقتی کد رو اجرا کنیم مرورگر یه پیام میده به شما با متن http://www.google.com/

این تابع دو تا ارگومان میگیره و ارگومان دوم برای تغییر همان صفت در سند اچ تی ام ال است

به صورت زیر
$('#link').attr('href','http://www.gmail.com');
alert($('#link').attr('href'));

و کد اچ تی ام ال :

<a href="http://www.google.com/" id="link">[link]</a>

حالا بعد از اجرای کد مرورگر پیام میده که ادرس http://www.gmail.com هست

این اموزش هم تموم شد
اموزش بعدی تغییر محتوای عناصر اچ تی ام ال هست

davood59
چهارشنبه 24 شهریور 1389, 07:27 صبح
ضمن تشکر دوباره ، پس بقیه آموزشها چی شد؟
ادامه داره یا نه دیگه؟

binyaft
چهارشنبه 24 شهریور 1389, 14:52 عصر
بله ، حتما ادامه پیدا میکنه ولی 1-2 روز دیگه ، فعلی سرم شلوغه ، ببخشید دوستان :بوس:

binyaft
چهارشنبه 21 مهر 1389, 18:49 عصر
به نام خدا
سلام دوستان ، ببخشید این چند وقت که نبودم ، راستش کار زیاد داشتم
اما الان میخوام ادامه اموزشو بنویسم ، این اموزش مربوط میشه به تغییر محتوای عناصر بوسیله جی کئوری ( jQuery )
jquery چند تا تابع برای این کار داره که :

اولی تابع html هست ،



این تابع در صورتی که خالی باشه محتوای html عنصر صفحه رو بر میگردونه



<script>
$('document').ready(function(){
alert($('#div').html());
});
</script>


<div id="div">HTML BODY</div>


کد بالا اگر اجرا بشه ، یه پیام میده با محتوای HTML BODY


اگر این تابع مقداری داشته باشد محتوای عنصر مورد نظر را عوض میکند

<script>
$('document').ready(function(){
$('#div').html('NEW HTML BODY');
alert($('#div').html('NEW HTML BODY'));
});
</script>

<div id="div">HTML BODY</div>

خوب کد بالا هم به لطف خط زیر
$('#div').html('NEW HTML BODY');
محتوا رو به NEW HTML BODY تغییر میده
و یه پیامی هم از محتوای جدید عنصر به کاربر نمایش میده

این از تابع html ، تابع بعدی رو ان شا الله فردا توضیح میدم


موفق و سرافراز باشید

binyaft
پنج شنبه 22 مهر 1389, 15:40 عصر
سلام مجدد
تابع دومی که مربوط میشه به تغییر محتوای عناصر در جی کئوری ، append هست !
این تابع مقدار خودشو به اخر عنصر صفحه اضافه میکنه!
مثل زیر


$('document').ready(function(){

$('#mydiv').append('append !!!!');

});

<div id="mydiv">jquery - </div>
کد بالا پس از اجرا شدن مقدار append رو به اخر عنصر ما اضافه میکنه
به همین راحتی

majnun
پنج شنبه 22 مهر 1389, 23:40 عصر
منم خواستم به نوبه خودم کاری انجام داده باشم

اینم pdf آموزش های دوست عزیزمون

ممنون میشم ادامه بدین

binyaft
شنبه 24 مهر 1389, 18:59 عصر
سلام
بسیار ممنون از مجنون عزیز که فایل PDF رو قرار دادند
اما میریم سر اموزش
دو تابع که امروز یاد میگیریم after و before هستند که به معنی بعد و قبل هستند
این دو تابع به ترتیب مقدار خودشونو به اخر و اول عنصر ما اضافه میکنند

مثال برای after


$('document').ready(function(){
$("p").after("<b>after</b>");
});

<p>jQuery - </p>

کد بالا وقتی اجرا بشه مقدار رو در اخر پاراگرف میریزه


تابع بعدی ، تابع before هست ، این تابع مقدار خودش رو به اول عنصر ما اضافه میکنه

مثال برای before


$('document').ready(function(){
$("p").before("<b> before </b>");
});
<p> - jQuery</p>

بقیه اموزش ها در تاپیک بعدی
موفق باشید

davood59
شنبه 24 مهر 1389, 19:40 عصر
سلام دوست عزیز؛
ممنون از اینکه دوباره به ادامه آموزش پرداختی!
منم فایل pdfی رو که خیلی وقت پیش درست کردم و برگرفته از آموزشهای شماست رو روی سایت میذارم. البته میخواستم هر 10 پست اینکار رو بکنم که دیدم روند کار مشخص نیست و فعلا تا جایی رو که آماده کردم میذارم.
انشاءاله ویرایش کامل رو طی روزهای آتی میذارم.

davood59
یک شنبه 02 آبان 1389, 07:55 صبح
سلام دوستان؛
این pdf جدید حاوی آخرین آموزش تا مورخه 24 مهرماه است.
نسخه بعدی انشاءاله بعد از 5 تا تاپیک آموزش دیگه، آماده و روی سایت قرار میگیره!
فعلا تا جایی که آموزش داده شده توی این pdf هست.
موفق باشید.

ramin149
یک شنبه 02 آبان 1389, 14:16 عصر
اگر میشه در پایان هر آموزش کد کاملش هم بزارید .
ممنون

binboy
دوشنبه 15 آذر 1389, 20:19 عصر
میشه اون کد php را با jQuery ادغام کرد؟ فقط قسمت چک کردنش.

binyaft
دوشنبه 29 فروردین 1390, 21:32 عصر
با تشکر از دوستانی که بنده رو تا اینجا همراهی کردند ،


آژاکس در jQuery



تابع Load در jQuery :

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


$('.dom').load('file.php', { 'name': 'mahdi', 'lname': 'yaqubi' },function(data){
alert(data);
});

آرگومان اول ، نام فایلی که درخواست ها به اون ارسال میشه
آرگومان دوم ، مقادیری که به سرور ارسال میشه
ارگومان سوم خودش یک تابع هست که سه تا ارگومان داره ،
{ آرگومان اول مقادیری دریافتی از سرور رو به همراه داره }
{ آرگومان دوم برای وضعیت درخواست هست }
{ آرگومان سوم برای XMLHttpRequest }


در قطعه کد بالا ، مقادیر دریافت شده توسط تابع alert نمایش داده میشن!


کد کامل ،


یک فایل PHP داریم به صورت زیر که درخواست ارسالی کاربر رو پردازش میکنه { کد زیر تمام درخواست های ارسالی رو نمایش میده }


<?php
// name : file.php
print_r($_GET);

?>

یک فایل HTML هم داریم به صورت زیر ،

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

$('document').ready(function(){

$('.click').click(function(){


$('.dom').load('file.php', { 'name': 'mahdi', 'lname': 'yaqubi' },function(data){
alert(data);
});


});


}

</script>


<a href="javascript:;" class="click">Click Here</a>

<br><br><br>

<div class="dom"></div>



با کلیک بر روی لینک ، اطلاعات لود میشود !


موفق باشید :X

MMSHFE
یک شنبه 18 اردیبهشت 1390, 13:32 عصر
با سلام، دوست گرامي مطلب خيلي مفيدي گذاشتين و از شما تشكر ميكنم. فقط به نظرم اومد كه آموزش كار با AJAX رو توسط jQuery خيلي خلاصه توضيح دادين. اگه ميشه در اين مورد بيشتر توضيح بدين و مثال ارائه كنيد. موفق باشيد.

تازه_کار
جمعه 14 مرداد 1390, 16:11 عصر
سلام
ممنون
ای کاش مثل فایل ورد یا پی دی اف هم می گذاشتید؛
کتاب یا سایتی که فارسی باشه و کامل توضیح داده باشه سراغ دارید؟
به هر حال از زحماتت سپاس گزارم

Ali0Boy
یک شنبه 06 فروردین 1391, 00:22 صبح
با تشکر از دوستانی که بنده رو تا اینجا همراهی کردند ،


آژاکس در jQuery



تابع Load در jQuery :

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


$('.dom').load('file.php', { 'name': 'mahdi', 'lname': 'yaqubi' },function(data){
alert(data);
});

آرگومان اول ، نام فایلی که درخواست ها به اون ارسال میشه
آرگومان دوم ، مقادیری که به سرور ارسال میشه
ارگومان سوم خودش یک تابع هست که سه تا ارگومان داره ،
{ آرگومان اول مقادیری دریافتی از سرور رو به همراه داره }
{ آرگومان دوم برای وضعیت درخواست هست }
{ آرگومان سوم برای XMLHttpRequest }


در قطعه کد بالا ، مقادیر دریافت شده توسط تابع alert نمایش داده میشن!


کد کامل ،


یک فایل PHP داریم به صورت زیر که درخواست ارسالی کاربر رو پردازش میکنه { کد زیر تمام درخواست های ارسالی رو نمایش میده }


<?php
// name : file.php
print_r($_GET);

?>

یک فایل HTML هم داریم به صورت زیر ،

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

$('document').ready(function(){

$('.click').click(function(){


$('.dom').load('file.php', { 'name': 'mahdi', 'lname': 'yaqubi' },function(data){
alert(data);
});


});


}

</script>


<a href="javascript:;" class="click">Click Here</a>

<br><br><br>

<div class="dom"></div>



با کلیک بر روی لینک ، اطلاعات لود میشود !


موفق باشید :X

با سلام خدمت دوستان عزیز
ببخشید من این کد رو در سرور خودم اجرا کردم ولی با خطا زیر روبرو شدم. آیا ممکن هست این قابلیت در سرویس آپاچی من بسته شده باشه[اگه آری، به چه شکل باز کنم] رو سیستم لوکار کار می کنم.
خطا:


Forbidden

You don't have permission to access /ajax in query/send parametr to url and give request/javascript<b></b>:; on this server.