Javascript öğesi öznitelik değerleri. Öğe özniteliklerini jQuery ile değiştirme. Girilen veri formlarının doğruluğunun doğrulanması

Derste, koçana bakılacak: Belge Nesne Modeli (javaScript DOM) - dinamik HTML'nin temeli, nesnelere erişim yöntemlerine bakılacak ve javascript işleme yöntemleri

• Genel olarak nesne- bu, ana modülün anlamsız değerini değiştirecek ve adlarının arkasındaki değeri kaydetmenize ve kazanmanıza izin verecek bir veri depolama türüdür.

Daha önce, javascript anlayışını zaten öğrenmiştik.

• Javascript, DOM ile aynı anlayışa sahiptir Belge Nesnesi Modeli- Web tarafının nesne modeli (html tarafı).
• Belge etiketleri veya göründüğü gibi belge düğümleri tüm nesnedir.

Diyagramlara bir göz atalım JavaScript'te nesne hiyerarşisi ve bunlar, de ієrarchії bu konunun belge nesnesinin analizinde bulunur.

Komut dosyası öğesi aşağıdaki özelliklere sahiptir:

popo:

JavaScript'te belge nesnesinin yetki ve nitelikleri

Belge nesnesi web sayfasıdır.

Önemli: JavaScript'te bu nesne yöntemlerini güçlendirmek için, örneğin diğer nesnelerle çalışırken olduğu gibi, nokta gösterimi:

tobto. nesnenin kendisi bir başlangıçla yazılır, daha sonra boşluksuz bir nokta i ile gücü belirtilir, öznitelik chi yöntemi

Örneğe bakalım:

popo: html-belge є etiketine izin ver

yeni randevular css stili(iki stilde gezinin, diğeri ayar için gereklidir):

Gerekli:

1. nesneye yeni bir güç verin, ona değer verin ve ona değer katın;
2. nesnenin özniteliğinin değerini girin;
3. bir nesne özniteliğinin değerini değiştirin.

Nasıl javascript'i hareket ettir, sonra nesne tahmin edilebilir ve güç olup olmadığı veya herhangi bir anlamı olup olmadığı ayarlanabilir. Ale koçan için nesneye erişim sağlıyoruz (nesneye erişim hakkında bu derste aşağıda rapor edilecektir):

// Nesne kimliğine erişim gerekli var element = document.getElementById("MyElem"); element.myProperty = 5; // Güç uyarısı ata(element.myProperty); // İletişim kutusunda görüntülenir

Bir sonraki görev, nesnenin niteliği ile bağlantılıdır. nesne özniteliği- Tse etiketi özellikleri. Tobto. Bizim görüşümüz iki tanedir: küçük değerlere sahip class niteliği ve id niteliği. Class özelliğinin hemen arkasında.

Şimdi nesnemizin özniteliğinin değerini görmek için JavaScript'i kullanın. Kod suçlu ama sonrasında ana etiketler:

// Nesne kimliğine erişim gerekli var element = document.getElementById("MyElem"); alert(element.getAttribute("sınıf")); // İletişim kutusunda görüntülenir

І kalan görev: özelliğin değerini değiştirin. Kimler için stil hazırlıklarımız var büyük. class niteliğinin değerini stile değiştirin:

// Nesne kimliğine erişim gerekli var element = document.getElementById("MyElem"); element.setAttribute("sınıf","büyük");

Sonuç olarak, öğemiz mavi renkle (büyük sınıf) daha büyük ve daha popüler hale gelecektir.

Şimdi özniteliklerle uygulamalı çalışma yöntemlerinin sunumuna bir göz atalım.

JavaScript'te Nitelik Yöntemleri

Nitelikler eklenebilir, görülebilir ve değiştirilebilir. Hangi özel yöntem için:

• Bir öznitelik ekleme (yeni bir değer için ayar):

getAttribute(öznitelik)

• Bu özelliğin varlığı yeniden kontrol ediliyor:

removeAttribute(öznitelik)

Niteliklerle çalışmanın farklı yolları

popo: Değer özelliği için bir değer girin Metin bloğu.

• Hadi є metin bloğu:

varelem = document.getElementById("MyElem"); var x = "değer";

• Bir özniteliğin değerini almanın birkaç yoluna bir göz atalım (onu görüntülemek için alert() yöntemini kullanın):

elem.getAttribute("değer")

elem.getAttribute("değer")

2. nokta gösterimi:

elem.attributes .value

elem.attributes.value

3. parantez gösterimi:


Özellik değerlerini ayarla dekilcoma'yı aşağıdaki şekillerde de yapabilirsiniz:

var x = "anahtar"; // anahtar - öznitelik adı, değer - öznitelik değeri // 1. elem.setAttribute("anahtar", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[" tuşu "] = "val" // 4. elem.setAttribute(x, "val")

Gövde öğesinin yetkisi

Belge nesnesi aracılığıyla, çok fazla güçle belgenin gövdesine - gövde etiketine - gidebilirsiniz.

Örneğin, gövde etiketinin iki gücü vardır: müşterinin penceresinin genişliği ve yüksekliği:

Document.body.clientHeight - istemci penceresi yüksekliği
Document.body.clientWidth - istemci penceresi genişliği


Ve daha da önemlisi, daha önce de belirttiğimiz gibi, özel yöntemlerin yardımıyla belge nesnesi aracılığıyla, etiketler gibi sayfanın tüm öğelerine erişim sağlanır.

Önemli: Yan etiketlere böyle bir geçişle, komut dosyası, gövdeyi kapatmadan önce öğe ağacında olmaktan suçludur! Komut dosyası bitene kadar, tüm öğeler tarayıcı tarafından ekranda hala işaretlenebilir.

js8_1 yöneticisi. Tarayıcı penceresinin genişletilmesiyle ilgili bilgilere bakın: örneğin, "tarayıcı penceresini 600 x 400 yeniden boyutlandır"

JavaScript'te Belge Öğelerine Erişme

Nesnelere erişim veya nesneleri aramak için birkaç seçenek aktarıldı:

1. Kimliğe göre ara(veya getElementById yöntemi), belirli bir öğeyi döndürün
2. Bir etiket adı arayın(veya getElementsByTagName yöntemi), öğe dizisini döndürün
3. name özniteliği için sorgu(veya getElementsByName yöntemi), öğe dizisini döndürün
4. batkivsky öğeleri aracılığıyla(Bütün güzellikleri kaldırarak)

Raporun seçeneklerinden skine bir göz atalım.

1. id özelliği aracılığıyla bir öğeye erişme

Sözdizimi: Document.getElementById(id)

getElementById() yöntemi, veri erişimi için alınabilen öğenin kendisini döndürür

popo: Yan tarafta, id="cake" özniteliğine sahip bir metin alanı vardır:

...

Gerekli



✍ Çözümler:

alert(document.getElementById("kek").değer); // "keklerin yanına" dön

Nesneye canavarı fark ederek bunları kendiniz canlandırabilirsiniz. değişim yoluyla:

var a=document.getElementById("kek"); uyarı(a.değer); // value niteliğinin değerini görüntüleyin, yani. "keklerde" metni

Önemli: Senaryo suçlu ama etiketten sonra obov'yazkovo!

Sözdizimi:
document.getElementsByTagName(isim);

popo: Yan tarafta, value niteliğine sahip bir metin alanı (giriş etiketi) vardır:

...

Gerekli: değer özelliğinin değerini girin

getElementsByTagName yöntemi, tüm girdi öğelerine (yani. bir dizi elemana girdi), bu öğenin yan tarafta tek olması için gezinin. Belirli bir öğeye, örneğin ilk öğeye geri dönmek için, dizini belirtmeniz gerekir (dizi, sıfır dizininden başlar).

✍ Çözümler:

Dizinden sonra belirli bir öğeye geri dönün:

var a =document.getElementsByTagName("input"); uyarı(a.değer); // "keklerin yanına" dön

Sözdizimi:
document.getElementsByName(isim);

getElementsByName("...") yöntemi döner nesne dizisi, bunun için name niteliği, yönteme parametre olarak belirtilen değerden daha eskidir. Yanda bu tür yalnızca bir öğe olduğundan, yöntem diziyi aynı şekilde döndürür (yalnızca tek bir öğeyle).

popo: belge є öğesinde kabul edilebilir:

var element = document.getElementsByName("MyElem"); uyarı(eleman.değer);

AT bu popo birinci eleman, ancak dizinin sıfır elemanına zdіysnyuєtsya.

Önemli: Yöntem, yalnızca name özniteliğinin belirtime aktarıldığı bu öğelerle çalışır.: tüm etiketler form , input , a , select , textarea ve diğer, daha yaygın olanlardır.

Document.getElementsByName yöntemi, div, p ve benzeri türündeki diğer öğelere uygulanamaz.

Javascript düğmelerine erişim ek güç alt düğümleri için vydbuvaєtsya. Nesne-batkovі'yı yerleştirme gücü.

Document.getElementById (üst) .childNodes ;

Document.getElementById(parent).childNodes;

Container - div etiketine yerleştirilen görüntünün butt, de etiketlerine bakalım. Bu şekilde, div etiketi bu görüntülerin babasıdır ve img etiketlerinin kendileri açıkça div etiketinin başlıklarıdır:

Şimdi görünür modsal vikno büyük harflerden dizideki elemanların anlamı, tobto. img etiketleri:

var myDiv=document.getElementById("div_for_img"); // konteynere git baba var childMas=myDiv.childNodes; // için başlık dizisi (var i = 0; i< childMas.length;i++){ alert(childMas[i].src); }

Lütfen bir dizi alanın öğelerini yinelemek için bir döngüyü manuel olarak seçmeniz gerektiğini unutmayın. Tobto. uygulamamızın bir döngüsü var:

For (var a in childMas)( alert(childMas[a].src); )

Bakmanın diğer yolları örnek üzerinde:

Giriş:

... // öğelere erişmek için gereksiz eski yöntemler: alert(document.forms.name); // f uyarı(document.forms.elements.type); // metin uyarısı(document.forms.elements.options.id); // o2 uyarısı(belge.f.b.type); // buton uyarısı(document.f.s.name); // ss uyarısı(document.f.s.options.id); // o2 // elemanlara erişim için kestirme yöntemler alert(document.getElementById("t").type); // text alert(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...

popo: Html belgeleri için bir düğme ve bir metin alanı oluşturun. Komut dosyasının yardımı için düğmenin arka planını değiştirin (düğmenin style.backgroundColor öğesinin gücü) ve "Vitayu!" metin alanında (özellik değeri).

HTML Kodu:

document.getElementById("t1").value = "(!LANG:(!LANG:Merhaba!""; document.getElementById("b1").style.backgroundColor = "red";!}!}

Seçenek 2:

document.getElementById("t1").setAttribute("değer","Merhaba!"); document.getElementById("b1").style.backgroundColor = "kırmızı";

Görev Js8_2. Küçük resim görüntüsüne uygun şekilde metin alanı etiketleri oluşturun. Belirli (belirtilen küçük) bir kimlik öznitelik değeri verin. Komut dosyasının yardımı için, tüm sayısal alanlara (sayısal değerleri ileten) "0" değerini ekleyin.

Girilen veri formlarının doğruluğunun doğrulanması

Chi alanı boş bırakmadı mı?

Danim'e güvenilemez. Coristuvachi'nin їх їх verilerinin giriş saatinde olduğunu kabul etmek mantıksız. Yani chogo'nun javascript kazanması gerekiyor.

revize etmek için metin alanı boş(örneğin, bir anket olsun, verileri doğru verilerle doldurduktan sonra), ardından değer noktasına dönün. Gücün anlamına gelince, boş bir satır ("") var, o zaman bu coristuvach hakkında bir şeyler söylemek gerekiyor.

if(document.getElementById("name").value=="")

Ayrıca, bir komut dosyası olmadan da yapabilirsiniz. Bir metin alanının giriş etiketi bir model niteliğine sahip olabilir. Belirli bir metin alanı formundaki verilerin yeniden kontrol edilmesi sırasında bu değerin düzenli olarak nasıl gösterildiği. nitelik nedir model, metin alanı doğru bir şekilde doldurulana kadar form uygulanmaz.
Örneğin, yeniden doğrulama için chi alanı boş bırakmadı:

Metin sayısal değeri değiştir: isNaN işlevi

Hangi alan aktarılıyor sayısal bir değer girme, ve metni girmek için isNaN işlevini seçmek gerekir (İngilizce'den. "Chi bir sayı değil mi?"), girilecek veri türünü kontrol etmeniz ve sayısal veri yerine metin verisi girdiğinizde true değerini almanız için.

dahil true olarak ayarlanırsa, konuşmacıya biçimin doğru olduğunu söylemek gerekir, böylece. sayı.

if(isNaN(document.getElementById("dakika").değer))( sayısal veri girme istemi);

Doldurulacak öğeler içeren bir sayfa verildi:


Html kodunun snippet'i:

Gerekli:
İki metin alanını doldurmanın doğruluğunu kontrol etmek için parçanın boş alanını aşağıda genişletilmiş koda ekleyin: ben(id="ad") hvilin(id="dakika"). Doğru biçimin sayısal alanı (isNaN) doldurduğu boş alanlar için Vykoristovyte yeniden doğrulaması boş ("").

* Vikonati görevi de ek yardım için metin alanlarının desen özniteliği için yardım için.

Komut dosyası snippet'i:

Daha önce geçen, katlanan zihinlere ilham vermek için kazandıkları kodda.

Sizin için yeni anlayış, düğmenin bir özeti olarak işlevin tıklanmasıdır:
onclick="placeOrder();"
Düğmeye tıklandığında placeOrder() işlevi çağrılır

Belirtilen öğede özniteliğin değerini ayarlar. bu öznitelik zaten var, değer güncellendi; wise, belirtilen ad ve değere sahip yeni bir öznitelik eklenir.

Sözdizimi

parametreler

Boolean öznitelikleri, gerçek değerlerinden bağımsız olarak öğede mevcutsa doğru olarak kabul edilir; bu işe yarar ancak standart değildir).

Dizeye özel bir değer atanmadığı için, null öğesinin beklediğinizden önce olması gerekmez.Bu nedenle, niteliği çalıştırmayı seçersiniz, removeAttribute() öğesini çağırın.

geri dönüş değeri

istisnalar

misal

Aşağıdaki örnekte setAttribute(), bir .

HTML

JavaScript

Bu iki şeyi gösterir:

• Yukarıdaki setAttribute() öğesine yapılan ilk çağrı, name niteliğinin değerinin "helloButton" olarak değiştirilmesini gösterir.
• Disable gibi bir Boolean öznitelik değeri ayarlamak için herhangi bir değer belirtebilirsiniz. Boş dize, öznitelik adı є önerilen değerlere sahiptir. Tüm mesele şu ki, öznitelik hiç mevcutsa, gerçek değerinden bağımsız olarak, değeri doğru kabul edilir . Bu değerin öznitelik girişlerinin varlığı önemsizdir. Disabled özniteliğinin değerini boş dizeye ("") ayarlayarak, disable öğesini true olarak ayarlıyoruz, bu da düğmenin devre dışı bırakılmasına neden oluyor.

Öğenin nitelikleriyle ilgilenen DOM yöntemleri:

Şartname

• DOM Düzey 2 Çekirdeği: setAttribute (DOM Düzey 1 Çekirdeği'nde sunulmuştur)

Tarayıcı Uyumluluğu

Bu taraftaki tabloların kompaktlığı, yapılandırma verilerinden üretilir. Verileriniz hakkında bilgi edinmek istiyorsanız, https://github.com/mdn/browser-compat-data adresine tıklayın ve bize bir çekme talebi gönderin.

GitHub'da uyumluluk verilerini güncelleyin

Efsane

Geko notları

setAttribute()'u belirli öznitelikleri, özellikle de XUL'deki değeri değiştirmek için kullanabilirsiniz, ancak öznitelik varsayılan değeri belirttiğinden tutarsız bir şekilde. Mevcut değerleri kazanmak veya değiştirmek için iktidarı kazanmak sizin suçunuzdur. Örneğin, Element.setAttribute() yerine Element.value etiketini kullanın.

Bu makalede, DOM-yetkilerini ve niteliklerini biliyoruz, kokuların nasıl göründüğünü ve bunları nasıl doğru şekilde uygulayacağımızı görebiliriz. JavaScript'in nitelikler üzerinde işlemler gerçekleştirmek için nasıl yöntemlere sahip olduğuna bir göz atalım.

Nitelik, DOM yetkilisine benziyor nasıl görünüyor?

Niteliklerin tümü, HTML kod öğelerine bireysel veriler ekleyebileceğimiz HTML varlıklarıdır.

Tarayıcı ilk satırı isterse, giden HTML kodunu alacaktır. Bu şaraptan sonra bu kodu genişletir ve aynı DOM ikame edicisinde olacaktır. İşlem saatinin altında Öğelerin HTML öznitelikleri DOM yetkisine dönüştürülür.

Örneğin, tarayıcı, saldıran bir HTML kod dizesini okurken, bu öğe için saldırgan bir DOM yetkisi oluşturur: id, className, src ve alt.

Zvernennya tsih yetkililerine JavaScript kodları nesnenin otoritesi olarak vykonuєtsya. Buradaki nesne bir düğüm (eleman) DOM'sidir.

Örneğin, üzerine gelinen öğe için DOM yetkisinin değerini almak ve değerini konsolda görüntülemek:

// Öğeyi kaldırma var brandImg = document.querySelector("#brand"); // öğenin DOM yetkisinin değerini konsol konsoluna kaydedin console.log(brandImg.id); // "marka" console.log(brandImg.className); // "marka" konsol.log(brandImg.src); // "/logo.png" console.log(brandImg.alt); // "site logosu"

Aslında, DOM yetkili adları, öznitelik adlarıyla eşleşmez. Bunlardan biri sınıf özelliğidir. Bu öznitelik, className öğesinin DOM gücünü ayarlar. Bu ayrım, sınıfın bir JavaScript anahtar sözcüğü olması, ayrılmış olması ve geçersiz kılınamamasından kaynaklanmaktadır. Rozrobnikler aracılığıyla standart, tutarlılık için farklı bir ad olarak vikoristovuvaty olarak değiştirildi ve className seçildi.

Bunun nedenlerinin bir başka yönü de belgenin çıktı koduna verilen HTML özniteliklerinin DOM yetkisinde çevrilmesinin birebir yapılmasına gerek olmamasıdır.

Bir öğenin standart olmayan bir HTML özniteliği varsa, DOM'yi doğrulayan otorite oluşturulmaz.

Diğer bir neden ise, belirli HTML niteliklerinin ve benzer DOM yetkilerinin anlamlarının farklı olabilmesidir. Tobto. bir özniteliğin bir anlamı olabilir ve aynı temelde oluşturulan DOM yetkisinin başka bir anlamı olabilir..

Bu özelliklerden biri kontrol edilir.

Kontrol edilen HTML özniteliğinin değeri bu özel tipe- Boş sıra. Ale, bu DOM niteliğini true olarak ayarlama gücü. Çünkü doğru ayarlama standardının kurallarına göre, HTML kodunda hangi özniteliğin yeterli olduğu bilmecesi yeterlidir ve eğer öyleyse, değer orada olduğu sürece önemli değildir.

Onay kutusu tipine sahip giriş öğesi için HTML kodunda kontrol edilen niteliği belirtmezseniz, DOM'deki yenisi için her şey kontrol edilen güce ayarlanacaktır, aksi takdirde yanlış olacaktır.

Kahretsin, JavaScript, niteliklerle çalışmanıza izin verir. Hangi DOM API için özel yöntemler vardır. Ale їх onları yenmek, sadece onlarla gerçekten pratik yapmanız gerekiyorsa daha iyidir.

Bir öğenin DOM gücünü değiştirirsek, varsayılan özniteliğin de değişeceğini bilmeniz gerektiğinde. Tarayıcılardaki tüm süreç birer birer sabitlenmez.

DOM gücü ve nitelikler arasındaki ana güçler:

• özniteliğin değeri bir satırdır ve DOM-yetkilisinin değeri tek tip bir veridir (bağlayıcı bir satır değil);
• öznitelik adı kayıt defterinden bağımsızdır ve DOM yetkilisi kayıt defterinden bağımsızdır. Tobto. HTML kodunu yazabiliriz, örneğin, Id , ID і vb. Gibi HTML kimliği özniteliği. Aynısı, bize özel olarak belirtildiği gibi, özniteliğin adı ile aynı olmalıdır. JavaScript yöntemleri onunla çalışmak için. Ale'den DOM-yetkisine, sadece kimlik için dönebiliriz, farklı bir şekilde değil.

Bir öğenin DOM gücüyle çalışma

Daha önce atandığı gibi JavaScript öğelerinin gücüyle çalışmak, nesnelerin gücüyle olduğu gibi daha önemlidir.

Ancak şarkı söyleyen unsurun kalitesine ulaşmak için onu koçandan çıkarmanız gerekir. Örneğin, querySelector yardımcısını kullanarak bir DOM öğesini JavaScript'ten ve örneğin querySelectorAll yardımcısını kullanarak bir DOM öğeleri koleksiyonunu ayıklayabilirsiniz.

İlk popo olarak, bir sonraki HTML öğesine bakalım:

Yeni analiz temelinde, yeni bir DOM otoritesi oluşturmak, bunların değiştirilmesi ve yenilerinin eklenmesi mümkündür.

DOM yetkililerinin anlamını okumak:

// DOM güç değerini al id var alertId = alert.id; // "alert" // DOM yetki değerini al className var alertClass = alert.className; // "alert alert-info" // DOM yetki değerini alır title var alertId = alert.title; // "İpucu metni..."

DOM yetkililerinin değerini değiştirin:

// DOM güç değerini değiştirmek için, yeni bir değer ayarlamanız yeterlidir. alert.title = "(!LANG:(!LANG:Yeni ipucu metni)"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}!}

DOM Yetkilileri Ekleme:

Alert.lang="ru"; // "ru" olan lang değerinin otoritesini ayarlayın alert.dir = "ltr"; // dir'nin gücünü "ltr"ye eşitle

Popo, örneğin konsolda, sınıfların tüm değerleri, örneğin yandaki p öğelerinde görüntülenir:

Var paragraflar = document.querySelectorAll("p"); for (var i = 0, uzunluk = paragraflar. uzunluk ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

İçerik sınıfıyla tüm öğeleri ekleyebileceğimiz bir örnek, "ru" değerleriyle lang'ın yetkisi:

Var içerik = document.querySelectorAll(".content"); for (var i = 0, uzunluk = içerik.uzunluk; i< length; i++) { contents[i].lang = "ru"; }

Öğe özellikleri ve bunlarla çalışmak için yöntemler

Nitelikler ilk önce HTML kodunda ayarlanır. Kokusu sıcak ve pov'yazan, otoriteye sahip bir şarkı söyleme derecesine sahip, ama aynı değil. Çoğu zaman, yetkiyle ve gerekirse niteliklerden önce yalnızca bir kez pratik yapmak gerekir.

Niteliklerin değerleri, DOM yetkilileri temelinde, zaten daha fazla atandığı için, her zaman arka arkaya.

Niteliklerle ilişkili belirli işlemler için JavaScript, işte bazı yöntemler:

• .hasAttribute("im'ya_attribute") – öğede belirtilen özelliğin varlığını kontrol eder. Değiştirilen öznitelik öğe üzerindeyse, bu yöntem true olur, aksi takdirde false olur.
• .getAttribute("özellik adı") – öznitelik değerini alın. Belirtilen öğe yoksa, bu yöntem boş bir satır ("") veya null döndürür.
• .setAttribute("attribute_name", "attribute_value") – öğenin atanan değerinden belirtilen özniteliği ayarlar. Bir öğeye bir nitelik atarsanız, bu yöntem yalnızca değerini değiştirir.
• .removeAttribute("im'ya_attribute") - nitelik değerlerini öğeden kaldırır.

Bir göz atalım.

duje popo değer özelliği ile.

Nitelikli örnek

Değer niteliğinin değerini ve değerin DOM gücünü alıyoruz:

// name.getAttribute("value") öğesinin değer özniteliğinin değerini alın; // "Bob" // DOM güç değeri alınan değer name.value; // "Bob" // Değer niteliğinin değerini değiştirin, yeni bir değer belirleyin name.setAttribute("value", "Tom"); // "Tom" // DOM güç değeri değerini al name.value; // "Tom"

İyi bir nedenle, value niteliğini değiştirdiğinizde, tarayıcı otomatik olarak yeni DOM değeri değerine değişir.

Şimdi, her şeyden önce, bunu çözelim ve DOM yetkisinin değerini değiştirelim ve niteliğin değerini değiştirelim:

// yeni DOM yetki değeri ayarla name.value = "(!LANG:(!LANG:John)"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}!}

Bu açıdan, özniteliği değiştirmeden DOM yetkisini değiştirmemeniz gerektiği açıktır. Tobto. Bir şekilde, değerin DOM gücünü değiştirmek, varsayılan özniteliği değiştirmez..

Metni bu alana girerseniz aynı şekilde göreceksiniz. DOM baskın değeri, varsayılan değeri değiştirecek ve özniteliğin diğer yolu, örneğin setAttribute yardımcı yönteminden sonra değiştirilecektir.

Bu popo, DOM-yetkilileriyle çalışmanın daha doğru olduğunu ve sadece gerekliyse bir özniteliğe gidilmesi gerektiğini gösteriyor.

Noktaya gidin, değerin ilk değerini almanız gerekiyorsa, HTML'ye koyduğumuz gibi, güç kazanabilirsiniz. value niteliğinin varsayılan değerini geçersiz kılma gücüne defaultValue adı verilir.

Name.defaultValue; // Tom

Bir yay buttstock daha, ama şimdi href özelliği ile.

href özelliğine sahip hisse senedi

HTML'ye eklendiği için mesajın anlamını almamız gereken bir örnek.

Farklı anlamlara sahip olmak için href niteliği ve href'in DOM gücü kimin kullanımıdır. href özelliğinde - koda eklediklerimiz ve DOM yetkilisi - yeni URL. Bu fark, tarayıcının href değerini tam URL'ye dönüştürmekten nasıl sorumlu olduğuna bağlı olarak standart tarafından belirlenir.

Niteliklerde olanları hesaba katmamız gerektiğinden, getAttribute yöntemi olmadan getAttribute yöntemi olmadan yapamayız.

Son olarak, seçilen özniteliğe bir göz atalım.

Seçilen özniteliğe sahip popo

Seçilen seçeneğin değerini nasıl alabileceğinizin gösterildiği bir örnek seçin:

işaret yok 1 2 3 4 5

Select öğesindeki seçeneklerin değerini nasıl seçebileceğinizi gösteren bir örnek:

işaret yok 1 2 3 4 5

Niteliklerle çalışmanın başka bir yolu (güç nitelikleri)

JavaScript'te, dış görünüm öğesi, bir NamedNodeMap nesnesi gibi tüm öznitelikleri alabileceğiniz, özniteliklerin gücüne sahiptir.

Tsey yoluÖrneğin, öğenin tüm özelliklerini gözden geçirmeniz gerekiyorsa, zastosuvannya'yı biliyor olabilirsiniz.

Koleksiyonun tsієї özniteliğine erişim, dizini veya yardımcı yöntem öğesi tarafından verilir. Koleksiyonun niteliklerinin gözden geçirilmesi 0'dan gerçekleştirilir.

Örneğin, mevcut öğenin tüm özelliklerini konsolda görüntüleriz:

JAVASCRIPT'İ SEVİYORUM

Kırım, pratsyuvati s tsієyu koleksiyonu da bu tür yöntemlerin yardımıyla mümkündür:

• .getNamedItem("named_attribute") – atanan özniteliğin değerini alır (öznitelik öğeye atanmadığı için sonuç boş olur).
• .setNamedItem("attribute_item") – öğeye yeni bir nitelik ekleyin veya yenisinin değerini güncelleyin. Bir öznitelik oluşturmak için, öznitelik adını parametre olarak iletilmesi gereken document.createAttribute() yöntemini kullanmanız gerekir. Nitelik oluşturulduktan sonra, değerin ek gücü için bir değer vermek gerekir.
• .removeNamedItem("attribute_name") – öznitelik değerlerini öğeden kaldırır (öznitelik kaldırma döndürmesinin bir sonucu olarak).

getNamedItem, setNamedItem ve removeNamedItem yöntemleri aracılığıyla niteliklere sahip alt yapı:

JAVASCRIPT'İ SEVİYORUM

müdür

• id niteliğinin ayarlanabilmesi için belgenin öğelerini konsola yazın.
• Bir özniteliği olmadığı için yandaki tüm resimlere başlık özniteliğini ekleyin. Özniteliğin değerini alt özniteliğin değerine eşit olarak ayarlayın.

Ayarlanan bir bağlama oluşturabilirsiniz bağlamalar, dikkatli şarkı söylemenin anlamının bir yankısı olarak mantıksal anlam chi eklemeden önce nitelikler değil. popo

Ko.bindingHandlers.attrIf = ( güncelleme: function (element, valueAccessor, allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (göster) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) else ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(element).removeAttr(k); ) ) ) ) ); bağlantı

Sadece @gbs'ye cevap vermek istiyorum ama yapamıyorum. Kararım iki annenin aynı olması olurdu. HTML öğesi: birini öğeye eklemek için bir özniteliği olan, başka bir nakavt olmadan. Ayrıca tse zvichayne ochіkuvannya'yı da biliyorum, ama daha etkili bir çözüme ne dersiniz?

Ödevlerle ilgili bu ders, jQuery'deki öğelerin niteliklerini okur ve değiştirir.

Nitelikler, tezin öğelerine atanan bir isim / değer çiftidir. Nitelikleri uygula ( href, Başlık, kaynak, sınıf):

• attr() nitelikleri okumak, eklemek ve değiştirmek için
• kaldırAttr() görsel nitelikler için

Bu derste, attr() ve removeAttr() yöntemleriyle bir robot seçilir.

CSS sınıflarıyla çalışmak için başka bir derste anlatıldığı gibi özel jQuery yöntemleri vardır. jQuery'de bir proje üzerinde çalışırken, genellikle CSS sınıflarını manipüle etmeniz gerekir ve class niteliği birkaç sınıf adının yerini alabilir, bu da diğer niteliklere kıyasla onunla çalışmayı önemli ölçüde kolaylaştırır.

Giriş alanlarının değerleriyle çalışmayı seçerseniz, yalnızca value niteliği ile çalışmayan val() yöntemini kullanmak daha iyidir, aynı zamanda seçilen öğeler için değerleri okuyabilir ve ayarlayabilirsiniz. seçim listesinde.

Bir özelliğin değerini okuma

Element öznitelik değerini okumak basittir. Öğeyi almak için jQuery nesnesinin attr() yöntemini çağırmak ve ona okunacak özniteliğin adını iletmek gerekir. Bir özelliğin değerini döndürme yöntemi:

// Öğenin "href" özniteliğinin değerini göster # mylink alert($("a#mylink").attr("href"));

jQuery nesneniz birkaç öğe alacaksa, attr() yöntemi kümedeki yalnızca ilk öğenin öznitelik değerini okur.

Niteliklerin değerini belirledik

attr() yöntemi, öznitelik değerini eklemek veya değiştirmek için de ince ayar yapılabilir:

• Bir özellik gibi bilmiyorum elemanda, gelecekte bağışlar Ve size belirli bir değer verilecektir.
• Bir özellik gibi zaten biliyorum, yoga anlamı olacak güncellenmiş değerleri ayarlayın.

Öznitelikleri eklemek veya değiştirmek için attr() yöntemini değiştirmenin üç yolu vardır:

1. Herhangi bir öğenin (veya bir dizi öğenin) niteliklerini ekleyebilir/değiştirebilirsiniz.
2. Öznitelik adları ve değerleri haritasının ek ayarı için öğe (veya öğeler) için öznitelik numarasını bir kerede ekleyebilir/değiştirebilirsiniz.
3. ek döndürme işlevi için çıkartma öğeleri için dinamik olarak tek bir öznitelik ekleyebilir/değiştirebilirsiniz.

Bir özellik ayarla

Bir öğenin özniteliğini ayarlamak veya değiştirmek için, atanan öznitelik adından ve değerinden attr() yöntemini çağırmanız gerekir. Örneğin:

// #myLink öğesinin "href" özniteliğinin değerini "http://www.example.com/" olarak değiştirin // ("href" özniteliği mevcut olmadığı için otomatik olarak oluşturulacaktır) $( "a#myLink"). attr("href", "http://www.example.com/");

Aynı özelliği çıkartma öğeleri için de ayarlayabilirsiniz:

Seçilen karttan bir dizi özellik yüklüyoruz

Ek bir kart için bir veya birkaç öğe için aynı anda bir dizi özellik ayarlayabilirsiniz. Ad/değer çiftlerinin listesi şöyle görünür:

(im'ya1: değer1, im'ya2: değer2, ...)

Basamak poposu, img öğesi için aynı anda ayarlanmış iki özniteliğe sahiptir:

// img öğesi için "src" ve "alt" özniteliklerini ayarlayın #myPhoto $("img#myPhoto").attr(("src": "mypic.jpg", "alt": "Fotoğrafım"));

Yapıştırma öğeleri için nitelikler de ayarlayabilirsiniz:

// Tüm img öğeleri için "src" ve "alt" özniteliklerini ayarlayın $("img").attr(( "src": "mypic.jpg", "alt": "Fotoğrafım"));

Döndürme fonksiyonunun seçiminin özelliklerini belirledik

Alternatif olarak, attr() yöntemine bir öznitelik değeri iletmek için, onu bir geri çağırma işlevine iletebilirsiniz. Bu şekilde, öznitelik değerine veya diğer yetkilere sahip öğenin konumuna bağlı olarak çıkartma öğeleri için bir özniteliğin değerini dinamik olarak ayarlayabilirsiniz.

Döner fonksiyon iki argüman alabilir:

• Seçilen akış öğesinin kümeye konum indeksi (sıfırdan başlar)
• akış seçili öğe için eski öznitelik değeri

Özelliğin değerini değiştirmek için işlev tarafından döndürülen değer geçersiz kılınır.

Öğenin geçerli konumu o eski öznitelik değeriyse, işleviniz yardım için öğenin kendisine erişebilir. anahtar kelime Bugün nasılsın. Bu şekilde, herhangi bir güce veya tersine çevirme işlevine sahip elemanın yöntemine erişim elde etmek mümkündür.

Popo, alt niteliğini görüntü konumunda yan taraftaki dış görünüm görüntüsüne ve src niteliğine eklemek için ters bir işleve sahiptir:

İlk görüntünün kodunun ardından, anne "Bebek 1: fotom.jpg" değerine sahip alt özniteliğe ve diğer resim "Bebek 2: fotoğrafınız.jpg" değerine sahip alt özniteliğe sahiptir.

görünürlük özelliği

Bir öğeden bir özniteliği kaldırmak için, kaldırılacak özniteliğin adını ileterek removeAttr() yöntemini çağırmanız gerekir. Örneğin:

// #myLink öğesinden "title" özniteliğini kaldırın $("a#myLink").removeAttr("title");

Bir dizi öğeyi kaldırmak için bir jQuery nesnesindeki removeAttr() yöntemini de çağırabilirsiniz. RemoveAttr() yöntemi, verilen öğelerden bir özniteliği kaldırır:

// "title" özniteliğini setten kaldırın $("a").removeAttr("title");

Özet

Bu eğitim için jQuery öğesi niteliklerinin gücüne baktık:

• Nitelik değerlerini okuma
• Bir öznitelik ayarlama
• Aynı anda birkaç farklı özellik yükleme
• için kötü işlev dinamik kurulum bir dizi öğe için niteliklerin değeri
• Bir öğeden nitelikleri görüntüle