JavaScript atributini qo'shish. JQuery -da element atributlarini manipulyatsiya qilish

Dars mavzuning boshlanishini qamrab oladi: hujjat ob'ektining modeli (javaScript DOM) dinamik HTML asosidir, ob'ektlarga kirish usullari o'rganiladi va JavaScript hodisalarini qanday boshqarish kerak.

• Umuman ob'ekt Ko'p qiymatlarni umumiy modulga birlashtirgan va talabga binoan qiymatlarni nomlari bo'yicha saqlash va olish imkonini beradigan kompozitsion ma'lumotlar turi.

Avvalroq, biz allaqachon kontseptsiya bilan JavaScript -da tanishishni boshlaganmiz.

• JavaScript -da DOM kabi narsa bor - Hujjat obyekti modeli- veb -sahifaning ob'ekt modeli (html sahifalari).
• Hujjat teglari yoki ular aytganidek, hujjat tugunlari uning ob'ektlari hisoblanadi.

Diagrammani ko'rib chiqaylik JavaScript -da ob'ektlar ierarxiyasi va bu mavzuda muhokama qilinadigan hujjat ob'ekti ierarxiyada.

Skript elementi atributlarga ega:

kechiktirish (sahifaning to'liq yuklanishini kutish).

Misol:

JavaScript -dagi hujjat ob'ektining xususiyatlari va atributlari

Hujjat ob'ekti veb -sahifani ifodalaydi.

Muhim: Boshqa ob'ektlar singari javaScript -da ob'ektning xususiyatlari va usullariga kirish uchun, nuqta belgisi ishlatiladi:

o'sha. Birinchidan, ob'ekt o'zi yoziladi, keyin uning xususiyati, atributi yoki usuli nuqta va bo'sh joysiz ko'rsatiladi

object.property object.attribute object.method ()

Keling, bir misolni ko'rib chiqaylik:

Misol: html hujjatiga teg bo'lsin

va u uchun belgilangan CSS uslubi (hatto ikkita uslub, ikkinchisi vazifa uchun foydalidir):

Zarur:

1. ob'ektning yangi xususiyatini o'rnating, unga qiymat bering va bu qiymatni aks ettiring;
2. ob'ekt atributining qiymatini ko'rsatish;
3. ob'ekt atributining qiymatini o'zgartirish.

Keling, vazifani tartibda bajaraylik:
✍ Yechim:

Bu javascript tili bo'lgani uchun, ob'ektni ixtiro qilish va har qanday qiymatga ega bo'lgan har qanday xususiyatni o'rnatish mumkin. Lekin birinchi navbatda, ob'ektga kirishni olaylik (ob'ektga kirish bu darsda keyinroq batafsil muhokama qilinadi):

// o'z identifikatori bilan ob'ektga kirishni oling var element = document.getElementById ("MyElem"); element.myProperty = 5; // mulk ogohlantirishini tayinlash (element.myProperty); // muloqot oynasida ko'rsatish

Keyingi vazifa ob'ektning atributi bilan bog'liq. Ob'ekt atributi Bu tegning atributlari. Bular. bizning holatimizda ikkitasi bor: class atributining qiymati kichik va id atributi. Biz class atributi bilan ishlaymiz.

Keling, ob'ektimiz atributining qiymatini ko'rsatish uchun JavaScript kodini qo'shamiz. Kod joylashgan bo'lishi kerak keyin Asosiy teglar:

// ob'ektga o'z identifikatori orqali kirishni oling var element = document.getElementById ("MyElem"); ogohlantirish (element.getAttribute ("sinf")); // muloqot oynasida ko'rsatish

Va oxirgi vazifa: atribut qiymatini o'zgartirish. Buning uchun biz uslubni tayyorladik "Katta"... Class atributining qiymatini ushbu uslub bilan almashtiramiz:

// o'z identifikatori bilan ob'ektga kirishni oling var element = document.getElementById ("MyElem"); element.setAttribute ("sinf", "katta");

Natijada, bizning elementimiz kattalashadi va ko'k rangga aylanadi (katta sinf).

Keling, misolda atributlar bilan ishlash usullarini batafsil ko'rib chiqaylik.

JavaScript -da atributlar bilan ishlash usullari

Atributlarni qo'shish, o'chirish va o'zgartirish mumkin. Buning uchun maxsus usullar mavjud:

• Atribut qo'shish (unga yangi qiymat o'rnatish):

getAttribute (attr)

• Berilgan atributning mavjudligini tekshirish:

removeAttribute (attr)

Xususiyatlar bilan ishlashning turli usullari

Misol: Matn blokining qiymat atributining qiymatini chop eting.

✍ Yechim:

• Keling, matn blokiga ega bo'laylik:

var element = document.getElementById ("MyElem"); var x = "qiymat";

• Keling, atribut qiymatini olishning bir necha usullarini ko'rib chiqaylik (uni ko'rsatish uchun alert () usulidan foydalaning):

element.getAttribute ("qiymat")

element.getAttribute ("qiymat")

2. nuqta belgisi:

element.attributes .value

element.attributes.value

3. qavs belgisi:


Atribut qiymatlarini o'rnating shuningdek, bir necha usulda:

var x = "kalit"; // kalit - atribut nomi, val - atribut uchun qiymat // 1. elem.setAttribute ("kalit", "val") // 2. element.attributes.key = "val" // 3. element.attributes ["key"] = "val" // 4. element.setAttribute (x, "val")

Tana elementlarining xususiyatlari

Hujjat ob'ekti orqali siz hujjatning asosiy qismiga - asosiy yorlig'iga - ba'zi foydali xususiyatlariga murojaat qilishingiz mumkin.

Masalan, tana yorlig'i ikkita xususiyatga ega: mijoz oynasining kengligi va balandligi:

document.body.clientHeight - mijoz oynasining balandligi
document.body.clientWidth - mijoz oynasining kengligi


Ammo eng muhimi, biz allaqachon bilib olganimizdek, hujjat ob'ekti orqali, maxsus usullar orqali, sahifaning barcha elementlariga, ya'ni teglarga kirish amalga oshiriladi.

Muhim: Sahifa teglariga bunday havola bilan, tanani yopishdan oldin, skript elementlar daraxtining oxirida bo'lishi kerak! Skript bajarilgunga qadar, barcha elementlar ekrandagi brauzer tomonidan "chizilgan" bo'lishi kerak

Ish js8_1... Brauzer oynasining o'lchami haqidagi xabarni ko'rsatish: masalan, "Brauzer oynasi o'lchamlari 600 x 400"

JavaScript -da hujjat elementlariga kirish

Ob'ektlarga kirish yoki ob'ektlarni qidirishning bir nechta variantlari mavjud:

1. Id orqali qidirish(yoki getElementById usuli), ma'lum bir elementni qaytaradi
2. Teg nomi bilan qidirish(yoki getElementsByTagName usuli), elementlar qatorini qaytaradi
3. Ism atributi bo'yicha qidirish(yoki getElementsByName usuli), elementlar qatorini qaytaradi
4. Ota -ona elementlari orqali(barcha avlodlarni oling)

Keling, har bir variantni batafsil ko'rib chiqaylik.

1. Elementga id atributi orqali kirish

Sintaksis: document.getElementById (id)

GetElementById () usuli elementning o'zini qaytaradi, undan keyin ma'lumotlarga kirish uchun foydalanish mumkin

Misol: Sahifada id = "tort" atributiga ega matn maydoni mavjud:

...

Zarur



✍ Yechim:

ogohlantirish (document.getElementById ("tort"). qiymati); // "tortlar sonini" qaytaradi

Ob'ekt chaqiruvini amalga oshirish orqali siz ham shunday qilishingiz mumkin o'zgaruvchi orqali:

var a = document.getElementById ("tort"); ogohlantirish (qiymat); // qiymat atributining qiymatini chop eting, ya'ni. "kek soni" yozuvi

Muhim: Skript tegdan keyin joylashtirilishi kerak!

Elementlar qatoriga teg nomi va massiv indeksi orqali kirish

Sintaksis:
document.getElementsByTagName (ism);

Misol: Sahifada qiymat atributiga ega matn maydoni (kirish yorlig'i) mavjud:

...

Zarur: uning qiymati atributining qiymatini chop eting

GetElementsByTagName usuli o'zgaruvchi orqali barcha kirish elementlariga kirishni tashkil qiladi (ya'ni. elementlar qatoriga kiritish), hatto bu element sahifadagi yagona element bo'lsa ham. Muayyan elementga murojaat qilish uchun, masalan, birinchisiga, biz uning indeksini ko'rsatamiz (qator nol indeksidan boshlanadi).

✍ Yechim:

Indeks bo'yicha ma'lum bir elementga murojaat qilish:

var a = document.getElementsByTagName ("kirish"); ogohlantirish (qiymat); // "tortlar sonini" qaytaradi

Ism atributining qiymati bo'yicha bir qator elementlarga kirish

Sintaksis:
document.getElementsByName (ism);

GetElementsByName ("...") usuli qaytadi ob'ektlar majmuasi, unda nom xususiyati metod parametri sifatida ko'rsatilgan qiymatga teng. Agar sahifada faqat bitta shunday element bo'lsa, u holda usul bir qatorni qaytaradi (faqat bitta element bilan).

Misol: aytaylik, hujjatda element bor:

var element = document.getElementsByName ("MyElem"); ogohlantirish (element.value);

Bu misolda faqat bitta element bor, lekin massivning nol elementiga havola qilingan.

Muhim: Usul faqat spetsifikatsiyada nom xususiyati aniq ko'rsatilgan elementlar bilan ishlaydi.: bu teglar form, kirish, a, tanlash, matn maydoni va boshqalar, kamdan -kam uchraydi.

Document.getElementsByName usuli divs, p va boshqalar kabi boshqa elementlar bilan ishlamaydi.

Asosiy elementning avlodlariga kirish

JavaScript -da avlodlarga kirish childNodes xususiyati orqali sodir bo'ladi. Mulk asosiy ob'ektga tegishli.

document.getElementById (roditel) .childNodes;

document.getElementById (roditel) .childNodes;

Tasvir teglari konteynerga joylashtirilgan misolni ko'rib chiqing - div yorlig'i. Shunday qilib, div yorlig'i tasvir ma'lumotlarining ota -onasi bo'lib, img teglarining o'z navbatida div tegining bolalari hisoblanadi:

<div id = "div_for_img"> <img src = "pic1.jpg" /> <img src = "pic2.jpg" /> <img src = "pic3.jpg" /> <img src = "pic4.jpg" /> </ div>

Keling, modal oynada avlod elementlari qatori elementlarining qiymatlarini ko'rsataylik, ya'ni. img teglari:

var myDiv = document.getElementById ("div_for_img"); // ota -konteynerga murojaat qiling var childMas = myDiv.childNodes; // uchun avlodlar qatori (var i = 0; i< childMas.length;i++){ alert(childMas[i].src); }

E'tibor bering, keyingi qator elementlarini takrorlash uchun pastadir ishlatish qulay. Bular. bizning misolimizda biz pastadir olamiz:

... uchun (var a in childMas) (ogohlantirish (childMas [a] .src);)

(Var a in childMas) uchun (ogohlantirish (childMas [a] .src);)

Elementlarga murojaat qilishning boshqa usullari

Boshqa usullarni ko'rib chiqamiz masalan:

<tana> <shakl nomi = "f"> <kirish turi = "matn" id = "t"> <kirish turi = "tugma" id = "b" qiymati = "(! LANG: tugmasi" > !} <id = "s" name = "ss"> ni tanlang <id = "o1"> variant 1</ variant> <variant id = "o2"> 3</ variant> <id = "o3"> variant 4</ variant> </ ni tanlang </ shakl>

1 3 4

Kirish:

... // kiruvchi va eskirgan elementlarga kiruvchilar: ogohlantirish (hujjat.formalar [0]. ism); // f ogohlantirish (hujjat.formalar [0]. elementlar [0]. turi); // matnli ogohlantirish (hujjat.formalar [0]. elementlar [2]. variantlar [1] .id); // o2 ogohlantirish (hujjat. f. b. turi); // tugma ogohlantirish (hujjat.f .s. nomi); // ss ogohlantirish (hujjat.f .s. variantlar [1] .id); // o2 // elementlar uchun afzal qilingan aksessuar usullari ogohlantirish (document.getElementById ("t"). turi); // matnli ogohlantirish (document.getElementById ("s"). nomi); // ss ogohlantirish (document.getElementById ("s"). variantlar [1] .id); // 02 ogohlantirish (document.getElementById ("o3"). Matn); // 4 ...

... // kiruvchi va eskirgan elementlarga kiruvchilar: ogohlantirish (document.forms.name); // f ogohlantirish (document.forms.elements.type); // matnli ogohlantirish (document.forms.elements.options.id); // o2 ogohlantirish (hujjat.f.b. turi); // tugmani ogohlantirish (document.f.s.name); // ss ogohlantirish (document.f.s.options.id); // o2 // afzal qilingan kirish usullari ogohlantirish (document.getElementById ("t"). turi); // matnli ogohlantirish (document.getElementById ("s"). nomi); // ss ogohlantirish (document.getElementById ("s"). options.id); // 02 ogohlantirish (document.getElementById ("o3"). Matn); // 4 ...

Misol: Html hujjatida tugma va matn maydonini yaratish. Tugma fonini (tugmachaning style.backgroundColor xususiyati) bo'yash va sarlavhani ko'rsatish uchun skriptdan foydalanish "Hey!" matn qutisida (qadr -qimmati).

Html kodi:

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

2 -variant:

document.getElementById ("t1") .setAttribute ("qiymat", "Salom!"); document.getElementById ("b1") .style .backgroundColor = "red";

document.getElementById ("t1"). setAttribute ("qiymat", "Salom!"); document.getElementById ("b1"). style.backgroundColor = "qizil";

Js8_2. Rasmdagi rasmga muvofiq matn qutisi teglarini yarating. Ularni mos (rasmda ko'rsatilgan) id atribut qiymatlariga o'rnating. "0" qiymatini skript yordamida barcha raqamli maydonlarga qo'shing

Shakl ma'lumotlarining to'g'ri kiritilganligini tekshirish

Maydon bo'shmi?

Foydalanuvchilar kiritgan ma'lumotlarga ishonib bo'lmaydi. Foydalanuvchilar ma'lumotlarni kiritishda ularni tekshiradi deb taxmin qilish asossizdir. Buning uchun siz javascriptdan foydalanishingiz kerak.

Tekshirish uchun matn qutisi bo'sh(masalan, foydalanuvchi har qanday so'rovnoma ma'lumotlarini to'ldirgandan so'ng), siz qiymat xususiyatiga murojaat qilishingiz kerak. Agar mulk qiymati bo'sh satr bo'lsa (""), bu haqda foydalanuvchini qandaydir tarzda xabardor qilish kerak.

if (document.getElementById ("name"). value == "") (ba'zi harakatlar, masalan, maydonni to'ldirishingizni so'raydigan xabarni ko'rsatish);

Bundan tashqari, siz skriptsiz qilishingiz mumkin. Matn maydonining kirish yorlig'i naqsh atributiga ega. uning qiymati shaklning ushbu matn maydonidagi ma'lumotlarni tekshirish uchun muntazam ifodadir. Agar atribut mavjud bo'lsa naqsh keyin bu matn qutisi to'g'ri to'ldirilmaguncha ariza topshirilmaydi.
Masalan, maydon bo'sh qoldirilganligini tekshirish uchun:

Raqamli qiymat o'rniga matn: isNaN funktsiyasi

Agar maydon taklif qilsa raqamli kirish, va buning o'rniga foydalanuvchi matn kiritadi, keyin siz isNaN funktsiyasidan foydalanishingiz kerak (ingliz tilidan. - Bu raqam emasmi?), bu kiritilgan ma'lumotlar turini tekshiradi va raqamli ma'lumotlar o'rniga matnli ma'lumotlar kiritilsa, rostini qaytaradi.

Bu. agar rost qaytarilsa, foydalanuvchiga to'g'ri formatni kiritish haqida xabar berish kerak, ya'ni. raqam.

if (isNaN (document.getElementById ("daqiqa"). qiymati)) (raqamli ma'lumotlarni so'rab ogohlantirish);

To'ldirish uchun elementlari bo'lgan sahifa berilgan:


HTML kodining parchasi:

1 2 3 4 5 6 7 8 9 10 11 12

<shakl> Ism:<kirish turi = "matn" id = "ism"> Donutlar soni:<kirish turi = "matn" id = "donuts"> Daqiqalar:<kirish turi = "matn" id = "daqiqa"> Jami<kirish turi = "matn" id = "poditog"> Soliq:<kirish turi = "matn" id = "soliq"> Natija:<kirish turi = "matn" id = "itog"> <kirish turi = "yuborish" qiymati = "(! LANG: buyurtma" onclick = "placeOrder();" > !} </ shakl> <skript turi = "text / javascript"> ... </ skript>

Ism:
Donutlar soni:
Daqiqalar:
Jami
Soliq:
Natija:

Zarur:
Quyidagi kod parchasidagi bo'sh joylarni to'ldiring, bu ikkita matn maydonining to'g'riligini tasdiqlaydi: ism(id = "ism") va daqiqa(id = "daqiqa"). Maydonni bo'sh qoldirish ("") belgisidan va raqamli maydonni to'ldirish uchun to'g'ri formatdan (isNaN) foydalaning.

* Matn maydonlarining naqsh atributi yordamida ham topshiriqni bajaring.

Skript parchasi:

Kod ilgari berilgan murakkab shartlarni yaratish uchun ishlatiladi.

Siz uchun yangi kontseptsiya tugma hodisasini boshqaruvchi vazifasini chaqiradi:
onclick = "placeOrder ();"
Tugmani bosish bilan placeOrder () funktsiyasi chaqiriladi

Siz maxsus ulanishni yaratishingiz mumkin birikmalar, atributlarni qo'shish yoki qo'shishdan oldin ma'lum bir kuzatiladigan boolean qiymatini tekshiradi. Bu misolni ko'ring:

Ko.bindingHandlers.attrIf = (yangilash: funktsiya (element, qiymatAccessor, allBindingsAccessor) (var h = ko.utils.unwrapObservable (valueAccessor ()); var show = ko.utils.unwrapObservable (h._if); (ko.bindingHandlers.attr.update (element, valueAccessor, allBindingsAccessor);) else (for (var k in h) (if (h.hasOwnProperty (k) && k.indexOf ("_")! == 0)) $ (element) .removeAttr (k);)))))); havola

Men @gbs ga javob berishni xohlardim, lekin qila olmayman. Men hal qiladigan ikkita bir xil HTML elementi bo'lishi kerak, bittasi atributga ega, bittasi yo'q va elementga mos keladigan birini qo'shish uchun nokaut sharti. Men ham bu odatiy kutish haqida bilaman, lekin qaysi yechim samaraliroq?

Ushbu qo'llanma jQuery -dagi elementlarning atributlarini o'qish va o'zgartirish haqida.

Atributlar - bu tegdagi elementlarga tayinlangan ism / qiymat juftligi. Xususiyatlarga misollar ( href, unvon, src, sinf):

• attr () atributlarni o'qish, qo'shish va o'zgartirish
• olib tashlashAttr () atributlarni olib tashlash uchun

Bu dars attr () va removeAttr () usullari bilan ishlashni tushuntiradi.

Boshqa darslikda tasvirlangan CSS sinflari bilan ishlashning maxsus jQuery usullari mavjud. JQuery -da loyiha ustida ishlayotganda, siz CSS -ni tez -tez boshqarishingiz kerak, va sinf atributi bir nechta sinf nomlarini o'z ichiga olishi mumkin, bu esa boshqa atributlarga qaraganda ishlashni ancha qiyinlashtiradi.

Agar siz kirish maydonlarining qiymatlari bilan ishlashni rejalashtirmoqchi bo'lsangiz, val () usulini ishlatganingiz ma'qul, bu qiymat atributi bilan ishlashning soddalashtirilgan usulini ta'minlabgina qolmay, balki qiymatlarni o'qishi va o'rnatishi ham mumkin. tanlash ro'yxatining tanlangan elementlarida.

Atribut qiymatini o'qish

Element atributining qiymatini o'qish oson. Siz elementni o'z ichiga olgan jQuery ob'ektidagi attr () usulini chaqirishingiz va uni o'qish uchun atribut nomini berishingiz kerak. Usul atribut qiymatini qaytaradi:

// #myLink elementi ogohlantirishining "href" atributining qiymatini ko'rsatish ($ ("a # myLink"). Attr ("href"));

Agar sizning jQuery ob'ektida bir nechta element bo'lsa, attr () usuli faqat to'plamdagi birinchi element uchun atribut qiymatlarini o'qiydi.

Atribut qiymatlarini o'rnatish

Attr () usuli atribut qiymatlarini qo'shish yoki o'zgartirish uchun ham ishlatilishi mumkin:

• Agar atribut mavjud emas elementda shunday bo'ladi qo'shildi va unga berilgan qiymat beriladi.
• Agar atribut allaqachon mavjud, uning qiymati bo'ladi yangilangan belgilangan qiymat.

Atributlarni qo'shish yoki o'zgartirish uchun attr () usulidan foydalanishning uchta usuli mavjud:

1. Har qanday element (yoki elementlar to'plami) uchun atributlarni qo'shish / o'zgartirish mumkin.
2. Atribut nomlari va qiymatlari xaritasini ko'rsatish orqali element (yoki elementlar) uchun bir vaqtning o'zida bir nechta atributlarni qo'shish / o'zgartirish mumkin.
3. qayta qo'ng'iroq qilish funktsiyasidan foydalanib, bir nechta elementlar uchun bitta atributni dinamik ravishda qo'shish / o'zgartirish mumkin.

Bitta atributni o'rnatish

Elementning atributini o'rnatish yoki o'zgartirish uchun attr () usulini atribut nomi va qiymati bilan chaqiring. Masalan:

// #myLink elementining "href" atributining qiymatini "http://www.example.com/" ga o'zgartiring // (agar "href" atributi bo'lmasa, u avtomatik ravishda yaratiladi) $ ( "a # myLink"). attr ("href", "http://www.example.com/");

Bir nechta elementlar uchun bir xil atributni o'rnatish mumkin:

Xarita yordamida bir nechta atributlarni o'rnatish

Siz xaritadan foydalanib, bir yoki bir nechta element uchun bir vaqtning o'zida bir nechta atributlarni o'rnatishingiz mumkin. Bu shunday ko'rinadigan ism / qiymat juftlarining ro'yxati:

(ism1: qiymat1, ism2: qiymat2, ...)

Quyidagi misol img elementi uchun bir vaqtning o'zida ikkita atributni o'rnatadi:

// #myPhoto $ ("img # myPhoto") img elementi uchun "src" va "alt" atributlarini o'rnating. Attr (("src": "mypic.jpg", "alt": "Mening rasmim")) ;

Siz bir nechta elementlar uchun atributlarni o'rnatishingiz mumkin:

// $ ("img") img elementlari uchun "src" va "alt" atributlarini o'rnating. Attr (("src": "mypic.jpg", "alt": "Mening rasmim"));

Qayta qo'ng'iroq funktsiyasi yordamida atributlarni o'rnatish

Attr () usuliga atribut qiymatlarini berish o'rniga, siz qayta qo'ng'iroq qilish funktsiyasining nomini o'tkazishingiz mumkin. Bu sizga elementlarning joylashuvi, mavjud atributlar qiymati yoki boshqa xususiyatlarga ko'ra bir nechta elementlar uchun atribut qiymatlarini dinamik ravishda o'rnatish imkonini beradi.

Qaytish funktsiyasi ikkita dalilga ega bo'lishi kerak:

• To'plamda hozir tanlangan elementning joylashuvi indeksi (noldan boshlanadi)
• tanlangan element uchun eski atribut qiymati

Funksiyaning qaytish qiymati atribut qiymatini bekor qilish uchun ishlatiladi.

Elementning hozirgi holati va atributning eski qiymatidan tashqari, sizning funktsiyangiz ushbu kalit so'z yordamida elementning o'ziga kira oladi. Shunday qilib, siz qayta qo'ng'iroq qilish funktsiyasidan elementning har qanday xususiyatiga yoki usuliga kirishingiz mumkin.

Misol, rasmning joylashuvi va uning src atributiga asoslanib, sahifadagi har bir tasvirga alt atributini qo'shish uchun qayta qo'ng'iroq qilish funktsiyasidan foydalanadi:

Kodni ishga tushirgandan so'ng, birinchi rasm "1 -rasm: myphoto.jpg" qiymatiga ega bo'lgan alt atributga ega bo'ladi va ikkinchi rasm "2 -rasm: yourphoto.jpg" qiymatiga ega bo'lgan atributga ega bo'ladi.

Atributni olib tashlash

Elementdan atributni olib tashlash uchun removeAttr () usulini chaqiring, uni o'chirish uchun atribut nomini bering. Masalan:

// $ "myLink" elementidan "title" atributini olib tashlang $ ("a # myLink"). RemoveAttr ("sarlavha");

Bundan tashqari, bir nechta elementlarni o'z ichiga olgan jQuery ob'ektida removeAttr () usulini chaqirishingiz mumkin. RemoveAttr () usuli berilgan atributni barcha elementlardan olib tashlaydi:

// $ ("a") barcha havolalardan "sarlavha" atributini olib tashlang. RemoveAttr ("sarlavha");

Xulosa

Bu dars jQuery -da elementlar atributlari bilan ishlash masalalarini qamrab oldi:

• Atribut qiymatlarini o'qish
• Bitta atributni o'rnatish
• Bir vaqtning o'zida bir nechta turli xil atributlarni o'rnatish
• Shablonda atribut qiymatlarini dinamik ravishda o'rnatish uchun qayta qo'ng'iroq qilish funktsiyasidan foydalanish
• Elementdan atributlarni olib tashlash

Ushbu maqolada biz DOM xususiyatlari va atributlari bilan tanishamiz, ular qanday farq qilishini va ular bilan qanday to'g'ri ishlashni ko'rib chiqamiz. Keling, atributlar bo'yicha operatsiyalarni bajarish uchun JavaScript usullari qanday ekanligini ko'rib chiqaylik.

Xususiyat DOM xususiyatidan nimasi bilan farq qiladi?

Atributlar - bu HTML ob'ektlar, ular yordamida biz HTML kodidagi elementlarga aniq ma'lumotlarni qo'shishimiz mumkin.

Brauzer ma'lum bir sahifani so'raganda, u o'zining HTML manba kodini oladi. Shundan so'ng, u ushbu kodni tahlil qiladi va uning asosida DOM tuzadi. Bu jarayon davomida Elementlarning HTML atributlari tegishli DOM xususiyatlariga tarjima qilinadi.

Masalan, brauzer quyidagi HTML kod satrini o'qiyotganda, ushbu element uchun quyidagi DOM xususiyatlarini yaratadi: id, className, src va alt.

Bu xususiyatlarga JavaScript kodida ob'ektning xususiyatlari sifatida kirish mumkin. Bu erda ob'ekt DOM tugunidir (element).

Yuqoridagi element uchun DOM xususiyatlarining qiymatlarini oladigan va ularning qiymatlarini konsolda chop etadigan misol:

// var brandImg = document.querySelector ("# marka") elementini oling; // console.log (brandImg.id) elementining DOM xususiyatlarining qiymatlarini konsolga chop etish; // "marka" console.log (brandImg.className); // "markali" console.log (brandImg.src); // "/logo.png" console.log (brandImg.alt); // "sayt logotipi"

Ba'zi DOM xususiyat nomlari atribut nomlariga mos kelmaydi. Ulardan biri sinf atributidir. Bu atribut DOM xususiyatlar sinfiga mos keladi. Bu farq sinf JavaScript -da kalit so'z bo'lganligi sababli, u himoyalangan va undan foydalanib bo'lmaydi. Shu sababli, standartni ishlab chiquvchilar matchName deb nomlangan boshqa nomni ishlatishga qaror qilishdi.

Yana bir nuance, hujjatning manba kodida ko'rsatilgan HTML atributlarining DOM xususiyatlariga tarjima qilinishi har doim ham birma-bir amalga oshirilmasligi bilan bog'liq.

Agar element nostandart HTML atributiga ega bo'lsa, u holda DOMda unga mos keladigan xususiyat yaratilmaydi.

Yana bir farq shundaki, ba'zi HTML atributlari va ularga mos keladigan DOM xususiyatlari har xil bo'lishi mumkin. Bular. atribut bitta qiymatga ega bo'lishi mumkin, lekin undan yaratilgan DOM xususiyati boshqasiga ega bo'lishi mumkin.

Bu atributlardan biri tekshiriladi.

HTML tekshirilgan atributining qiymati, bu holda, bo'sh satrdir. Ammo, DOMda berilgan atributga mos keladigan xususiyat haqiqiy qiymatga ega bo'ladi. Chunki standart qoidalariga ko'ra, haqiqatni aniqlash uchun, HTML kodida bu atributni aytib o'tish kifoya va u qanday qiymatga ega bo'lishi muhim emas.

Shu bilan birga, agar biz HTML -kodda tasdiqlash qutisi turiga ega kirish elementi uchun tekshirilgan atributni ko'rsatmasak ham, u holda DOMda belgilangan xususiyat baribir yaratiladi, lekin u yolg'onga teng bo'ladi.

Bundan tashqari, JavaScript atributlar bilan ishlashga imkon beradi. Buning uchun DOM API -da maxsus usullar mavjud. Ammo ulardan faqat shu tarzda ma'lumotlar bilan ishlash kerak bo'lganda foydalanish maqsadga muvofiqdir.

Shu bilan birga, siz bilishingiz kerakki, biz elementning DOM xususiyatini o'zgartirganda, tegishli atribut ham o'zgaradi va aksincha. Ammo brauzerlarda bu jarayon har doim ham birma-bir amalga oshirilmaydi.

DOM xususiyatlari va atributlari o'rtasidagi asosiy farqlar:

• atributning qiymati har doim mag'lubiyatdir va DOM xususiyatining qiymati ma'lum bir ma'lumotlar turidir (shartli ravishda satr emas);
• atribut nomi katta-kichikligi sezilmaydigan, DOM xossalari esa katta-kichikligini sezadi. Bular. HTML kodida biz, masalan, HTML id atributini Id, ID va boshqalar sifatida yozishimiz mumkin. Bu atribut nomiga ham tegishli, biz u bilan ishlash uchun maxsus JavaScript usullarida ko'rsatamiz. Lekin biz tegishli DOM xususiyatiga faqat id orqali murojaat qilishimiz mumkin va boshqa yo'l bilan.

Elementning DOM xususiyatlari bilan ishlash

Yuqorida ta'kidlab o'tilganidek, JavaScript -dagi elementlarning xossalari bilan ishlash ob'ektlarning xossalari kabi amalga oshiriladi.

Ammo biron bir elementning xususiyatiga kirish uchun avval uni olish kerak. Siz DOM elementini JavaScript -da olishingiz mumkin, masalan, umumiy querySelector usuli va DOM elementlari to'plami, masalan querySelectorAll yordamida.

Birinchi misol sifatida quyidagi HTML elementini ko'rib chiqing:

Unga asoslanib, biz DOM xususiyatlarini qanday olish, o'zgartirish va yangilarini qo'shishni tahlil qilamiz.

DOM xususiyatlarining qiymatlarini o'qish:

// DOM xususiyati id qiymatini oling var alertId = alert.id; // "ogohlantirish" // DOM xususiyatlarining qiymatini olish className var alertClass = alert.className; // "alert alert-info" // sarlavha xususiyatining DOM qiymatini olish var alertId = alert.title; // "Maslahatchi matni ..."

DOM xususiyatlarini o'zgartirish:

// DOM xususiyatining qiymatini o'zgartirish uchun unga yangi alert.title = "(! LANG: so'rov uchun yangi matn"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

DOM xususiyatlarini qo'shish:

Alert.lang = "ru"; // lang xususiyatini "ru" ga o'rnating alert.dir = "ltr"; // dir xususiyatini "ltr" ga o'rnating

Sahifadagi p elementlari mavjud bo'lgan sinflarning barcha qiymatlarini konsolga chop etadigan misol:

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

Biz "ru" qiymatiga ega bo'lgan lang xususiyatini kontent sinfidagi barcha elementlarni o'rnatadigan misol:

Turli mazmunlar = document.querySelectorAll (". Tarkib"); uchun (var i = 0, length = content.length; i< length; i++) { contents[i].lang = "ru"; }

Elementlarning atributlari va ular bilan ishlash usullari

Atributlar dastlab HTML kodda o'rnatiladi. Garchi ular qandaydir tarzda xususiyatlar bilan bog'liq bo'lsa -da, ular bir xil emas. Ko'p hollarda, siz xususiyatlar bilan ishlashingiz va atributlarga faqat kerak bo'lganda kirishingiz kerak.

Atribut qiymatlari, DOM xususiyatlaridan farqli o'laroq, yuqorida aytib o'tilganidek, har doim mag'lubiyatdir.

JavaScript -da atribut operatsiyalarini bajarishning to'rtta usuli mavjud:

• .hasAttribute ("attribute_name") - elementda ko'rsatilgan atribut mavjudligini tekshiradi. Agar element tekshirilgan atributga ega bo'lsa, u holda bu usul rost, aks holda - noto'g'ri qaytaradi.
• .getAttribute ("attribute_name") - atribut qiymatini oladi. Agar elementda ko'rsatilgan atribut bo'lmasa, bu usul bo'sh satrni ("") yoki nullni qaytaradi.
• .setAttribute ("attribute_name", "attribute_value") - ko'rsatilgan atributni belgilangan qiymat bilan elementga o'rnatadi. Agar element ko'rsatilgan atributga ega bo'lsa, bu usul shunchaki uning qiymatini o'zgartiradi.
• .removeAttribute ("attribute_name") - elementdan ko'rsatilgan atributni olib tashlaydi.

Keling, ba'zi misollarni ko'rib chiqaylik.

Qiymat atributiga ega bo'lgan juda qiziqarli misol.

Qiymat atributiga misol

Keling, qiymat atributining qiymati va DOM xususiyatining qiymatini olaylik:

// element name.getAttribute ("qiymat") qiymat atributining qiymatini olish; // "Bob" // DOM xususiyatining qiymatini olish name.value; // "Bob" // qiymat atributining qiymatini yangilang, unga yangi qiymat o'rnating name.setAttribute ("qiymat", "Tom"); // "Tom" // DOM xususiyatining qiymatini oling name.value; // "Tom"

Bu misoldan ko'rishingiz mumkinki, qiymat atributi o'zgarganda, brauzer avtomatik ravishda DOM xususiyat qiymatini mos ravishda o'zgartiradi.

Keling, buning aksini qilamiz, ya'ni DOM xususiyatining qiymatini o'zgartiramiz va atributning qiymati o'zgarganligini tekshiramiz:

// DOM xususiyat qiymatiga yangi qiymatni belgilang name.value = "(! LANG: Jon"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

Bu misoldan ko'rinib turibdiki, DOM xususiyatini o'zgartirish har doim ham mos keladigan o'zgarishga olib kelmaydi. Bular. bu holda, qiymat DOM xususiyatini o'zgartirish mos keladigan atributni o'zgartirmaydi.

Agar foydalanuvchi bu maydonga matn kiritsa, xuddi shunday bo'ladi. DOM xususiyatining qiymati haqiqiy qiymatni o'z ichiga oladi va tegishli atributda asl qiymati yoki biz o'rnatgan qiymat bo'ladi, masalan, setAttribute usuli yordamida.

Bu misol shuni ko'rsatadiki, har doim DOM xususiyatlari bilan ishlash to'g'ri bo'ladi va siz atributga faqat kerak bo'lganda kirishingiz kerak.

HTML -da biz o'rnatgan dastlabki qiymatni olish kerak bo'lganda ham, siz bu xususiyatdan foydalanishingiz mumkin. Value atributining boshlang'ich qiymatini o'z ichiga olgan xususiyat defaultValue deb nomlanadi.

Name.defaultValue; // Tom

Yana bir qiziq misol, lekin hozir href atributi bilan.

Href atributiga misol

HTML -da o'rnatilganidek, biz havola qiymatini olishimiz kerak bo'lgan misol.

Bu misolda href atributi va DOM href xususiyati har xil qiymatlarni o'z ichiga oladi. Href atributi - bu biz kodda o'rnatgan narsamiz va DOM xususiyati - to'liq URL. Bu farq brauzer href qiymatiga to'liq URL manziliga mos kelishi kerakligi bilan belgilanadi.

Shuning uchun, agar biz atributda bo'lgan narsani olishimiz kerak bo'lsa, bu holda biz getAttribute uslubisiz qila olmaymiz.

Nihoyat, tanlangan atributni ko'rib chiqaylik.

Tanlangan atributga misol

Tanlangan variantning qiymatini qanday olish mumkinligini ko'rsatadigan misolni tanlang:

reyting yo'q 1 2 3 4 5

Tanlangan elementda tanlangan parametr qiymatlarini qanday olish mumkinligini ko'rsatadigan misol:

reyting yo'q 1 2 3 4 5

Atributlar bilan ishlashning yana bir usuli (attributes property)

JavaScript -da har bir element atributlar xususiyatiga ega bo'lib, uning barcha atributlarini NamedNodeMap obyekti sifatida olish mumkin.

Bu usul sizga kerak bo'lganda, masalan, elementning barcha atributlarini takrorlash uchun ishlatilishi mumkin.

Bu to'plamdagi atributga uning indeksi yoki element usuli yordamida kirish mumkin. Bu to'plamdagi atributlar 0 dan hisoblanadi.

Masalan, konsolda ma'lum bir elementning barcha atributlarini ko'rsatamiz:

Men Javaskriptni yaxshi ko'raman

Bundan tashqari, siz ham quyidagi usullar yordamida ushbu to'plam bilan ishlashingiz mumkin:

• .getNamedItem ("attribute_name") - ko'rsatilgan atribut qiymatini oladi (agar ko'rsatilgan atribut elementda bo'lmasa, natija nol bo'ladi).
• .setNamedItem ("attribute_yzel") - elementga yangi atribut qo'shadi yoki mavjud qiymatini yangilaydi. Atribut yaratish uchun siz document.createAttribute () usulini ishlatishingiz kerak, unga atribut nomini parametr sifatida berish kerak. Shundan so'ng, yaratilgan atributga qiymat xususiyatidan foydalanib qiymat tayinlanishi kerak.
• .removeNamedItem ("attribute_name") - elementdan ko'rsatilgan atributni olib tashlaydi (natijada o'chirilgan atributni qaytaradi).

GetNamedItem, setNamedItem va removeNamedItem usullari yordamida atributlar bilan ishlashga misol:

Men Javaskriptni yaxshi ko'raman

Vazifalar

• Id atributiga ega bo'lgan hujjatning barcha elementlarini konsolga chop eting.
• Sarlavha atributini sahifadagi barcha rasmlarga qo'shing, agar ularda bu atribut bo'lmasa. Atribut qiymatini alt atribut qiymatiga o'rnating.

Belgilangan elementda atribut qiymatini o'rnatadi. Agar atribut allaqachon mavjud bo'lsa, qiymat yangilanadi; aks holda ko'rsatilgan nom va qiymat bilan yangi atribut qo'shiladi.

Sintaksis

Element.setAttribute ( ism, qiymat);

Parametrlar

nomi DOMString qiymati belgilanadigan atribut nomini bildiradi. HTML hujjatidagi HTML elementida setAttribute () chaqirilganda, atribut nomi avtomatik ravishda hamma kichik harflarga aylanadi. qiymat A DOMString atributga tayinlanadigan qiymatni o'z ichiga oladi. Belgilangan har qanday satr bo'lmagan qiymat avtomatik ravishda mag'lubiyatga aylanadi.

Agar mantiqiy atributlar haqiqiy qiymatidan qat'i nazar, agar ular elementda mavjud bo'lsa, to'g'ri deb hisoblanadi; qoida tariqasida, bo'sh satrni ("") qiymatiga ko'rsatish kerak (ba'zi odamlar atribut nomidan foydalanadilar; Bu ishlaydi, lekin standart emas). Amaliy namoyish uchun quyida qarang.

Belgilangan qiymat mag'lubiyatga aylantirilgandan so'ng, nullni ko'rsatish, albatta, siz kutgan narsani qilmaydi. Atributni olib tashlash yoki uning qiymatini null qilib qo'yish o'rniga, atributning qiymatini "null" qatoriga o'rnatadi. Agar siz atributni o'chirmoqchi bo'lsangiz, removeAttribute () ga qo'ng'iroq qiling.

Qaytish qiymati

Istisnolar

InvalidCharacterError Belgilangan atribut nomi atribut nomlarida haqiqiy bo'lmagan bir yoki bir nechta belgidan iborat.

Misol

Quyidagi misolda setAttribute () atributlarni o'rnatish uchun ishlatiladi.

Html

Salom Dunyo

JavaScript

var b = document.querySelector ("tugma"); b.setAttribute ("ism", "helloButton"); b.setAttribute ("o'chirilgan", "");

Bu ikkita narsani ko'rsatadi:

• Yuqoridagi setAttribute () ga qilingan birinchi qo'ng'iroq, atributning qiymatini "helloButton" ga o'zgartirishni ko'rsatadi. Siz buni brauzeringizning sahifa inspektori (Chrome, Edge, Firefox, Safari) yordamida ko'rishingiz mumkin.
• Boolean atributining qiymatini o'rnatish uchun, masalan, o'chirilgan, siz istalgan qiymatni belgilashingiz mumkin. Bo'sh satr yoki atribut nomi tavsiya etilgan qiymatlardir. Muhimi shundaki, agar atribut umuman mavjud bo'lsa, uning haqiqiy qiymatidan qat'i nazar, uning qiymati to'g'ri deb hisoblanadi. Atributning yo'qligi uning qiymati noto'g'ri ekanligini bildiradi. O'chirilgan atribut qiymatini bo'sh satrga ("") qo'yib, biz o'chirishni rost qilib qo'yamiz, natijada tugma o'chiriladi.

Elementning atributlari bilan ishlaydigan DOM usullari:

Nom maydonidan xabardor emas, eng ko'p ishlatiladigan usullar	Nom maydonini biladigan variantlar (DOM 2-darajali)	Attr tugunlari bilan to'g'ridan -to'g'ri kurashishning DOM 1 -darajali usullari (kamdan -kam ishlatiladi)	Attr-tugunlari bilan to'g'ridan-to'g'ri kurashish uchun DOM 2-darajali nom maydoni biladigan usullar (kamdan-kam ishlatiladi)
setAttribute (DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute (DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
hasAttribute (DOM 2)	hasAttributeNS	-	-
removeAttribute (DOM 1)	olib tashlashAttributeNS	olib tashlashAttributeNode	-

Xususiyat

• DOM Level 2 Core: setAttribute (DOM Level 1 Core -da taqdim etilgan)

Brauzer muvofiqligi

Bu sahifadagi muvofiqlik jadvali tuzilgan ma'lumotlardan tuziladi. Agar siz ma'lumotlarga o'z hissangizni qo'shishni xohlasangiz, https://github.com/mdn/browser-compat-data saytiga tashrif buyuring va bizga so'rov yuboring.

GitHub -da muvofiqlik ma'lumotlarini yangilang

	Ish stoli						Mobil
	Chrome	Yon	Firefox	Internet Explorer	Opera	Safari	Android veb -ko'rinishi	Android uchun Chrome	Android uchun Firefox	Android uchun Opera	IOS -da Safari	Samsung Internet
setAttribute	Chrome to'liq qo'llab -quvvatlash Ha	Edge to'liq qo'llab -quvvatlash 12	Firefox to'liq qo'llab -quvvatlash Ha	IE to'liq qo'llab -quvvatlash 5 Eslatmalar To'liq qo'llab -quvvatlash 5 Eslatmalar Eslatmalar Internet Explorer 7 va undan oldingi versiyalarda setAttribute uslublarni o'rnatmaydi va siz ularni o'rnatmoqchi bo'lganingizda hodisalarni o'chiradi.	Opera to'liq qo'llab -quvvatlash Ha	Safari to'liq qo'llab -quvvatlash 6	WebView Android to'liq qo'llab -quvvatlash Ha	Chrome Android to'liq qo'llab -quvvatlash Ha	Firefox Android to'liq qo'llab -quvvatlash Ha	Opera Android to'liq qo'llab -quvvatlash Ha	Safari iOS To'liq qo'llab -quvvatlash Ha	Samsung Internet Android to'liq qo'llab -quvvatlash Ha

Afsona

To'liq qo'llab -quvvatlash To'liq qo'llab -quvvatlash Amalga oshirish eslatmalariga qarang. Amalga oshirish yozuvlarini ko'ring.

Gekko eslatib o'tdi

Ayrim atributlarni, xususan XUL qiymatini o'zgartirish uchun setAttribute () dan foydalanish mos kelmaydi, chunki atribut standart qiymatni bildiradi. Joriy qiymatlarga kirish yoki o'zgartirish uchun siz xususiyatlardan foydalanishingiz kerak. Masalan, Element.setAttribute () o'rniga Element.value dan foydalaning.