Javascript ელემენტის ატრიბუტების მნიშვნელობები. ელემენტის ატრიბუტების მანიპულირება jQuery-ით. შეყვანილი მონაცემთა ფორმების სისწორის შემოწმება

გოლოვნა / კორისნას ინფორმაცია

გაკვეთილზე განიხილება Cob: Document Object Model (javaScript DOM) - დინამიური HTML-ის საფუძველი, ობიექტებზე წვდომის მეთოდები და Javascript დამუშავების მეთოდები.

  • Ზოგადად ობიექტი- ეს არის მონაცემთა საწყობის ტიპი, რომელიც შეცვლის გლობალური მოდულის უაზრო მნიშვნელობას და საშუალებას მოგცემთ შეინახოთ და მოიგოთ მათი სახელების მიღმა არსებული ღირებულება.
  • ადრე ჩვენ უკვე ვისწავლეთ javascript-ის გაგება.

  • Javascript-ს აქვს იგივე გაგება, როგორც DOM დოკუმენტის ობიექტის მოდელი- ვებ მხარის ობიექტის მოდელი (html-side).
  • დოკუმენტის ტეგები ან, როგორც ჩანს, დოკუმენტის კვანძები არის მთელი ობიექტი.

მოდით შევხედოთ დიაგრამებს ობიექტების იერარქია JavaScript-ში, და ისინი, de ієrarchії გვხვდება ამ თემის დოკუმენტის ობიექტის ანალიზში.

სკრიპტის ელემენტს აქვს შემდეგი ატრიბუტები:

  • გადადება (გვერდის მთლიანი ჩართულობის კლირენსი).
  • კონდახი:

    დოკუმენტის ობიექტის ავტორიტეტი და ატრიბუტები JavaScript-ში

    დოკუმენტის ობიექტი არის ვებ გვერდი.

    Მნიშვნელოვანი: JavaScript-ში ამ ობიექტის მეთოდების ძალაში მოყვანა, მაგალითად, სხვა ობიექტებთან მუშაობისას, წერტილის აღნიშვნა:

    ტობტო. თავად ობიექტი იწერება დასაწყისით, შემდეგ i წერტილის მეშვეობით სივრცეების გარეშე მითითებულია მისი ძალა, ატრიბუტი chi მეთოდი

    ობიექტი.ავტორიტეტი ობიექტი.ატრიბუტი ობიექტი.მეთოდი()

    მოდით შევხედოთ მაგალითს:

    კონდახი:მოდით html-დოკუმენტი є tag

    ჩემი ელემენტი

    დანიშვნები ახლისთვის css სტილი(მიიტანეთ ორი სტილი, მეორე საჭიროა დასაყენებლად):

    საჭირო:

    1. დააწესეთ ობიექტის ახალი ძალა, მიანიჭეთ მას ღირებულება და შეიტანეთ ღირებულება;
    2. შეიყვანეთ ობიექტის ატრიბუტის მნიშვნელობა;
    3. შეცვალეთ ობიექტის ატრიბუტის მნიშვნელობა.

    ავიღოთ დავალება თანმიმდევრობით:
    ✍ გადაწყვეტილებები:

      ისე როგორ mov javascript, მაშინ ობიექტის გამოცნობა და დადგენა შესაძლებელია თუ არა ის ძალა თუ აქვს თუ არა რაიმე მნიშვნელობა. ალე cob-ისთვის ჩვენ ვიღებთ წვდომას ობიექტზე (ობიექტზე წვდომის შესახებ ქვემოთ იქნება მოხსენებული ამ გაკვეთილზე):

      // საჭირო წვდომა ობიექტის id var element = document.getElementById("MyElem"); element.myProperty = 5; // მინიჭება დენის სიგნალიზაცია (element.myProperty); // ნაჩვენებია დიალოგურ ფანჯარაში

      შემდეგი ამოცანა დაკავშირებულია ობიექტის ატრიბუტთან. ობიექტის ატრიბუტი- Tse tag ატრიბუტები. ტობტო. ჩვენს ხედვას აქვს ორი: class ატრიბუტი მნიშვნელობებით Small და id ატრიბუტი. ზუსტად კლასის ატრიბუტის უკან.

      ახლა დაუმატეთ JavaScript, რომ ნახოთ ჩვენი ობიექტის ატრიბუტის მნიშვნელობა. კოდი დამნაშავეა, მაგრამ შემდეგმთავარი ტეგები:

      // საჭირო წვდომა ობიექტის id var element = document.getElementById("MyElem"); alert(element.getAttribute("კლასი")); // ნაჩვენებია დიალოგურ ფანჯარაში

      І დარჩენილი ამოცანა: შეცვალეთ ატრიბუტის მნიშვნელობა. ვისთვისაც სტილის სამზადისი გვაქვს დიდი. შეცვალეთ კლასის ატრიბუტის მნიშვნელობა სტილში:

      // საჭირო წვდომა ობიექტის id var element = document.getElementById("MyElem"); element.setAttribute("კლასი","დიდი");

      შედეგად, ჩვენი ელემენტი გახდება უფრო დიდი და პოპულარული ლურჯი ფერით (კლასი დიდი).

    ახლა მოდით შევხედოთ ატრიბუტებთან მუშაობის გამოყენებითი მეთოდების პრეზენტაციას.

    ატრიბუტის მეთოდები JavaScript-ში

    ატრიბუტების დამატება, ნახვა და შეცვლა შესაძლებელია. რომელი სპეციალური მეთოდისთვის:

    • ატრიბუტის დამატება (ახალი მნიშვნელობის დაყენება):
    • getAttribute (attr)

    • ამ ატრიბუტის არსებობის ხელახლა შემოწმება:
    • removeAttribute(attr)

    ატრიბუტებთან მუშაობის სხვადასხვა გზები

    კონდახი:შეიყვანეთ მნიშვნელობა მნიშვნელობის ატრიბუტისთვის ტექსტის ბლოკი.


    ✍ გადაწყვეტილებები:
    • მოდი є ტექსტური ბლოკი:
    • varelem = document.getElementById("MyElem"); var x = "მნიშვნელობა";

    • მოდით გადავხედოთ ატრიბუტის მნიშვნელობის აღდგენის რამდენიმე გზას (მის საჩვენებლად გამოიყენეთ alert() მეთოდი):
    • elem.getAttribute("მნიშვნელობა")

      elem.getAttribute ("მნიშვნელობა")

      2. წერტილის აღნიშვნა:

      elem.ატრიბუტები .მნიშვნელობა

      ელემენტი.ატრიბუტები.მნიშვნელობა

      3. ფრჩხილის აღნიშვნა:


      დააყენეთ ატრიბუტების მნიშვნელობებიასევე შეგიძლიათ დეკილკომა შემდეგი გზებით:

      var x = "გასაღები"; // გასაღები - ატრიბუტის სახელი, val - ატრიბუტის მნიშვნელობა // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[" გასაღები. "] = "val" // 4. elem.setAttribute(x, "val")

      სხეულის ელემენტის ავტორიტეტი

      დოკუმენტის ობიექტის საშუალებით შეგიძლიათ ნავიგაცია დოკუმენტის სხეულში - სხეულის ტეგზე - დიდი სიმძლავრით.

      მაგალითად, სხეულის ტეგს აქვს ორი ძალა: მომხმარებლის ფანჯრის სიგანე და სიმაღლე:

      document.body.clientHeight - კლიენტის ფანჯრის სიმაღლე
      document.body.clientWidth - კლიენტის ფანჯრის სიგანე


      და რაც მთავარია, როგორც უკვე გავარკვიეთ, ეს არის ის, რომ დოკუმენტის ობიექტის მეშვეობით სპეციალური მეთოდების დახმარებით უზრუნველყოფილია გვერდის ყველა ელემენტზე წვდომა, როგორიცაა ტეგები.

      Მნიშვნელოვანი:გვერდით ტეგებზე ასეთი გადასვლისას სკრიპტი დამნაშავეა ელემენტის ხეში სხეულის დახურვამდე! სკრიპტის დასრულებამდე, ბრაუზერის მიერ ეკრანზე ყველა ელემენტის მონიშვნა მაინც შეიძლება

      js8_1 მენეჯერი. შეხედეთ ინფორმაციას ბრაუზერის ფანჯრის გაფართოების შესახებ: მაგალითად, "ბრაუზერის ფანჯრის ზომის შეცვლა 600 x 400"

      წვდომა დოკუმენტის ელემენტებზე JavaScript-ში

      ობიექტებზე წვდომისთვის ან ობიექტების მოსაძებნად, გადაეცა რამდენიმე ვარიანტი:

    1. მოძებნეთ ID-ით(ან getElementById მეთოდი), დაატრიალეთ კონკრეტული ელემენტი
    2. მოძებნეთ ტეგის სახელი(ან getElementsByTagName მეთოდი), დაატრიალეთ ელემენტების მასივი
    3. სახელის ატრიბუტის მოთხოვნა(ან getElementsByName მეთოდი), დაატრიალეთ ელემენტების მასივი
    4. ბატკივსკის ელემენტების მეშვეობით(ყველა სიკეთის ამოღება)

    მოდით შევხედოთ კანს მოხსენების ვარიანტებიდან.

    1. ელემენტზე წვდომა მისი id ატრიბუტის მეშვეობით
    2. Სინტაქსი: document.getElementById(id)

      getElementById() მეთოდი აბრუნებს თავად ელემენტს, რომელიც შეიძლება მოიძებნოს მონაცემთა წვდომისთვის

      კონდახი:გვერდით არის ტექსტური ველი ატრიბუტით id="cake":

      ...

      აუცილებელი


      ✍ გადაწყვეტილებები:

      alert(document.getElementById("ტორტი").მნიშვნელობა); // გადაუხვიე "ტორტებთან ახლოს"

      თქვენ შეგიძლიათ თავად დაასახელოთ ისინი, გააცნობიეროთ მხეცი ობიექტზე ცვლილების გზით:

      var a=document.getElementById("ტორტი"); alert(a.value); // დაათვალიერეთ მნიშვნელობის ატრიბუტის მნიშვნელობა, ა.შ. ტექსტი "ტორტებთან"

    Მნიშვნელოვანი:სცენარი დამნაშავეა buti obov'yazkovo შემდეგ tag!

  • ელემენტების მასივზე წვდომა ტეგის სახელის და მასივის დამატებითი ინდექსის შემდეგ
  • Სინტაქსი:
    document.getElementsByTagName(სახელი);

    კონდახი:გვერდით არის ტექსტური ველი (შეყვანის ტეგი) მნიშვნელობის ატრიბუტით:

    ...

    აუცილებელი: შეიყვანეთ მნიშვნელობის ატრიბუტის მნიშვნელობა


    getElementsByTagName მეთოდი ორგანიზებას უწევს წვდომას ყველა შეყვანის ელემენტზე (ანუ. ელემენტების მასივზეშეყვანა), ნავიგაცია ისე, რომ ეს ელემენტი ერთ მხარეს იყოს. კონკრეტულ ელემენტზე დასაბრუნებლად, მაგალითად პირველს, მაშინ უნდა მიუთითოთ ინდექსი (მაივი იწყება ნულოვანი ინდექსიდან).

    ✍ გადაწყვეტილებები:

      დააბრუნეთ კონკრეტულ ელემენტზე ინდექსის შემდეგ:

      var a =document.getElementsByTagName("input"); alert(a.value); // გადაუხვიე "ტორტებთან ახლოს"

  • წვდომა ელემენტების მასივზე სახელის ატრიბუტის მნიშვნელობის უკან
  • Სინტაქსი:
    document.getElementsByName(სახელი);

    მიდის getElementsByName("...") მეთოდი ობიექტების მასივი, რომლისთვისაც სახელის ატრიბუტი უფრო ძველია, ვიდრე მეთოდის პარამეტრად მითითებულ მნიშვნელობას. ვინაიდან გვერდით მხოლოდ ერთი ასეთი ელემენტია, მეთოდი მასივს ერთნაირად აბრუნებს (მხოლოდ ერთი ელემენტით).


    კონდახი:დასაშვებია დოკუმენტში є ელემენტი:

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

    AT ეს კონდახიელემენტი პირველი, მაგრამ zdіysnyuєtsya მასივის ნულოვან ელემენტამდე.

    Მნიშვნელოვანი: მეთოდი მუშაობს მხოლოდ ამ ელემენტებთან, რისთვისაც სახელის ატრიბუტი გადაეცემა სპეციფიკაციას: ყველა ტეგი იქმნება , შეყვანა , a , აირჩიეთ , textarea და სხვა, უფრო გავრცელებული.

    document.getElementsByName მეთოდი არ გამოიყენება div, p და მსგავსი ტიპის სხვა ელემენტებზე.

  • წვდომა ბატკივის ელემენტის სახლში
  • Javascript ღილაკებზე წვდომა vydbuvaєtsya დამატებითი ძალა childNodes. ძალა ჩაუყარა ობიექტი-batkovі.

    document.getElementById (მშობელი) .childNodes ;

    document.getElementById(მშობელი).childNodes;

    ვნახოთ კონტეინერში მოთავსებული გამოსახულების კონდახი, დე ტეგები - div tag. ამგვარად, div ტეგი არის ამ სურათების მამა, ხოლო თავად img ტეგები აშკარად არის div ტეგი:

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

    ახლა ჩანს შიგნით მოდალური ვიქნომასივის ელემენტების მნიშვნელობა ქუდებიდან, ტობტო. img ტეგები:

    var myDiv=document.getElementById("div_for_img"); // გადადით კონტეინერში dad var childMas=myDiv.childNodes; // სათაურების მასივი for (var i = 0; i< childMas.length;i++){ alert(childMas[i].src); }

    გთხოვთ გაითვალისწინოთ, რომ იმისათვის, რომ გაიმეოროთ ველების მასივის ელემენტები, თქვენ ხელით უნდა აირჩიოთ ციკლი. ტობტო. ჩვენს აპლიკაციას აქვს ციკლი:

    ... for (var a childMas-ში) ( alert(childMas[ a] .src ) ;)

    For (var a childMas-ში) ( alert(childMas[a].src); )

  • ელემენტების მოხვედრის სხვა გზები
  • გადახედვის სხვა გზები მაგალითზე:

    <სხეული > <formname="f"> <შეყვანის ტიპი = "ტექსტი" id="t"> <შეყვანის ტიპი = "ღილაკი" id = "b" მნიშვნელობა = "(!LANG:(!LANG:ღილაკი" > !}!} <აირჩიეთ id="s" name="ss"> <ვარიანტი id = "o1" > 1</ვარიანტი> <ვარიანტი id = "o2" > 3</ვარიანტი> <ვარიანტი id = "o3" > 4</ვარიანტი> </არჩევა> </ფორმა>

    წვდომა:

    ... // ელემენტების წვდომის არასაჭირო და მოძველებული მეთოდები: alert(document.forms[0].name); // f alert(document.forms[0].Elements[0].type); // ტექსტის გაფრთხილება(დოკუმენტი.ფორმები [0]. ელემენტები [2]. ოფციები [1]. // o2 alert(document.f.b.type); // ღილაკი alert(document.f.s.name); // ss alert(document .f.s.options[1].id); // o2 // ელემენტების წვდომის სტენოგრაფიული მეთოდები alert(document.getElementById("t").type); // ტექსტური გაფრთხილება(document.getElementById("s").სახელი); // ss alert(document.getElementById("s").options[1].id); // 02 alert(document.getElementById("o3") .ტექსტი); // 4...

    ... // ელემენტების წვდომის არასაჭირო ძველი მეთოდები: alert(document.forms.name); // f alert(document.forms.elements.type); // ტექსტური გაფრთხილება (დოკუმენტი.ფორმები.ელემენტები.ოპციები.id); // o2 alert(document.f.b.type); // ღილაკის გაფრთხილება (document.f.s.name); // ss alert(document.f.s.options.id); // o2 // ელემენტების alert(document.getElementById("t").type) წვდომის სტენოგრაფიული მეთოდები; // ტექსტური გაფრთხილება(document.getElementById("s").სახელი); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").ტექსტი); // 4...

    კონდახი: html დოკუმენტებისთვის შექმენით ღილაკი და ტექსტის ველი. სკრიპტის დასახმარებლად შეცვალეთ ღილაკის ფონი (ღილაკის style.backgroundColor) და ჩვენება "ვიტაიუ!"ტექსტის ველში (ატრიბუტის მნიშვნელობა).

    HTML კოდი:

    document.getElementById("t1").value = "(!LANG:(!LANG:Hi!""; 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.შექმენით ტექსტური ველის ტეგები მინიატურების გამოსახულების შესაბამისად. მიეცით მას კონკრეტული (მითითებული პატარა) id ატრიბუტის მნიშვნელობა. სკრიპტის დასახმარებლად, დაამატეთ ყველა ციფრულ ველს (რომლებიც გადასცემენ ციფრულ მნიშვნელობებს) მნიშვნელობა "0"

    შეყვანილი მონაცემთა ფორმების სისწორის შემოწმება

    ჩი არ დატოვა მოედანი ცარიელი?

    დანიმის ნდობა არ შეიძლება. უსაფუძვლოა იმის აღიარება, რომ კორისტუვაჩის მონაცემების შემოღების საათი їх їх. ასე რომ, ჩოგოსთვის აუცილებელია Javascript-ის მოგება.

    გადახედვის მიზნით ტექსტის ველი ცარიელია(მაგალითად, მონაცემების სწორი მონაცემებით შევსების შემდეგ, იქნება ეს კითხვარი), შემდეგ გადადით ღირებულების წერტილამდე. რაც შეეხება ძალაუფლების მნიშვნელობას, არის ცარიელი მწკრივი (""), მაშინ აუცილებელია ამ კორისტუვაჩზე რამის თქმა.


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

    გარდა ამისა, შეგიძლიათ გააკეთოთ სკრიპტის გარეშე. ტექსტური ველის შეყვანის ტეგს შეიძლება ჰქონდეს ნიმუშის ატრიბუტი. როგორ არის ნაჩვენები ეს მნიშვნელობა რეგულარულად მოცემულ ტექსტურ ველში მონაცემების ხელახალი შემოწმების დროს. რა არის ატრიბუტი ნიმუში, მაშინ ფორმა არ სრულდება მანამ, სანამ ტექსტის ველი სწორად არ შეივსება.
    მაგალითად, ხელახალი გადამოწმებისთვის chi-მ ველი ცარიელი არ დატოვა:

    ტექსტის ჩანაცვლება რიცხვითი მნიშვნელობა: isNaN ფუნქცია

    რა სფერო გადადის რიცხვითი მნიშვნელობის შეყვანადა ტექსტის შესაყვანად აუცილებელია აირჩიოთ isNaN ფუნქცია (ინგლისურიდან. "ჩი არ არის რიცხვი?"), რათა შეამოწმოთ შესაყვანი მონაცემების ტიპი და ჩართოთ ჭეშმარიტი, როცა ციფრული მონაცემების ნაცვლად ტექსტურ მონაცემებს შეიყვანთ.

    ჩათვლით თუ დაყენებულია true-ზე, აუცილებელია სპიკერს უთხრათ, რომ ფორმატი სწორია, ასე რომ. ნომერი.

    if(isNaN(document.getElementById("minutes").მნიშვნელობა))(მოთხოვნილი შეიყვანოთ რიცხვითი მონაცემები);

    მოცემულია გვერდი, რომელშიც ელემენტები უნდა შეავსოთ:


    html კოდის ნაწყვეტი:

    1 2 3 4 5 6 7 8 9 10 11 12 <ფორმა >სახელი:<შეყვანის ტიპი = "ტექსტი" id = "სახელი">
    დონატების რაოდენობა:<შეყვანის ტიპი = "ტექსტი" id="დონატები" >
    ხვილინ:<შეყვანის ტიპი = "ტექსტი" id="წუთები">
    პოდჩანთა:<შეყვანის ტიპი = "ტექსტი" id="subitog" >
    საჩუქარი:<შეყვანის ტიპი = "ტექსტი" id="tax">
    პოდჩანთა:<შეყვანის ტიპი = "ტექსტი" id = "სულ">
    <შეყვანის ტიპი = "submit" value = "(!LANG:(!LANG:submit" onclick = "placeOrder();" > !}!} </ფორმა> <სკრიპტის ტიპი = "text/javascript"> ... </სკრიპტი>

    სახელი:
    დონატების რაოდენობა:
    ხვილინ:
    პოდჩანთა:
    საჩუქარი:
    პოდჩანთა:

    საჭირო:
    დაამატეთ ფრაგმენტის ცარიელი ადგილი ქვემოთ გაფართოებულ კოდს, რათა შეამოწმოთ ტექსტის ორი ველის შევსების სისწორე: მე კი(id = "სახელი") ჰვილინი(id = "წუთები"). Vykoristovyte გადამოწმება ცარიელი ველებისთვის ცარიელი (""), რომ სწორი ფორმატი ავსებს ციფრულ ველს (isNaN).

    * Vikonati დავალება ასევე დამატებითი დახმარებისთვის ტექსტის ველების ნიმუშის ატრიბუტისთვის.

    სკრიპტის ნაწყვეტი:

    კოდში ისინი იმარჯვებენ, რათა გააჩინონ დასაკეცი გონება, ადრე მიღებული.

    თქვენთვის ახალი გაგება არის ფუნქციის დაწკაპუნება, როგორც ღილაკის შეჯამება:
    onclick="placeOrder();"
    ღილაკზე დაჭერით გამოიძახება placeOrder() ფუნქცია

    ადგენს ატრიბუტის მნიშვნელობას მითითებულ ელემენტზე. რომ ატრიბუტი უკვე არსებობს, მნიშვნელობა განახლებულია; გონივრული ემატება ახალი ატრიბუტი მითითებული სახელით და მნიშვნელობით.

    Სინტაქსი

    ელემენტი.setAttribute( სახელი, ღირებულება);

    Პარამეტრები

    სახელი DOMString, რომელიც განსაზღვრავს ატრიბუტის სახელს, რომლის მნიშვნელობაც უნდა იყოს მითითებული. სახელის ატრიბუტი ავტომატურად სარგებლობს ყველა მოკლე საათის განმავლობაში, როდესაც setAttribute() ეწოდება HTML ელემენტს HTML დოკუმენტში. მნიშვნელობა DOMString ნებისმიერი მითითებული მნიშვნელობა, რომელიც არ არის სტრიქონი, ავტომატურად გარდაიქმნება სტრიქონად.

    ლოგიკური ატრიბუტები ითვლება ჭეშმარიტად, თუ ისინი "საერთოდ არის ელემენტზე, მათი რეალური მნიშვნელობის მიუხედავად; ეს მუშაობს, მაგრამ არასტანდარტულია).

    სტრიქონზე გადაცემული სპეციალური მნიშვნელობების გარეშე, null-ის მითითება არ უნდა იყოს იმაზე ადრე, რასაც მოელით. ასე რომ, თქვენ ირჩევთ ატრიბუტის გაშვებას, მოვუწოდებთ removeAttribute() .

    დაბრუნების ღირებულება

    გამონაკლისები

    InvalidCharacterError სახელის ატრიბუტის მნიშვნელობა შეიძლება დაყენდეს ერთ ან მეტ სიმბოლოზე, რადგან ის არ არის მოქმედი სახელის ატრიბუტში.

    მაგალითი

    შემდეგ მაგალითში setAttribute() გამოიყენება ატრიბუტების დასაყენებლად.

    HTML

    JavaScript

    var b = document.querySelector("ღილაკი"); b.setAttribute("name", "helloButton"); b.setAttribute("disabled", "");

    ეს აჩვენებს ორ რამეს:

    • პირველი ზარი setAttribute()-ზე ზემოთ აჩვენებს სახელის ატრიბუტის მნიშვნელობის შეცვლას „helloButton“-ზე.
    • ლოგიკური ატრიბუტის მნიშვნელობის დასაყენებლად, როგორიცაა გამორთული, შეგიძლიათ მიუთითოთ ნებისმიერი მნიშვნელობა. ცარიელ სტრიქონს აქვს ატრიბუტის ორივე სახელი є რეკომენდებული მნიშვნელობები. მთავარია, თუ ატრიბუტი საერთოდ არსებობს, მიუხედავად მისი რეალური ღირებულებისამისი ღირებულება ითვლება ჭეშმარიტად. ამ მნიშვნელობის ატრიბუტების ჩანაწერების არსებობა უმნიშვნელოა. disabled ატრიბუტის მნიშვნელობის დაყენებით ცარიელ სტრიქონზე (""), ჩვენ ვაყენებთ disabled-ს true-ზე, რაც იწვევს ღილაკის გათიშვას.

    DOM მეთოდები, რომლებიც ეხება ელემენტის ატრიბუტებს:

    არ იცის სახელთა სივრცე, უმეტესობა, როგორც წესი, მეთოდი სახელთა სივრცის ცოდნის ვარიანტები (DOM დონე 2) DOM 1 დონის მეთოდები Attr კვანძების პირდაპირ განცალკევებისთვის (იშვიათად გამოიყენება) DOM 2 დონის სახელთა სივრცის გაცნობიერებული მეთოდები Attr კვანძების პირდაპირ გავრცელებისთვის (იშვიათად გამოიყენება)
    setAttribute (DOM 1) setAttributeNS setAttributeNode setAttributeNodeNS
    getAttribute (DOM 1) getAttributeNS getAttributeNode getAttributeNodeNS
    აქვს ატრიბუტი (DOM2) აქვს AttributeNS - -
    removeAttribute (DOM 1) removeAttributeNS removeAttributeNode -

    სპეციფიკაცია

    • DOM დონე 2 Core: setAttribute (დანერგილია DOM დონეზე 1 Core)

    ბრაუზერის თავსებადობა

    ამ მხარის ცხრილების კომპაქტურობა წარმოიქმნება სტრუქტურირების მონაცემებიდან. თუ გსურთ იცოდეთ თქვენი მონაცემების შესახებ, დააწკაპუნეთ https://github.com/mdn/browser-compat-data-ზე და გამოგვიგზავნეთ მოთხოვნა.

    განაახლეთ თავსებადობის მონაცემები GitHub-ზე

    სამუშაო მაგიდამობილური
    ქრომიზღვარიFirefoxInternet Explorer ოპერაSafariანდროიდის ვებ-ხედვაChrome Android-ისთვისFirefox ანდროიდისთვისოპერა ანდროიდისთვისSafari iOS-ზესამსუნგის ინტერნეტი
    setAttributeChrome სრული მხარდაჭერა დიახEdge სრული მხარდაჭერა 12Firefox სრული მხარდაჭერა დიახIE სრული მხარდაჭერა 5

    შენიშვნები

    სრული მხარდაჭერა 5

    შენიშვნები

    შენიშვნები Internet Explorer 7-ისთვის და უფრო ადრე, setAttribute არ ადგენს სტილებს და შლის მოვლენებს, როდესაც თქვენ ცდილობთ მათ დაყენებას.
    Opera სრული მხარდაჭერა დიახSafari სრული მხარდაჭერა 6WebView Android სრული მხარდაჭერა დიახChrome Android სრული მხარდაჭერა დიახFirefox Android-ის სრული მხარდაჭერა დიახOpera Android სრული მხარდაჭერა დიახSafari iOS სრული მხარდაჭერა დიახSamsung Internet Android სრული მხარდაჭერა დიახ

    ლეგენდა

    Სრული დახმარებასრული მხარდაჭერა იხილეთ განხორციელების შენიშვნები. იხილეთ განხორციელების შენიშვნები.

    გეკო აღნიშნავს

    თქვენ შეგიძლიათ გამოიყენოთ setAttribute() გარკვეული ატრიბუტების შესაცვლელად, განსაკუთრებით მნიშვნელობის XUL-ში, მაგრამ არათანმიმდევრულად, რადგან ატრიბუტი განსაზღვრავს ნაგულისხმევ მნიშვნელობას. იმისათვის, რომ მოიგოთ ან შეცვალოთ მიმდინარე მნიშვნელობები, თქვენი ბრალია ძალაუფლების მოპოვება. მაგალითად, მონიშნეთ Element.value ნაცვლად Element.setAttribute()-ის.

    ამ სტატიებში ჩვენ შეგვიძლია ამოვიცნოთ DOM-ის ავტორიტეტი და ატრიბუტები, ვნახოთ როგორ გამოიყურება სუნი და როგორ ვიმუშაოთ მათთან სწორად. მოდით შევხედოთ, თუ როგორ აქვს JavaScript-ს ატრიბუტებზე ოპერაციების შესრულების მეთოდები.

    როგორ გამოიყურება ატრიბუტი DOM ავტორიტეტით?

    ატრიბუტები არის ყველა HTML ერთეული, რომლის დახმარებით ჩვენ შეგვიძლია დავამატოთ ინდივიდუალური მონაცემები HTML კოდის ელემენტებში.

    თუ ბრაუზერი ითხოვს პირველ ხაზს, ის მიიღებს გამავალ HTML კოდს. ამის შემდეგ ღვინო გააფართოვებს ამ კოდს და იქნება იგივე DOM შემცვლელზე. პროცესის საათის ქვეშ ელემენტების HTML-ატრიბუტები გარდაიქმნება DOM-ავტორიტეტად.

    მაგალითად, ბრაუზერი, როდესაც კითხულობს HTML კოდის შემტევ სტრიქონს, ქმნის შეურაცხმყოფელ DOM ავტორიტეტს ამ ელემენტისთვის: id, className, src და alt.

    ზვერენნია ციხის ხელისუფლებას JavaScript კოდები vykonuєtsya რაც შეეხება ობიექტის ავტორიტეტს. ობიექტი აქ არის კვანძი (ელემენტი) DOM.

    მაგალითად, აიღეთ DOM ავტორიტეტის მნიშვნელობა ჰოვერირებული ელემენტისთვის და მისი მნიშვნელობის ჩვენება კონსოლში:

    // ელემენტის ამოღება var brandImg = document.querySelector("#brand"); // დაარეგისტრირეთ ელემენტის DOM ავტორიტეტის მნიშვნელობა კონსოლის console.log(brandImg.id); // "ბრენდი" console.log(brandImg.className); // "ბრენდი" console.log(brandImg.src); // "/logo.png" console.log(brandImg.alt); // "საიტის ლოგო"

    სინამდვილეში, DOM ავტორიტეტების სახელები არ ემთხვევა ატრიბუტების სახელებს. ერთ-ერთი მათგანია კლასის ატრიბუტი. ეს ატრიბუტი ადგენს className-ის DOM ძალას. ეს განსხვავება განპირობებულია იმით, რომ კლასი არის JavaScript საკვანძო სიტყვა, ის რეზერვირებულია და მისი გადაფარვა შეუძლებელია. rozrobniks-ის საშუალებით, სტანდარტი შეიცვალა vikoristovuvaty-ით, თანმიმდევრულობისთვის, როგორც სხვა სახელი, რომელიც შეირჩა className.

    ამის მიზეზის კიდევ ერთი ასპექტია ის, რომ HTML ატრიბუტების თარგმნა, რომლებიც მინიჭებულია დოკუმენტის გამომავალ კოდზე DOM ავტორიტეტში, ყოველთვის არ უნდა გაკეთდეს ერთიდან ერთზე.

    თუ ელემენტს აქვს არასტანდარტული HTML ატრიბუტი, მაშინ ავტორიტეტი, რომელიც ამოწმებს DOM-ს, არ იქმნება.

    კიდევ ერთი მიზეზი ის არის, რომ გარკვეული HTML ატრიბუტებისა და მსგავსი DOM ძალების მნიშვნელობა შეიძლება განსხვავებული იყოს. ტობტო. ატრიბუტს შეიძლება ჰქონდეს ერთი მნიშვნელობა, ხოლო DOM-ავტორიტეტს, რომელიც შეიქმნა იმავე საფუძველზე, აქვს მეორე.

    ერთ-ერთი ასეთი ატრიბუტი შემოწმებულია.

    შემოწმებული HTML ატრიბუტის მნიშვნელობა in ამ კონკრეტულ ტიპს-ცე ცარიელი რიგი. ალე, ამ DOM ატრიბუტის ჭეშმარიტად დაყენების ძალა. იმიტომ რომ true-ის დაყენების სტანდარტის წესების მიხედვით, HTML კოდში რომელი ატრიბუტის რიდლი საკმარისია და თუ ასეა, მნიშვნელობა არ აქვს, სანამ მნიშვნელობა არსებობს.

    თუ არ მიუთითებთ შემოწმებულ ატრიბუტს HTML კოდში შეყვანის ელემენტისთვის ჩანიშნული ველის ტიპისთვის, მაშინ DOM-ში ახლისთვის ყველაფერი დაყენდება შემოწმებულ სიმძლავრეზე, წინააღმდეგ შემთხვევაში ეს იქნება false.

    ჯანდაბა, JavaScript გაძლევთ საშუალებას იმუშაოთ ატრიბუტებთან. რისთვისაც DOM API არსებობს სპეციალური მეთოდები. ალე їх ჯობია მათ დაამარცხოთ მხოლოდ იმ შემთხვევაში, თუ ნამდვილად გჭირდებათ მათთან ვარჯიში.

    როდესაც თქვენ უნდა იცოდეთ, რომ თუ ჩვენ შევცვლით ელემენტის DOM სიმძლავრეს, შეიცვლება ნაგულისხმევი ატრიბუტიც. ბრაუზერებში მთელი პროცესი სათითაოდ არ ფიქსირდება.

    ძირითადი ძალა DOM სიმძლავრესა და ატრიბუტებს შორის:

    • ატრიბუტის მნიშვნელობა არის მწკრივი, ხოლო DOM-ავტორიტეტის მნიშვნელობა არის მონაცემთა sing ტიპის (არა სავალდებულო მწკრივი);
    • ატრიბუტის სახელი არის რეესტრიდან დამოუკიდებელი, ხოლო DOM ავტორიტეტი არის რეესტრიდან დამოუკიდებელი. ტობტო. ჩვენ შეგვიძლია დავწეროთ HTML კოდი, მაგალითად, HTML id ატრიბუტი, როგორიცაა Id, ID і ა.შ. იგივე უნდა იყოს და ატრიბუტის სახელწოდება, როგორც ეს ჩვენთვის სპეციალურად არის მითითებული JavaScript მეთოდებიმასთან მუშაობა. DOM-ის ავტორიტეტს, ჩვენ შეგვიძლია მივმართოთ მხოლოდ ID-სთვის და არა სხვაგვარად.

    ელემენტის DOM სიმძლავრესთან მუშაობა

    JavaScript-ის ელემენტების სიმძლავრესთან მუშაობა, როგორც ეს ადრე იყო მინიჭებული, უფრო მნიშვნელოვანია, ისევე როგორც ობიექტების ძალა.

    მაგრამ იმისთვის, რომ სასიმღერო ელემენტის ხარისხზე გადახვიდეთ, თქვენ უნდა ამოიღოთ იგი კობიდან. შეგიძლიათ წაშალოთ DOM ელემენტი JavaScript-დან, მაგალითად, querySelector დამხმარე, და DOM ელემენტების კოლექცია, მაგალითად, querySelectorAll დამხმარე გამოყენებით.

    როგორც პირველი კონდახი, მოდით შევხედოთ შემდეგ HTML ელემენტს:

    საინფორმაციო განცხადების ტექსტი...

    ახალი ანალიზის საფუძველზე შესაძლებელია ახალი DOM-ავტორიტეტის შექმნა, მათი შეცვლა და ახლის დამატება.

    DOM ავტორიტეტების მნიშვნელობის წაკითხვა:

    // DOM სიმძლავრის მნიშვნელობის id var alertId = alert.id; // "alert" // მიიღეთ DOM ავტორიტეტის მნიშვნელობა className var alertClass = alert.className; // "alert alert-info" // იღებს DOM ავტორიტეტის მნიშვნელობის სათაურს var alertId = alert.title; // "რჩევის ტექსტი..."

    შეცვალეთ DOM ავტორიტეტების მნიშვნელობა:

    // DOM სიმძლავრის მნიშვნელობის შესაცვლელად, თქვენ უბრალოდ უნდა დააყენოთ ახალი მნიშვნელობის alert.title = "(!LANG:(!LANG:New მინიშნება ტექსტი"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}!}

    DOM ავტორიტეტების დამატება:

    Alert.lang="ru"; // დააყენეთ lang მნიშვნელობის ავტორიტეტი, რომელიც არის "ru" alert.dir = "ltr"; // დააყენეთ dir-ის სიმძლავრე "ltr"-ის ტოლი

    კონსოლში, მაგალითად, კლასების ყველა მნიშვნელობა ნაჩვენებია, მაგალითად, გვერდზე p ელემენტებში:

    Var paragraphs = document.querySelectorAll("p"); for (var i = 0, სიგრძე = აბზაცები. სიგრძე ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

    მაგალითი, რომელშიც შეგვიძლია ჩავსვათ ყველა ელემენტი კონტენტის კლასით, ენის ავტორიტეტი მნიშვნელობებით "ru":

    Var contents = document.querySelectorAll(.content"); for (var i = 0, სიგრძე = contents.length; i< length; i++) { contents[i].lang = "ru"; }

    ელემენტის ატრიბუტები და მათთან მუშაობის მეთოდები

    ატრიბუტები პირველად მითითებულია HTML კოდში. სუნი არის ცხელი და pov'yazan ერთად სიმღერა წოდება ავტორიტეტით, მაგრამ არა იგივე. ყველაზე ხშირად საჭიროა ავტორიტეტით ვარჯიში და მხოლოდ ერთხელ, საჭიროების შემთხვევაში, ატრიბუტებამდე.

    ატრიბუტების მნიშვნელობები, DOM- ავტორიტეტების საფუძველზე, როგორც ეს უკვე უფრო მეტად იყო მინიჭებული, ყოველთვის ზედიზედ.

    JavaScript ატრიბუტებთან დაკავშირებული კონკრეტული ოპერაციებისთვის, აქ არის რამოდენიმე მეთოდი:

    • .hasAttribute("im'ya_attribute") – ამოწმებს მითითებული ატრიბუტის არსებობას ელემენტში. თუ შეცვლილი ატრიბუტი არის ელემენტზე, მაშინ ეს მეთოდი იქცევა true, წინააღმდეგ შემთხვევაში ის ხდება false.
    • .getAttribute ("ატრიბუტის სახელი") – მიიღეთ ატრიბუტის მნიშვნელობა. თუ არ არის მითითებული ელემენტი, მაშინ ეს მეთოდი აბრუნებს ცარიელ მწკრივს ("") ან ნულს.
    • .setAttribute("ატრიბუტის_სახელი", "ატრიბუტის_მნიშვნელობა") – ადგენს მითითებულ ატრიბუტს ელემენტის მინიჭებული მნიშვნელობიდან. თუ ელემენტს ანიჭებთ ატრიბუტს, მაშინ ეს მეთოდი უბრალოდ ცვლის მის მნიშვნელობას.
    • .removeAttribute("im'ya_attribute") - შლის ატრიბუტის მნიშვნელობებს ელემენტიდან.

    მოდით შევხედოთ მას.

    დუჟე კონდახიმნიშვნელობის ატრიბუტით.

    მაგალითი ატრიბუტით

    ჩვენ ვიღებთ მნიშვნელობის ატრიბუტის მნიშვნელობას და მნიშვნელობის DOM ძალას:

    // ამოიღეთ ელემენტის მნიშვნელობის ატრიბუტის მნიშვნელობა name.getAttribute("მნიშვნელობა"); // "Bob" // DOM სიმძლავრის მნიშვნელობა მიღებული მნიშვნელობა სახელი.მნიშვნელობა; // "Bob" // შეცვალეთ მნიშვნელობის ატრიბუტის მნიშვნელობა, დააყენეთ ახალი მნიშვნელობა name.setAttribute("value", "Tom"); // "ტომ" // მიიღეთ DOM სიმძლავრის მნიშვნელობის მნიშვნელობა name.value; // "ტომ"

    კარგი მიზეზის გამო, როდესაც თქვენ შეცვლით მნიშვნელობის ატრიბუტს, ბრაუზერი ავტომატურად იცვლება DOM მნიშვნელობის ახალ ძალაზე.

    ახლა მოდით გავაანალიზოთ, პირველ რიგში, და შევცვალოთ DOM ავტორიტეტის მნიშვნელობა და შევცვალოთ ატრიბუტის მნიშვნელობა:

    // დააყენეთ ახალი DOM ავტორიტეტის მნიშვნელობა name.value = "(!LANG:(!LANG:John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}!}

    ამ თვალსაზრისით, ცხადია, რომ ატრიბუტის შეცვლამდე არ უნდა შეცვალოთ DOM-ავტორიტეტი. ტობტო. გარკვეულწილად, DOM მნიშვნელობის სიმძლავრის შეცვლა არ ცვლის ნაგულისხმევ ატრიბუტს..

    იგივენაირად დაინახავთ თუ ტექსტს ამ ველში შეიყვანთ. DOM-დომინანტი მნიშვნელობა შეცვლის ნაგულისხმევ მნიშვნელობას და პირიქით, ატრიბუტი შეიცვლება, მაგალითად, setAttribute დამხმარე მეთოდის შემდეგ.

    ეს კონდახი აჩვენებს, რომ უფრო სწორია DOM-ავტორიტეტებთან მუშაობა და საჭიროა მხოლოდ ატრიბუტზე გადასვლა, თუ ეს აუცილებელია.

    გადადით პუნქტზე, თუ თქვენ გჭირდებათ მნიშვნელობის პირველი მნიშვნელობის აღება, როგორც ჩვენ მას HTML-ში ვაყენებთ, შეგიძლიათ მიიღოთ ძალა. მნიშვნელობის ატრიბუტის ნაგულისხმევი მნიშვნელობის გადაფარვის ძალას ეწოდება defaultValue.

    Name.defaultValue; //ტომ

    კიდევ ერთი რკალის კონდახი, მაგრამ ახლა href ატრიბუტით.

    აქცია href ატრიბუტით

    მაგალითი, რომელშიც უნდა ავიღოთ შეტყობინების მნიშვნელობა, როგორც ის იყო ჩასმული HTML-ში.

    რომლის გამოყენებაც href ატრიბუტს და href-ის DOM ძალას განსხვავებული მნიშვნელობა აქვს. href ატრიბუტში - ის, რაც ჩავსვით კოდში და DOM ავტორიტეტი - ახალი URL. ეს განსხვავება ნაკარნახევია სტანდარტით, იმისდა მიხედვით, თუ როგორ არის პასუხისმგებელი ბრაუზერი, რომ გადასცეს href მნიშვნელობა სრულ URL-ზე.

    იმის გამო, რომ ჩვენ უნდა გავითვალისწინოთ ის, რაც ატრიბუტებშია, მაშინ getAttribute მეთოდის გარეშე, ჩვენ არ შეგვიძლია getAttribute მეთოდის გარეშე.

    და ბოლოს, მოდით შევხედოთ არჩეულ ატრიბუტს.

    კონდახი შერჩეული ატრიბუტით

    მაგალითი, რომელშიც ნაჩვენებია, თუ როგორ შეგიძლიათ აიღოთ არჩეული ვარიანტის მნიშვნელობა:

    აქ არის მაგალითი, რომელიც გვიჩვენებს, თუ როგორ შეგიძლიათ აირჩიოთ პარამეტრების მნიშვნელობა შერჩეულ ელემენტში:

    ატრიბუტებთან მუშაობის კიდევ ერთი გზა (ძალის ატრიბუტები)

    JavaScript-ში კანის ელემენტს აქვს ატრიბუტების ძალა, რისი დახმარებითაც შეგიძლიათ აიღოთ ყველა ატრიბუტი, როგორიცაა NamedNodeMap ობიექტი.

    Tsey გზათქვენ შეიძლება იცოდეთ zastosuvannya, თუ გჭირდებათ, მაგალითად, გაიარეთ ელემენტის ყველა ატრიბუტი.

    კოლექციის tsієї ატრიბუტზე წვდომა მოცემულია მისი ინდექსით ან დამხმარე მეთოდის ელემენტით. კოლექციის ატრიბუტების მიმოხილვა ტარდება 0-დან.

    მაგალითად, ჩვენ კონსოლში ვაჩვენებთ მიმდინარე ელემენტის ყველა ატრიბუტს:

    მე მიყვარს JAVASCRIPT

    ყირიმი, pratsyuvati s tsієyu კოლექცია ასევე შესაძლებელია ასეთი მეთოდების დახმარებით:

    • .getNamedItem("named_attribute") – ამოიღებს მინიჭებული ატრიბუტის მნიშვნელობას (რადგან ატრიბუტი არ არის მინიჭებული ელემენტისთვის, შედეგი არის ნულოვანი).
    • .setNamedItem("attribute_item") – დაამატეთ ახალი ატრიბუტი ელემენტს ან განაახლეთ ახლის მნიშვნელობა. ატრიბუტის შესაქმნელად უნდა გამოიყენოთ document.createAttribute() მეთოდი, რომელსაც პარამეტრად უნდა გადაეცეს ატრიბუტის სახელი. რის შემდეგაც შეიქმნა ატრიბუტი, აუცილებელია მნიშვნელობის დამატებითი სიმძლავრის მინიჭება.
    • .removeNamedItem ("ატრიბუტის_სახელი") – შლის ატრიბუტის მნიშვნელობებს ელემენტიდან (ატრიბუტის მოხსნის ბრუნვის შედეგად).

    ატრიბუტებთან მუშაობა getNamedItem, setNamedItem და removeNamedItem მეთოდებით:

    მე მიყვარს JAVASCRIPT

    მენეჯერი

    • კონსოლში ჩაწერეთ დოკუმენტის ელემენტები ისე, რომ დაყენდეს id ატრიბუტი.
    • დაამატეთ სათაურის ატრიბუტი ყველა სურათს გვერდზე, რადგან მათ არ აქვთ ატრიბუტი. დააყენეთ ატრიბუტის მნიშვნელობა alt ატრიბუტის მნიშვნელობის ტოლი.

    თქვენ შეგიძლიათ შექმნათ აკინძვა, რომელიც შესრულებულია საკინძები,როგორც მღერის სიფხიზლის მნიშვნელობის გამოძახილი ლოგიკური მნიშვნელობაჩის არა ატრიბუტების დამატებამდე. ცის კონდახი:

    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); ) else ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(ელემენტი).removeAttr(k); ) ) ) ) ); ბმული

    მინდა ვუპასუხო @gbs-ს, მაგრამ არ შემიძლია. ჩემი გადაწყვეტილება იქნებოდა, რომ დედა ორი ერთნაირი იყოს HTML ელემენტი: ერთი ატრიბუტით, მეორე ნოკაუტის გარეშე, ელემენტში ერთი მათგანის დასამატებლად. მე ასევე ვიცი tse zvichayne ochіkuvannya-ს შესახებ, მაგრამ უფრო ეფექტური გამოსავალი როგორ შეიძლება?

    დავალებების ეს გაკვეთილი კითხულობს და ცვლის ელემენტების ატრიბუტებს jQuery-ში.

    ატრიბუტები არის სახელების/მნიშვნელობის წყვილი, როგორც ენიჭება ნაშრომის ელემენტებს. ატრიბუტების გამოყენება ( href, სათაური, src, კლასი):

    აქ არის შემაჯამებელი ტექსტი

    • attr()ატრიბუტების წაკითხვის, დამატებისა და შეცვლისთვის
    • removeAttr()ვიზუალური ატრიბუტებისთვის

    ამ გაკვეთილზე ხდება რობოტის არჩევა attr() და removeAttr() მეთოდებით.

    CSS კლასებთან მუშაობისთვის არსებობს სპეციალური jQuery მეთოდები, როგორც ეს აღწერილია სხვა გაკვეთილზე. jQuery-ში პროექტზე მუშაობისას ხშირად გიწევთ CSS კლასების მანიპულირება და კლასის ატრიბუტს შეუძლია შეცვალოს რამდენიმე კლასის სახელი, რაც მნიშვნელოვნად აადვილებს მასთან მუშაობას სხვა ატრიბუტებთან შედარებით.

    თუ თქვენ აირჩევთ მუშაობას შეყვანის ველების მნიშვნელობებთან, უმჯობესია გამოიყენოთ val() მეთოდი, რომელიც არა მხოლოდ მუშაობს მნიშვნელობის ატრიბუტთან, არამედ შეგიძლიათ წაიკითხოთ და დააყენოთ მნიშვნელობები შერჩეული ელემენტებისთვის. შერჩეულ სიაში.

    ატრიბუტის მნიშვნელობის წაკითხვა

    ელემენტის ატრიბუტის მნიშვნელობის წაკითხვა მარტივია. ელემენტის მისაღებად აუცილებელია jQuery ობიექტის attr() მეთოდის გამოძახება, წასაკითხად ატრიბუტის სახელის გადაცემით. ატრიბუტის მნიშვნელობის გადაქცევის მეთოდი:

    // აჩვენე ელემენტის "href" ატრიბუტის მნიშვნელობა # mylink alert($("a#mylink").attr("href"));

    თუ თქვენმა jQuery ობიექტმა უნდა მოიძიოს რამდენიმე ელემენტი, attr() მეთოდი კითხულობს ნაკრების მხოლოდ პირველი ელემენტის ატრიბუტის მნიშვნელობას.

    ჩვენ ვაყენებთ ატრიბუტების მნიშვნელობას

    attr() მეთოდი ასევე შეიძლება შეიცვალოს ატრიბუტის მნიშვნელობის დასამატებლად ან შესაცვლელად:

    • ატრიბუტის მსგავსად არ ვიციელემენტში, მომავალში შემოწირულობებიდა თქვენ მოგეცემათ მოცემული ღირებულება.
    • ატრიბუტის მსგავსად უკვე ვიციიოგას მნიშვნელობა იქნება განახლებულიადააყენეთ ღირებულებები.

    არსებობს სამი გზა, რომ შეცვალოთ attr() მეთოდი ატრიბუტების დასამატებლად ან შესაცვლელად:

    1. თქვენ შეგიძლიათ დაამატოთ/შეცვალოთ ნებისმიერი ელემენტის (ან ელემენტების ნაკრების) ატრიბუტები.
    2. თქვენ შეგიძლიათ დაამატოთ/შეცვალოთ ატრიბუტების ნომერი ერთდროულად ელემენტისთვის (ან ელემენტებისთვის) ატრიბუტების სახელებისა და მნიშვნელობების რუკის დამატებითი პარამეტრისთვის.
    3. თქვენ შეგიძლიათ დინამიურად დაამატოთ/შეცვალოთ ერთი ატრიბუტი დეკალის ელემენტებისთვის დამატებითი ბრუნვის ფუნქციისთვის.

    დააყენეთ ერთი ატრიბუტი

    ელემენტის ატრიბუტის დასაყენებლად ან შესაცვლელად, თქვენ უნდა გამოძახოთ attr() მეთოდი მინიჭებული ატრიბუტის სახელიდან და მნიშვნელობიდან. Მაგალითად:

    // შეცვალეთ #myLink ელემენტის "href" ატრიბუტის მნიშვნელობა "http://www.example.com/" // (რადგან "href" ატრიბუტი არ არის, ის ავტომატურად შეიქმნება) $( "a#myLink"). attr ("href", "http://www.example.com/");

    თქვენ ასევე შეგიძლიათ დააყენოთ იგივე ატრიბუტი დეკალის ელემენტებისთვის:

    ჩვენ ვაინსტალირებთ ატრიბუტების ნაწილს არჩეული ბარათიდან

    თქვენ შეგიძლიათ დააყენოთ რამდენიმე ატრიბუტი ერთდროულად ერთი ან რამდენიმე ელემენტი დამატებითი ბარათისთვის. სახელი/მნიშვნელობის წყვილების სია ასე გამოიყურება:

    (im'ya1: ღირებულება1, im'ya2: მნიშვნელობა2, ...)

    საფეხურს აქვს ორი ატრიბუტი ერთდროულად დაყენებული img ელემენტისთვის:

    // დააყენეთ "src" და "alt" ატრიბუტები img ელემენტისთვის #myPhoto $("img#myPhoto").attr(("src": "mypic.jpg", "alt": "ჩემი ფოტო"));

    თქვენ ასევე შეგიძლიათ დააყენოთ ატრიბუტები დეკალის ელემენტებისთვის:

    // დააყენეთ "src" და "alt" ატრიბუტები ყველა img ელემენტისთვის $("img").attr(("src": "mypic.jpg", "alt": "ჩემი ფოტო"));

    ჩვენ ვაყენებთ შემობრუნების ფუნქციის არჩევის ატრიბუტებს

    ალტერნატიულად, attr() მეთოდს ატრიბუტის მნიშვნელობის გადასაცემად, შეგიძლიათ გადასცეთ იგი გამოძახების ფუნქციას. ამ გზით თქვენ შეგიძლიათ დინამიურად დააყენოთ ატრიბუტის მნიშვნელობა დეკალის ელემენტებისთვის, ელემენტის პოზიციიდან გამომდინარე, რომელსაც აქვს ატრიბუტის მნიშვნელობა ან სხვა ძალა.

    მბრუნავ ფუნქციას შეუძლია მიიღოს ორი არგუმენტი:

    • ნაკადის შერჩეული ელემენტის პოზიციის ინდექსი კომპლექტში (იწყება ნულიდან)
    • ძველი ატრიბუტის მნიშვნელობა ნაკადის არჩეული ელემენტისთვის

    მნიშვნელობა, რომელიც ტრიალებს ფუნქციის მიერ, გადაფარდება ატრიბუტის მნიშვნელობის შესაცვლელად.

    თუ ელემენტის ამჟამინდელი პოზიცია არის ძველი ატრიბუტის მნიშვნელობა, თქვენს ფუნქციას შეუძლია დახმარებისთვის თავად ელემენტზე წვდომა მიიღოს. საკვანძო სიტყვაეს. ამ გზით შესაძლებელია ნებისმიერი სახის სიმძლავრეზე წვდომა ან ელემენტის შებრუნების ფუნქციის მეთოდი.

    კონდახს აქვს საპირისპირო ფუნქცია, რომ დაამატოთ alt ატრიბუტი კანის სურათზე გამოსახულების პოზიციაზე და src ატრიბუტი:

    პირველი სურათის კოდის შემდეგ, დედას აქვს alt ატრიბუტი მნიშვნელობით "Baby 1: myphoto.jpg" , ხოლო მეორე სურათს აქვს alt ატრიბუტი მნიშვნელობით "Baby 2: yourphoto.jpg".

    ხილვადობის ატრიბუტი

    ელემენტიდან ატრიბუტის ამოსაღებად, თქვენ უნდა გამოძახოთ removeAttr() მეთოდი და გადასცეთ წასაშლელი ატრიბუტის სახელი. Მაგალითად:

    // ამოიღეთ "title" ატრიბუტი #myLink ელემენტიდან $("a#myLink").removeAttr("title");

    თქვენ ასევე შეგიძლიათ გამოიძახოთ removeAttr() მეთოდი jQuery ობიექტზე ელემენტების ნაკრების მოსაშორებლად. removeAttr() მეთოდი შლის ატრიბუტს მოცემულ ელემენტებს:

    // ამოიღეთ "title" ატრიბუტი ნაკრებიდან $("a").removeAttr("title");

    Შემაჯამებელი

    ამ გაკვეთილისთვის ჩვენ გადავხედეთ jQuery ელემენტის ატრიბუტების ძალას:

    • ატრიბუტების მნიშვნელობების კითხვა
    • ერთი ატრიბუტის დაყენება
    • რამდენიმე სხვადასხვა ატრიბუტის ერთდროულად ინსტალაცია
    • ბოროტი ფუნქცია ამისთვის დინამიური ინსტალაციაატრიბუტების მნიშვნელობა ელემენტების ნაკრებისთვის
    • ელემენტის ატრიბუტების ნახვა

    © 2022 androidas.ru - ყველაფერი Android-ის შესახებ