jQuery attr() és a prop()

attr()                   Kiválasztott elemnél. Attribútum értékeket lekérdezhetjük, vagy módosíthatjuk. 
                                 A href és src lekérdezésekor, az általunk beirt adatokat adja vissza.
								 
removeAttr()      Kiválasztott elemnél eltávolíthatunk, egy vagy több attribútum meghatározást.


prop()                Kiválasztott elemnél. Beállítja vagy visszatér tulajdonságok / érték adatokkal.
                                 A href és src lekérdezésekor, a teljes elérési URL címet adja vissza.

removeProp()    Kiválasztott elemnél. Eltávolítja a tulajdonság által meghatározott prop () metódust (jQery verziótípustól függ.)
                               Linkre nem reagál, képet eltünteti, táblázatot alapértékre állítja.

<script src=../jquerimotor/jQuery_v1120.js> </script>              Ezzel a kalóz script-el, jó az attr és prop is.
<script src=../jquerimotor/jQuery_v300-beta1.js> </script>      Ezzel a kalóz script-el, jó az attr, de a prop nem minden esetben.

Melyik kalóz script-el dolgozzunk:
attr() szempontjából, mindegy.
prop() szempontjából, nem mindegy.

attr() Link attribútumok.

$("#linkattr01").click(function(){ 
  var link = $("#link01");
      var utvonal =link.attr("href");
      var idnev =link.attr("id");
      var info =link.attr("title");
	
  alert("Link attribútumai:\n Útvonal = "
   + utvonal +"\n id = "
   + idnev +"\n title ="+ info);
});

$("#linkattr02").click(function(){
	$("#link01").attr("title",
	"Új title a linkhez.");
});

// Új href 
attribútum meghatározása:

$("#linkattr03").click(function(){
	$("#link01").attr("href","jquery-attr-prop.html");
});

$("#linkattr04").click(function(){
	$("#link01").attr("href","a_index.html"); 
});

$("#linkattr05").click(function(){
	$("#link01").removeAttr("href"); 
});

Minden link megsemmisítése.
 $("a").removeAttr("href");

Eredeti állapotot, így állíthatjuk vissza.
  $(".of5").click(function(){ 
     window.location.reload();
  });

Létrehozunk egy linket a következő attribútum meghatározásokkal, és teszteljük:

<a href="a_index.html#attr" id="link01" title="Teszt link. Vissza a stílus témakörökhöz"> Teszt link. Vissza a stílus témakörökhöz.</a>

Teszt link. Vissza a stílus témakörökhöz.

prop() Link attribútumok.

$("#linkprop01").click(function(){ var jelem = $("#link01");
		var utvonal =jelem.prop("href");
		var idnev =jelem.prop("id");
		var info =jelem.prop("title");
	 alert("Hivatkozási link attribútumai:\n Útvonal = "+ utvonal +"\n id = "+ idnev +"\n title ="+ info);
});

$("#linkprop02").click(function(){
	$("#link01").prop("title","Új title szöveg a linkhez.");
});

// Link href attribútumának meghatározása :
$("#linkprop03").click(function(){
	$("#link01").prop("href","jquery-attr-prop.html");
});

// Link href attribútumának törlése!!!!!!!! Ez, nem működik !!!!!
$("#linkprop04").click(function(){
	$("#link01").removeProp()("href","jqueri-pozicio.html");

//  Ekkor, ismét az eredeti útvonalat kell meghatározni.
$("#linkprop05").click(function(){
	$("#link01").prop("href","a_index.html"); 
});

attr() Fotó attribútumok.

$("#fotoattr01").click(function(){ 
   var foto = $("#kep02");
      var utvonal =foto.attr("src");
      var info =foto.attr("title");
      var alt =foto.attr("alt");
      var szelesseg =foto.attr("width");
      var magassag =foto.attr("height");
      var idnev =foto.attr("id");
      var classnev=foto.attr("class");
		
  alert("Fotó attribútumai:\n Útvonal = "
    + utvonal +"\n title ="
    + info +"\n alt = "+ alt +"\n Szélesség = "
    + szelesseg +"\n Magasság = "
    + magassag +"\n id = "
    + idnev  +"\n class = "+ classnev);
});

Fotók megjelenésének két formátuma van.

1. Nem határozunk meg <img ..... /> elemben, width és height értéket.
Ekkor a fotó, eredeti méreteiben jelenik meg.

2. Meghatározunk width és height értéket.
Ekkor a fotó, az eredetivel egyező vagy eltérő formátumban jelenhet meg.

$("#fotoattr02").click(function(){
  $("#kep02").attr( { width: 150} )
});

$("#fotoattr04").click(function(){
  $("#kep02").removeAttr("width",800).removeAttr("height",140);
});

$("#fotoattr03").click(function(){
  $("#kep02").attr( { width: 800 , height: 140} )
});

$("#fotoattr05").click(function(){
	 $("#kep02").removeAttr("width height")
});

 $(".of5").click(function(){ 
    window.location.reload();
 });

Létrehozunk egy fotót, a következő attribútum meghatározásokkal, és teszteljük:

<img src="jquery-foto.jpg" title="Természetvédelmi terület." alt="Mészköves hegyoldal fotója." width="500" height="140" border="0" id="kep02" class="foto02" />

prop() Fotó attribútumok.

$("#kepprop01").click(function(){   var foto = $("#kep02");
		
    var width = foto.prop("width");    var height = foto.prop("height");
    var src = foto.prop("src");    var alt = foto.prop("alt");
    var id = foto.prop("id");    var clas = foto.prop("class");
    alert("Kép atribútumai:\n url: "+src +"\n width: "+width +"\n height: "+height +"\n Alt: "+alt +"\n id: "+id+"\n class: "+clas);
});

$("#kepprop02").click(function(){
   $("#kep02").prop("width",200);
});

$("#kepprop03").click(function(){
   $("#kep02").prop({ width: 100 , height: 100})
});

$("#kepprop04").click(function(){
	$("#kep02").removeProp("width").removeProp("height");
});

attr() attribútum-érték függvény segítségével.

Létrehozunk egy fotót, a következő attribútum meghatározásokkal, és teszteljük:

<img src="jquery-foto.jpg" title="Természetvédelmi terület." alt="Mészköves hegyoldal fotója." width="200" height="110" border="0" id="kep03" class="foto02" />

Teszteléshez!
Egymásután többször is kattintsunk, a következő button gombokra.

    $("#btn44").click(function(){ 
        $("#kep03").attr("width",function(n,v){ return v - 2; });            // Kép width értékét csökkenti 2px-el.
    });
 // --------------------------------------------------------------------------------------

    $("#btn45").click(function(){ 
        $("#kep03").attr("width",function(n,v){ v++; return v; });          // Kép width értékét +1px-el növeli.
    });
 // --------------------------------------------------------------------------------------

    $("#btn46").click(function(){ 
        $("#kep03").attr("height",function(n,v){  return v-2; });            // Kép height értékét csökkenti 2px-el.
    });
 // --------------------------------------------------------------------------------------

    $("#btn47").click(function(){ 
        $("#kep03").attr("height",function(n,v){ v++; return v; });          // Kép height értékét +1px-el növeli.
    });
 // --------------------------------------------------------------------------------------			
    $("#btn48").click(function(){ 
        var kep=$("#kep03");
            kep.attr("height",function(n,v){ v++; return v; });
            kep.attr("width",function(n,v){ v++; return v; });
    });
 // --------------------------------------------------------------------------------------
	
    $("#btn49").click(function(){ 
        var kep=$("#kep03");
            kep.attr("height",function(n,v){ return v-2; });
            kep.attr("width",function(n,v){ return v-2; });
    });