ጃቫስክሪፕት በመጠቀም መለያ ላይ መለያ ያክሉ። በ jQuery ውስጥ የኤለመንት ባህሪያትን ማቀናበር። የመጀመሪያ እሴት

ባህሪያትን ከማከልዎ በፊት ወይም ሳይጨምሩ የአንድ የተወሰነ ቡሊያንን ዋጋ የሚፈትሽ ብጁ ማሰሪያ መፍጠር ይችላሉ። ይህን ምሳሌ ተመልከት፡-

Ko.bindingHandlers.attrIf = (ዝማኔ፡ ተግባር (ኤለመንት፣ valueAccessor፣ allBindingsAccessor) (var h = ko.utils.unwrapObservable(valueAccessor())፤ var show = ko.utils.unwrapObservable(h._if)፤ ከሆነ (አሳይ) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor);) ሌላ (ለ (var k በ h) (ከሆነ (h.hasOwnProperty(k) && k.indexOf("_")!== 0) ( $ (ንጥረ ነገር) .ማራገፍAttr (k); አገናኝ

@gbs ብቻ ብመልስ እመኛለሁ፣ ግን አልችልም። የእኔ መፍትሔ ሁለት ተመሳሳይ የኤችቲኤምኤል ኤለመንቶች እንዲኖሩት ነው፡ አንደኛው ባህሪው ያለው፣ አንዱ ያለሱ እና አንዳቸውን በንጥሉ መሰረት ለመጨመር የማንኳኳት ሁኔታ። እኔም ይህን የተለመደ ተስፋ አውቃለሁ፣ ግን የትኛው መፍትሔ የበለጠ ቀልጣፋ ነው?

በዚህ ጽሑፍ ውስጥ ከ DOM ንብረቶች እና ባህሪዎች ጋር እንተዋወቃለን ፣ እንዴት እንደሚለያዩ እና ከእነሱ ጋር በትክክል እንዴት እንደሚሠሩ ያስቡ ። ጃቫ ስክሪፕት በባህሪያት ላይ ስራዎችን ለማከናወን ምን ዘዴዎች እንዳሉት እንመልከት።

በባህሪ እና በDOM ንብረት መካከል ያለው ልዩነት ምንድን ነው?

ባህሪያት በኤችቲኤምኤል ኮድ ውስጥ የተወሰኑ መረጃዎችን የምንጨምርባቸው የኤችቲኤምኤል አካላት ናቸው።

አሳሽ አንድ ገጽ ሲጠይቅ የኤችቲኤምኤል ምንጭ ኮድ ይቀበላል። ከዚያ በኋላ, ይህን ኮድ ይተነትናል እና በእሱ ላይ የተመሰረተ DOM ይገነባል. በዚህ ሂደት፣ የኤችቲኤምኤል አባሎች ባህሪያት ወደ ተጓዳኝ DOM ባህሪያት ተተርጉመዋል።

ለምሳሌ አሳሹ የሚከተለውን የኤችቲኤምኤል ኮድ መስመር ሲያነብ ለዚህ ኤለመንት የሚከተሉትን የ DOM ባህሪያት ይፈጥራል፡ id , className , src እና alt .

እነዚህ ንብረቶች በጃቫ ስክሪፕት ኮድ እንደ የነገር ባህሪያት ይደርሳሉ። እዚህ ያለው ነገር DOM ኖድ (ንጥረ ነገር) ነው።

ከላይ ለተጠቀሰው አካል የ DOM ንብረቶችን እሴቶች የምናገኝበት እና እሴቶቻቸውን ወደ ኮንሶሉ የምናወጣበት ምሳሌ፡

// ኤለመንቱን ያግኙ var brandImg = document.querySelector ("#brand"); // የኤለመንቱን DOM ንብረቶች እሴቶች ወደ ኮንሶል ኮንሶል.log (brandImg.id) ያሳዩ; // "ብራንድ" console.log (brandImg.className); // "ብራንድ" console.log (brandImg.src); // "/logo.png" console.log (brandImg.alt); // "የጣቢያ አርማ"

አንዳንድ የDOM ንብረት ስሞች ከባህሪ ስሞች ጋር አይዛመዱም። ከእነዚህ ውስጥ አንዱ የክፍል ባህሪ ነው. ይህ ባህሪ ከDOM ንብረት ክፍል ስም ጋር ይዛመዳል። ይህ ልዩነት በጃቫ ስክሪፕት ውስጥ ክፍል ቁልፍ ቃል በመሆኑ ነው, የተያዘ እና ጥቅም ላይ ሊውል አይችልም. በዚህ ምክንያት የደረጃው አዘጋጆች ለማክበር ሌላ ስም ለመጠቀም ወስነዋል፣ ይህም እንደ ክፍል ስም ተመርጧል።

ሌላው ልዩነት በሰነዱ ምንጭ ኮድ ውስጥ የተገለጹትን የኤችቲኤምኤል ባህሪያትን ወደ DOM ንብረቶች መተርጎም ሁልጊዜ አንድ ለአንድ አለመደረጉ ጋር የተያያዘ ነው።

አንድ አካል መደበኛ ያልሆነ የኤችቲኤምኤል ባህሪ ካለው፣ በ DOM ውስጥ ከእሱ ጋር የሚዛመድ ንብረት አልተፈጠረም።

// ኤለመንት mydiv = document.querySelector ("#mydiv") ያግኙ; // የኤለመንቱን አልት ንብረት ዋጋ ያግኙ እና ወደ ኮንሶል ኮንሶል ያወጡት.log (mydiv.alt); // ያልተገለጸ // የኤለመንቱን አልት አይነታ ዋጋ አግኝ እና ወደ ኮንሶል ኮንሶል አውጣው (mydiv.getAttribute("alt")); // "..."

ሌላው ልዩነት የአንዳንድ የኤችቲኤምኤል ባህሪያት እሴቶች እና ተዛማጅ የ DOM ባህሪያቶቻቸው የተለያዩ ሊሆኑ ይችላሉ። እነዚያ። ባህሪ አንድ እሴት ሊኖረው ይችላል፣ እና በእሱ ላይ የተመሰረተ የ DOM ንብረት ሌላ ሊኖረው ይችላል።

ከነዚህ ባህሪያት ውስጥ አንዱ ተረጋግጧል።

በዚህ ጉዳይ ላይ የተረጋገጠው የኤችቲኤምኤል ባህሪ ዋጋ ባዶ ሕብረቁምፊ ነው። ነገር ግን፣ በ DOM ውስጥ ያለው ከዚህ ባህሪ ጋር የሚዛመድ ንብረት ዋጋ ይኖረዋል። ምክንያቱም እንደ ስታንዳርድ ህግጋት፣ እውነት ለመሆን፣ ይህንን ባህሪ በኤችቲኤምኤል ኮድ ውስጥ መጥቀስ ብቻ በቂ ነው፣ እና ምንም አይነት ዋጋ ቢኖረውም ምንም ለውጥ አያመጣም።

በተጨማሪም፣ ምልክት የተደረገበትን ባህሪ በኤችቲኤምኤል ኮድ ውስጥ ለግብአት ኤለመንት አይነት አመልካች ሳጥን ባንገልጽም ምልክት የተደረገበት ንብረት አሁንም በDOM ውስጥ ይፈጠርለታል፣ ግን ከሐሰት ጋር እኩል ይሆናል።

በተጨማሪም ጃቫ ስክሪፕት ከባህሪያት ጋር እንዲሰሩ ይፈቅድልዎታል. በ DOM ኤፒአይ ውስጥ ለዚህ ልዩ ዘዴዎች አሉ. ነገር ግን በዚህ መንገድ ከውሂብ ጋር መስራት በሚያስፈልግበት ጊዜ ብቻ እነሱን መጠቀም ተገቢ ነው.

በተመሳሳይ ጊዜ የአንድን ንጥረ ነገር DOM ንብረት በምንቀይርበት ጊዜ ተጓዳኝ ባህሪው እንደሚለወጥ እና በተቃራኒው እንደሚለወጥ ማወቅ ያስፈልግዎታል። ነገር ግን ይህ በአሳሾች ውስጥ ያለው ሂደት ሁልጊዜ አንድ ለአንድ አይደለም.

በ DOM ንብረቶች እና ባህሪያት መካከል ያሉት ዋና ዋና ልዩነቶች-

  • የባህሪ እሴቱ ሁል ጊዜ ሕብረቁምፊ ነው፣ እና የ DOM ንብረት ዋጋ የተወሰነ የውሂብ አይነት ነው (የግድ ሕብረቁምፊ አይደለም)።
  • የባህሪው ስም ለጉዳይ የማይሰማ ነው፣ እና የ DOM ባህሪያት ለጉዳይ-ትብ ናቸው። እነዚያ። በኤችቲኤምኤል ኮድ ውስጥ ለምሳሌ የኤችቲኤምኤል መታወቂያ ባህሪን እንደ መታወቂያ ፣ መታወቂያ ፣ ወዘተ መጻፍ እንችላለን ። ከሱ ጋር ለመስራት በልዩ የጃቫስክሪፕት ስልቶች የምንገልፀው የባህሪ ስም ላይም ተመሳሳይ ነው። ነገር ግን ተዛማጅ የሆነውን የDOM ንብረትን በመታወቂያ ብቻ ማግኘት እንችላለን እና በሌላ ምንም ነገር የለም።
የአንድ ንጥረ ነገር ከDOM ባህሪያት ጋር በመስራት ላይ

ከላይ እንደተገለፀው በጃቫስክሪፕት ውስጥ ካሉ ንጥረ ነገሮች ጋር አብሮ መሥራት የሚከናወነው እንደ የነገሮች ባህሪያት ነው።

ነገር ግን የንብረቱን ንብረት ለማግኘት በመጀመሪያ መገኘት አለበት. በጃቫ ስክሪፕት ውስጥ የDOM አባል ማግኘት ትችላለህ፣ ለምሳሌ፣ ሁለንተናዊውን የመጠይቅ መራጭ ዘዴ፣ እና የ DOM አባላት ስብስብ፣ ለምሳሌ querySelectorAllን በመጠቀም።

እንደ መጀመሪያ ምሳሌ፣ የሚከተለውን የኤችቲኤምኤል አባል አስቡበት፡-

የመረጃ መልእክት ጽሑፍ ... var alert = document.querySelector ("# ማንቂያ"); // ንጥረ ነገሩን ያግኙ

በእሱ ላይ በመመስረት የ DOM ንብረቶችን እንዴት ማግኘት እንደሚችሉ እንመረምራለን ፣ መለወጥ እና አዳዲሶችን እንጨምራለን ።

የDOM ንብረት እሴቶችን ማንበብ፡-

// የ DOM ንብረት መታወቂያ var alertId = alert.id ዋጋ ያግኙ; // "ማንቂያ" // የ DOM ንብረት ክፍል ዋጋ ያግኙ var alertClass = alert.className; // "የማንቂያ ማንቂያ-መረጃ" // የ DOM ንብረት ርዕስ ዋጋ ያግኙ var alertId = alert.title; // "የእገዛ ጽሑፍ..."

የDOM ንብረት እሴቶችን መለወጥ፡-

// የ DOM ንብረትን ዋጋ ለመለወጥ፣ ለእሱ አዲስ እሴት መስጠት ብቻ ያስፈልግዎታል alert.title = "New tooltip text"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

የ DOM ንብረቶችን ማከል

Alert.lang = "ru"; // የ lang ንብረት ወደ "ru" alert.dir = "ltr" አዘጋጅ; // የዲር ንብረቱን ወደ "ltr" ያዘጋጁ

ፒ ኤለመንቶች በገጹ ላይ ያላቸውን ሁሉንም የክፍል እሴቶች ወደ ኮንሶሉ የምናወጣበት ምሳሌ፡-

Var አንቀጾች = document.querySelectorAll ("p"); ለ (var i = 0, ርዝመት = አንቀጾች. ርዝመት; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

የ lang ንብረቱን ከይዘቱ ክፍል ጋር ለሁሉም ንጥረ ነገሮች ያዘጋጀንበት ምሳሌ “ru”

Var ይዘቶች = document.querySelectorAll ("ይዘት"); ለ (var i = 0, ርዝመት = ይዘቶች. ርዝመት; i< length; i++) { contents[i].lang = "ru"; }

ከነሱ ጋር አብሮ ለመስራት የንጥረ ነገሮች እና ዘዴዎች

ባህሪያት መጀመሪያ ላይ በኤችቲኤምኤል ኮድ ውስጥ ተቀምጠዋል። ምንም እንኳን እነሱ የተገናኙ ቢሆኑም, በሆነ መንገድ, ከንብረቶች ጋር, ተመሳሳይ ነገሮች አይደሉም. በአብዛኛዎቹ አጋጣሚዎች ከንብረቶች ጋር መስራት አለቦት እና ባህሪያቱን በትክክል ሲፈልጉ ብቻ ይድረሱ።

ከላይ እንደተገለጸው ከDOM ንብረቶች በተለየ የባህሪ እሴቶች ሁል ጊዜ ሕብረቁምፊ ናቸው።

ጃቫስክሪፕት ከባህሪያት ጋር የተያያዙ ስራዎችን ለማከናወን አራት መንገዶች አሉት፡-

  • .hasAttribute("የባህሪ_ስም") - ንጥረ ነገሩ የተወሰነ ባህሪ እንዳለው ያረጋግጣል። ንጥረ ነገሩ እየተረጋገጠ ያለው ባህሪ ካለው ፣ ይህ ዘዴ ወደ እውነት ይመለሳል ፣ ካልሆነ - ሐሰት።
  • .getAttribute("የባህሪ_ስም") - የባህሪ እሴቱን ያገኛል። ኤለመንቱ የተገለጸው ባህሪ ከሌለው ይህ ዘዴ ባዶ ሕብረቁምፊ ("") ወይም ባዶ ይመልሳል.
  • .setAttribute("የባህሪ_ስም"፣ "ባህሪ_ዋጋ") - የተገለጸውን ባህሪ ከተጠቀሰው እሴት ጋር ወደ ኤለመንት ያዘጋጃል። ኤለመንቱ የተገለጸው ባህሪ ካለው, ይህ ዘዴ በቀላሉ ዋጋውን ይለውጣል.
  • .removeAttribute("የባህሪ_ስም") - የተገለጸውን ባህሪ ከኤለመንት ያስወግዳል።

ምሳሌዎችን እንመልከት።

ከዋጋ ባህሪ ጋር በጣም አስደሳች ምሳሌ።

ምሳሌ ከዋጋ ባህሪ ጋር var ስም = document.querySelector("ግቤት"); // ንጥረ ነገሩን ያግኙ

የእሴቱን ባህሪ እና የ DOM ንብረት ዋጋን እናገኝ፡-

// የኤለመንት ስም.getAttribute ("እሴት") የእሴት ባህሪ እሴት ያግኙ; // "ቦብ" // የ DOM ንብረት ዋጋ ስም ዋጋ ያግኙ; // "ቦብ" // የእሴት ባህሪውን ዋጋ ያዘምኑ, ወደ አዲስ እሴት ያስቀምጡት name.setAttribute ("እሴት", "ቶም"); // "ቶም" // የ DOM ንብረት ዋጋ ስም ዋጋ ያግኙ; // "ቶም"

ይህ ምሳሌ የሚያሳየው የእሴት ባህሪው ሲቀየር አሳሹ የ DOM ንብረቱን በዚሁ መሰረት ይለውጣል።

አሁን ተቃራኒውን እናድርግ፣ ማለትም፣ የDOM ንብረቱን ዋጋ እንለውጣለን እና የባህሪ እሴቱ መቀየሩን ያረጋግጡ።

// ለ DOM ንብረት እሴት ስም አዲስ እሴት አዘጋጅ. እሴት = " John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

ይህ ምሳሌ የሚያሳየው የ DOM ንብረትን መቀየር ሁልጊዜ በባህሪው ላይ ወደ ሚዛመደ ለውጥ እንደማይመራ ነው። እነዚያ። በዚህ ጉዳይ ላይ የ DOM ንብረትን ዋጋ መለወጥ ተጓዳኝ ባህሪውን አይለውጥም.

ተጠቃሚው ወደዚህ መስክ ጽሑፍ ሲያስገባ ተመሳሳይ ነገር ይከሰታል. የDOM ንብረት ዋጋ ትክክለኛውን እሴት ይይዛል፣ እና ተጓዳኝ ባህሪው ዋናውን እሴት ወይም እኛ ያዘጋጀነውን ለምሳሌ የsetAttribute ዘዴን ይይዛል።

ይህ ምሳሌ የሚያሳየው ሁልጊዜ ከDOM ንብረቶች ጋር አብሮ መስራት የበለጠ ትክክል እንደሆነ ነው፣ እና ባህሪውን ማግኘት ያለብዎት በእውነቱ አስፈላጊ ሲሆን ብቻ ነው።

በኤችቲኤምኤል ውስጥ ያዘጋጀነውን የመጀመሪያ እሴት ለማግኘት በሚያስፈልግበት ሁኔታ ውስጥ እንኳን, ንብረቱን መጠቀም ይችላሉ. የዋጋ መለያው የመጀመሪያ ዋጋ ያለው ንብረት ነባሪ እሴት ይባላል።

ስም.defaultValue; //ቶም

ሌላ በጣም አስደሳች ምሳሌ ፣ ግን አሁን ከ href ባህሪ ጋር።

ምሳሌ ከ href ባህሪ ጋር

በኤችቲኤምኤል ውስጥ እንደተቀመጠው የአገናኙን ዋጋ ማግኘት የምንፈልግበት ምሳሌ።

var page2 = document.querySelector ("#link"); page2.getAttribute("href"); // ገጽ2.html ገጽ2.href; // ሙሉ ዩአርኤል፣ ለምሳሌ፡ http://localhost/page2.html

በዚህ ምሳሌ፣ የhref ባህሪ እና የ href DOM ንብረት የተለያዩ እሴቶችን ይይዛሉ። የhref ባህሪው በኮዱ ውስጥ ያዘጋጀነው ነው፣ እና የDOM ንብረቱ ሙሉ ዩአርኤል ነው። ይህ ልዩነት በአሳሹ የ href እሴቱን ወደ ሙሉ ዩአርኤል መፍታት እንዳለበት በመመዘኛው የታዘዘ ነው።

ስለዚህ ፣ በባህሪው ውስጥ ያለውን ነገር ማግኘት ከፈለግን ፣ በዚህ ሁኔታ ያለ getAttribute ዘዴ ማድረግ አንችልም።

በመጨረሻም፣ የተመረጠውን ባህሪ እንመልከት።

ከተመረጠው ባህሪ ጋር ምሳሌ

የተመረጠውን አማራጭ ዋጋ እንዴት ማግኘት እንደሚችሉ የሚያሳይ ምሳሌ፡-

ምንም ደረጃ የለም 1 2 3 4 5 // ይምረጡ አባል ያግኙ var mark = document.querySelector ("# ምልክት"); // 1 መንገድ mark.querySelector ("አማራጭ: ምልክት የተደረገበት") .እሴት; // ዘዴ 2 mark.value;

በተመረጠው አካል ውስጥ የተመረጡትን አማራጮች እንዴት ማግኘት እንደሚችሉ የሚያሳይ ምሳሌ፡-

ምንም ደረጃ የለም 1 2 3 4 5 // ይምረጡ አባል ያግኙ var mark = document.querySelector ("# ምልክት"); // ዘዴ 1 (ድርድርን በመፍጠር እና በተመረጡት አማራጮች ዋጋዎች በመሙላት) var arr =; ለ (var i = 0, ርዝመት = 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 =>አማራጭ.እሴት)

ከባህሪያት (የባህሪያቱ ንብረት) ጋር ለመስራት ሌላኛው መንገድ

በጃቫ ስክሪፕት ውስጥ፣ እያንዳንዱ አካል የባህሪዎች ንብረት አለው፣ እሱም ሁሉንም ባህሪያቱን እንደ NamedNodeMap ነገር ሰርስሮ ለማውጣት ሊያገለግል ይችላል።

ይህ ዘዴ በሚፈልጉበት ጊዜ ጥቅም ላይ ሊውል ይችላል, ለምሳሌ, ሁሉንም የንጥረ ነገሮች ባህሪያት ለመድገም.

በዚህ ስብስብ ውስጥ ያለ ባህሪ የሚገኘው በመረጃ ጠቋሚው ወይም በንጥል ዘዴው በመጠቀም ነው። በዚህ ስብስብ ውስጥ ያሉ ባህሪያት ከ0 ተቆጥረዋል።

ለምሳሌ፣ ሁሉንም የአንድ የተወሰነ አካል ባህሪያትን ወደ ኮንሶሉ እናሳይ፡-

ጃቫስክሪፕትን እወዳለሁ።

// ንጥረ ነገሩን በመለያው መልእክት ያግኙ var message = document.querySelector("#message"); // ባህሪያቱን ያግኙ var attrs = message.attributes; // loop (attrs.length - የባህሪዎች ብዛት) በመጠቀም ሁሉንም ባህሪያቶች (var i = 0, length = attrs.length; i< length; i++) { // attrs[i] или attrs.item(i) – обращение к атрибуту в коллекции по его порядковому номеру // attrs[i].name – имя атрибута // attrs[i].value – значение атрибута (с помощью него можно также изменить значение атрибута) console.log(attrs[i].name + " = " + attrs[i].value); // или с помощью метода item console.log(attrs.item(i).name + " = " + attrs.item(i).value); // пример как можно изменить значение через свойство value // if (attrs[i].name === "class") { // attr[i].value = "መረጃ"; // } } // в результате выполнения: // id = message // class = text // style = text-align: center;

በተጨማሪም, የሚከተሉትን ዘዴዎች በመጠቀም ከዚህ ስብስብ ጋር መስራት ይችላሉ.

  • .getNamedItem ("የባህሪ_ስም") - የተገለጸውን ባህሪ ዋጋ ያገኛል (የተጠቀሰው አይነታ በንጥሉ ላይ ከሌለ ውጤቱ ባዶ ይሆናል)።
  • .setNamedItem("ባህሪ_ኖድ") - ለአንድ ኤለመንት አዲስ አይነታ ያክላል ወይም የነባር እሴትን ያሻሽላል። አይነታ ለመፍጠር የሰነድ.createAttribute() ዘዴን መጠቀም አለቦት፣ይህም የባህሪ ስሙን እንደ ልኬት ማለፍ አለበት። የተፈጠረው ባህሪ የእሴት ንብረቱን በመጠቀም እሴት መመደብ አለበት።
  • .removeNamedItem ("ባህሪ_ስም") - የተገለጸውን ባህሪ ከአንድ ኤለመንት ያስወግዳል (የተወገደውን ባህሪ በውጤቱ ይመልሳል)።

በgetNamedItem፣setNamedItem እና removeNamedItem ዘዴዎች በኩል ከባህሪያት ጋር የመስራት ምሳሌ፡-

ጃቫስክሪፕትን እወዳለሁ።

// ንጥረ ነገሩን በመለያው መልእክት ያግኙ var message = document.querySelector("#message"); // ባህሪያቱን ያግኙ var attrs = message.attributes; // ተግባር ቁጥር 1. የመታወቂያ አይነታውን ኮንሶል.log(attrs.getNamedItem("መታወቂያ")) እሴት ያግኙ። // ተግባር ቁጥር 2. ባህሪውን ያቀናብሩ ( ካለ ፣ ከዚያ እሴቱን ይቀይሩ ፣ አለበለዚያ አዲስ ይጨምሩ) // የቅጥ ባህሪን ይፍጠሩ እና ወደ attrStyle ተለዋዋጭ ያስቀምጡት var attrStyle = document.createAttribute("style"); // የዋጋ ንብረቱን በመጠቀም ለባህሪው እሴት ይስጡ attrStyle.value = "text-align: left;"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !}

ተግባራት
  • የመታወቂያ ባህሪ ያላቸውን ሁሉንም የሰነድ አካላት ወደ ኮንሶሉ ያትሙ።
  • ይህ ባህሪ ከሌላቸው በገጹ ላይ ላሉት ምስሎች ሁሉ የርዕስ አይነታ ያክሉ። የባህሪ እሴቱን ከተለዋዋጭ ባህሪ እሴት ጋር እኩል ያዘጋጁ።

ይህ አጋዥ ስልጠና በ jQuery ውስጥ ያሉትን የንባብ ባህሪያትን ስለማንበብ እና ስለመቀየር ነው።

ባህሪያት በመለያ ላሉ ክፍሎች የተመደቡ ስም/እሴት ጥንድ ናቸው። የባህሪዎች ምሳሌዎች ( href, ርዕስ, ኤስአርሲ, ክፍል):

ማጠቃለያው ይህ ነው።

  • attr() ባህሪያትን ለማንበብ፣ ለመጨመር እና ለመቀየር
  • removeAttr () ባህሪያትን ለማስወገድ

ይህ ትምህርት ከ attr() እና removeAttr() ዘዴዎች ጋር መስራትን ያካትታል።

ከ CSS ክፍሎች ጋር ለመስራት ልዩ የ jQuery ዘዴዎች አሉ, በሌላ ትምህርት ውስጥ ተገልጸዋል. በ jQuery ውስጥ በፕሮጀክት ላይ ሲሰሩ የ CSS ክፍሎችን ብዙ ጊዜ ማቀናበር አለብዎት, እና የክፍል ባህሪው ብዙ የክፍል ስሞችን ሊይዝ ይችላል, ይህም ከሌሎች ባህሪያት ይልቅ ከእሱ ጋር መስራት በጣም የተወሳሰበ ያደርገዋል.

ከግቤት መስኮች እሴቶች ጋር ለመስራት ከፈለግክ የቫል () ዘዴን መጠቀም የተሻለ ነው ፣ ይህም ከዋጋ ባህሪው ጋር አብሮ ለመስራት ቀለል ያለ መንገድ ብቻ ሳይሆን ማንበብ እና እሴቶችን ማዘጋጀትም ይችላል። በተመረጠው ዝርዝር ውስጥ በተመረጡት ንጥረ ነገሮች ውስጥ.

የባህሪ እሴቱን ማንበብ

የአንድን ንጥረ ነገር ባህሪ ዋጋ ማንበብ ቀላል ነው። ኤለመንቱን በያዘው የ jQuery ነገር ላይ የ attr() ዘዴን ብቻ መጥራት ያስፈልግዎታል፣ ለማንበብ የባህሪውን ስም ያስተላልፉ። ዘዴው የባህሪ እሴቱን ይመልሳል፡-

// የ#myLink አባል ማንቂያ ($("a#myLink").attr("href")"የhref" ባህሪን ዋጋ ያትሙ፤

የእርስዎ jQuery ነገር ብዙ አካላትን ከያዘ፣ የ attr() ዘዴ የባህሪ እሴቶቹን የሚያነብበው በስብስቡ ውስጥ ላለው የመጀመሪያው አካል ብቻ ነው።

የባህሪ እሴቶችን ማቀናበር

የ attr() ዘዴ እንዲሁ የባህሪ እሴቶችን ለመጨመር ወይም ለመለወጥ ጥቅም ላይ ሊውል ይችላል፡-

  • ባህሪ ከሆነ አልተገኘምበንጥሉ ውስጥ, ይሆናል ታክሏልእና የተጠቀሰው እሴት ይመደባል.
  • ባህሪ ከሆነ አስቀድሞ አለ, ዋጋው ይሆናል ዘምኗልየተሰጠው ዋጋ.

ባህሪያትን ለመጨመር ወይም ለመለወጥ የ attr() ዘዴን ለመጠቀም ሶስት መንገዶች አሉ።

  • ለማንኛውም ኤለመንት (ወይም የንጥረ ነገሮች ስብስብ) ባህሪያትን ማከል/መቀየር ይችላሉ።
  • የባህሪ ስሞችን እና እሴቶችን ካርታ በመግለጽ ለአንድ አካል (ወይም ንጥረ ነገሮች) በአንድ ጊዜ ብዙ ባህሪያትን ማከል/መቀየር ይችላሉ።
  • የመልሶ መደወያ ተግባርን በመጠቀም ለብዙ አካላት በተለዋዋጭ አንድ ባህሪ ማከል/መቀየር ይችላሉ።
    • አንድ ባህሪ ያዘጋጁ

    የአንድን ንጥረ ነገር ባህሪ ለማቀናበር ወይም ለመቀየር የባህሪውን ስም እና እሴቱን የሚገልጽ የ attr() ዘዴን መደወል ያስፈልግዎታል። ለምሳሌ፥

    // የ#myLink ኤለመንትን የ"href" ባህሪ እሴት ወደ "http://www.example.com/" // እሴት ይቀይሩ (የ"href" ባህሪ ከሌለ በራስ ሰር ይፈጠራል) $("a#myLink") attr("href", "http://www.example.com/");

    ለብዙ አካላት አንድ አይነት ባህሪ ማዘጋጀትም ይቻላል፡-

    ካርታን በመጠቀም በርካታ ባህሪያትን በማዘጋጀት ላይ

    ካርታን በመጠቀም ብዙ ባህሪያትን በአንድ ወይም ከዚያ በላይ በሆኑ አካላት ላይ በአንድ ጊዜ ማዘጋጀት ይችላሉ። ይህ የሚከተለውን የሚመስል የስም/የእሴት ጥንዶች ዝርዝር ነው።

    (ስም1: እሴት1፣ ስም2: እሴት2፣...)

    የሚከተለው ምሳሌ በ img ኤለመንት ላይ በተመሳሳይ ጊዜ ሁለት ባህሪያትን ያዘጋጃል፡

    // የ"src" እና "alt" ባህሪያትን ለ img ኤለመንት ያቀናብሩ #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "My Photo" )) ;

    እንዲሁም ለብዙ አባሎች ባህሪያትን ማቀናበር ይችላሉ፡

    // የ "src" እና "alt" ባህሪያትን ለሁሉም img ኤለመንቶች ያዘጋጁ $("img").attr(("src": "mypic.jpg", "alt": "My Photo" ));

    የመልሶ መደወል ተግባርን በመጠቀም ባህሪያትን ማቀናበር

    የባህሪ እሴቶችን ወደ attr () ዘዴ ከማስተላለፍ ይልቅ የመልሶ መደወል ተግባርን ስም ማለፍ ይችላሉ። በዚህ መንገድ በኤለመንቱ ቦታ፣ ባለው የባህሪ እሴት ወይም ሌሎች ንብረቶች ላይ በመመስረት ለብዙ አካላት የባህሪ እሴቶችን በተለዋዋጭ ማቀናበር ይችላሉ።

    የመመለሻ ተግባር ሁለት ነጋሪ እሴቶችን መውሰድ አለበት፡-

    • በስብስቡ ውስጥ አሁን የተመረጠው ንጥረ ነገር ቦታ ጠቋሚ (በዜሮ ይጀምራል)
    • አሁን ለተመረጠው አካል የድሮው የባህሪ እሴት

    በተግባሩ የተመለሰው እሴት የባህሪ እሴቱን ለመተካት ጥቅም ላይ ይውላል።

    ከኤለመንቱ የአሁን ቦታ እና የባህሪው አሮጌ እሴት በተጨማሪ ተግባርዎ ይህንን ቁልፍ ቃል ተጠቅሞ ኤለመንቱን ራሱ ማግኘት ይችላል። በዚህ መንገድ፣ ከመልሶ መደወል ተግባር ማንኛውንም ንጥረ ነገር ንብረት ወይም ዘዴ ማግኘት ይችላሉ።

    ምሳሌው በምስሉ አቀማመጥ እና በsrc ባህሪው ላይ በመመስረት በገጹ ላይ ላለው እያንዳንዱ ምስል የተለዋጭ ባህሪን ለመጨመር የመልሶ መደወል ተግባርን ይጠቀማል፡-

    $(init); ተግባር init () (// ለሁሉም "img" ኤለመንቶች የ"alt" አይነታ ያዘጋጁ $ ("img").attr ("alt", setAltText); ተግባር setAltText (ኢንዴክስ, attributeValue) (ተመለስ ("ምስል") + (ኢንዴክስ +1) + ":" + this.src);

    ኮዱን ካስኬዱ በኋላ, የመጀመሪያው ምስል "ስእል 1: myphoto.jpg" እሴት ያለው የአልት ባህሪ ይኖረዋል እና ሁለተኛው ምስል "ስእል 2: yourphoto.jpg" እሴት ያለው alt ባህሪ ይኖረዋል.

    ባህሪን በማስወገድ ላይ

    አንድን ባህሪ ከአንድ ኤለመንት ለማስወገድ፣ ለማስወገድ የባህሪውን ስም በማስተላለፍ የ removeAttr() ዘዴን መጥራት ያስፈልግዎታል። ለምሳሌ፥

    // የ"ማዕረግ" ባህሪን ከ#myLink ኤለመንት $("a#myLink") ያስወግዱ።removeAttr("ርዕስ");

    እንዲሁም ብዙ ኤለመንቶችን በያዘ jQuery ነገር ላይ removeAttr() የሚለውን ዘዴ መደወል ይችላሉ። የ removeAttr() ዘዴ የተገለጸውን ባህሪ ከሁሉም አካላት ያስወግዳል፡-

    // የ"ማዕረግ" ባህሪን ከሁሉም አገናኞች አስወግድ $("a").removeAttr("ርዕስ");

    ማጠቃለያ

    ይህ ትምህርት በ jQuery ውስጥ ከኤለመንት ባህሪያት ጋር አብሮ የመስራትን ጉዳዮችን ያካትታል፡-

    • የንባብ ባህሪ እሴቶች
    • አንድ ባህሪ በማዘጋጀት ላይ
    • ብዙ የተለያዩ ባህሪያትን በአንድ ጊዜ በማዘጋጀት ላይ
    • የመመለሻ ጥሪ ተግባርን በመጠቀም የባህሪ እሴቶችን በንጥረ ነገሮች ስብስብ ላይ ለማቀናበር
    • ባህሪያትን ከአንድ ኤለመንት በማስወገድ ላይ

    ትምህርቱ የርዕሱን መጀመሪያ ይሸፍናል፡ የሰነዱ ነገር ሞዴል (ጃቫስክሪፕት DOM) ተለዋዋጭ ኤችቲኤምኤል መሰረት ነው፣ ነገሮችን የመዳረሻ ዘዴዎች ይማራሉ እና የጃቫስክሪፕት ሁነቶችን የማስኬድ ዘዴዎች ይታሰባሉ።

    • በአጠቃላይ አንድ ነገር ብዙ እሴቶችን ወደ አንድ የጋራ አሃድ የሚያጣምረው እና በፍላጎታቸው በስማቸው እንዲቀመጡ እና እንዲነሱ የሚያስችል የተቀናጀ የውሂብ አይነት ነው።

      • ቀደም ሲል በጃቫስክሪፕት ውስጥ ካለው ጽንሰ-ሀሳብ ጋር መተዋወቅ ጀመርን።

    • በጃቫስክሪፕት ውስጥ እንደ DOM ያለ ነገር አለ - የሰነድ ነገር ሞዴል- የድረ-ገጽ ነገር ሞዴል (ኤችቲኤምኤል ገጽ)።
    • የሰነድ መለያዎች ወይም እነሱም እንደሚሉት፣ የሰነድ ኖዶች የእሱ ነገሮች ናቸው።

    ሥዕላዊ መግለጫውን እንመልከት የነገር ተዋረድ በጃቫስክሪፕት, እና በተዋረድ ውስጥ በዚህ ርዕስ ውስጥ የተብራራው የሰነድ ነገር የት እንደሚገኝ.

    የስክሪፕቱ አካል የሚከተሉት ባህሪዎች አሉት።

  • መዘግየት (ገጹ ሙሉ በሙሉ እስኪጫን ድረስ በመጠበቅ ላይ)።

    • ለምሳሌ፥

    /* የ js ፋይሎችን በትይዩ እንዲጫኑ እና ከተጫኑ በኋላ ወዲያውኑ እንዲፈጸሙ ይፈቅዳል፣ የቀረውን የገፁን ሂደት ሳይጠብቅ *//* አሳሹ ተጨማሪ የገጹን ሂደት ሳያቋርጥ js ፋይሎችን በትይዩ መጫን እንዲጀምር ያስችለዋል። አፈፃፀማቸው የሚከሰተው የሰነዱን ነገር ሞዴል ሙሉ በሙሉ ከተተነተነ በኋላ ነው */

    በጃቫስክሪፕት ውስጥ የሰነዱ ነገር ባህሪያት እና ባህሪያት

    የሰነዱ ነገር ድረ-ገጽን ይወክላል።

    ጠቃሚ፡ የነገሩን ባህሪያት እና ዘዴዎች በጃቫስክሪፕት ለማግኘት፣ ከሌሎች ነገሮች ጋር ሲሰሩ፣ የነጥብ ኖት ስራ ላይ ይውላል፡

    እነዚያ። በመጀመሪያ እቃው ራሱ ይጻፋል, ከዚያም ንብረቱ, ባህሪው ወይም ዘዴው በነጥብ እና ያለ ክፍተቶች ይገለጻል

    ነገር.የንብረት ነገር.የባህሪ ነገር.ዘዴ()

    አንድ ምሳሌ እንመልከት፡-

    ምሳሌ፡ በኤችቲኤምኤል ሰነድ ውስጥ መለያ ይኑር

    የእኔ አካል

    እና ለእሱ የተገለጸው የ css ዘይቤ (ሁለት ቅጦች እንኳን ፣ ሁለተኛው ለሥራው ጠቃሚ ይሆናል)

    ትንሽ ( ቀለም: ቀይ; የቅርጸ-ቁምፊ መጠን: ትንሽ;) .ትልቅ ( ቀለም: ሰማያዊ; የቅርጸ-ቁምፊ መጠን: ትልቅ;)

    .ትንሽ ( ቀለም: ቀይ; የቅርጸ-ቁምፊ መጠን: ትንሽ;) .ትልቅ ( ቀለም: ሰማያዊ; የቅርጸ-ቁምፊ መጠን: ትልቅ;)

    አስፈላጊ፡

  • የአንድ ነገር አዲስ ንብረት ያዘጋጁ ፣ ለእሱ እሴት ይመድቡ እና ይህንን እሴት ያሳዩ ፣
  • የአንድ ነገር ባህሪ ዋጋ ማሳየት;
  • የአንድ ነገር ባህሪ ዋጋ መለወጥ.

    • ስራውን በቅደም ተከተል እንጨርስ፡-
    ✍ መፍትሄ፡-

    ይህ የጃቫስክሪፕት ቋንቋ ስለሆነ ማንኛውንም እሴት ለአንድ ነገር መፍጠር እና ማዋቀር ይችላሉ። ግን በመጀመሪያ ፣ ወደ ዕቃው እንሂድ (ወደ ዕቃው መድረስ በዚህ ትምህርት በኋላ በዝርዝር ይብራራል)

    // ነገሩን በእሱ መታወቂያ var አባል ይድረሱበት = document.getElementById ("MyElem"); element.myProperty = 5; // የንብረት ማንቂያውን ይመድቡ (element.myProperty); // በንግግር ሳጥን ውስጥ አሳይ

    የሚቀጥለው ተግባር ከአንድ ነገር ባህሪ ጋር የተያያዘ ነው። የነገር ባህሪ የመለያው ባህሪያት ነው። እነዚያ። በእኛ ሁኔታ ሁለቱ አሉ-የክፍል ባህሪ ከዋጋ ትንሽ እና የመታወቂያ ባህሪ ጋር። ከክፍል ባህሪ ጋር እንሰራለን.

    አሁን የኛን ነገር የባህሪ እሴት ለማሳየት የጃቫስክሪፕት ኮድ እንጨምር። ኮዱ መሆን አለበት። በኋላዋና መለያዎች

    // ነገሩን በእሱ መታወቂያ var አባል ይድረሱበት = document.getElementById ("MyElem"); ማንቂያ (element.getAttribute ("ክፍል")); // በንግግር ሳጥን ውስጥ አሳይ

    እና የመጨረሻው ተግባር: የባህሪ ዋጋን መለወጥ. ለዚህ የሚሆን ዘይቤ አለን። "ትልቅ". የክፍሉን ባህሪ ዋጋ በዚህ ዘይቤ እንተካው፡-

    // ነገሩን በእሱ መታወቂያ var አባል ይድረሱበት = document.getElementById ("MyElem"); element.setAttribute("ክፍል""ትልቅ");

    በውጤቱም, የእኛ ንጥረ ነገር ትልቅ እና ሰማያዊ (ክፍል ትልቅ) ይሆናል.

    አሁን ከባህሪያት ጋር ለመስራት በምሳሌው ውስጥ ያሉትን ዘዴዎች በዝርዝር እንመልከታቸው.

    በጃቫስክሪፕት ውስጥ ከባህሪያት ጋር ለመስራት ዘዴዎች

    ባህሪያት ሊታከሉ፣ ሊሰረዙ እና ሊሻሻሉ ይችላሉ። ለዚህ ልዩ ዘዴዎች አሉ-

    • ባህሪ ማከል (ለእሱ አዲስ እሴት በማዘጋጀት ላይ)

      • getAttribute(attr)

    • የዚህ አይነታ መኖር መኖሩን ማረጋገጥ፡-

      • removeAttribute(attr)

    ከባህሪያት ጋር ለመስራት የተለያዩ መንገዶች

    ምሳሌ፡ የጽሑፍ ብሎክን የእሴት ባህሪ ዋጋ ያትሙ።


    ✍ መፍትሄ፡-
    • የጽሑፍ እገዳ ይኑር፡-

      • var elem = document.getElementById ("MyElem"); var x = "እሴት";

    • የባህሪ እሴቱን ለማግኘት ብዙ መንገዶችን እንይ (ለውጤት የማንቂያ() ዘዴን ይጠቀሙ)
      • elem.getAttribute("እሴት")

      elem.getAttribute("እሴት")

      2. የነጥብ ማስታወሻ፡-

      elem.ባህሪያት.እሴት

      elem.ባህሪያት.እሴት

      3. የቅንፍ ማስታወሻ፡-

      var element = document.getElementById ("t1"); ማንቂያ (...) element.setAttribute (...);


      እንዲሁም የባህሪ እሴቶችን በበርካታ መንገዶች ማቀናበር ይችላሉ-

      var x = "ቁልፍ"; // ቁልፍ - መለያ ስም ፣ ቫል - ለባህሪው እሴት // 1. elem.setAttribute("ቁልፍ", "ቫል") // 2. elem.attributes.key = "val" // 3. elem.attributes[ "ቁልፍ"] = "ቫል" // 4. elem.setAttribute(x, "val")

      የሰውነት አካል ባህሪያት

      በሰነዱ ነገር በኩል የሰነዱን አካል - የሰውነት መለያ - አንዳንድ ጠቃሚ ባህሪያትን ማግኘት ይችላሉ.

      ለምሳሌ፣ የሰውነት መለያው ሁለት ባህሪያት አሉት፡ የደንበኛው መስኮት ስፋት እና ቁመት፡

      document.body.clientHeight - የደንበኛው መስኮት ቁመት
      document.body.clientWidth - የደንበኛው መስኮት ስፋት


      ነገር ግን በጣም አስፈላጊው ነገር, አስቀድመን እንደተማርነው, በሰነዱ ነገር, በልዩ ዘዴዎች, ለሁሉም የገጽ ክፍሎች ማለትም መለያዎች መዳረሻ ይሰጣል.

      ጠቃሚ፡ የገጽ መለያዎችን በዚህ መንገድ ሲደርሱ፣ ስክሪፕቱ አካልን ከመዝጋት በፊት በኤለመንቱ ዛፍ መጨረሻ ላይ መሆን አለበት። ስክሪፕቱ በሚተገበርበት ጊዜ ሁሉም ንጥረ ነገሮች ቀድሞውኑ በማያ ገጹ ላይ ባለው አሳሽ “መሳል” አለባቸው

      ስራ js8_1 ስለ አሳሹ መስኮት መጠን መልእክት አሳይ፡ ለምሳሌ፡- የአሳሽ መስኮት ልኬቶች 600 x 400

      በጃቫስክሪፕት ውስጥ የሰነድ አካላትን መድረስ

      ነገሮችን ለመድረስ ወይም ለመፈለግ ብዙ አማራጮች አሉ፡

  • በመታወቂያ ፈልግ (ወይም getElementById ዘዴ) አንድ የተወሰነ አካል ይመልሳል
  • በመለያ ስም ይፈልጉ (ወይም getElementsByTagName ዘዴ)፣ የንጥረ ነገሮች ድርድር ይመልሳል
  • በስም አይነታ (ወይም getElementsByName ዘዴ) ይፈልጉ፣ የንጥረ ነገሮችን ድርድር ይመልሳል
  • በወላጅ አካላት (ሁሉንም ልጆች ማግኘት)

    • እያንዳንዱን አማራጮች በበለጠ ዝርዝር እንመልከት.

  • አንድን ንጥረ ነገር በመታወቂያ ባህሪው መድረስ

    • አገባብ፡ document.getElementById(መታወቂያ)

    የgetElementById() ዘዴ ኤለመንቱን ራሱ ይመልሳል፣ይህም መረጃን ለመድረስ ሊያገለግል ይችላል።

    ምሳሌ፡ ገጹ የ id="cake" ባህሪ ያለው የጽሑፍ መስክ አለው፡-

    ...

    አስፈላጊ


    ✍ መፍትሄ፡-

      ማንቂያ (document.getElementById ("ኬክ") .እሴት); // "የኬክ ብዛት" ይመልሳል

      ዕቃውን በተለዋዋጭ በመድረስ ተመሳሳይ ነገር ማድረግ ይችላሉ፡-

      var a=document.getElementById("ኬክ"); ማንቂያ (a.value); // የእሴት ባህሪውን ዋጋ አሳይ, ማለትም. ጽሑፍ "የኬክ ብዛት"

    ጠቃሚ፡ ስክሪፕቱ ከታግ በኋላ መቀመጥ አለበት!

  • በስም መለያ እና በድርድር መረጃ ጠቋሚ በኩል የንጥረ ነገሮች ድርድር መድረስ

    • አገባብ፡
    document.getElementsByTagName (ስም);

    ምሳሌ፡ በገጹ ላይ የጽሑፍ መስክ አለ (የግቤት መለያ) ከዋጋ ባህሪ ጋር፡-

    ...

    የሚያስፈልግ፡ የእሴት ባህሪውን ዋጋ አሳይ


    የgetElementsByTagName ዘዴ በተለዋዋጭ ወደ ሁሉም የግቤት ክፍሎች (ማለትም፣ የግቤት አካላት ድርድር) ይሰጣል፣ ምንም እንኳን ይህ ኤለመንት በገጹ ላይ ያለው ብቸኛው ቢሆንም። አንድን የተወሰነ አካል ለመድረስ ለምሳሌ የመጀመሪያውን፣ ኢንዴክሱን እንጠቁማለን (ድርድር በመረጃ ጠቋሚ ዜሮ ይጀምራል)።

    ✍ መፍትሄ፡-

      አንድ የተወሰነ አካል በመረጃ ጠቋሚ እናገኛለን፡-

      var a =document.getElementsByTagName("ግቤት"); ማንቂያ (a.value); // "የኬክ ብዛት" ይመልሳል

  • በስም ባህሪው ዋጋ የንጥረ ነገሮችን ድርድር መድረስ

    • አገባብ፡
    document.getElementsByName (ስም);

    የጌትElementsByName("...") ዘዴ የስም ባህሪያቸው እንደ ዘዴ መለኪያ ከተገለጸው እሴት ጋር እኩል የሆነ የነገሮችን ስብስብ ይመልሳል። በገጹ ላይ እንደዚህ ያለ አካል አንድ ብቻ ካለ ፣ ዘዴው አሁንም ድርድርን ይመልሳል (ከአንድ ነጠላ አካል ጋር)።


    ምሳሌ፡ በሰነዱ ውስጥ አንድ አካል አለ እንበል፡-

    var element = document.getElementsByName ("MyElem"); ማንቂያ (element.value);

    በዚህ ምሳሌ ውስጥ አንድ አካል አለ, ግን ማመሳከሪያው የድርድር ዜሮ አካል ነው.

    ጠቃሚ፡-ዘዴው የሚሰራው በስም መግለጫው ውስጥ የስም ባህሪው በግልፅ ከተሰየመባቸው ንጥረ ነገሮች ጋር ብቻ ነው፡ እነዚህ ቅፅ፣ ግብአት፣ ሀ፣ ምረጥ፣ ቴክስትሬአ እና ሌሎች በርካታ፣ አልፎ አልፎ፣ መለያዎች ናቸው።

    የሰነድ.getElementsByName ዘዴ እንደ div፣p፣ ወዘተ ካሉ ሌሎች አካላት ጋር አይሰራም።

  • የወላጅ አካል ዘሮችን መድረስ

    • ልጆች በጃቫስክሪፕት በ childNodes ንብረቱ በኩል ማግኘት ይችላሉ። ንብረቱ የወላጅ ነገር ነው።

    document.getElementById(roditel).childNodes;

    document.getElementById(roditel).childNodes;

    የምስል መለያዎች ዲቪ ታግ በሚባል መያዣ ውስጥ የሚቀመጡበትን ምሳሌ እንመልከት። ስለዚህም ዲቪ ታግ የምስሉ ውሂቡ ወላጅ ነው፣ እና ኢምግ ታግ ራሳቸው የዲቪ ታግ ልጆች ናቸው።

    አሁን የድርድር አካላትን እሴቶች በሞዳል መስኮት ውስጥ ከዘሮች ጋር እናሳይ ፣ ማለትም። img tags

    var myDiv=document.getElementById("div_for_img"); // የወላጅ መያዣውን var childMas=myDiv.childNodes; // የዘር ድርድር ለ (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

    በዘር ድርድር አካላት በኩል ለመድገም loop ለመጠቀም ምቹ መሆኑን ልብ ይበሉ። እነዚያ። በእኛ ምሳሌ ውስጥ ዑደት እናገኛለን-

    ... ለ (var a in childMas) (ማስጠንቀቂያ (childMas[ a.src) ;)

    ለ (var a in childMas) (ማስጠንቀቂያ(childMas[a]src);)

  • ንጥረ ነገሮችን ለመድረስ ሌሎች መንገዶች

    • ምሳሌን በመጠቀም ሌሎች ዘዴዎችን እንመልከት-

    1 3 4

    1 3 4

    መዳረሻ፡

    ... // ያልተፈለጉ እና ያልተቋረጡ የኤለመንት መለዋወጫዎች: ማንቂያ (ሰነድ.ፎርሞች [0] .ስም); // f ማንቂያ (ሰነድ.ፎርሞች [0] .ንጥረ ነገሮች [0] .አይነት); // የጽሑፍ ማንቂያ (ሰነድ. ቅጾች [0] .ኤለመንቶች [2] .አማራጮች [1] .መታወቂያ); // o2 ማንቂያ (ሰነድ.f .b .አይነት); // የአዝራር ማንቂያ (ሰነድ.f .s .ስም); // ss ማንቂያ (ሰነድ.f .s .አማራጮች [1] .id); // o2 // ኤለመንቶችን ለማግኘት ተመራጭ ዘዴዎች ማንቂያ (document.getElementById ("t") .type); // የጽሑፍ ማንቂያ (document.getElementById ("ዎች") .ስም); // ss ማንቂያ (document.getElementById ("ዎች") .አማራጮች [1] .መታወቂያ; // 02 ማንቂያ (document.getElementById ("o3") .ጽሑፍ); // 4...

    ... // ያልተፈለገ እና ያልተቋረጠ የኤለመንት መዳረሻ ዘዴዎች፡ ማንቂያ (document.forms.name); // f ማንቂያ (document.forms.elements.type); // የጽሑፍ ማንቂያ (document.forms.elements.options.id); // o2 ማንቂያ (ሰነድ.f.b.type); // የአዝራር ማንቂያ (ሰነድ.f.s.name); // ss ማንቂያ (ሰነድ.f.s.options.id); // o2 // አባሎችን ለመድረስ ተመራጭ ዘዴዎች ማንቂያ(document.getElementById("t").አይነት); // የጽሑፍ ማንቂያ (document.getElementById("ዎች").ስም); // ss ማንቂያ (document.getElementById("ዎች") .options.id); // 02 ማንቂያ (document.getElementById("o3").ጽሑፍ); // 4...

    ምሳሌ፡ በኤችቲኤምኤል ሰነድ ውስጥ አዝራር እና የጽሑፍ መስክ ይፍጠሩ። ስክሪፕት በመጠቀም የአዝራሩን ዳራ ቀለም (style.backgroundColor የአዝራሩን ንብረት) እና ጽሑፉን አሳይ "ሀሎ!"በጽሑፍ መስክ (የዋጋ ባህሪ).

    HTML ኮድ

    document.getElementById("t1").እሴት = " ሰላም!"; document.getElementById("b1").style.backgroundColor = "red";!}

    አማራጭ 2፡-

    document.getElementById ("t1") .setAttribute ("እሴት"፣"ሄሎ!"); document.getElementById("b1") .style .backgroundColor = "ቀይ";

    document.getElementById("t1").setAttribute("ዋጋ","ሄሎ!"); document.getElementById("b1").style.backgroundColor = "ቀይ";

    ተግባር Js8_2 በሥዕሉ ላይ እንደሚታየው የጽሑፍ መስክ መለያዎችን ይፍጠሩ። ተጓዳኝ (በሥዕሉ ላይ የሚታየው) የመታወቂያ ባህሪ እሴቶችን ይስጧቸው። ስክሪፕት በመጠቀም፣ እሴቱን "0" ወደ ሁሉም የቁጥር መስኮች ያክሉ (የቁጥር እሴቶችን ግምት ውስጥ በማስገባት)

    የቅጹ መረጃ በትክክል እንደገባ በማረጋገጥ ላይ

    ሜዳው ባዶ ነውን?

    የተጠቃሚ ግቤት ሊታመን አይችልም. ተጠቃሚዎች ውሂብ በሚያስገቡበት ጊዜ መረጃን ይፈትሹታል ብሎ ማሰብ ምክንያታዊ አይደለም. ስለዚህ ለዚህ ጃቫስክሪፕት መጠቀም ያስፈልግዎታል.

    የጽሑፍ መስኩ ባዶ እንደሆነ ለመፈተሽ (ለምሳሌ ተጠቃሚው የአንዳንድ ቅጾችን ውሂብ ከሞላ በኋላ) የእሴት ንብረቱን መመልከት አለብዎት። የንብረቱ ዋጋ ባዶ ሕብረቁምፊ ("") ከሆነ ፣ስለዚህ በሆነ መንገድ ለተጠቃሚው ማሳወቅ አለብዎት።


    if(document.getElementById("ስም").እሴት=="") (አንዳንድ ድርጊቶች ለምሳሌ መስክ እንዲሞሉ የሚጠይቅዎትን መልእክት ማሳየት)።

    በተጨማሪም, ያለ ስክሪፕት ማድረግ ይችላሉ. የጽሑፍ መስኩ የግቤት መለያ የስርዓተ-ጥለት ባህሪ አለው። እሴቱ በተሰጠው የጽሑፍ መስክ ውስጥ ያለውን መረጃ ለመፈተሽ መደበኛ አገላለጽ ይገልጻል። ባህሪው ካለ ስርዓተ-ጥለት, ከዚያም ይህ የጽሑፍ መስክ በትክክል እስኪሞላ ድረስ ቅጹ አይቀርብም.
    ለምሳሌ፣ አንድ መስክ ባዶ እንደሆነ ለመፈተሽ፡-

    ከቁጥር እሴት ይልቅ ጽሑፍ፡ isNaN ተግባር

    አንድ መስክ የቁጥር እሴት ማስገባት ከፈለገ፣ ነገር ግን በምትኩ ተጠቃሚው ጽሑፍ ካስገባ፣ የ isNaN ተግባር መጠቀም አለበት። "ቁጥር አይደለም?"), የግቤት ውሂብን አይነት የሚፈትሽ እና ከቁጥር ውሂብ ይልቅ የጽሑፍ ውሂብ ከገባ እውነትን ይመልሳል።

    ያ። እውነት ከተመለሰ ተጠቃሚው ትክክለኛውን ቅርጸት እንዲያስገባ ማሳወቅ አለበት ማለትም ቁጥር

    if(isNaN(document.getElementById("ደቂቃዎች").እሴት))(አሃዛዊ መረጃ እንዲያስገቡ የሚፈልግ ማንቂያ);

    የሚሞሉ ንጥረ ነገሮች ያለው ገጽ ተሰጥቷል፡-


    የኤችቲኤምኤል ኮድ ቅንጣቢ፡-

    1 2 3 4 5 6 7 8 9 10 11 12 ስም፡
    የዶናት ብዛት፡-
    ደቂቃዎች፡-
    ማጠቃለያ፡-
    ግብር፡
    ውጤት፡
    ...

    ስም፡
    የዶናት ብዛት፡-
    ደቂቃዎች፡-
    ማጠቃለያ፡-
    ግብር፡
    ውጤት፡
    ...

    አስፈላጊ፡
    ሁለት የጽሑፍ መስኮች በትክክል መሞላታቸውን ለማረጋገጥ ከዚህ በታች ባለው የኮድ ቅንጣቢ ውስጥ ያሉትን ባዶ ቦታዎች ይሙሉ። ስም(መታወቂያ = "ስም") እና ደቂቃዎች(መታወቂያ = "ደቂቃዎች") መስኩ ባዶ እንደሆነ ("") እና የቁጥር መስኩ በትክክል መሙላቱን ለማረጋገጥ ቼኮችን ይጠቀሙ (isNaN)።

    * በመጠቀም በጽሑፍ መስኮች ንድፍ ባህሪ ተግባሩን ያከናውኑ።

    የስክሪፕት ቁራጭ፡

    ኮዱ ውስብስብ ሁኔታዎችን ለመገንባት ቀደም ሲል የተማሩ ሁኔታዎችን ይጠቀማል።

    ለእርስዎ አዲስ ጽንሰ-ሐሳብ አንድን ተግባር እንደ አዝራር ክስተት ተቆጣጣሪ እየጠራ ነው፡-
    onclick = "ቦታ ትዕዛዝ ();"
    አዝራሩ ሲጫን የቦታ ትዕዛዝ() ተግባር ይጠራል

    የባህሪ ዋጋን በተጠቀሰው አካል ላይ ያዘጋጃል። ባህሪው ቀድሞውኑ ካለ, እሴቱ ተዘምኗል; አለበለዚያ አዲስ ባህሪ ከተጠቀሰው ስም እና እሴት ጋር ይታከላል.

    አገባብ ንጥረ ነገርስብስብ ባህሪ( ስም, ዋጋ); የመለኪያዎች ስም A DOMSstring እሴቱ የሚዋቀርበትን የባህሪውን ስም የሚገልጽ ነው። በኤችቲኤምኤል ሰነድ ውስጥ በኤችቲኤምኤል ኤለመንት ላይ setAttribute() ሲጠራ የባህሪው ስም በራስ ሰር ወደ ሁሉም ንዑስ ሆሄ ይቀየራል። እሴት ለባህሪው የሚመደብ እሴት ያለው DOMSstring። ማንኛውም የሕብረቁምፊ ያልሆነ እሴት በራስ-ሰር ወደ ሕብረቁምፊ ይቀየራል።

    የቡሊያን ባህሪዎች ምንም እንኳን ትክክለኛው ዋጋቸው ምንም ይሁን ምን በንጥሉ ላይ ካሉ እንደ እውነት ይቆጠራሉ ፣ እንደ ደንቡ ፣ ባዶውን ሕብረቁምፊ ("") በዋጋ መግለጽ አለብዎት (አንዳንድ ሰዎች የባህሪውን ስም ይጠቀማሉ። ይህ ይሰራል ነገር ግን መደበኛ ያልሆነ ነው). ለተግባራዊ ማሳያ ከዚህ በታች ያለውን ይመልከቱ።

    የተገለጸው እሴት ወደ ሕብረቁምፊ ስለሚቀየር፣ nullን መግለጽ እርስዎ የሚጠብቁትን ነገር ማድረግ ማለት አይደለም። ባህሪውን ከማስወገድ ወይም እሴቱን ባዶ እንዲሆን ከማስቀመጥ ይልቅ የባህሪውን ዋጋ ወደ "ኑል" ሕብረቁምፊ ያዘጋጃል። ባህሪን ማስወገድ ከፈለጉ፣ removeAttribute() ይደውሉ።

    የመመለሻ እሴት ልዩነቶች ልክ ያልሆነ ባህሪ ስህተት የተገለጸው የባህሪ ስም አንድ ወይም ከዚያ በላይ የሆኑ ቁምፊዎችን ይዟል በባህሪ ስሞች ውስጥ የማይሰሩ። ለምሳሌ

    በሚከተለው ምሳሌ፣ setAttribute() በ a ላይ ባህሪያትን ለማዘጋጀት ስራ ላይ ይውላል።

    HTML ሄሎ ዓለም ጃቫስክሪፕት var b = document.querySelector ("አዝራር"); b.setAttribute ("ስም", "ሄሎ ቡቶን"); b.setAttribute ("ተሰናክሏል", "");

    ይህም ሁለት ነገሮችን ያሳያል፡-

    • ከላይ ለመጀመሪያ ጊዜ የተደረገው የ setAttribute() ጥሪ የሚያሳየው የስም ባህሪውን ወደ "ሄሎ ቡቶን" መቀየር ነው።ይህንን የአሳሽዎን ገጽ መርማሪ (Chrome፣ Edge፣ Firefox፣ Safari) በመጠቀም ማየት ይችላሉ።
    • እንደ አካል ጉዳተኛ ያለ የቦሊያን ባህሪ ዋጋን ለማዘጋጀት ማንኛውንም እሴት መግለጽ ይችላሉ። ባዶ ሕብረቁምፊ ወይም የባህሪው ስም የሚመከሩ እሴቶች ናቸው። ዋናው ነገር ባህሪው ሙሉ በሙሉ ካለ ፣ ትክክለኛው ዋጋ ምንም ይሁን ምን፣ ዋጋው እውነት እንደሆነ ይቆጠራል። የባህሪው አለመኖር ማለት ዋጋው ውሸት ነው. የአካል ጉዳተኞችን አይነታ ዋጋ ወደ ባዶ ሕብረቁምፊ ("") በማዘጋጀት ወደ እውነት እያቀናንነው ነው፣ ይህም አዝራሩ እንዲሰናከል ያደርጋል።

    የ DOM ዘዴዎች ከኤለመንት ባህሪያት ጋር የተያያዙ

    የስም ቦታን ጠንቅቆ የሚያውቅ አይደለም፣ በብዛት ጥቅም ላይ የዋሉ ዘዴዎች የስም ቦታን የሚያውቁ ልዩነቶች (DOM ደረጃ 2) DOM ደረጃ 1 ከ Attr nodes ጋር በቀጥታ (አልፎ አልፎ ጥቅም ላይ የሚውለው) DOM ደረጃ 2 የስም ቦታን የሚያውቁ ዘዴዎች ከ Attr nodes ጋር በቀጥታ ለመስራት (አልፎ አልፎ ጥቅም ላይ ይውላል)
    set Attribute(DOM 1) setAttributeNS setAttributeNode setAttributeNodeNS
    getAttribute(DOM 1) getAttributeNS getAttributeNode getAttributeNodeNS
    has Attribute(DOM2) hasAttributeNS - -
    ማስወገድ ባህሪ(DOM 1) አስወግድ አይነታኤን removeAttributeNode -
    ዝርዝር መግለጫ
    • የDOM ደረጃ 2 ኮር፡ setAttribute (በDOM ደረጃ 1 ኮር ውስጥ የገባ)
    የአሳሽ ተኳኋኝነት

    በዚህ ገጽ ላይ ያለው የተኳኋኝነት ሰንጠረዥ ከተዋቀረ ውሂብ የመነጨ ነው። በመረጃው ላይ ማበርከት ከፈለጉ፣ እባክዎ https://github.com/mdn/browser-compat-data ይመልከቱ እና የመሳብ ጥያቄ ይላኩልን።

    በ GitHub ላይ የተኳኋኝነት ውሂብ ያዘምኑ

    ዴስክቶፕ ሞባይል Chrome Edge ፋየርፎክስ ኢንተርኔት ኤክስፕሎረር ኦፔራ ሳፋሪ አንድሮይድ ድር እይታ Chrome ለአንድሮይድ ፋየርፎክስ ለአንድሮይድ ኦፔራ ለአንድሮይድ ሳፋሪ በ iOS ሳምሰንግ ኢንተርኔትየመለያ ባህሪ
    Chrome ሙሉ ድጋፍ አዎጠርዝ ሙሉ ድጋፍ 12ፋየርፎክስ ሙሉ ድጋፍ አዎIE ሙሉ ድጋፍ 5

    ማስታወሻዎች

    ሙሉ ድጋፍ 5

    ማስታወሻዎች

    ማስታወሻዎች በInternet Explorer 7 እና ከዚያ በፊት፣ setAttribute ቅጦችን አያዘጋጅም እና ለማዘጋጀት ሲሞክሩ ክስተቶችን ያስወግዳል።    		ኦፔራ ሙሉ ድጋፍ አዎሳፋሪ ሙሉ ድጋፍ 6የድር እይታ አንድሮይድ ሙሉ ድጋፍ አዎChrome አንድሮይድ ሙሉ ድጋፍ አዎፋየርፎክስ አንድሮይድ ሙሉ ድጋፍ አዎኦፔራ አንድሮይድ ሙሉ ድጋፍ አዎSafari iOS ሙሉ ድጋፍ አዎሳምሰንግ ኢንተርኔት አንድሮይድ ሙሉ ድጋፍ አዎ
    አፈ ታሪክ ሙሉ ድጋፍ ሙሉ ድጋፍ የትግበራ ማስታወሻዎችን ይመልከቱ። የትግበራ ማስታወሻዎችን ይመልከቱ። ጌኮ ማስታወሻዎች

    የተወሰኑ ባህሪያትን ለማሻሻል setAttribute()ን መጠቀም፣በተለይም በXUL ውስጥ ያለው እሴት፣ባህሪው ነባሪውን ዋጋ ስለሚገልጽ ወጥነት በሌለው መልኩ ይሰራል። የአሁኑን ዋጋዎች ለመድረስ ወይም ለመቀየር ንብረቶቹን መጠቀም አለብዎት። ለምሳሌ ከElement.setAttribute() ይልቅ Element.value ይጠቀሙ።



    ተዛማጅ ጽሑፎች