7.03. Kiválasztott HTML elemek módosítása

Default book

Az alábbiakban a TAG-ek paramétereinek állítását végrehajtó leggyakoribb függvényeket használjuk

.css() - egy CSS tulajdonság beállítása, vagy lekérdezése

  • Egy CSS tulajdonság beállítása: $(selector).css(tulajdonság, érték );
  • Egy CSS tulajdonság lekérdezése: var x = $(selector).css(tulajdonság);
  • .show(); - A selectorokkal kiválasztott elemet láthatóvá teszi.
  • .show(időtartam); - Láthatóvá teszi az elemet és beállítja a megjelenítés időtartmát miliszekundumban, Használható konstans is: "slow"
  • .hide(); - Láthatatlanra állítja a selectorokkal kiválasztott elemet.
  • .hide(időtartam); - Az eltüntetés idejét állítja be miliszekundumra. Használhatunk konstans értéket is, például "slow";

class-ok kezelése

  • .addClass() - egy tag formázásához egy CSS-ben definiált class-t adunk hozzá. Ezt akkor érdemes használni, ha egy eseménykezelőben például egy menüben bóklászunk egérrel. Amelyik menüpont fölé kerül az egér (hover) hozzáadjuk a classt-
  • .removeClass() - a megadott osztályt kiveszi a HTML tag-ből.

Egy téglalap alakú terület (div, image, table, stb..) méreteinek lekérdezése vagy beállítása

  • .height() - a magasság lekérdezése
  • .height(numerikus érték) - A magasság beállítása
  • .width() - a szélesség lekérdezése
  • .width(numerikus érték) - a szélesség beállítása
  • .innerHeight() - Egy elem belső magasságát adja vissza (padding értéke beszámítódik, de a border és a margó már nem)
  • .innerHeight(numerikus érték); - Egy elem belső magasságát állítja be
  • .innerWidth(); Egy elem belső szélességét adja meg (padding értéke beszámítódik, de a border és a margó már nem)
  • .innerWidth(numerikus érték); - - Egy elem belső szélességét állítja be
  • .outerHeight(); - Egy objektum külső magasságát (padding, border, margóval együtt) adja vissza
  • .outerHeight(numerikus érték); - Egy objektum külső magasságát (padding, border, margóval együtt) adja vissza
  • .outerWidth(); - Egy objektum külső szélességét (padding, border, margóval együtt) adja vissza
  • .outerWidth(numerikus érték); - Egy objektum külső szélességét (padding, border, margóval együtt) adja vissza
  • .position() - Egy két elemű objektumban visszaadja az elem pozícióját a weboldalon a befoglaló objektumhoz képest!
var p = $("div#FZ").position();
var b = p.left;
var f = p.top;
alert("balról " +b + "px távolsága, fentről "+f +"px távolság");
  • .offset(); - Lekérdezi vagy pozicionálja egy objektum helyét a dokumentumhoz képest!
var off = $("div#FZ").offset();
var bal = off.lrft;
var f    = off.top;

//Véletlenszerűen módosítja a left és a top értéket
bal += Math.random()*40-20;
f   += Math.random()*40-20;
//áthelyezi a div-et a dokumentumhoz képest más helyre
$("div#FZ").offset({left: b, top: f});
  • .scrollTop(); - a függőleges gördítősávot úgy állítja, hogy a selectorokkal kiválasztott elemek közül az első legyen az ablak tetején
  • .scrollLeft(); - a vízszintes gördítősávot úgy állítja, hogy a selectorokkal kiválasztott elem az ablak bal oldalára kerüljön.

Egy HTML TAG tartalmának módosítása

  • .val() - lekérdezi vagy beállítja egy FORM elem (input) beviteli mezőjének az értékét.
//<input id="teszt" type="text" name="teszt" VALUE="Gipsz Jakab">
  var v = $("#teszt").val();
  v +=" a nagy mágus!";
  $("#teszt").val(v);

FORM elemeken gyakran használt parancs

  • .prop() - lekérdezi egy TAG tetszőleges tulajdonságát. Ha nincsen ilyen tulajdonság, akkor létrehoz egyet.
  • .prop("property neve", érték ) - Beállítja a property értékét
$( "input" ).prop( "disabled", false ); //Nem engedi a bevitelt
  • .attr() - lekérdezi egy TAG attribútumát.
  • .attr("attributum neve", érték) - beállítja egy TAG attribútumát: pl.
 $("input").attr("title", "beviteli mező")

További példák

$( elem ).prop( "checked" ) 	        // Visszaadja egy checkbox állapotát : true/false (Boolean)
$( elem ).attr( "checked" ) (1.6.1+) 	// Visszaadja egy cehckbox állapotát"checked"
$(elem).is(":checked"); // visszadja az elem állapotát - true/false
  • .removeAttr(); - eltávolítja a kiválasztott elem egy attribútumát: $(elem).removeAttr("title");
  • .removeProp() - eltávolítja egy TAG property-jét.

A DOM módosítása

  • .html() - Egy TAG belsejében lévő HTML kódot adja vissza stringként
  • .text() - Egy HTML TAG-en belül lévő nem TAG-ek lekérdezése
  • .text(string) - A stringként megadott paramétert helyezi el a kiválasztott HTML TAG-ben.
var t = $(selector).text(); // Visszaadja egy HTML TAG-en belül lévő nem TAG értékeket!
var t = $(selector).html(); // Visszaadja egy HTML TAG-en belül lévő nem összes html kódot!
  • .after() - a selectorral kiválasztott elem után beszúr szöveget (TAG-et is akár)
$( "p" ).after("<b>Hello world</b>");  //Minden "P" tag után beszúr egy Hello world! szöveget vastag betűvel
  • .before(); - a selectorral kiválasztott tag elé beszúr egy szöveget tartalmat
$("p#szoveg").before( $("h2#title") ); // Egy mkiválasztott H" elemet és annak tartalmát beteszi a "P" tag elé.
  • .insertAfter() - ugyanaz, mint az .after();
  • .insertBefore() - ugyanaz, mint a .before();
  • .empty(selector); - a kiválasztott TAG minden gyermek elemét kitörli a DOM-ból.
  • .remove(selector); - A kiválaztott TAG-et és anna minden gyermekét kitörli a DOM-ból
  • .wrap(tartalom); - Egy kiválasztott elem köré szülő TAG-et hoz létre
$("div.inner").wrap("<div class='kulso'></div>"); //Egy "belso" div köré létrehoz egy külső DIV-et
  • .unwrap(); - Egy kiválasztott TAG szülő elemét kitörli
  • .replaceWith(tartalom); - A kiválasztott elemet kicseréli az új tartalommal
$("div.#masodik").replaceWith("<h2>Ez egy címsor</h2>");