# مباحث مرتبط با توسعه وب > طراحی وب (Web Design) > حرفه ای: اموزش JQuery

## binyaft

سلام دوستان من از امروز میخوام jquery رو در این تاپیک اموزش بدم 
نظرات و پیشنهادات خودتونو از طریق پیغام خصوصی بفرستید
از نوشتن مطالب غیر ضروری خود داری کنید 
نکته : این تاپیک در صورت حمایت کاربران ادامه خواهد پیدا کرد

----------


## binyaft

سلام دوستان

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

جی کئوری یه فریم ورک مبتنی بر جاوا اسکریپت است که از محبوبیت زیادی بر خوردار است 
جی کئوری به دست اقای 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

سلام امروز به معرفی 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

رویداد ( 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

سلام به همه امیدوارم حالتو خوب باشه ، از کاربرانی که منو همراهی میکنن تشکر میکنم  :تشویق: 
امروز یه رویداد جدید به نام 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

> واقعا ممنون
> از اینکه این آموزش رو قرار دادید


خواهش میکنم  :قلب: 
از این به بعد سعی کنید برای تشکر فقط از کلید تشکر استفاده کنید ، ممنون 

خوب میریم سر اموزش بعدی 
رویداد بعدی ما رویداده 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

سلام به همه دوستان 
اگر بخواهیم تمام رویداد هارو بنویسیم و مثال بزنیم یکم روند اموزش کند 
من رویداد های مونده رو فقط یه توضیح میدم و در تاپیک بعد به اموزش استایل ها در سی اس اس میپردازم 
امیدوارم دوستان هم منو همراهی کنن 

*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

سلام به همه دوستان امروز بخش سی اس اس رو اموزش میدم 
در جی کئوری یک تابع هست به نام 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

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

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

----------


## صابر طهماسبی

> نوع اول به صورت فشرده فقط برای استفاده در صفحات ( چیزی از کدش سر در نمیاری ) 
> نوع دوم برای توسعه و کمتر برای استفاده در صفحات ( این نوع بیشتر برای توسعه مورد استفاده قرار میگیره چون کد هاش خواناست )


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

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

----------


## binyaft

سلام
ممنون از صابر طهماسبی عزیز که اطلاعات رو تکمیل کردند 
خوب حالا میریم سر اموزش تابع 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

ضمن تشکر دوباره ، پس بقیه آموزشها چی شد؟
ادامه داره یا نه دیگه؟

----------


## binyaft

بله ، حتما ادامه پیدا میکنه ولی 1-2 روز دیگه ، فعلی سرم شلوغه ، ببخشید دوستان  :بوس:

----------


## binyaft

به نام خدا 
سلام دوستان ، ببخشید این چند وقت که نبودم ، راستش کار زیاد داشتم 
اما الان میخوام ادامه اموزشو بنویسم ، این اموزش مربوط میشه به تغییر محتوای عناصر بوسیله جی کئوری ( 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

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


$('document').ready(function(){
 
$('#mydiv').append('append !!!!');

});

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

----------


## majnun

منم خواستم به نوبه خودم کاری انجام داده باشم 

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

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

----------


## binyaft

سلام
بسیار ممنون از مجنون عزیز که فایل 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

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

----------


## davood59

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

----------


## ramin149

اگر میشه در پایان هر آموزش کد کاملش هم بزارید .
ممنون

----------


## binboy

میشه اون کد php را با jQuery ادغام کرد؟ فقط قسمت چک کردنش.

----------


## binyaft

با تشکر از دوستانی که بنده رو تا اینجا همراهی کردند ، 


*آژاکس در 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

با سلام، دوست گرامي مطلب خيلي مفيدي گذاشتين و از شما تشكر ميكنم. فقط به نظرم اومد كه آموزش كار با AJAX رو توسط jQuery خيلي خلاصه توضيح دادين. اگه ميشه در اين مورد بيشتر توضيح بدين و مثال ارائه كنيد. موفق باشيد.

----------


## تازه_کار

سلام
ممنون
ای کاش مثل فایل ورد یا پی دی اف هم می گذاشتید؛
کتاب یا سایتی که فارسی باشه و کامل توضیح داده باشه سراغ دارید؟
به هر حال از زحماتت سپاس گزارم

----------


## Ali0Boy

> با تشکر از دوستانی که بنده رو تا اینجا همراهی کردند ، 
> 
> 
> *آژاکس در jQuery*
> 
> 
> 
> تابع Load در jQuery : 
> 
> ...


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

*Forbidden*

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

----------

