Prejdi na obsah

jQuery 2.diel (práca s objektmi)

29. december 2009 - 19:37 poslal Patrik Pekarcik

Na začiatok by som vás rád privítal pri ďalšom diely o jQuery. V dnešnom diely sa pozrieme na to ako meniť atribúty obsah a iné hodnoty html objektov pomocou jQuery.

Základný HTML kód

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jQuery 2. diel</title>
  5. <script src=“jQuery.js“></script>
  6. </head>
  7. <body>
  8. <div class=“pageForm redBorder“>
  9. <form action=“#“ id=“serialForm1“ onsubmit=“odosli();return false;“>
  10. <div id=“response“ style=“display:none;color:#800;“></div>
  11. Napíšte svoje <span id=“my_name_lang“>meno</span> (min. 5 znakov):
  12. <input id=“my_name“ type=“text“></input>
  13. <input value=“Odošli“ type=“submit“> </input>
  14. </form>
  15. </div>
  16. </body>
  17. </html>

Ako ste si určite všimli objavil sa tam kúsok atribútu ktorý tak úplne nezapadá pod HTML ale je to JS Event, v tomto prípade prehliadač čaká kým sa formulár neodošle.

Kontrola odoslaných údajov

Teraz sa pozrieme na to ako vyberať údaje z objektov. Pri tejto kontrole treba zistiť čo je zapísané v poli #my_name, spočítať znaky a následne vypísať do objektu #response.

  1. function odosli(){
  2.      // vložíme si do premennej to čo je napísane v poli #my_name
  3.      var name = $(“#my_name”).val(); // val() je funkcia získavajúca atribút value
  4.      $(„#response“).removeClass(„ok“).removeClass(„error“); // vymazanie atributu class s hodnoutou v zatvorkach
  5.      if(name.length>=5){
  6.           $(“#response”).html(„Všetko je vporiadku“); // funkcia html(text); vkladá html text do objektu a funkcia html(); získava html text z objektu
  7.           $(„#response“).addClass(„ok“); // pridanie css stýlu danému objektu
  8.      }else if(name==““){
  9.           $(“#response”).html(„Nič ste nevložily!!!“);
  10.           $(„#response“).addClass(„error“);
  11.      }else{
  12.           $(“#response”).html(„Pole meno musí obsahovať najmenej 5 znakov!!!“);
  13.           $(„#response“).addClass(„error“);
  14.      }
  15.      $(„#response“).show(); // funkcia zobrazujúca objekt
  16. }

V predchádzajúcom kóde som vám v skratke vysvetlil ako každá funkcia funguje a ešte vám ich v bodoch pár pridám.

hide()
skryje objekt
show()
Zobrazí objekt
val()
získa value objektu
val(text)
nastaví value objektu
html()
získa html kód z objektu
html(text)
vpíše html kód do objektu
text()
získa text z objektu (Pozor: len text!)
text(text)
vpíše text do objektu
attr(name)
získa hodnotu atribútu
attr(name,text)
vloží hodnotu do atribútu
attr(properties)
pri attr existuje ešte jedna možnosť hromadného vpísania a to štýlom vloženia json v netextovom režime
css(name)
získa hodnotu štýlu vpísaného tzv. inline
css(name,text)
vloží štýl
css(properties)
rovnako ako u attr sa môže využiť json
addClass(text)
pridá CSS objektu
removeClass(text)
odoberie CSS objektu

Tak myslím že tolko ván na dnes stačí. Dúfam že vám to znova trochu pomohlo a nabudúce sa pozrieme na udalosti(JS Events) ktoré sme si už raz spomenuli.

Povedz o článku aj ostatným - www.pridej.cz

Prihlásenie

Nové komentáre