Tartalom manipulálása.
html() A kijelölt elem új tartalomát beállítja vagy a meglévővel visszatér html formátumban. Lekérdezésnél az eredmény, stílusában is megegyezik a weboldali formátummal. Új tartalom létrehozásakor törli az eredeti tartalmat. Új tartalomnak stílust is meghatározhatunk. text() A kijelölt elem új tartalomát beállítja vagy a meglévővel visszatér szöveg formátumban. Lekérdezésnél az eredmény, stílus nincs, normál szövegként jelenik meg. $("p:first").text(); Új tartalom létrehozásakor törli az eredeti tartalmat. Jelölőelemet és stílust, nem határozhatunk meg. Jelölőelemek beírásakor, azokat is megjeleníti. clone() Másolatot készít a kiválasztott jelölőelemről és tartalmáról, vagy jelölőelemekről és azok tartalmáról. detach() Másolja, majd töröli a kiválasztott jelölőelemet és tartalmát, vagy jelölőelemeket és azok tartalmát. (Adatokat és eseményeket megőrzi.) replaceWith() Lecseréli a kiválasztott elemet és tartalmát, új jelölőelemre és új tartalomra. replaceAll() A kiválasztott elemet és tartalmát kiveszi a szövegfolyamból, majd az újonnan kiválasztott elem, vagy elemek helyére helyezi úgy, hogy az ott lévő eredeti jelölőelemet és tartalmát törli. remove() Eltávolítja a kiválasztott elemet (beleértve az adatokat és eseményeket) val(); vagy value; Visszatér, űrlapon kijelölt elem tartalomával.
html(); text(); clone();
<p>
Első p bekezdés tartalma, sarga háttérszínnel.
</p>Meghatározás. | A fenti p elem tartalmának lekérdezési eredménye, itt a <td id="td01"></td> cellában jelenik meg. |
|---|---|
$(document).ready(function(){
var html_p1 = $("p:first").html();
$("#btn01").click(function(){
$("#td01").html(html_p1);
});
});
$(document).ready(function(){
var text_p1 = $("p:first").text();
$("#btn02").click(function(){
$("#td01").text(text_p1);
});
});
$(document).ready(function(){
var masolat = $("p:first").clone();
$("#btnclone").click(function(){
$("#td01").html(masolat);
});
});
|
<p id="p02">
Ez a szövegsor, az id="p02" azonosítóval rendelkező elemhez tartozik. Eredeti tartalom.
</p>Kiválasztott id="p02" elemnek, új html vagy txt tartalom, meghatározása. |
|---|
$(document).ready(function(){
$("#btn03").click(function(){ var id_p02 = $("#p02");
var uj_tartalom = ("<b><span class='cianh'>Kiválasztott id='p02' elem, új html() tartalma.</span></b>")
id_p02.html(uj_tartalom);
});
});
|
$(document).ready(function(){
$("#btn03").click(function(){ var id_p02 = $("#p02");
var uj_tartalom = ("<b><span class='cianh'>Kiválasztott id='p02' elem, új txt() tartalma.</span></b>")
id_p02.text(uj_tartalom);
});
});
|
Vissza oldal elejére!
detach( )
A detach() metódus másolja, majd töröli a kiválasztott elemet, tartalmával együtt. (Adatokat és eseményeket megőrzi.)
A másolt, majd törölt elemet, tetszőleges területen jeleníthetjük meg.
Példában: id="p14" azonosítóval rendelkező elemnél jelenítjük meg.
after( ) = Kiválasztott elem alá.
before( ) = Kiválasztott elem fölé.
Ez a tartalom, az id="p12" azonosítóval rendelkező elemhez tartozik. |
$(document).ready( function() {
$("#btn08").click(function(){ var masol_torol = $("#p12").detach(); // id="p12" elemet másoljuk és töröljük.
$("#p14").after(masol_torol); // Másolt és törölt adatot, id="p14" elemhez, beillesztjük.
});
});
<body> </body> |
Ez a tartalom, az id="p14" azonosítóval rendelkező elemhez tartozik. |
Vissza oldal elejére!
replaceWith( )
Ez a szövegsor, az id="p03" azonosítóval rendelkező elemhez tartozik. Eredeti tartalom.
id="p03" azonosítóval rendelkező elem, és tartalmának lecserélése. |
|---|
$(document).ready(function(){
$("#btn05").click(function(){ var itt_csere = $("#p03");
var uj_tartalom = ("<h4><span class='cianh'> Kiválasztott elem, új replaceWith() tartalma.</span></h4>")
itt_csere.replaceWith(uj_tartalom);
});
});
|
Vissza oldal elejére!
replaceAll( )
Első szövegsor, az id="p04" azonosítóval rendelkező elemhez tartozik.
Második szövegsor, az id="p05" azonosítóval rendelkező elemhez tartozik.
Harmadik szövegsor, az id="p06" azonosítóval rendelkező elemhez tartozik.
Negyedik szövegsor, az id="p07" azonosítóval rendelkező elemhez tartozik.
id="p04" azonosítóval rendelkező elem, és tartalmának áthelyezése, az id="p06" azonosítóval rendelkező elem helyére. |
|---|
$(document).ready( function() {
$("#btn06").click(
function() { $("#p04").replaceAll("#p06"); }
);
});
|
Vissza oldal elejére!
remove( )
Első témakör, az id="p08" azonosítóval rendelkező elemhez tartozik.
Második témakör, az id="p09" azonosítóval rendelkező elemhez tartozik.
Harmadik témakör, az id="p10" azonosítóval rendelkező elemhez tartozik.
Negyedik témakör, az id="p11" azonosítóval rendelkező elemhez tartozik.
Eltávolítjuk a kiválasztott elemet (beleértve a tartalmat és eseményeket is.) Kiválasztott elem, id="p10" azonosítóval rendelkezik. |
|---|
$(document).ready( function() {
$("#btn07").click(
function() { $("#p10").remove(); }
);
});
|
Vissza oldal elejére!
val(); vagy value;
Ellenőrzéshez, teszteléshez: Űrlaptesztelések között, frissíteni kell az oldalt!
HTML fájl tartalma:<head> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script> <link href="stilus.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" type="text/javascript" src="jquery.js"></script> </head> <body> <form name="teszt" id="teszt" method="POST" action="fájlnév.html"> <fieldset> Teszt űrlap. <p> 0.input = <input type="text" name="inputegy" id="inputegy" value="24"> <br> 1.input = <input type="text" name="ketto" id="ketto" value="42"> <br><br> <input type="button" id="belsoinput" value="Küldőgomb"> <!-- Űrlapon belüli button gomb. --> </p> </fieldset> </form> <br> <button type="button" id="btninput">Button id="btninput"</button> <!-- Űrlapon kívüli button gomb. --> <br> <button type="button" id="btninputok">Button id="btninputok."</button> <br> <!-- Űrlapon kívüli button gomb. --> <span id="inputok_adatai"></span> <span id="input1_adat"></span> </body> |
JavaScript jquery.js tartalma:
$(document).ready(function(){
// ------ jquery-vel --- Kiválasztott input adatának lekérdezése. ------------
$("#btninput,#belsoinput").click(function(){
var Input1Adata= $("#inputegy").val(); // inputegy = lekérdezett input, id azonosítója.
var tartalom= "Kiválasztott 0.input elem tartalma = "+ Input1Adata;
$("#input1_adat").html(tartalom);
});
// ---------- Minden input adat kiíratása, és üres mezők kijelölése. -------------------------------
$("#btninputok").click(function(){
var torles='';
$("#inputok_adatai").html(torles); // Meglévő adatok törlése.
var tomb= new Array();
var inputok_szama = $("input").length;
var input_elem=$("input");
// Tömbbe íratjuk, az összes input adatot.
for(i=0; i<inputok_szama; i++){
var xx=input_elem[i].value;
tomb[i]=xx;
// -------- Üres mezők kijelölése. Ezt, nem kötelező meghatározni!
if(xx != ""){input_elem[i].style.backgroundColor="white"; }
else{input_elem[i].style.backgroundColor="orange"; }
}
// -------- Adatok lekérdezése a tömbből.
for(i=0; i<inputok_szama; i++){
if(tomb[i] !=""){tartalom=(i+".input = "+tomb[i]+"<br>"); $("#inputok_adatai").append(tartalom); }
else {tartalom=(i+".input = Üres.<br>"); $("#inputok_adatai").append(tartalom); }
}
});
});
|
Vissza oldal elejére!