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' );
}
}
