JQuery

Giriş
JQuery ile kullandığım bazı fonksiyonları ileride referans olsun diye not etmek istedim.

Html'e Dahil Etme
Örnek
Şöyle yaparız.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Örnek
Şöyle yaparız.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

AJAX için Same Origin Policy
AJAX çağrısı yapmak için sayfayı yüklerken kullanılan aynı protocol (http veya https) aynı URL ve port numarası kullanılmalı.

ajax metodu
ajax çağrısı örneği. Bu metod yerine get()'i kullanmak daha kolay.

$.ajax({
        url: '',
        dataType: '',
        async: false,    //<-- this depends on your needs.
        success: function(dataObj) {
                    //Do you initialization of datatables
                    hideLoader();
        },
    });

async post örneği

$.ajax
        ({
            type: "POST",           
            data: 'LoginServlet='+name+'&name='+type+'&pass='+password,
            url: url,
        success:function(content)
        {
                $('#center').html(content);           
            }           
        });

attr metodu
Açıklaması şöyle.

When you call .attr, jQuery checks for each object in the set if it has the function getAttribute if this is the case it assumes that it also has a function setAttribute.

If it does not have a function getAttribute, then it will forward the function call to the .prop() function, and prop will internally just do:

elem[name] = value

Örnek
test isimli bir alan yaratır. Şöyle yaparız.

var a = {  
}

$(a).attr('test', 'hello world');

console.dir(a) // for `a`  the property `test` is set

Örnek
setAttribute metodunu çağırır. Şöyle yaparız.

var a = {
  getAttribute() {

  },
  setAttribute() {
    console.log('setAttribute was called')
  }
}

$(a).attr('test', 'hello world');

console.dir(a);

get() metodu
Bu metod ile bir URL'yi istemek mümkün. Metod asenkron çalışır yani AJAX çağrısı yapar. Dolayısıyla ikinci parametre olarak kullanılan fonksiyon içerisinden, cevap işlenebilir. Ajax eskiden XML ile kullanılırdı. Artık daha çok JSON ile kullanılıyor.

Örnek
Şöyle yaparız. somebutton tıklanınca, someservlet URL'si çağrılır. Gelen cevap somediv'in text alanına yerleştirilir.

$('#somebutton').click(function() {
  $.get('someservlet', function(responseText) {
    $('#somediv').text(responseText);
  });
});

Örnek
get metodu ile tablo şöyle yapılır.

$('#somebutton').click(function() {                        
  $.get('someservlet', function(responseJson) {
    var $table = $('<table>').appendTo($('#somediv'));
    $.each(responseJson, function(index, product) {
      $('<tr>').appendTo($table)
      .append($('<td>').text(product.id))
      .append($('<td>').text(product.name))
      .append($('<td>').text(product.price));
    });
  });
 });

Bu metod ile dikkat edilmesi gereken nokta asenkron çalışması. Dolayısıyla ikinci parametre olarak kullanılan fonksiyon içerisinden, cevap işlenebilir. Örnek:

Örnekte URL'yi isterken "link/to/mypage?idCustomer=123&junk=random" gibi parametre geçilmesi gösterilmiş.

function myFunction(url, params){
    $.get(url, params)
}
myFunction("link/to/mypage", { "idCustomer": "123", "junk": $.now })

html metodu
Verilen elemanın html metnini değiştirir. Örnek:

$('.Status-cell').html(function(_, currentText) {
   var url = "http://www.domain.com" + $.trim(currentText);
   return '<a href="' + url + '" target="_blank">' + url + '</a>';
});

inArray metodu
Bu metod, bir değerin, dizi içinde olup olmadığını bulur. Örnek:

nth-child metodu

$("table.dataview tr:nth-child(odd)").addClass("striped");

Bir başka örnek
Düğme eklemeden önce

var futureButton=$("<input  type='button' value='click' class='btn'  />");
$(".myTable tr td:nth-child(5)").append(futureButton)

Ekledikten sonra

operator [] metodu - getter
Şöyle yaparız.

$(document).attr('test', 'hello world');
console.log(document['test']); // prints "hello world"

operator [] metodu - setter
Şöyle yaparız.

document['key']  = 'value'

show metodu
Verilen HTML elemanını gösterir. içine "slow" şeklinde parametre de alablir.Örnek:

function randomFact(){
  var factsArr = $(".fact");
  $(".fact").hide("slow");
  var rnd = Math.floor((Math.random()*(factsArr.length-1)));
  $(factsArr[rnd]).show("slow");
}

Eventler
ready ve onload
document.ready DOM yüklenince çağırılır. window.onload ise tüm image'lar yüklenince çağırılır.
Örnek
Şöyle yaparız

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" 
  type="text/javascript"></script>
<script src="/Scripts/jquery.validationEngine.js"></script>
<script src="/Scripts/jquery.validationEngine-cz.js"></script>
<script>
    jQuery(document).ready(function () {
      ...
    });
</script>




Örnek
Şöyle yaparız.

$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, 
 //objects and images
 alert("window is loaded");
});

click
Örnek:
$("myid").click (function () {
//...
});
keyup
Herhangi bir ekran bileşene keyup metodu bağlanabilir. Örnekte area alanına girilen harf sayısı word-counter alanına yazılıyor.word-counter alanında 32/100 gibi bir çıktı görürüz. Ayrıca this kelimesinin area bileşeni için çalıştığına dikkat etmek gerekir.

$('#area').keyup(function(){
    $('.word-counter').text($.trim(this.value.length)+'/100');
})

Dimensions
JQuery ile bileşenlerin boyutlarını almak mümkün. width(), height(), innerWidth(), innerHeight, outerWidth(), outerHeight() metodları var. Basit bir örnek

function checkWidth() {
  var windowSize = $(window).width();

  if ( windowSize > 600 && windowSize <= 768 ) {
    console.log('600px - 768px');

  } else if ( windowSize > 450 && windowSize <= 600) {
    console.log('450px - 600px' );

  } else if ( windowSize > 300 && windowSize <= 450) {
      console.log('300px -450px' );
  }
}