jQuery Anahtarı - jQuery() Yöntemi

jQuery Ana Kılavuz

Örnek

div elementine ait tüm alt elementlerin p elementlerini bulun ve bunların kenar çizgisi özelliğini ayarlayın:

$("div > p").css("border", "1px solid gray");

Deneyin

Tanım ve Kullanım

jQuery() yöntemi, element koleksiyonunu eşleyen bir dizi içeren bir dizi kabul eder.

jQuery() fonksiyonu üç dilbilgisi türü vardır:

1. Dilbilgisi

Bir dizi, element koleksiyonunu eşleyen CSS seçicisini içeren bir dizi kabul eder:

jQuery(selector, [context]

Ayrıntılı Kullanım

2. Dilbilgisi

Orjinal HTML'in bir dizesi kullanarak DOM elemanı oluşturun:

jQuery(html,ownerDocument]

Ayrıntılı Kullanım

3. Dilbilgisi

DOM belgesi yüklenmesi tamamlandıktan sonra çalışan bir fonksiyon bağlayın:

jQuery( callback )

Ayrıntılı Kullanım

jQuery( selector, [ context ] )

Bu dilbilgisi aşağıdaki kullanımlara sahiptir:

Kullanım 1: Seçici ortamı ayarlayın

Sözdizimi

jQuery(selector, [context]

Varsayılan olarak, seçici DOM'yu kökten arar. Ancak, $() için seçmeli bir context parametresi ayarlayabilirsiniz.

Örneğin, bir callback içinde bir element aramak istiyorsak, aşağıdaki aramayı sınırlayabiliriz:

Örnek

$("div.foo").click(function() {
  $("span", this).addClass("bar");
});

Span seçicisini this bu ortama sınırladığımız için, sadece tıklanan element içindeki span'a eklenen class olur.

İçeride, seçici ortam .find() yöntemi ile gerçekleştirilir, bu yüzden "span", this) gibi $("span", this) $(this).find("span")'e eşittir.

jQuery'nin çekirdek işlevleri bu fonksiyon ile gerçekleştirilir. jQuery'deki her şey bu fonksiyona dayanır, yani bu fonksiyonun bir şekilde kullanılmaktadır. Bu fonksiyonun temel kullanımı, genellikle CSS seçicilerden oluşan bir ifadeye bu fonksiyona geçilmesi ve bu ifadeye göre tüm eşleşen elementlerin bulunmasıdır.

Varsayılan olarak, context parametresi belirtilmemişse, $() fonksiyonu mevcut HTML belgesinde DOM elementlerini arar; context parametresi belirtilmişse, bir DOM element kümesi veya jQuery nesnesi gibi, bu context içinde arar. jQuery 1.3.2'den sonra, dönen element sırası context içindeki görünüm sırasına eşittir.

Kullanım 2: DOM elementi kullanarak

Sözdizimi

jQuery(element)

Bu fonksiyon, diğer yollarla bulunan DOM elementlerini kullanarak jQuery nesnesi oluşturmamıza olanak tanır. Bu özellik genellikle, this anahtar kelimesi ile callback fonksiyonuna ilettiler olan elementler üzerinde jQuery yöntemlerini çağırarak kullanılır:

Örnek

$("div.foo".click(function() {
  $(this).slideUp();
});

Bu örnek, elementin tıklanması durumunda onu kaydırma animasyonu ile gizlemek için kullanılır. İşleyici, tıklanan öğeyi bu durumda bu anahtar kelime this içindeki saf DOM elementi olarak alır, bu yüzden jQuery'nin yöntemlerini çağırmadan önce bu elementi jQuery nesnesi ile sarmalamak zorundadır.

Bu fonksiyon, XML belgesi ve Window nesnesi (onlar DOM elementleri değilse de) geçerli parametreler olarak alınabilir.

XML verileri Ajax çağrısından döndüğünde, bu verileri $() fonksiyonu ile jQuery nesnesi ile sarmalayabiliriz. Bunu tamamladıktan sonra, XML yapısındaki tek bir elementi almak için .find() ve diğer DOM tarayım yöntemlerini kullanabiliriz.

Kullanım 3: jQuery nesnesini klonlama

Sözdizimi

jQuery(jQuery nesnesi)

jQuery nesnesini $() fonksiyonuna parametre olarak geçtiğinizde, bu nesnenin bir kopyası oluşturulur. İlk nesne gibi, yeni jQuery nesnesi aynı DOM elementini referans alır.

Kullanım 4: Boş Küme Döndürme

Sözdizimi

jQuery()

jQuery 1.4 için, parametresiz jQuery() yöntemini çağırdığınızda, boş bir jQuery kümesi döndürülür. jQuery'nin önceki sürümlerinde, bu durumda document düğümünü içeren bir küme döndürülür.

jQuery( html, [ ownerDocument ] )

Bu dilbilgisi aşağıdaki kullanımlara sahiptir:

Kullanım 1: Yeni Element Oluşturma

Sözdizimi

jQuery(html,ownerDocument]

El yazısı HTML string'ini, belirli bir şablon motoru veya eklentiden oluşturulan string'i veya AJAX ile yüklenen string'i geçebilirsiniz. Ancak input elementi oluştururken sınırlamalar olabilir, ikinci örneğe bakabilirsiniz.

Tabii ki bu string eğik çizgi (örneğin bir resim adresi) ve ters eğik çizgi içerebilir. Tek bir element oluştururken, kapanış etiketleri veya XHTML formatını kullanın. Örneğin, bir span oluşturmak için $("<span/>") veya $("<span></span>") kullanabilirsiniz, ancak $("<span>")'yi tavsiye etmiyoruz. jQuery'de bu dilbilgisi $(document.createElement("span")) ile eşdeğerdir.

Eğer $()'ye parametre olarak bir dizi string gönderirseniz, jQuery string'in HTML olup olmadığını kontrol eder (örneğin, string'in belirli konumlarında etiketler varsa). Eğer değilse, string'i bir seçici ifade olarak açıklar, lütfen yukarıdaki açıklamaya bakın. Ancak string HTML parçasıysa, jQuery bu HTML parçası tarafından tanımlanan DOM elementlerini oluşturmaya çalışır. Daha sonra bu DOM elementlerine referans veren bir jQuery nesnesi oluşturur ve döndürür:

Örnek

$("<p id="test">My <em>new</em> text</p>").appendTo("body");

Eğer HTML parçası, yukarıdaki örnekteki gibi HTML'den daha karmaşıksa, elementin gerçek oluşturma süreci tarayıcının innerHTML mekanizması tarafından tamamlanır. Ayrıntılı olarak, jQuery yeni bir <div> elementi oluşturur ve gelen HTML parçasına elementin innerHTML özelliğini ayarlar. Parametre sadece basit bir etiketse, örneğin $("<img />") veya $("<a></a>") ise, jQuery içsel JavaScript createElement() fonksiyonunu kullanarak elementi oluşturur.

Kapsayıcı platform uyumluluğunu sağlamak için, parçanın yapısı iyi olmalıdır. Diğer elementleri içine dahil edebilen etiketler çift olarak görünmelidir (kapalı etiketlerle):

$("<a href="http://jquery.com"></a>");

Ancak, jQuery benzeri XML etiket sözdizimini de izin verir:

$("<a/>");

Diğer elementlerin içine dahil edilemeyen etiketler kapatılabilir veya kapatılmayabilir:

$("<img />");
$("<input>");

Kullanım 2: Özellik ve olayları ayarla

Sözdizimi

jQuery(html,props)

jQuery 1.4 için, ikinci parametreye bir özellik haritası geçebiliriz. Bu parametre, .attr() yöntemine iletilen özelliklerin bir çoğunu içerir. Ayrıca, herhangi bir olay türünü geçebilir ve aşağıdaki jQuery yöntemlerini çağırabilir: val, css, html, text, data, width, height, or offset.

Dikkat edin, Internet Explorer, input elementi oluşturup türünü değiştirmenizi izin vermez; "<input type="checkbox" />" gibi türü belirlemek zorundasınız.

Örnek

Bir <input> elementi oluştururken, type özelliği, özellik değerlerini ve bazı olayları ayarlar.

$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

jQuery( callback )

DOM belgesi yüklenip tamamlanınca çalışacak bir fonksiyon bağlamak için izin verir.

Bu fonksiyonun etkisi $(document).ready() ile aynıdır, ancak bu fonksiyonu kullanırken, DOM yüklendikten sonra çalışması gereken diğer $() operatörlerini içinde paketlemek gereklidir. Teknik olarak bağlantılı olmasına rağmen, bu şekilde bağlantılı olan durumlar çok azdır.

Örnek

DOM yüklendikten sonra, içindeki fonksiyonu çalıştırır:

$(function(){
  // Doküman Hazır
});

jQuery Ana Kılavuz