jQuery'de Element Oluşturmayı Öğrenin

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 öğeyi HTML etiketlerinin DOM karşılığı olarak düşünün.

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.



eski bir bilgisayarla yapılacak harika şeyler

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 eklemeye 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:

$('
  • one
  • two
  • three
')

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

$(' my hometown')

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 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

Öğ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

$('body').append($('

Hello, world

'));
$(document.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('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

    Ö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:

    $('#old').replaceWith('

    New paragraph

    ');

    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 için :

    $('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');  
    $('body').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.
      Paylaş    Paylaş      Cıvıldamak      E-posta      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       İlgili konular  
       
    • Programlama
      •  
    • Web Geliştirme
      •  
    • jQuery
      •  
      Yazar hakkında   Bobby Jack(58 Makale Yayımlandı)      
    Bobby, yirmi yılı aşkın bir süredir yazılım geliştiricisi olarak çalışan bir teknoloji tutkunu. Oyun konusunda tutkulu, Switch Player Magazine'de İnceleme Editörü olarak çalışıyor ve çevrimiçi yayıncılık ve web geliştirmenin tüm yönleriyle ilgileniyor.
    Bobby Jack'dan Daha Fazla
    Haber bültenimize abone ol
     
    Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
    Abone olmak için buraya tıklayın