Galite sukurti tinkintą susiejimą, kuris patikrins konkrečios stebimos loginės reikšmės vertę prieš pridėdamas ar nepridėdamas atributų. Žiūrėkite šį pavyzdį:

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

Norėčiau tiesiog atsakyti į @gbs, bet negaliu. Mano sprendimas būtų turėti du identiškus HTML elementus: vieną su atributu, kitą be jo ir išmušimo sąlygą pridėti vieną iš jų pagal elementą. Aš taip pat žinau apie šį bendrą lūkestį, bet kuris sprendimas yra efektyvesnis?

Šiame straipsnyje mes susipažinsime su DOM savybėmis ir atributais, apsvarstysime, kuo jie skiriasi ir kaip teisingai su jais dirbti. Pažiūrėkime, kokius metodus „JavaScript“ turi atributų operacijoms atlikti.

Atributai yra HTML objektai, su kuriais galime įtraukti tam tikrus duomenis prie HTML kodo elementų.

Kai naršyklė prašo puslapio, ji gauna HTML šaltinio kodą. Po to jis analizuoja šį kodą ir pagal jį sukuria DOM. Šio proceso metu elementų HTML atributai paverčiami atitinkamomis DOM ypatybėmis.

Pavyzdžiui, naršyklė, skaitydama šią HTML kodo eilutę, sukurs tokias šio elemento DOM ypatybes: id , className , src ir alt .

Šios savybės pasiekiamos „JavaScript“ kode kaip objekto savybės. Objektas čia yra DOM mazgas (elementas).

Pavyzdys, kuriame gauname aukščiau pateikto elemento DOM savybių reikšmes ir išvedame jų reikšmes į konsolę:

// gauti elementą var brandImg = document.querySelector("#brand"); // rodyti elemento DOM savybių reikšmes konsolėje console.log(brandImg.id); // "prekės ženklas" console.log(brandImg.className); // "prekės ženklas" console.log(brandImg.src); // "/logo.svg?1" console.log(brandImg.alt); // "svetainės logotipas"

Kai kurie DOM ypatybių pavadinimai nesutampa su atributų pavadinimais. Vienas iš jų yra klasės atributas. Šis atributas atitinka DOM ypatybę className. Šis skirtumas atsiranda dėl to, kad klasė yra „JavaScript“ raktinis žodis, jis yra rezervuotas ir negali būti naudojamas. Dėl šios priežasties standarto kūrėjai nusprendė naudoti kitą atitikimo pavadinimą, kuris buvo pasirinktas kaip className .

Kitas niuansas yra susijęs su tuo, kad dokumento šaltinio kode nurodytų HTML atributų vertimas į DOM savybes ne visada atliekamas vienas prieš vieną.

Jei elementas turi nestandartinį HTML atributą, jį atitinkanti ypatybė DOM nesukuriama.

// gauti elementą mydiv = document.querySelector("#mydiv"); // gauti elemento alt ypatybės reikšmę ir išvesti ją į konsolę console.log(mydiv.alt); // undefined // gauti elemento alt atributo reikšmę ir išvesti ją į konsolę console.log(mydiv.getAttribute("alt")); // "..."

Kitas skirtumas yra tas, kad tam tikrų HTML atributų reikšmės ir atitinkamos DOM savybės gali skirtis. Tie. atributas gali turėti vieną reikšmę, o jo pagrindu sukurta DOM ypatybė gali turėti kitą.

Pažymėtas vienas iš šių atributų.

Pažymėto HTML atributo reikšmė šiuo atveju yra tuščia eilutė. Tačiau ypatybė, atitinkanti šį atributą DOM, turės reikšmę true . Nes pagal standarto taisykles, norint nustatyti true, užtenka tik paminėti šį atributą HTML kode, ir visai nesvarbu, kokią reikšmę jis turės.

Be to, net jei įvesties elemento su tipo žymimuoju langeliu HTML kode nenurodysime pažymėto atributo, pažymėta savybė jam vis tiek bus sukurta DOM, tačiau ji bus lygi false.

Be to, JavaScript taip pat leidžia dirbti su atributais. DOM API tam yra specialūs metodai. Bet patartina juos naudoti tik tada, kai tikrai reikia taip dirbti su duomenimis.

Tuo pačiu reikia žinoti, kad pakeitus elemento DOM savybę, pasikeičia ir atitinkamas atributas, ir atvirkščiai. Tačiau šis procesas naršyklėse ne visada atliekamas vienas prieš vieną.

Pagrindiniai skirtumai tarp DOM savybių ir atributų yra šie:

• atributo reikšmė visada yra eilutė, o DOM ypatybės reikšmė yra tam tikras duomenų tipas (nebūtinai eilutė);
• Atributo pavadinime didžiosios ir mažosios raidės neskiriamos, o DOM savybės – didžiosios ir mažosios. Tie. HTML kode galime, pavyzdžiui, parašyti HTML id atributą kaip Id , ID ir kt. Tas pats pasakytina ir apie atributo pavadinimą, kurį nurodome specialiuose „JavaScript“ metoduose, skirtuose darbui su juo. Tačiau atitinkamą DOM nuosavybę galime pasiekti tik naudodami ID ir nieko daugiau.

Darbas su „JavaScript“ elementų savybėmis, kaip minėta aukščiau, atliekamas kaip ir su objektų savybėmis.

Tačiau norint pasiekti elemento savybę, pirmiausia ją reikia gauti. Galite gauti DOM elementą JavaScript, pavyzdžiui, naudodami universalųjį querySelector metodą, ir DOM elementų rinkinį, pavyzdžiui, naudodami querySelectorAll .

Kaip pirmąjį pavyzdį apsvarstykite šį HTML elementą:

Informacinio pranešimo tekstas... var alert = document.querySelector("#alert"); // gauti elementą

Remdamiesi juo analizuosime, kaip gauti DOM savybes, jas pakeisti ir pridėti naujų.

DOM nuosavybės verčių skaitymas:

// gauti DOM nuosavybės ID vertę var alertId = alert.id; // "alert" // gauti DOM nuosavybės reikšmę className var alertClass = alert.className; // "alert alert-info" // gauti DOM nuosavybės pavadinimo reikšmę var alertId = alert.title; // "Pagalbos tekstas..."

DOM nuosavybės verčių keitimas:

// norėdami pakeisti DOM ypatybės reikšmę, tereikia jai priskirti naują reikšmę alert.title = "Naujas patarimo tekstas"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

DOM ypatybių pridėjimas:

Alert.lang = "ru"; // nustatykite lang ypatybę į "ru" alert.dir = "ltr"; // nustatykite dir ypatybę į "ltr"

Pavyzdys, kuriame mes išvesime į konsolę visas klasės reikšmes, kurias puslapyje turi p elementai:

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

Pavyzdys, kuriame lang savybę nustatome visiems elementams, kurių turinio klasė yra „ru“:

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

Atributai iš pradžių nustatomi HTML kode. Nors jie tam tikru būdu yra susiję su savybėmis, jie nėra tas pats dalykas. Daugeliu atvejų turėtumėte dirbti su ypatybėmis ir pasiekti atributus tik tada, kai jums to tikrai reikia.

Atributų reikšmės, skirtingai nei DOM ypatybės, kaip minėta aukščiau, visada yra eilutė.

„JavaScript“ turi keturis būdus, kaip atlikti operacijas, susijusias su atributais:

• .hasAttribute("attribute_name") – patikrina, ar elementas turi nurodytą atributą. Jei elemento atributas yra tikrinamas, šis metodas grąžina true, kitu atveju - false.
• .getAttribute("attribute_name") – gauna atributo reikšmę. Jei elementas neturi nurodyto atributo, šis metodas grąžina tuščią eilutę („“) arba null .
• .setAttribute("attribute_name", "attribute_value") – nustato elementui nurodytą atributą su nurodyta reikšme. Jei elementas turi nurodytą atributą, šis metodas tiesiog pakeis jo reikšmę.
• .removeAttribute("atributo_pavadinimas") – pašalina nurodytą atributą iš elemento.

Pažiūrėkime į pavyzdžius.

Labai įdomus pavyzdys su vertės atributu.

Gaukime vertės atributo vertę ir DOM nuosavybės vertę:

// gauti elemento name atributo vertės reikšmę.getAttribute("value"); // "Bob" // gauti DOM ypatybės vertės reikšmę name.value; // "Bob" // atnaujinkite vertės atributo reikšmę, nustatykite jai naują reikšmę name.setAttribute("value", "Tom"); // "Tomas" // gauti DOM ypatybės reikšmę value name.value; // "Tomas"

Šiame pavyzdyje parodyta, kad pasikeitus reikšmės atributui, naršyklė automatiškai atitinkamai pakeičia vertės DOM ypatybę.

Dabar padarykime priešingai, ty pakeiskime DOM ypatybės reikšmę ir patikrinkime, ar atributo reikšmė nepasikeičia:

// nustatykite naują DOM nuosavybės vertės reikšmę name.value = "Jonas"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

Šis pavyzdys rodo, kad pakeitus DOM ypatybę ne visada atitinkamai pakeičiamas atributas. Tie. šiuo atveju, pakeitus DOM ypatybės reikšmę, jos atitinkamas atributas nepasikeičia.

Tas pats atsitiks, kai vartotojas įves tekstą į šį lauką. DOM ypatybės reikšmėje bus faktinė vertė, o atitinkamame atribute bus pradinė reikšmė arba ta, kurią nustatome, pavyzdžiui, naudodami setAttribute metodą.

Šis pavyzdys rodo, kad teisingiau visada dirbti su DOM ypatybėmis ir prieiti prie atributo reikia tik tada, kai tai tikrai būtina.

Net ir tuo atveju, kai reikia gauti pradinę reikšmę, kurią nustatėme HTML, galite naudoti ypatybę. Ypatybė, kurioje yra pradinė vertės atributo reikšmė, vadinama defaultValue .

Name.defaultValue; //Tomas

Kitas labai įdomus pavyzdys, bet dabar su href atributu.

Pavyzdys, kai turime gauti nuorodos vertę, kuri buvo nustatyta HTML.

var page2 = document.querySelector("#nuoroda"); page2.getAttribute("href"); // page2.html page2.href; // visas URL, pavyzdžiui: http://localhost/page2.html

Šiame pavyzdyje atribute href ir ypatybėje href DOM yra skirtingos reikšmės. Atributas href yra tai, ką nustatome kode, o DOM ypatybė yra visas URL. Šį skirtumą lemia standartas, kad naršyklė turi nustatyti href reikšmę iki viso URL.

Todėl jei mums reikia gauti tai, kas yra atribute, tai šiuo atveju neapsieisime be getAttribute metodo.

Galiausiai pažvelkime į pasirinktą atributą.

Pavyzdys, rodantis, kaip galite gauti pasirinktos pasirinkimo parinkties vertę:

nėra įvertinimo 1 2 3 4 5 // gauti pasirinkimo elementą var mark = document.querySelector("#mark"); // 1 kryptis mark.querySelector("option:checked").value; // 2 metodas mark.value;

Pavyzdys, rodantis, kaip galite gauti pasirinktų parinkčių reikšmes pasirinktame elemente:

nėra įvertinimo 1 2 3 4 5 // gauti pasirinkimo elementą var mark = document.querySelector("#mark"); // 1 būdas (sukuriant masyvą ir užpildant jį pasirinktų parinkčių reikšmėmis) var arr = ; for (var i = 0, ilgis = mark.options.length; i< length; i++) { if (mark.options[i].selected) { arr.push(mark.options[i].value); } } // 2 способ (более современный, с использованием DOM-свойства selectedOptions) var arr = Array.from(mark.selectedOptions, option =>option.value)

JavaScript kiekvienas elementas turi atributų ypatybę, kurią galima naudoti norint gauti visus jo atributus kaip NamedNodeMap objektą.

Šis metodas gali būti naudojamas, kai reikia, pavyzdžiui, pakartoti visus elemento atributus.

Šio rinkinio atributas pasiekiamas naudojant jo indeksą arba naudojant elemento metodą. Šios kolekcijos atributai skaičiuojami nuo 0.

Pavyzdžiui, konsolėje parodykime visus tam tikro elemento atributus:

MAN MYLIU JAVASCRIPT

Be to, su šia kolekcija taip pat galite dirbti naudodami šiuos metodus:

• .getNamedItem("attribute_name") – gauna nurodyto atributo reikšmę (jei nurodyto atributo elemente nėra, rezultatas bus nulis).
• .setNamedItem("attribute_node") – prideda naują atributą prie elemento arba atnaujina esamo atributo vertę. Norėdami sukurti atributą, turite naudoti document.createAttribute() metodą, kuriam kaip parametras turi būti perduotas atributo pavadinimas. Tada sukurtam atributui turi būti priskirta reikšmė naudojant vertės ypatybę.
• .removeNamedItem("atributo_pavadinimas") – pašalina nurodytą atributą iš elemento (pateikia pašalintą atributą kaip rezultatą).

Pavyzdys, kaip dirbti su atributais naudojant getNamedItem, setNamedItem ir removeNamedItem metodus:

MAN MYLIU JAVASCRIPT

• Spausdinkite į konsolę visus dokumento elementus, turinčius ID atributą.
• Pridėkite pavadinimo atributą prie visų puslapio vaizdų, jei jie neturi šio atributo. Nustatykite atributo vertę, lygią alt atributo vertei.

Pamokoje bus kalbama apie temos pradžią: dokumento objekto modelis (javaScript DOM) yra dinaminio HTML pagrindas, bus nagrinėjami objektų prieigos metodai ir nagrinėjami javascript įvykių apdorojimo būdai.

• Apskritai objektas yra sudėtinis duomenų tipas, kuris sujungia daugybę reikšmių į bendrą vienetą ir leidžia reikšmes saugoti ir gauti pagal jų pavadinimus pagal poreikį.

Anksčiau mes jau pradėjome susipažinti su javascript sąvoka.

• „Javascript“ yra toks dalykas kaip DOM - Dokumento objekto modelis— tinklalapio objekto modelis (html puslapis).
• Dokumento žymos arba, kaip dar sakoma, dokumento mazgai yra jo objektai.

Pažiūrėkime į diagramą objektų hierarchija „JavaScript“., ir kur hierarchijoje yra šioje temoje aptariamas dokumento objektas.

Scenarijaus elementas turi šiuos atributus:

Pavyzdys:

/* Leidžia js failus įkelti lygiagrečiai ir vykdyti iškart po įkėlimo, nelaukiant, kol bus apdorota likusi puslapio dalis */ /* Leidžia naršyklei lygiagrečiai pradėti įkelti js failus, nesustabdant tolesnio puslapio apdorojimo. Jų vykdymas įvyksta visiškai išnagrinėjus dokumento objekto modelį */

Dokumento objektas yra tinklalapis.

Svarbu: norint pasiekti „JavaScript“ objekto ypatybes ir metodus, kaip ir dirbant su kitais objektais, naudojamas taškų žymėjimas:

tie. pirmiausia užrašomas pats objektas, po to per tašką ir be tarpų nurodoma jo savybė, požymis ar metodas

Pažiūrėkime į pavyzdį:

Pavyzdys: tegul yra žyma html dokumente

Mano elementas

ir jam apibrėžtas css stilius (net du stiliai, antrasis pravers atliekant užduotį):

.small(spalva:raudona; šrifto dydis:mažas; ) .big(spalva:mėlyna; šrifto dydis:didelis; )

Būtina:

Kadangi tai yra javascript kalba, galite sukurti ir nustatyti bet kokią objekto ypatybę su bet kokia verte. Bet pirmiausia pateksime į objektą (prieiga prie objekto bus išsamiai aptarta vėliau šioje pamokoje):

// pasiekti objektą pagal jo ID var element = document.getElementById("MyElem"); elementas.myProperty = 5; // priskirti ypatybę alert(element.myProperty); // rodyti dialogo lange

Kita užduotis yra susijusi su objekto atributu. Objekto atributas yra žymos atributai. Tie. mūsų atveju jų yra du: klasės atributas su reikšme small ir atributas id. Dirbsime su klasės atributu.

Dabar pridėkime javascript kodą, kad būtų rodoma mūsų objekto atributo reikšmė. Kodas turi būti po to pagrindinės žymės:

// pasiekti objektą pagal jo ID var element = document.getElementById("MyElem"); alert(element.getAttribute("klasė")); // rodyti dialogo lange

Ir paskutinė užduotis: atributo reikšmės keitimas. Turime tam stilių. "didelis". Pakeiskime klasės atributo reikšmę šiuo stiliumi:

// pasiekti objektą pagal jo ID var element = document.getElementById("MyElem"); element.setAttribute("klasė","didelis");

Dėl to mūsų elementas taps didesnis ir mėlynos spalvos (didelės klasės).

Dabar atidžiau pažvelkime į pavyzdyje naudojamus darbo su atributais metodus.

Atributus galima pridėti, ištrinti ir keisti. Tam yra specialūs metodai:

• Atributo pridėjimas (naujos vertės nustatymas):

getAttribute(attr)

• Tikrinama, ar yra šio atributo:

pašalintiAtributas(atributas)

Įvairūs darbo su atributais būdai

Pavyzdys: išspausdinkite teksto bloko vertės atributo reikšmę.

• Tegul yra teksto blokas:

var elem = document.getElementById("Mano elementas"); var x = "vertė";

• Pažvelkime į kelis būdus, kaip gauti atributo reikšmę (išvesties naudokite alert() metodą):

elem.getAttribute("vertė")

elem.getAttribute("vertė")

2. taško žymėjimas:

elem.attributes.value

elem.attributes.value

3. skliaustų žymėjimas:

var element = document.getElementById("t1"); alert(...) element.setAttribute(...);


Taip pat galite nustatyti atributų reikšmes keliais būdais:

var x = "raktas"; // raktas – atributo pavadinimas, val – atributo reikšmė // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[ " key"] = "val" // 4. elem.setAttribute(x, "val")

Kūno elementų savybės

Per dokumento objektą galite pasiekti dokumento turinį – kūno žymą – su kai kuriomis naudingomis savybėmis.

Pavyzdžiui, kūno žyma turi dvi ypatybes: kliento lango plotį ir aukštį:

document.body.clientHeight — kliento lango aukštis
document.body.clientWidth – kliento lango plotis


Tačiau svarbiausias dalykas, kaip jau sužinojome, yra tai, kad per dokumento objektą, naudojant specialius metodus, suteikiama prieiga prie visų puslapio elementų, tai yra žymų.

Svarbu: tokiu būdu pasiekiant puslapio žymas, scenarijus turi būti elementų medžio pabaigoje, prieš uždarant body ! Kadangi tuo metu, kai scenarijus bus vykdomas, visi elementai jau turėtų būti „nupiešti“ naršyklės ekrane

Darbas js8_1 . Rodyti pranešimą apie naršyklės lango dydį: pvz. "Naršyklės lango matmenys 600 x 400"

Prieiga prie dokumento elementų naudojant „JavaScript“.

Yra keletas objektų prieigos arba paieškos parinkčių:

Apsvarstykime kiekvieną iš variantų išsamiau.

Sintaksė: document.getElementById(id)

Metodas getElementById() grąžina patį elementą, kurį vėliau galima naudoti duomenims pasiekti

Pavyzdys: puslapyje yra teksto laukas su atributu id="tortas":

...

Būtinas

alert(document.getElementById("tortas").value); // grąžina "tortų skaičius"

Tą patį galite padaryti pasiekę objektą per kintamąjį:

var a=document.getElementById("tortas"); alert(a.value); // rodyti reikšmės atributo reikšmę, t.y. tekstas "tortų skaičius"

Svarbu: scenarijus turi būti po žymos!

Sintaksė:
document.getElementsByTagName(vardas);

Pavyzdys: puslapyje yra teksto laukas (įvesties žyma) su vertės atributu:

...

Būtina: parodykite jo vertės atributo reikšmę

Metodas getElementsByTagName suteikia prieigą per kintamąjį prie visų įvesties elementų (t. y. įvesties elementų masyvo), net jei šis elementas yra vienintelis puslapyje. Norėdami pasiekti konkretų elementą, pavyzdžiui, pirmąjį, nurodome jo indeksą (masyvas prasideda nuo indekso nulio).

✍ Sprendimas:

Mes pasiekiame konkretų elementą pagal indeksą:

var a =document.getElementsByTagName("įvestis"); alert(a.value); // grąžina "tortų skaičius"

Sintaksė:
document.getElementsByName(vardas);

Metodas getElementsByName("...") grąžina objektų masyvą, kurio pavadinimo atributas yra lygus reikšmei, nurodytai kaip metodo parametras. Jei puslapyje yra tik vienas toks elementas, metodas vis tiek grąžina masyvą (su tik vienu elementu).

Pavyzdys: tarkime, kad dokumente yra elementas:

var element = document.getElementsByName("Mano elementas"); alert(element.value);

Šiame pavyzdyje yra vienas elementas, bet nuoroda yra į nulinį masyvo elementą.

Svarbu: Metodas veikia tik su tais elementais, kurių pavadinimo atributas yra aiškiai nurodytas specifikacijoje: tai forma , input , a , select , textarea ir daugybė kitų, retesnių, žymų.

Metodas document.getElementsByName neveiks su kitais elementais, pvz., div , p ir kt.

Vaikai pasiekiami „Javascript“ per „childerNodes“ nuosavybę. Nuosavybė priklauso pirminiam objektui.

document.getElementById(roditel).childNodes;

Pažiūrėkime į pavyzdį, kai vaizdo žymos dedamos į konteinerį, vadinamą div žyma. Taigi, div žyma yra vaizdo duomenų pirminė, o pačios img žymos atitinkamai yra div žymos antrinės dalys:

Dabar modaliniame lange parodykime masyvo elementų su palikuonimis reikšmes, t.y. img žymės:

var myDiv=document.getElementById("div_for_img"); // pasiekti pirminį konteinerį var childMas=myDiv.childNodes; // palikuonių masyvas, skirtas (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

Atkreipkite dėmesį, kad norint kartoti palikuonių masyvo elementus, patogu naudoti kilpą. Tie. mūsų pavyzdyje gauname ciklą:

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

Pažvelkime į kitus metodus naudodami pavyzdį:

1 3 4

Prieiga:

... // nepageidaujami ir nebenaudojami elementų prieigos metodai: alert(document.forms.name); // f alert(document.forms.elements.type); // tekstinis įspėjimas(document.forms.elements.options.id); // o2 įspėjimas(document.f.b.type); // mygtuko įspėjimas(document.f.s.name); // ss įspėjimas(document.f.s.options.id); // o2 // pageidaujami būdai pasiekti elementus alert(document.getElementById("t").type); // teksto įspėjimas(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4...

Pavyzdys: HTML dokumente sukurkite mygtuką ir teksto lauką. Naudodami scenarijų nuspalvinkite mygtuko foną (mygtuko savybė style.backgroundColor) ir parodykite užrašą "Sveiki!" teksto laukelyje (vertės atributas).

HTML kodas:

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

2 variantas:

document.getElementById("t1").setAttribute("value","Sveiki!"); document.getElementById("b1").style.backgroundColor = "raudona";

Užduotis Js8_2. Sukurkite teksto lauko žymas, kaip parodyta paveikslėlyje. Suteikite jiems atitinkamas (parodytas paveikslėlyje) id atributo reikšmes. Naudodami scenarijų, pridėkite reikšmę „0“ prie visų skaitinių laukų (darant skaitines reikšmes)

Ar laukas paliktas tuščias?

Vartotojo įvestis negali pasitikėti. Neprotinga manyti, kad įvesdami duomenis vartotojai tikrins duomenis. Tai reiškia, kad tam reikia naudoti javascript.

Norint patikrinti, ar teksto laukas paliktas tuščias (pavyzdžiui, vartotojui užpildžius kokios nors formos duomenis), reikėtų remtis ypatybe reikšmė. Jei nuosavybės reikšmė yra tuščia eilutė (""), turite kažkaip apie tai pranešti vartotojui.

if(document.getElementById("vardas").value=="") (kai kurie veiksmai, pvz., pranešimo, kuriame prašoma užpildyti lauką, rodymas);

Be to, galite išsiversti be scenarijaus. Teksto lauko įvesties žyma turi šablono atributą. jo reikšmė nurodo reguliarųjį posakį, skirtą duomenims patikrinti nurodytame formos teksto lauke. Jei atributas yra modelis, tada forma nebus pateikta, kol šis teksto laukas nebus užpildytas teisingai.
Pavyzdžiui, norėdami patikrinti, ar laukas paliktas tuščias:

Tekstas vietoj skaitinės reikšmės: funkcija isNaN

Jei lauke reikia įvesti skaitinę reikšmę, o vartotojas įveda tekstą, reikia naudoti funkciją isNaN. "ar ne skaičius?"), kuris patikrina įvesties duomenų tipą ir grąžina teisingą, jei vietoj skaitmeninių duomenų įvedami tekstiniai duomenys.

Tai. jei grąžinama tiesa, tuomet vartotojas turi būti įspėtas, kad jis įvestų teisingą formatą, t.y. numerį.

if(isNaN(document.getElementById("minutes").value))( įspėjimas, reikalaujantis įvesti skaitinius duomenis);

Duotas puslapis su elementais, kuriuos reikia užpildyti:


HTML kodo fragmentas:

Vardas:
Spurgų skaičius:
Minutės:
Santrauka:
Mokesčiai:
Rezultatas:
...

Būtina:
Užpildykite toliau pateikto kodo fragmento, kuris patikrina, ar teisingai užpildyti du teksto laukai, laukus: vardas(id="vardas") ir minučių(id = "minutės"). Naudokite patikras, kad įsitikintumėte, jog laukas liko tuščias ("") ir ar skaitinis laukas užpildytas teisingai (isNaN).

* Atlikite užduotį taip pat naudodami teksto laukų šablono atributą naudodami .

Scenarijaus fragmentas:

Kodas naudoja anksčiau išmoktas sąlygas sudėtingoms sąlygoms kurti.

Nauja jūsų koncepcija – tai funkcijos kaip mygtuko įvykių tvarkyklės iškvietimas:
onclick="placeOrder();"
Paspaudus mygtuką, bus iškviesta funkcija placeOrder().

Ši pamoka skirta elementų atributų skaitymui ir keitimui programoje „jQuery“.

Atributai yra pavadinimo / vertės pora, kuri priskiriama žymos elementams. Atributų pavyzdžiai ( href, titulą, src, klasė):

• attr(), norėdami skaityti, pridėti ir keisti atributus
• RemoveAttr(), kad pašalintumėte atributus

Ši pamoka apima darbą su attr() ir removeAttr() metodais.

Yra specialūs jQuery metodai darbui su CSS klasėmis, kurie aprašyti kitoje pamokoje. Dirbdami su projektu jQuery, turite daug manipuliuoti CSS klasėmis, o klasės atribute gali būti keli klasių pavadinimai, todėl darbas su juo daug sudėtingesnis nei su kitais atributais.

Jei ketinate dirbti su įvesties laukų reikšmėmis, geriau naudoti val() metodą, kuris ne tik suteikia supaprastintą darbo su reikšmės atributu būdą, bet ir gali nuskaityti bei nustatyti reikšmes. pasirinktuose sąrašo elementuose.

Nuskaityti elemento atributo reikšmę paprasta. Jums tereikia iškviesti attr() metodą jQuery objekte, kuriame yra elementas, perduodant jam perskaityti atributo pavadinimą. Metodas grąžina atributo reikšmę:

// Išspausdinkite #myLink elemento įspėjimo atributo "href" reikšmę ($("a#myLink").attr("href"));

Jei jūsų jQuery objekte yra keli elementai, metodas attr () nuskaito tik pirmojo rinkinio elemento atributų reikšmes.

Metodas attr() taip pat gali būti naudojamas atributų reikšmėms pridėti arba keisti:

• Jei atributas neegzistuoja stichijoje taip ir bus pridėta ir jam bus priskirta nurodyta reikšmė.
• Jei atributas jau egzistuoja, jo vertė bus atnaujinta duota vertė.

Yra trys būdai, kaip naudoti attr() metodą atributams pridėti arba keisti:

Norėdami nustatyti arba pakeisti elemento atributą, turite iškviesti attr() metodą, nurodydami atributo pavadinimą ir reikšmę. Pavyzdžiui:

// Pakeiskite #myLink elemento atributo "href" reikšmę į reikšmę "http://www.example.com/" // (jei atributo "href" nėra, jis bus sukurtas automatiškai) $("a#myLink"). attr("href", "http://www.example.com/");

Taip pat galima nustatyti tą patį atributą keliems elementams:

Naudodami žemėlapį galite nustatyti kelis atributus vienu ar daugiau elementų. Tai vardo/reikšmių porų sąrašas, kuris atrodo taip:

( vardas1: vertė1, pavadinimas2: vertė2, ... )

Šis pavyzdys vienu metu nustato du img elemento atributus:

// Nustatykite img elemento #myPhoto $("img#myPhoto") atributus "src" ir "alt").attr(( "src": "mypic.jpg", "alt": "Mano nuotrauka" )) ;

Taip pat galite nustatyti kelių elementų atributus:

// Nustatykite "src" ir "alt" atributus visiems img elementams $("img").attr(( "src": "mypic.jpg", "alt": "Mano nuotrauka" ));

Užuot perdavęs atributų reikšmes attr() metodui, galite perduoti atgalinio skambinimo funkcijos pavadinimą. Tokiu būdu galite dinamiškai nustatyti kelių elementų atributų reikšmes pagal elemento padėtį, esamą atributo reikšmę ar kitas savybes.

Grįžimo funkcija turi turėti du argumentus:

• Šiuo metu pasirinkto elemento padėties rinkinyje indeksas (prasideda nuo nulio)
• sena šiuo metu pasirinkto elemento atributo vertė

Funkcijos grąžinta reikšmė naudojama atributo reikšmei pakeisti.

Be dabartinės elemento padėties ir senos atributo vertės, jūsų funkcija gali pasiekti patį elementą naudodama šį raktinį žodį. Tokiu būdu iš skambinimo funkcijos galite pasiekti bet kurią elemento ypatybę arba metodą.

Pavyzdyje naudojama atgalinio skambinimo funkcija, kad prie kiekvieno puslapio vaizdo būtų pridėtas atributas alt, atsižvelgiant į vaizdo padėtį ir jo src atributą:

$(init); function init() ( // Nustatykite "alt" atributą visiems "img" elementams $("img").attr("alt", setAltText); funkcija setAltText(index, attributValue) (Return ("Paveikslas " + (indeksas +1) + ": " + this.src); ) )

Paleidus kodą, pirmas vaizdas turės alt atributą su reikšme „1 pav.: myphoto.jpg“, o antrasis vaizdas turės alt atributą, kurio reikšme „2 pav.: tavo nuotrauka.jpg“ .

Norėdami pašalinti atributą iš elemento, turite iškviesti metodą removeAttr() ir perduoti jam pašalinamo atributo pavadinimą. Pavyzdžiui:

// Pašalinkite atributą "title" iš #myLink elemento $("a#myLink").removeAttr("title");

Taip pat galite iškviesti metodą removeAttr() jQuery objekte, kuriame yra keli elementai. Metodas removeAttr() pašalins nurodytą atributą iš visų elementų:

// Pašalinkite atributą "title" iš visų nuorodų $("a").removeAttr("title");

Ši pamoka apėmė darbo su elementų atributais „jQuery“ problemas:

• Atributų verčių skaitymas
• Vieno atributo nustatymas
• Kelių skirtingų atributų nustatymas vienu metu
• Atšaukimo funkcijos naudojimas norint dinamiškai nustatyti elementų rinkinio atributų reikšmes
• Atributų pašalinimas iš elemento

Nustato nurodyto elemento atributo reikšmę. Jei atributas jau yra, reikšmė atnaujinama; kitu atveju pridedamas naujas atributas su nurodytu pavadinimu ir reikšme.

Būlio atributai laikomi teisingais, jei jie iš viso yra elemente, neatsižvelgiant į jų tikrąją reikšmę; paprastai vertėje turėtumėte nurodyti tuščią eilutę ("") (kai kurie žmonės naudoja atributo pavadinimą; tai veikia, bet yra nestandartinė). Žemiau rasite praktinį demonstravimą.

Kadangi nurodyta reikšmė konvertuojama į eilutę, nurodant null nebūtinai bus tai, ko tikitės. Užuot pašalinę atributą arba nustatę jo reikšmę į nulį , atributo reikšmė nustatoma į eilutę "null" . Jei norite pašalinti atributą, iškvieskite removeAttribute() .

Šiame pavyzdyje setAttribute() naudojamas atributams nustatyti .

Tai parodo du dalykus:

• Pirmasis iškvietimas į setAttribute() rodomas pavadinimo atributo vertės pakeitimas į "helloButton". Tai galite pamatyti naudodami naršyklės puslapio inspektorių (Chrome, Edge, Firefox, Safari).
• Norėdami nustatyti Būlio atributo reikšmę, pvz., išjungta , galite nurodyti bet kokią reikšmę. Tuščia eilutė arba atributo pavadinimas yra rekomenduojamos reikšmės. Svarbu tik tai, kad jei atributas apskritai yra, neatsižvelgiant į jo tikrąją vertę, jo vertė laikoma teisinga. Atributo nebuvimas reiškia, kad jo reikšmė klaidinga. Nustačius neįgaliojo atributo reikšmę į tuščią eilutę (""), išjungtą nustatome į true , todėl mygtukas bus išjungtas.

DOM metodai, susiję su elemento atributais:

• DOM Level 2 Core: setAttribute (įtraukta į DOM 1 lygio branduolį)

Šiame puslapyje esanti suderinamumo lentelė sukurta iš struktūrinių duomenų. Jei norite prisidėti prie duomenų, apsilankykite https://github.com/mdn/browser-compat-data ir atsiųskite mums užklausą.

Atnaujinkite GitHub suderinamumo duomenis

Naudojant setAttribute() keisti tam tikrus atributus, ypač reikšmę XUL, veikia nenuosekliai, nes atributas nurodo numatytąją reikšmę. Norėdami pasiekti arba pakeisti dabartines reikšmes, turėtumėte naudoti ypatybes. Pavyzdžiui, naudokite Element.value vietoj Element.setAttribute() .