JQuery'de Element Oluşturmayı Öğrenin

Yeni bir öğe oluşturmak, jQuery JavaScript kitaplığıyla gerçekleştirebileceğiniz en temel görevlerden biridir. jQuery kullanarak, görev Belge Nesne Modeli (DOM) ile eşdeğer yaklaşımdan çok daha basittir. Ayrıca jQuery'yi ne kadar çok kullanırsanız, onu daha esnek ve etkileyici bulacaksınız.

Bir amaca hizmet etmek için öğenizi bir web sayfasına ekleyebilmeniz gerekir. jQuery kullanarak yeni bir liste öğesini nasıl ekleyeceğinizi veya bir paragrafı yeni içerikle nasıl değiştireceğinizi öğrenin.

jQuery Nedir?

jQuery kitaplığı bir koleksiyondur. JavaScript iki temel amacı olan kod:

• Yaygın JavaScript işlemlerini basitleştirir.
• Çeşitli tarayıcılar arasında çapraz uyumluluk JavaScript sorunlarını ele alır.

İkinci amaç, hataları giderir, ancak aynı zamanda tarayıcılar arasındaki uygulama farklılıklarını da ele alır. Tarayıcılar zamanla geliştikçe, her iki amaç da eskisinden daha az gereklidir. Ancak jQuery hala değerli bir araç olabilir.

Element Nedir?

Bir öğeye bazen etiket denir. İkisi genellikle birbirinin yerine kullanılsa da, ince bir fark vardır. Bir etiket, kelimenin tam anlamıyla ifade eder veya

 metin içeriğini işaretlemek için bir HTML dosyasına dahil edersiniz. Öğe, işaretlenmiş metni temsil eden sahne arkası nesnesidir. Bir öğe olarak düşünün DOM HTML etiketlerinin karşılığı.

jQuery Kullanarak Yeni Bir Öğe Nasıl Oluşturulur

Çoğu jQuery işlemi gibi, bir öğe oluşturmak dolar işleviyle başlar, $(). Bu, çekirdeğe giden bir kısayol jQuery() işlev. Bu işlevin üç farklı amacı vardır:

• Genellikle belgede zaten var olan öğelerle eşleşir
• Yeni öğeler oluşturur
• DOM hazır olduğunda bir geri arama işlevi çalıştırır

İlk parametre olarak HTML içeren bir dize ilettiğinizde, bu işlev yeni bir öğe yaratacaktır:

$("")

Bu, bir öğe koleksiyonu içeren özel bir jQuery nesnesi döndürür. Bu durumda, az önce yarattığımız bir "a" öğesini temsil eden tek bir nesne var.

Bu eylemi eşleşen öğelerden ayırt etmek için dize HTML gibi görünmelidir. Pratikte bu, dizenin bir ile başlaması gerektiği anlamına gelir. <. Bu yöntemi kullanarak belgeye düz metin ekleyemezsiniz.

Bunun belgenize öğe eklemediğini, yalnızca eklemeniz için hazır yeni bir öğe oluşturduğunu anlamak önemlidir. Öğe 'bağlı değil', hafızayı kaplıyor ama aslında son sayfanın bir parçası değil - henüz.

Daha Karmaşık HTML Ekleme

Dolar işlevi aslında birden fazla öğe oluşturabilir. Aslında, istediğiniz herhangi bir HTML öğesi ağacını oluşturabilir:

$("

bir
2
üç
")

Bu biçimi, niteliklere sahip bir öğe oluşturmak için de kullanabilirsiniz:

$('')

Yeni Bir Öğede Nitelikler Nasıl Ayarlanır

Tam HTML dizesini kendiniz oluşturmak zorunda kalmadan yeni bir jQuery öğesi oluşturabilir ve niteliklerini ayarlayabilirsiniz. Bu, öznitelik değerlerini dinamik olarak oluşturuyorsanız kullanışlıdır. Örneğin:

photo = new Date().getHours() > 12? "öğleden sonra.jpg": "sabah.jpg";
$("", { kaynak: fotoğraf });

Öğe Nasıl Eklenir

Yeni bir öğe oluşturduktan sonra, onu birkaç farklı yolla belgeye ekleyebilirsiniz. jQuery belgeleri, bu yöntemleri şu başlık altında toplar: 'manipülasyon' kategorisi.

Mevcut Bir Öğenin Çocuğu Olarak Ekle

$("gövde").append($("
Selam Dünya
"));
$(belge.body).append($el);

Bu yöntemi, örneğin bir listenin sonuna yeni bir liste öğesi eklemek için kullanabilirsiniz.

Mevcut Bir Öğenin Kardeşi Olarak Ekle

$("p.last").after("
Yeni bir paragraf
")
$("ul li: ilk").before("
yeni öğe
")

Örneğin, diğer iki paragrafın ortasına yeni bir paragraf eklemek istiyorsanız bu iyi bir seçimdir.

Mevcut Bir Öğeyi Değiştir

Kullanarak mevcut bir öğeyi yeni oluşturulmuş bir öğeyle değiştirebilirsiniz. ile değiştirin() yöntem:

$('#eski').replaceWith("
Yeni paragraf
");

Mevcut Bir Öğenin Etrafına Sarın

Bu oldukça nadir bir kullanım durumudur, ancak mevcut bir öğeyi yeni bir öğeye dahil etmek isteyebilirsiniz. Örneğin, bir kod içine sarmak istediğiniz öğe ön:

$('code#n1').wrap("
")

Yarattığınız Öğeye Erişme

NS $() işlev bir jQuery nesnesi döndürür. Bu, takip işlemleri için kullanışlıdır:

$el = $("p");
$('gövde').append($el);

Kural olarak, jQuery programcılarının jQuery değişkenlerini genellikle başında dolar işaretiyle adlandırdığını unutmayın. Bu sadece bir adlandırma şemasıdır ve doğrudan ilgili değildir. $() işlev.

jQuery Kullanarak Öğe Oluşturma

DOM'yi yerel JavaScript işlevlerini kullanarak değiştirebilseniz de, jQuery bunu yapmayı çok daha kolaylaştırır. DOM hakkında iyi bir anlayışa sahip olmak hala çok faydalıdır, ancak jQuery onunla çalışmayı çok daha keyifli hale getirir.

Web Sitelerinin Gizli Kahramanı: DOM'yi Anlamak

Web tasarımını öğreniyor ve Belge Nesne Modeli hakkında daha fazla bilgiye mi ihtiyacınız var? İşte DOM hakkında bilmeniz gerekenler.

Sonrakini Oku

Yazar hakkında