Weblapot formázó jQuery

  1. Head
  2. Szövegformázás
  3. Pozíciók, méretek
  4. Táblázatok
  5. Listák
  6. Képek

  7. overflow
  8. visibility
  9. Display
  10. Keret és vonal
  11. Horgony "a"
  12. Cursor
  13. Térhatás
  14. Iframe
  15. Frameset

  16. JavaScript stílusok
  17. jQuery stílusok
  18. Function.
jQuery stílusok megjelenítéséhez, ugyan-úgy kell eljárni, mint a JavaScript stílusok megjelenítésénél.
Itt is, meg kell határozni, hogy mely elemhez vagy területhez rendeljük e stílusokat.
Az elemeket vagy területeket azonosítani kell, jelölőelem típusával, id egyedi, vagy class osztályazonosítójuk alapján, melyeket a szelektor $( ) zárójelei közé kell, beírni.

jQuery azonosítási példákat, lásd az oldal alján, vagy kattints ide!


jquery css metódusok.

Ezekkel a módszerekkel, dolgozhatunk a HTML és XML dokumentumokban.

Meghatározások, a dokumentum betőltődését követően, végrehajtódnak.
<script>
$(document).ready(function(){
    Meghatározás;
    Meghatározás;	
});
</script>
Szelektorral kiválasztott elemhez rendelt stílus,
dokumentum betöltődését követően, végrehajtódik. 
<script>
$(document).ready(function(){
    $("p").css("background-color", "yellow");
});
</script>
 Szelektorral kiválasztott elemhez rendelt stílus,
beazonosított elemen történő eseménykor, végrehajtódik. 
<script>
$(document).ready(function(){
    $("#btn").click( function() { 
         $("#id").css("background-color", "yellow");
    });
});
</script>
 
CSS() példák: (Stílus, minden p elemhez.)
          1.Példa: Stílusok külön-kölön css() metódusokban vannak meghatározva.
                 $("p").css("color": "yellow").css("font-weight": "bold").css("backgroundColor", "red");
          2.Példa: Stílusok egy css( { } ) metódusban, vesszővel elválasztva vannak meghatározva.
                 $("p").css({"color": "yellow", "font-weight": "bold", "background-color": "red"});

MódszerIsmertető.Példa.
css() Stílus meghatározások lekérdezése / beállítása.
Kiválasztott elem, meglévő stílusát lekérdezhetjük,
vagy új stílust határozhatunk meg.
Egy stílus:
$("p").css("background-color", "yellow");
Több stílus:
$("#id").css("fontSize","25px").css("backgroundColor", "yellow");
$("#id").css({"color": "yellow", "background-color": "red"});
Változóval: (Változóknak, előre meg kell határozni a stílust.)
$("#id").css("fontSize",bmeret).css("color",bszin);
 
<script>
$(document).ready(function(){ 
  $("#idp").css("background-color", "yellow");
});
</script>
</head>
<body>
<p id="idp">Ez egy szöveg.</p>
addClass() Stílus hozzáadás.
Egy vagy több, de már meglévő
class osztályazonosítót hozzáad,
a szelektorral kiválasztott elemekhez.
<style>
.piros{color:red;}
.sargah{background-color:yellow;}
.size12{font-size:12px;}
</style>

 Egy stílus:  $("p").addClass("piros");
 Több stílus: $("p").addClass("piros sargah size12");


<script>
$(document).ready(function(){
  $("#idp").addClass("piros sargah size12");
});
</script>
</head>
<body>
<p id="idp">Ez egy szöveg.</p>
removeClass()Stílus Eltávolítás.
Egy vagy több class osztályazonosítót eltávolít,
a kijelölt elemeknél. 
     $("p").removeClass("piros");
   vagy így
     $("p").removeClass("piros sargah size12");	

<script>
$(document).ready(function(){
  $("#idp").removeClass("piros sargah size12");
});
</script>
</head>
<body>
<p id="idp">Ez egy szöveg.</p>
toggleClass()Stílus hozzáadás / eltávolítás.
Kijelölt elemeknél előre meghatározott
class osztályazonosítót,
első eseménynél hozzáadja,
következő eseménynél visszavonja. 
$(document).ready(function(){
         $("#btntogle").click(function(){
               $("p").toggleClass("stilus01");
             vagy így
               $("p").toggleClass("stilus01 stilus02");
         });
});

<script>
$(document).ready(function(){
  $("#btntogle").click(function(){
   $("#idp").toggleClass("piros sargah size12");
  });
});
</script>
</head>
<body>
<button id="btntogle">Kattints ide egyszer,<br />
majd mégegyszer.</button>

<p id="idp">Ez egy szöveg.</p>
hasClass()Osztályazonosítónév ellenőrzése.
Meghatározott class osztályazonosítónév
létezésének ellenőrzése.

Létezik, akkor true(igaz),
nem létezik,
akkor false(hamis, nincs) értékkel tér vissza.		 
<style>.sargah{background-color:yellow;} </style>
<script>
$(document).ready(function(){
    $("#btnhasClass").click(function(){
      alert($("p").hasClass("sargah"));
    });
});
</script>
</head>
<body>
<button id="btnhasClass">Kattints ide!</button>
<p class="sargah"> Ez egy szöveg. </p>

height()Elem magassága.
Kiválasztott elem magasságát beállítja vagy azzal visszatér.
Visszatéréskor, eleme magassága =
Melyet a height stílusmeghatározásakor, beírtunk.

Eredmény, <button id="btn01"> gombra kattintva,
Alert ablakban jelenik meg: 
$("#btn01").click(function() {
 alert("height = "+$("#Div01").height() ); 
});

#Div01{
    width:120px; height:30px;
    padding: 10px; border:10px solid red;
    }
height=
width()Elem szélessége.
Kiválasztott elem szélességét beállítja vagy azzal visszatér.
Visszatéréskor, eleme szélessége =
Melyet a width stílusmeghatározásakor, beírtunk.

Eredmény, <button id="btn02"> gombra kattintva,
Alert ablakban jelenik meg: 
$("#btn02").click(function() {
 alert("width = "+$("#Div01").width() ); 
});

#Div01{
    width:120px; height:30px;
    padding: 10px; border:10px solid red;
    }
width=
innerHeight()Visszaadja kiválasztott elem magasságát.
(Beleértve a paddingot, de a bordert nem.)

Eredmény, <button id="btn03"> gombra kattintva,
Alert ablakban jelenik meg: 
$("#btn03").click(function() { 
 alert("innerHeight="+$("#Div01").innerHeight() );
});

#Div01{
    width:120px; height:30px;
    padding: 10px; border:10px solid red;
    }
innerHeight=
innerWidth()Visszaadja kiválasztott elem szélességét.
(Beleértve a paddingot, de a bordert nem.)

Eredmény, <button id="btn04"> gombra kattintva,
Alert ablakban jelenik meg: 
$("#btn04").click(function() {
  alert("innerWidth="+$("#Div01").innerWidth() );
});

#Div01{
    width:120px; height:30px;
    padding: 10px; border:10px solid red;
    }
innerWidth=
outerHeight()Visszaadja kiválasztott elem magasságát.
(Beleértve paddingot és bordert is.)

Eredmény, <button id="btn05"> gombra kattintva,
Alert ablakban jelenik meg: 
$("#btn05").click(function() {
  alert("outerHeight="+$("#Div01").outerHeight() );
});

#Div01{
    width:120px; height:30px;
    padding: 10px; border:10px solid red;
    }
outerHeight=
outerWidth()Visszaadja kiválasztott elem szélességét.
(Beleértve paddingot és bordert is.)

Eredmény, <button id="btn06"> gombra kattintva,
Alert ablakban jelenik meg: 
$("#btn06").click(function() {
  alert("outerWidth="+$("#Div01").outerWidth() );
});

#Div01{
    width:120px; height:30px;
    padding: 10px; border:10px solid red;
    }
outerWidth=
offset() Eltolási koordináták.
Kiválasztott elemnél, beállítja vagy visszaadja,
az eltolási koordinátákat.
(A dokumentumhoz viszonyítva. ) 
    // Kiválasztott elem, offset koordinátáinak lekérdezése.
	$("#btnoffset").click(function(){
		var x = $("#div01").offset();
		alert("#div01 elem:\n Top:"+ x.top + "\n Left: " + x.left);
	});

    //  Kiválasztott elem, offset koordinátáinak meghatározása.
    // Így: $("#div01").offset({top: 500, left: 10 })
    // Vagy így: $("#div01").offset({left: 40 })
	
	$("#offset02").click(function(){
		$("#div01").offset({left: 40 })
	});
---


position()Elem top/left pozíciója.
Kiválasztott elemnél, visszaadja a top/left pozíciót.
(Relatív a szülő elem.) 
       //  Kiválasztott elem, pozíciójának lekérdezése.
	$("#btnposition").click(function(){
		var x = $("#div01").position();
		alert("#div01 elem:\n Top:"+ x.top + "\n Left:" + x.left);
	});

      //  Kiválasztott elem, új pozíciójának  meghatározása. + vagy - 
	$("#btnposition02").click(function(){
		var x = $("#div01").position();
		var ujleft=(x.left)+200;
		$("#div01").css("marginLeft ",ujleft);
	});

---



resize() Esemény figyelő.
Ablak átméretezésekor aktiválódik.		 
	$(window).resize(function(){
		Meghatározás;     // Átméretezéskor, mi történjen.
	});
scroll() Esemény figyelő.
Függőleges és vízszintes görgetésnél aktiválódik.
scrollLeft()Vízszintes (alsó) görgetősáv,
elmozdulási pozíciója.

Beállítja vagy visszaadja kiválasztott elem vagy elemek,
vízszintes görgetősáv pozícióját.

Mozgasd, az alsó görgetősávot.		 
 $(window).scroll(function() {
    var Leftpozicio=$(document).scrollLeft();
    $("#dokumentLeft").html(Leftpozicio);
 });

Left = 0

scrollTop()Függőleges (oldalsó) görgetősáv,
elmozdulási pozíciója.

Beállítja vagy visszaadja kiválasztott elem vagy elemek,
függőleges görgetősáv pozícióját.

Mozgasd, a függőleges görgetősávot.
 
 $(window).scroll(function() {
    var Toppozicio=$(document).scrollTop();
    $("#dokumentTop").html(Toppozicio);
 });

Top = 0


 

Vissza a lap elejére



jQuery, elem beazonositási táblázat.

Szelektorok. Műveleti leírások.
$(window) Aktuális böngésző, ablaka.
$(document) Dokumentum területe.
$(" * ") Minden jelölőelem.
$("#egyedi") Az a jelölőelem, melynek egyedi azonosítója id="egyedi"
$("#egyedi > p") Azok a <p> elemek, melyek id="egyedi" azonosítóval rendelkező elem területén találhatók.
$(".alma") Minden elem, melyek osztályazonosítója class="alma"
$(".alma > p") A class="alma" osztályazonosítóval rendelkező elem területén található, <p> elemek.
$(".alma,.eper") Minden olyan elem, melynek class osztályazonosítója "alma" vagy "eper"
$("p") Minden <p> elem
$("h1,div,p") Minden <h1>, <div> és <p> elem
$("p:first") Első <p> elem
$("p:last") Utolsó <p> elem
$("p:eq(2)")
$("ul li:eq(2)")		 Elem keresése indexszám alapján(Kiválasztott elemtipusnál, első elem index értéke = 0)
$("p:gt(2)")
$("ul li:gt(2)")		 Azon elemek keresése, melyek indexe, nagyobb mint 3
$("p:lt(2)")
$("ul li:lt(2)")		 Azon elemek keresése, melyek indexe, kisebb mint 3
$("p:even")
$("tr:even")		 Kiválasztott jelölőelemek közül, minden páros számú elem. (Másodikkal kezd.)
$("p:odd")
$("tr:odd")		 Kiválasztott jelölőelemek közül, minden páratlan számú elem.
$("p:not(:empty)")
$("input:not(:empty)")		 Nem üres elemek keresése. (not empty)
$("p:empty")
$("input:empty")		 Üres elemek keresése. (empty)
$(":header") Minden címsor (header) elem. <h1>; <h2>; <h3>; <h4>; <h5>; <h6>;
$("h2:header") Minden <h2> fejléc elem
$("p:contains('Első')") Minden <p> elem, mely tartalmazza ezt a szövegetet: ('Első')
$("[href]") Minden elem, melynek attribútuma href. (Beleértve, a head szakaszt lévőket is.)
$("[src]") Minden elem, melynek attribútuma src. (Beleértve, a head szakaszt lévőket is.)
$("[href$='.jpg']") Minden href elem, melynek értéke ".jpg" -re végződik.
$("[src$='.jpg']") Minden src elem, melynek értéke ".jpg" -re végződik.
$("div > p") Minden <p> elem, melyek, valamilyen <div> elemben helyezkednek el.
Nem számitanak bele azok, melyek, csak a <dody> területén vannak.
$(":root") A dokumentum root gyökéreleme.
$("h1").text(); Kiválasztott jelölőelem, példánkban a <h1> címsor szövege. (text)
$("#egyedi01").text(); Az id=egyedi01 egyedi azonosítóval rendelkező elem, szövege. (text)

 

Vissza a lap elejére

 

 

 

 

 

 

 

 

A scrollLeft, alsó görgetősáv elmozdulásának tesztelésére elhelyezett szövegfolyam. A scrollLeft, alsó görgetősáv elmozdulásának tesztelésére elhelyezett szövegfolyam. A scrollLeft, alsó görgetősáv elmozdulásának tesztelésére elhelyezett szövegfolyam.