jQuery - Öznitelikler

DOM öğeleri söz konusu olduğunda değiştirebileceğimiz en temel bileşenlerden bazıları, bu öğelere atanan özellikler ve niteliklerdir.

Bu özniteliklerin çoğu JavaScript aracılığıyla DOM düğüm özellikleri olarak kullanılabilir. Daha yaygın özelliklerden bazıları şunlardır:

className
tagName
id
href
title
rel
src

Bir görüntü öğesi için aşağıdaki HTML biçimlendirmesini göz önünde bulundurun -

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

Bu öğenin biçimlendirmesinde etiket adı img'dir ve id, src, alt, class ve title için biçimlendirme, öğenin her biri bir ad ve bir değerden oluşan özelliklerini temsil eder.

jQuery bize bir elemanın özniteliklerini kolayca değiştirmemizi sağlar ve bize o elemanın özelliklerini değiştirebilmemiz için ona erişim sağlar.

Öznitelik Değerini Alın

attr() yöntem, eşleşen kümedeki ilk öğeden bir özniteliğin değerini almak veya öznitelik değerlerini tüm eşleşen öğelere ayarlamak için kullanılabilir.

Misal

Aşağıda, <em> etiketinin başlık özelliğini getiren ve <div id = "böl"> değerini aynı değere ayarlayan basit bir örnek verilmiştir -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitelik Değerini Ayarlayın

attr(name, value) yöntem, geçirilen değeri kullanarak sarmalanmış kümedeki tüm öğelere adlandırılmış özniteliği ayarlamak için kullanılabilir.

Misal

Aşağıdaki basit bir örnek src bir resim etiketinin özelliği doğru bir konuma -

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

Stilleri Uygulama

addClass( classes )yöntemi, tanımlanmış stil sayfalarını tüm eşleşen öğelere uygulamak için kullanılabilir. Boşlukla ayrılmış birden çok sınıf belirtebilirsiniz.

Misal

Aşağıdaki basit bir örnek class bir para <p> etiketinin özelliği -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitelik Yöntemleri

Aşağıdaki tablo, nitelikleri ve özellikleri değiştirmek için kullanabileceğiniz birkaç faydalı yöntemi listelemektedir -

Sr.No.	Yöntemler ve Açıklama
1	attr (özellikler) Tüm eşleşen öğelerin özellikleri olarak bir anahtar / değer nesnesi ayarlayın.
2	attr (anahtar, fn) Eşleşen tüm öğelerde tek bir özelliği hesaplanmış bir değere ayarlayın.
3	removeAttr (ad) Eşleşen öğelerin her birinden bir özniteliği kaldırın.
4	hasClass (sınıf) Belirtilen sınıf, eşleşen öğeler kümesinin en az birinde mevcutsa doğru döndürür.
5	removeClass (sınıf) Tüm veya belirtilen sınıf (lar) ı eşleşen öğeler kümesinden kaldırır.
6	toggleClass (sınıf) Belirtilen sınıfı yoksa ekler, varsa belirtilen sınıfı kaldırır.
7	html () İlk eşleşen öğenin html içeriğini (innerHTML) alın.
8	html (değer) Eşleşen her öğenin html içeriğini ayarlayın.
9	Metin( ) Tüm eşleşen öğelerin birleşik metin içeriğini alın.
10	metin (değer) Tüm eşleşen öğelerin metin içeriğini ayarlayın.
11	val () İlk eşleşen öğenin giriş değerini alın.
12	değer (değer) <input> 'da çağrılırsa her eşleşen elemanın değer özniteliğini ayarlayın, ancak <select>' de geçilen <seçenek> değeriyle çağrılırsa, geçilen seçenek seçilir, onay kutusu veya radyo kutusunda çağrılırsa tüm eşleşen onay kutusu ve radyo kutusu işaretlenir.

Örnekler

Yukarıdaki sözdizimi ve örneklere benzer şekilde, aşağıdaki örnekler size farklı durumlarda çeşitli öznitelik yöntemlerini kullanma konusunda anlayış verecektir -

İşte farklı durumlarda öznitelik yöntemlerinin tam listesi -

Sr.No.	Seçici ve Açıklama
1	$("#myID").attr("custom") Bu, myID kimliğiyle eşleşen ilk öğe için custom özelliğinin değerini döndürür.
2	$("img").attr("alt", "Sample Image") Bu, alt tüm görüntülerin özniteliğini yeni bir değer olan "Örnek Görüntü".
3	$("input").attr({ value: "", title: "Please enter a value" }); Tüm <input> öğelerinin değerini boş dizeye ayarlar ve ayrıca jQuery Örneğini dizeye ayarlar Lütfen bir değer girin .
4	$("a[href^=https://]").attr("target","_blank") Https: // ile başlayan href özelliğine sahip tüm bağlantıları seçer ve hedef özelliğini _blank olarak ayarlar .
5	$("a").removeAttr("target") Bu , tüm bağlantıların hedef özelliğini kaldırır .
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Bu, Gönder düğmesini tıklarken devre dışı bırakılan özniteliği "devre dışı" değerine değiştirir.
7	$("p:last").hasClass("selected") Bu, son <p> etiketinde ilişkilendirilmiş bir sınıf seçildiyse doğru döndürür .
8	$("p").text() Eşleşen tüm <p> öğelerinin birleşik metin içeriğini içeren dizeyi döndürür.
9	$("p").text("<i>Hello World</i>") Bu, eşleşen <p> öğelerinin metin içeriği olarak "<I> Merhaba Dünya </I>" öğesini ayarlar.
10	$("p").html() Bu, eşleşen tüm paragrafların HTML içeriğini döndürür.
11	$("div").html("Hello World") Bu, eşleşen tüm <div> öğelerinin HTML içeriğini Hello World olarak ayarlar .
12	$("input:checkbox:checked").val() İşaretli bir onay kutusundan ilk değeri alın.
13	$("input:radio[name=bar]:checked").val() Bir dizi radyo düğmesinden ilk değeri alın.
14	$("button").val("Hello") Eşleşen her öğenin <button> değer özniteliğini ayarlar.
15	$("input").val("on") Bu, değeri "açık" olan tüm radyo veya onay kutusu düğmesini kontrol eder.
16	$("select").val("Orange") Bu, Turuncu, Mango ve Muz seçenekleriyle bir açılır kutuda Turuncu seçeneğini seçecektir.
17	$("select").val("Orange", "Mango") Bu, Orange, Mango ve Muz seçenekleriyle bir açılır kutuda Orange ve Mango seçeneklerini seçecektir.