# زبان های اسکریپتی > JavaScript و Framework های مبتنی بر آن > jQuery > آموزش: آموزش JQuery ازصفر تا 100 همراه با مثال

## mrgraphy

سلام دوستان.
قصد دارم JQuery رو از صفر تا 100 همراه با مثال بهتون آموزش بدم.
چندتا نکته هست اگر دوستان رعایت کنند ممنون میشم.
برای جلوگیری از  زیاد شدن صفحات تاپیک دوستان لطف کنن پاسخی ارسال نکنند.
آموزش به صورت چندین قسمتی میباشد و در هر قسمت بخشی از JQuery  رو همراه با مثال برای شما توضیح میدم.
برای شروع تاریخچه JQuery رو گذاشتم تا دوستانی که آشنایی ندارند آشنا بشن.

قسمت اول : آشنایی با JQuery

جی کوئری چیست ؟ درسالهای متمادی ، جاوااسکریپت هم یادگیریش سخت بود و منبع آموزشی خوب براش کم پیدا می شد، هم کاربرد قابل قبولی براش نبود و هم باعث مشکلات امنیتی میشد. 
اما با گذشت زمان، رونق گرفتن AJAX، بیشتر شدن ایده های سمت کلاینت افزایش امنیت مرورگرها که به دلیل توسعه مرورگرها بود، جاوااسکریپت خواهان بیشتری پیدا کرد.اما وقتیJQueryمتولد شدتحولی در محیط وب به وجود اومد. JQuery یک کتابخانه یا Library جاوا اسکریپت میباشد قابلیت هایی زیادی دارد از جمله ساخت انیمیشن در وب و متحرک سازی عناصر کنترل event ها و ... .
این کتابخانه با جاوا اسکریپت نوشته شده است و به دلیل کم حجم بودن وclient side بودن و سازگاری با اکثر مرورگر ها محبوبیت زیادی دارد. Jquery یک نرم افزار open source میباشد و استفاده از آن برای همه رایگان میباشد و و تحت LICENSE های GPL و MIT میباشد.

 تاریخچه جی کوئری ؟ 

 Jquery توسط john resig جان رزیگ طراحی شده است.
جان رزیگ برای اولین بار در 22 آگوست سال 2005 از یک کتابخانه جاوا اسکریپت برای اسفاده از  css selectors استفاه کرد و پس از آن در 14 ژانویه 2006 جی کوئری را به صورت رسمی معرفی کرد و وبلاگ و بسایت آن را راه اندازی کرد و پس از آن تا به حال با کمک تیم جی کوئری اقدام به رفع اشکالات و افزودن امکانات جدید به این کتابخانه کردند.

 ویژگی های جی کوئری ؟  
به      عناصر موجود در پرونده دسترسی پیدا کرد و ان‌ها تغییر و دستکاری نمود.کنترل      اسان و قدرتمند تر رویدادها(Events)دستکاری      CSSایجاد      افکت و حرکات انیمیشینتوسعه      دادن افزایه هابرنامه‌های      کوچک سودمندقابلیت      نوشتن پلاگینAjaxاستفاده از عناصر DOMاجر شدن در همه مرور گر هایادگیری و استفاده آسان و ...

----------


## mrgraphy

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


 قسمت دوم : نحوه استفاده از JQuery

 همانطور که در قسمت قبل گفتیم jquery یک کتاب خانه javascript هست و برای استفاده از jquery شما باید کتابخانه jquery رو توی سند خودتون فرخوانی کنید تا بتونید طبق ساختار jquery کد بزنید و از plugin های مختلف اون استفاده کنید. شما میتونید کتابخانه jquery رو از وبسایت JQuery.com  دانلود کنید. کتابخانه jquery دو نوع یا مدل داره یکی نسخه کامل کتابخانه و باز آن هست و دیگری نسخه mini اون هستش که از نظر حجمی حجم mini یه چیزی بین 70 تا 100 کیلوبایت هستش اما نسخه کاملش حدود 280 کیلوبایته. از لحاظ کارایی هیچ تفاوتی بین این دو نوع وجود نداره و فرقی که بین اونها هست اینه که نسخهmini فضای خالی و comment نداره و به صورت خطی نوشته شده. به قول معروف whitespace و comment هاش رو برداشتن. بهتره که از نسخه mini استفاده کنید چون هم حجمش کم تره و هم اینکه سرعت بارگذاری بالاتری داره. کتابخانه jquery یه فایل با پسوند js هستش که برای load کردن اون توی صفحه مثل بقیه فایل های جاوااسکریپت این کار رو انجام میدیم.
به این روش که با استفاده از تک script  و خصوصیت src اون رو بیت تگ head داخل صفحه مورد نظر load میکنیمش. در ضمن شما میتونید  این کارو هم به دو صورت انجام بدید یکی اینکه فایل jquery رو از google یا microsoft داخل صفحه loadکنید و دیگری هم اینکه فایل رو دانلود کنید  و کنار سندتون قرار بدید و مستقیم از طریق هاست خودتون این کارو انجام بدید.


روش مستقیم : 


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


از طریق 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>   

 شما میتونید از یکی از روش های بالا jquery رو توی صفحه خودتون لود کنید. اگر از طریق google و  microsoftاین کارو خواستید انجام بدید و به نسخه های قدیمی تر نیاز داشتید کافیه اسم فایل و پسوند رو پاک کنید و بعد آدرس رو تو مرورگر بزنید تا لیست نسخه ها براتون نمایش داده بشه. بعد از load کردن jquery سند شما آماده هست تا کد های jquery رو اجرا کنه. 
این قسمت به پایان رسید و در قسمت بعدی syntax اصلی jquery  یا همون ساختار دستوری رو با مثال آموزش میدم.

----------


## mrgraphy

خب بریم سراغ قسمت سوم

 قسمت سوم : ساختار دستوی خب در قسمت قبل با jquery آشنا شدید.
حالا میخوام syntax یا ساختار دستوری jquery رو براتون توضیح بدم.
بعد از لود کردن کتابخانه jquery در صفحه برای نوشتن کد های جی کوئری اول باید متد ready رو ففراخوانی کنیم و بعد  میتونیم تمامی کد هامون رو تو ش بنویسم. این متد کارش اینه که تا قبل از بارگذاری کامل صفحه  اجازه اجرای هیچ یک از کد های jqueryرو نمیده. چون اگر قبل از بارگذاری کامل این کدها اجرا بشن مشکلاتی در مرورگر ایجاد میکنن. مثلا شما یک عنصر رو انتخاب میکنید اما چون شند کامل بارگذاری نشده اون عنصر وجود نداره و باعث ایجاد یک خطا میشه.
فراخوانی متد ready  دو مدل هستش یکی یه صورت کامل یا wide یکی هم به صورت small یا کوچک شده اون که هر دو رو براتون مینویسم.

 به صورت کامل : 


 
 $(document) . ready (function() { 
  // Jquery codehere
  });
  


 و به صورت کوچک یا small : 

 $(function(){
  // Jquery codehere
  });
  

خب بعد از اینکه document.ready رو فراخوانی کردیم میتویم کد های jquery  رو بنویسیم. اول از همه بگم که هر دستور jquery با علامت $  شروع میشه و با ; به پایان میرسه.
$ علامتی هستش که به مرور گر میفهمونه این دستور jquery هستش.
برای این که شما روی یک عنصر یا هر چیزی دیگه ای بخواید توسطjquery  عملیاتی انجام بدید اول از همه باید اون رو انتخاب کنید و بعد از اون میتونید شروع کنید به انجام عملیات روی اون عنصر.

طریقه انتخاب کردن یک عنصر تو jquery    به این صورته :


 $ (Selector).action();  

شما باید به جای selector نام selector مورد نظر خودتون رو مینویسید.
مثلا : 

 $('#header').action();


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

 $('p').action();


اما روش های دیگه ای هم وجود داره مثل this که رفتیم جلو تر توضیح میدم. حالا جای action چی مینویسیم؟
جای action میتونیم یکی از متد های jqury رو بنویسیم. مثلا من میخوام کدی رو بنویسم که وقتی صفحه من لود شد اون div که برای تبلیغات هست نمایش داده نشه. مثال :  

< script type="text/javascript" >
      $(document). ready ( function( ) {
        $("#ads").hide();
        });
    </script>


کد بالا یعنی اینکه وقتی سند اماده شد عنصری که آیدی اون  ads هست رو مخفی کن.
حالا یه مثال دیگه مثلا میخوام وقتی روی یک عنصر click کردم مخفی بشه. مثال :  

 <script type="text/javascript">
  $(document).ready(function() {
                  $('#image2').click(function (){
                                  $(this).hide();
                  }) 
  });
  </script>
  

در کد بالا وقتی روی عنصری که آیدی image2 داره click  میکنم اون مخفی میشه.
شاید بپرسید this چیه .
this یعنی همون selector ی ی که روش کلیک شده و در حال استفاده هستش. با استفاده از this ما نیاز ندایرم تا دوباره image2 روتایپ کنیم.
 فرض کنید ما بخوایم از یه selctor خیلی طولانی به دفعات در یک event استفاده کنیم باید هر دفعه اسم اونو تایپ کنیم اما با وجود this دیگه نیازی به این کار نداریم.

این قسمت هم به پایان رسید منتظرقسمت بعدی باشید.

----------


## mrgraphy

قسمت چهارم : انتخاب گر ها (selector) بخش 1
 همون طوری که در قسمت قبل اشاره ای کوتاه به انتخاب گر ها داشتیم الان میخوام انتخاب گر ها رو کامل برای شما توضیح بدم. جی کوئری روش ها و متد های مختلفی برای انتخاب کردن عناصر داره و همین باعث میشه که شما به راحتی بتونید دقیقا همون عنصری رو که میخوایید انتخاب کنید. همچنین شما میتوانید این روش ها و متد ها را با یکدیگر ترکیب کنید و از اون ها استفاده کنید. قدرت انتخاب گر های جی کوئری بسیار زیاد است به صورتی که شما میتوانید یک عنصر را علاوه بر خصوصیت های آیدی و کلاس توسط خصوصیت های دیگه مانند rel,href,name,alt,title, و .. نیز انتخاب کنید.
حالا انواع انتخابگر رو با مثال براتون توضیح میدم. درضمن این نکته رو هم بگم که به دلیل زیاد بودن انتخابگر ها من در دو بخش اون ها رو توضیح میدم و این بخش اول هست. و اینکه تمامی مثال ها از سایت خود jquery هستش و من فقط توضیحاتی  کوتاه به شما میدم تا متوجه بشید و از شلوغی و سردرگمی سایت jquery به دور باشید و اگر کسی خواست اطلاعات بیشتری به دست بیاره به سایت jquery قسمت api قسمت selector ها مراجعه کنه. انتخاب همه عناصر : این کد باعث میشود که همه عناصر موجود انتخاب شوند.$("*")

مثال :


```
  <!DOCTYPE html>
<html>
<head>
  <style>
  h3 { margin: 0; }
  div,span,p {
    width: 80px;
    height: 40px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>DIV</div>

  <span>SPAN</span>
  <p>P <button>Button</button></p>
<script>var elementCount = $("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>

</body>
</html>
```


انتخاب عنصری که animate شده است : این کد div را که animate شده است انتخاب میکند.

  $("div:animated")
  

مثال : 


```

  <!DOCTYPE html>
<html>
<head>
  <style>
  div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
  div.colored { background:green; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="run">Run</button>

  <div></div>
  <div id="mover"></div>
  <div></div>
<script>

    $("#run").click(function(){
      $("div:animated").toggleClass("colored");
    });
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();
</script>

</body>
</html>
```


انتخاب عنصر که توسط خصوصیت و prefix : این کد تمامی عنصر های a که خصوصیت hreflang آن ها با perfix en شروع میشود را انتخاب میکند.

  $('a[hreflang|="en"]')
  


مثال : 



```
  <!DOCTYPE html>
<html>
<head>
  <style>
a { display: inline-block; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
  <a href="example.html" hreflang="en">Some text</a> 

  <a href="example.html" hreflang="en-UK">Some other text</a>

  <a href="example.html" hreflang="english">will not be outlined</a>
  
<script>
$('a[hreflang|="en"]').css('border','3px dotted green');
</script>

</body>
</html>
```


انتخاب عنصری که یک کلمه خاص در یک خصوصیت آن موجود میباشد : این کد تمامی ورودی هایی که در خصوصیت name آن ها کلمه man موجود می باشد را انتخاب میکند.

  $('input[name*="man"]')
  

مثال:


```
  <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input name="man-news" />

  <input name="milkman" />
  <input name="letterman2" />
  <input name="newmilk" />
<script>$('input[name*="man"]').val('has man in it!');</script>

</body>
</html>
```


انتخاب عنصری که یک کلمه خاص در یک خصوصیت آن موجود نمیباشد : این کد تمامی ورودی هایی که در خصوصیت name آن ها کلمه man موجودنمی باشد را انتخاب میکند.

  $('input[name~="man"]')
  

مثال:


```
  <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input name="man-news" />

  <input name="milk man" />
  <input name="letterman2" />
  <input name="newmilk" />
<script>$('input[name~="man"]').val('mr. man is in it!');</script>

</body>
</html>
```


انتخاب عنصری که در قسمت انتهایی مقدار یک خصوصیت آن یک کلمه خاص موجود باشد : این کد تمامی ورودی هایی که مقدار خصوصیت name آنها با letter تمام میشود را انتخاب میکند.

  $('input[name$="letter"]')
  

مثال:


```
  <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input name="newsletter" />

  <input name="milkman" />
  <input name="jobletter" />
<script>$('input[name$="letter"]').val('a letter');</script>

</body>
</html>
```




انتخاب عنصری که مقدار خصوصیت آن دقیقا برار مقدار وارد شده باشد : این کد تمامی ورودی هایی که مقدار خصوصیت value آنها برابر Hot Fuzz میباشد را انتخاب میکند.

  $('input[value="Hot Fuzz"]')
  

مثال:


```
  <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    <label>
      <input type="radio" name="newsletter" value="Hot Fuzz" />
      <span>name?</span>
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="newsletter" value="Cold Fusion" />
      <span>value?</span>
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="newsletter" value="Evil Plans" />
      <span>value?</span>
    </label>
  </div>
<script>$('input[value="Hot Fuzz"]').next().text(" Hot Fuzz");</script>

</body>
</html>
```




انتخاب عنصری که مقدار خصوصیت آن برابر مقدار وارد شده نباشد : : این کد تمامی ورودی هایی که مقدار خصوصیت  name آنها برابر newsletter نمی باشد را انتخاب میکند.

  $('input[name!="newsletter"]')
  

مثال:


```
  <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>

    <input type="radio" name="newsletter" value="Hot Fuzz" />
    <span>name is newsletter</span>

  </div>
  <div>
    <input type="radio" value="Cold Fusion" />
    <span>no name</span>

  </div>
  <div>
    <input type="radio" name="accept" value="Evil Plans" />

    <span>name is accept</span>
  </div>
<script>$('input[name!="newsletter"]').next().append('<b>; not newsletter</b>');</script>

</body>
</html>
```


انتخاب عنصری که مقدار یک خصوصیت آن با کلمه خاصی شروع میشود :  این کد تمامی ورودی هایی که  مقدار خصوصیت name آنها با news شروع میشود را انتخاب میکند.

  $('input[name^="news"]')
  

مثال:


```
  <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input name="newsletter" />

  <input name="milkman" />
  <input name="newsboy" />
<script>$('input[name^="news"]').val('news here!');</script>

</body>
</html>
```


انتخاب تمامی button های موجود در صفحه : این کد تمامی button های موجود در صفحه را انتخا میکند.

  $(":button")
  

مثال : 



```
  <!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:35px; }
  div { color: red; }
  fieldset { margin: 0; padding: 0; border-width: 0; }
  .marked { background-color: yellow; border: 3px red solid; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
  <fieldset>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>

    <textarea></textarea>
    <button>Button</button>
  </fieldset>
</form>

<div>
</div>
<script>
  var input = $(":button").addClass("marked");
  $("div").text( "For this type jQuery found " + input.length + "." );
  $("form").submit(function () { return false; }); // so it won't submit
</script>

</body>
</html>
```


انتخاب تمامی checkbox های موجود در صفحه  : این کد تمامی checkbox های موجود در صفحه را انتخا میکند.

  $(":checkbox")
  

مثال:


```
  <!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:25px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />

    <input type="image" />
    <input type="password" />
    <input type="radio" />

    <input type="reset" />
    <input type="submit" />
    <input type="text" />

    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>

  <div>
  </div>
<script>

    var input = $("form input:checkbox").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

</script>

</body>
</html>
```


انتخاب همه checkbox هایی که check شده اند: این کد تمامی checkbox که check شده اند را انتخاب میکند.

  $(":checked")
  

مثال:


```
  <!DOCTYPE html>
<html>
<head>
  <style>
  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<form>
  <p>
    <input type="checkbox" name="newsletter" checked="checked" value="Hourly" />

    <input type="checkbox" name="newsletter" value="Daily" />
    <input type="checkbox" name="newsletter" value="Weekly" />

    <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
    <input type="checkbox" name="newsletter" value="Yearly" />
  </p>
</form>
<div></div>

<script>
function countChecked() {
  var n = $("input:checked").length;
  $("div").text(n + (n === 1 ? " is" : " are") + " checked!");
}
countChecked();
$(":checkbox").click(countChecked);
</script>

</body>
</html>
```


انتخاب عناصر داخلی یا فرزند (child) : این کد تمامی li هایی که داخل  ul.topnav میباشند را انتخاب میکند.


  $("ul.topnav > li")
  

مثال :


```
  <!DOCTYPE html>
<html>
<head>
  <style>
body { font-size:14px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
                    
<ul class="topnav">
    <li>Item 1</li>
    <li>Item 2 
        <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
       </li>
    <li>Item 3</li>
</ul>

<script>$("ul.topnav > li").css("border", "3px double red");</script>

</body>
</html>
```


انتخاب عنصر بر اساس خصوصیت class : این کد عنصری را که دارای خصوصیت class با نام myclass میباشد را انتخاب میکند.

  $(".myClass")
  

مثال :


```
  <!DOCTYPE html>
<html>
<head>
  <style>
  div,span {
    width: 100px;
    height: 40px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div class="notMe">div class="notMe"</div>

  <div class="myClass">div class="myClass"</div>
  <span class="myClass">span class="myClass"</span>
<script>$(".myClass").css("border","3px solid red");</script>

</body>
</html>
```


انتخاب عنصر بر اساس data موجود درآن (contains) : این کد تمامی div هایی که کلمه john در آن ها باشد را انتخاب میکند.

  $("div:contains('John')")
  

مثال:


```
  <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<div>John Resig</div>

<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
      
    
<script>
$("div:contains('John')").css("text-decoration", "underline");
    </script>

</body>
</html>
```


انتخاب بر اساس انتخا کننده های والد : چگونگی کار انتخاب کننده های والد این گونه هست که شما از کد زیر برای انتخاب input های موجود در فرم استفاده میکنید :

  $("form input")
  

طبق کد بالا فقط input هایی که درون form هستند انتخاب میشوند. ممکن است داخل فرم یک div باشد که درون آن input وجود داشته باشد اما انتخاب نمیشود چون به صورت مستقیم داخل form نیست و به صورت فرزند یکی از فرزندان form میباشد.
مثال:


```

  <!DOCTYPE html>
<html>
<head>
  <style>

  body { font-size:14px; }
  form { border:2px green solid; padding:2px; margin:0; 
         background:#efe; }
  div { color:red; }
  fieldset { margin:1px; padding:3px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <div>Form is surrounded by the green outline</div>
    <label>Child:</label>
    <input name="name" />

    <fieldset>
      <label>Grandchild:</label>
      <input name="newsletter" />
    </fieldset>

  </form>
  Sibling to form: <input name="none" />
<script>$("form input").css("border", "2px dotted blue");</script>

</body>
</html>
```


انتخاب عناصر غیر فعال (برای فرم ها) :  این کد تمامی  ورودی های غیرفعال را انتخاب میکند.

  $("input:disabled")
  

مثال:


```
  <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>

    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
<script>$("input:disabled").val("this is it");</script>

</body>
</html>
```


انتخاب عناصر براساس نام خود آنها : این کد تمامی div های موجود در صفحه را انتخاب میکند.


  $("div")
  

مثال : 



```
  <!DOCTYPE html>
<html>
<head>
  <style>
  div,span {
    width: 60px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>DIV1</div>

  <div>DIV2</div>
  <span>SPAN</span>
<script>$("div").css("border","9px solid red");</script>

</body>
</html>
```


انتخاب کردن عناصر خالی : این کد تمامی خانه های خالی جول را انتخاب میکند.

  $("td:empty")
  

مثال : 


```

<!DOCTYPE html>
<html>
<head>
  <style>

  td { text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>TD #0</td><td></td></tr>
    <tr><td>TD #2</td><td></td></tr>

    <tr><td></td><td>TD#5</td></tr>
  </table>
<script>$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');</script>

</body>
</html>
```


انتخاب  عناصر فعال (برای فرم ها) : این کد تمامی ورودی های فعال را انتخاب میکند.

  $("input:enabled")
  

مثال :


```
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>

    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
<script>$("input:enabled").val("this is it");</script>

</body>
</html>
```


انتخاب بر اساس شماره عنصط مورد نظر : این کد سومین td از یک جدول را انتخاب میکند.

  $("td:eq(2)")
  

مثال : 



```
  <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>$("td:eq(2)").css("color", "red");</script>

</body>
</html>
```


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

  $("tr:even")
  

مثال : 



```
  <!DOCTYPE html>
<html>
<head>
  <style>

  table {
    background:#eeeeee;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>Row with Index #0</td></tr>
    <tr><td>Row with Index #1</td></tr>

    <tr><td>Row with Index #2</td></tr>
    <tr><td>Row with Index #3</td></tr>
  </table>
<script>$("tr:even").css("background-color", "#bbbbff");</script>

</body>
</html>
```


انتخاب ورودی های فایل : این کد تمام input هایی که از نوع file هستند را انتخاب میکند.

  $("input:file")
  

مثال :


```

  <!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:45px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>

    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>
<script>

    var input = $("input:file").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

</script>

</body>
</html>
  
```


انتخاب اول فرزند یک عنصر (first-child) :  این کد اولین span موجود در div را انتخاب میکند.

  $("div span:first-child")
  

همچنین میتوانید از nth-child(index) هم برای انتخاب عناصر فرزند استفاده کنید و به جای کلمه index شماره عنصر فرزند را وارد نمایید.

مثال : 


```
  <!DOCTYPE html>
<html>
<head>
  <style>
  span { color:#008; }
  span.sogreen { color:green; font-weight: bolder; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon</span>

  </div>
  <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>

  </div>
<script>
    $("div span:first-child")
        .css("text-decoration", "underline")
        .hover(function () {
              $(this).addClass("sogreen");
            }, function () {
              $(this).removeClass("sogreen");
            });

</script>

</body>
</html>
```


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

  $("tr:first")
  

مثال : 



```
  <!DOCTYPE html>
<html>
<head>
  <style>

  td { color:blue; font-weight:bold; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>

    <tr><td>Row 3</td></tr>
  </table>
<script>$("tr:first").css("font-style", "italic");</script>

</body>
</html>
```


انتخاب کردن عناصری  که  focus شده اند : این کد تمامی ورودی هایی  را که focus شده اند انتخاب میکند.

  $("input:focus")
  

مثال : 



```
  <!DOCTYPE html>
<html>
<head>
  <style>
.focused {
    background: #abcdef;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<div id="content">
    <input tabIndex="1">
    <input tabIndex="2">
    <select tabIndex="3">
        <option>select menu</option>
    </select>
    <div tabIndex="4">
        a div
    </div>
</div>

<script>
$( "#content" ).delegate( "*", "focus blur", function( event ) {
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 0);
});
</script>

</body>
</html>
```



خب دوستان منظر بخش دوم slector ها باشید.

----------


## reza10wert

دوست عزیز
خیلی آموزش خوبی گذاشتید
کی ادامه میدید ؟

----------


## h_4060

آموزش خوبی بود ولی از صفر تا یک چرا ؟!

----------


## Amir_f

د وستان من این آموزش رو پیدا کردم گفتم شاید به دردتون بخوره  :چشمک:  آموزش فارسی جی کوئری

----------


## mhs.hmd

مرسی خیلی عالی بود

----------


## Joyebright

امیدوارم دوسته من به آموزش خوبت ادامه بدی

----------


## mrgraphy

سلام خدمت همه دوستان برنامه نویس.
من واقعا معذرت میخوام از اینکه نبودم. خیلی درگیر دانشگاه و کار بودم. اما خدارو شکر تجربه خیلی خوبی پیدا کردم تو Online OS یعنی سیستم عامل های تحت وب که انشاال.. بعد به اتمام رسوند این آموزش در خدمتتون هستم.
این اموزش هم به زودی ادامه پیدا میکنه. ممنون از حمایت هاتون.

----------


## l.iranpour@hotmail.com

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

----------


## miladwwe2013

3 ماه بعد..........

----------


## reza10wert

سلام دوستان
من توی سایتم آموزش جی کوئری صفر تا 100 را درس میدهم
اگر علاقه مند یادگیری این زبان شیرین هستید میتونید توی سایتم عضو بشید و درسها را دنبال کنید
www.reza-studio.ir

خوش حال میشوم نظرات و پیشنهادات ارزشمندتان را با من در میان بگذارید

----------


## l3oolloor

يا يک کاري رو نکن يا اگه انجام ميدي تا آخرشو انجام بده
نسيه آموزش ميدي؟
فکر کنم جوگير شدي نه؟؟
مثلا ميخواي بگي سرم شلوغه و اينا
خوب ميخواستي از اول شروع به آموزش نکني کسي که مجبورت نکرده که؟؟

----------


## sumayah

.............................

----------


## mcdeltateta

خیلی خوب بود. امیدوارم این لینک هم به کارتون بیاد : آموزش jquery

----------


## ak47ak47

آقا 5 سال گذشت هنوز سرت خلوت نشده ادامه جی کوئری را آموزش بدی ؟  :قهقهه:   :قهقهه:   :قهقهه:   :قهقهه:

----------


## hamid075

این سایت هم آموزش JQuery را شروع کرده به نظرم سایت مفیدیه : آموزش گام به گام JQuery

----------


## hamid075

> دوست عزیز
> خیلی آموزش خوبی گذاشتید
> کی ادامه میدید ؟


میتونید آموزش صفر تا 100 JQuery را در این لینک ادامه بدید : آموزش Jquery

----------

