"jQuery bir JavaScript kütüphanesidir. Ya da farklı bir JavaScript Framework'üdür denebilir. jQuery yoğun olarak animasyonlarda kullanılır. Flash'ın alternatifi olarak kullanılan bu teknoloji ile Flash galeri, Tab menü, Sayfa geçişleri gibi birçok işlem yapılmaktadır." Demiş wikipedia.
jQuery çok geniş bir kütüphane. Ben sadece methodların temel kullanımlarından bahsettim. İncelemek isterseniz gerekli dökümanları www.jQuery.com ve www.jqueryUi.com adreslerinde bulabilirsiniz.

Temel bilgi olarak 
     Seçim işlemleri:
    $("#id")= id'si id olan araçları bulur.
    $("a") = tüm a etiketleri için geçerli olan kodları yazmak için etiketin ismini direk yazıyoruz. div yazarsak div'ler span yazarsak span'lar için gibi...
    $(".class adi") = Araçları class'larına göre bulmaya yarıyor.
    
     $(document).ready(function(){ kod }); = sayfa yüklendiğinde yapılacak işlemler için bunu kullanıyoruz.
     $(function(){ kod }); = sayfa çağırıldığında yapılacak işlemler için de bunu    

Öncelikle Bir C# dilinde bir Asp.Net Empty Web Application oluşturuyoruz. Ve Solution Explorer'da bulunun Refences klasörüne sağ tıklayıp Manage NuGet Packages.. diyerek. JQuery ve JQuery Ui paketlerini projemize dahil ediyoruz.

Default.aspx adında bir Web Form oluşturalım ve işe girişelim. Paketleri yüklediğinizde Content ve Scripts isimleri ile iki tane klasör olduğunu göreceksiniz. Bunların içindeki js ve css dosyalarımızı Default.aspx sayfamıza tanıtmamız gerekmektedir.

Default.aspx sayfamızın head kısmına

yasakli kelime src="Scripts/jquery-2.0.3.js"></script>
    yasakli kelime src="Scripts/jquery-ui-1.10.3.js"></script>
    <link href="Content/themes/base/jquery.ui.all.css" rel="stylesheet" />

bu kodları eklememiz şu an için yeterli olacaktır. (yasakli kelime = <script)

İlk örnek olarak boş bir div'in içeriğini jQuery ile dolduralım.

Default sayfamızın body tagleri arasına bir div atalım ;

<div style="width:400px;background-color:antiquewhite">
            <h3 style="text-align:center">Boş divi JQuery ile doldurmak</h3>
   		<div id="div1">
    		</div>
       </div>

Gördüğünüz gibi div1 idsine sahip divimizin içeriği boş. jQuery ile bunu nasıl doldurabiliriz?

Script blokları arasına

$(function(){
  $("#div1").html("İlk jquery");
});

jQuery kodumuzu ekleyip sayfamızı çalıştıralım.Resim eklemiyorum en sonunda toplu bir şekilde resmi koyacağım oradan bakabilirsiniz.(diğer örnekdeki jquery kodlarını da }); üçlüsünden önce yazınız.)

hide/show methodlarına bakalım:

hide bir elemanı gizlemeye,show ise göstermeye yarıyor.

Gizlenecek olan divimizi ayarlıyalım:

<div style="width:400px;background-color:aquamarine">
            	 <h3 style="text-align:center">Bir divi gizlemek</h3>
   
        	<div id="div2">
            	Bu gizlenecek
        	</div>
        	<a href="#" id="gizle" >Tıkla gizlensin</a>
        	<a href="#" id="goster" >Tıkla gözüksün</a>
            	</div>

Ve jQuery kodu :

$("#gizle").click(function () {
                $("#div2").hide("slow");
            });
            $("#goster").click(function () {
                $("#div2").show();
            });

id'si gizle olan elemanı bulduk ve onun click olayına div'i gizlemek için div2'yi bul onu gizle yazdık.
    aynı şekilde göstermek için de işlemin aynısı yapıp göster dedik.

fadeIn/fadeOut (Görünürlük değiştirme)

    fadeOut elemanın görünürlüğünün yavaşça kaybolmasını sağlar(opacity değerini düşürerek).
    fadeIn elemanın gözükmesini sağlar.

Divimizi ayarlayalım fadeIn ve fadeOut olayları için

<div style="background-color:aliceblue;width:400px">
            <h3 style="text-align:center">fadeIn / fadeOut</h3>
            <span id="sp3">JQuery</span>
        <div id="sp3in" style="width:400px;">John Resig tarafından 2006 yılında geliştirilmiş bir açık kaynak javascript kütüphanesidir..<a target="_blank" href="http://tr.wikipedia.org/wiki/JQuery">devamı için tıklayınız.</a> </div>
        <span id="sp4">Asp.Net</span>
        <div id="sp4in" style="width:400px;">ASP.NET, Microsoft tarafından geliştirilmiş bir web uygulama gelişimi teknolojisidir..<a href="http://tr.wikipedia.org/wiki/ASP.NET" target="_blank">devami için tıklayınız..</a></div>
  
        </div>

Burada spanlara tıklama olayı verip altındaki divlere fadeIn ve fadeOut methodu uygulayalım.

    jQuery kodumuz:

 $("#sp4in").hide();
            $("#sp3").click(function () {
                $("#sp3in").fadeIn("slow");
                $("#sp4in").fadeOut("slow");
            });
            $("#sp4").click(function () {
                $("#sp4in").fadeIn(1000);
                $("#sp3in").fadeOut(1000);
            });

    id'si sp4in olan divi ilk başta gizledik. "slow" ve 1000 aynı değere denk geliyor gibi gözüküyor. Değerleri değiştirerek deneyin. Kaybolma ve Gözükme süreleridir onlar.
    
slideUp/slideDown

Divlerin açılış ve kapanışında dikey slayt efekti yaratmayı sağlar.

    divleri oluşturalım :

<div style="background-color: aliceblue; width: 400px">
                <h3 style="text-align: center">SlideUp / SlideDown</h3>
                <span id="sp5">JQuery</span>
                <div id="sp5in" style="width: 400px;">John Resig tarafından 2006 yılında geliştirilmiş bir açık kaynak javascript kütüphanesidir..<a target="_blank" href="http://tr.wikipedia.org/wiki/JQuery">devamı için tıklayınız.</a> </div>
                <span id="sp6">Asp.Net</span>
                <div id="sp6in" style="width: 400px;">ASP.NET, Microsoft tarafından geliştirilmiş bir web uygulama gelişimi teknolojisidir..<a href="http://tr.wikipedia.org/wiki/ASP.NET" target="_blank">devami için tıklayınız..</a></div>

            </div>

Yine üstteki gibi spanların click olaylarında halledeceğiz bu slayt efektini 

    jQuery

$("#sp6in").hide();
            $("#sp5").click(function () {
                $("#sp5in").slideUp("slow");
                $("#sp6in").slideDown("slow");
            });
            $("#sp6").click(function () {
                $("#sp6in").slideUp(1000);
                $("#sp5in").slideDown(1000);
            });

fadeIn/fadeOut da olduğu gibi 1000 ve slow değerleri geçen süre.

jQuery Ui'den bahsedeceğim biraz. Web sitelerinde tab menü , akordiyon menü görmüşsünüzdür. jQuery Ui ile bunların yapılmasından basitçe bahsedeceğim.

    Direk dialog,tabs accordion ve datepicker için elemanlarımızı oluşturalım.

<div id="sag" style="float: right; margin-right: 400px">

            <div id="dia" title="Diaglog baslığı">
                Bu div dialog olacak
            </div>
            <div id="tabs" style="width: 400px; height: 250px;">
                <ul>
                    <li><a href="#tab1">Tab 1</a></li>
                    <li><a href="#tab2">Tab 2</a></li>
                    <li><a href="#tab3">Tab 3</a></li>
                </ul>
                <div id="tab1">
                    <p>Burası tab 1 </p>
                </div>
                <div id="tab2">
                    <p>Burası tab 2 </p>
                </div>
                <div id="tab3">
                    <p>Burası tab 3 </p>
                </div>
            </div>
            <br />
            <div id="dvac" style="width: 180px;">
                <h3><a href="#">Tab-1</a></h3>
                <div>
                    <p>içerik-1</p>
                </div>
                <h3><a href="#">Tab-2</a></h3>
                <div>
                    <p>içerik-2</p>
                </div>
                <h3><a href="#">Tab-3</a></h3>
                <div>
                    <p>içerik-3</p>
                </div>
            </div>
            <br />
            <input type="text" id="datepick"/>
        </div>

    JQuery kodları; Hiç bir özellik belirlemedim ben direk oluşsunlar görelim dedim.
    standart halleri :

$("#dia").dialog();// dia id'sine sahip divi dialog yapar
            $("#tabs").tabs();// tabs id'sine sahip divi tab menü yapar
            $("#dvac").accordion();// dvac id'sine sahip divi accordion yapar.
            $("#datepick").datepicker({ dateFormat: "dd/mm/yy" });// datepick id'sine sahip elemanı datepicker'a dönüştürür. 
            //date format ile seçilen günün formatını belirttik burada.

     açıklanacak bir şey yok her şey ortada. Kullanmak istiyorsanız konunun başında verdiğim adreslerden gerekli dökümanları bulabilirsiniz.