jQuery get() metódus
HTTP kérés: GET vagy. POST
.get() metódus: Eredményt visszaadja, tömb formátumban. Array. ( A GET módszer visszatérhet, tárolt adatokkal. )
A .get()módszer hozzáférést biztosít, DOM csomópontokat szolgáló, egyes jQuery objektumokhoz.
$( "elemcímke" ).get() Paraméter nélkül, visszaadja egy tömbbe, az összes lekérdezett elemet.
$( "elemcímke" ).get( index ) Egy index megadásával, lekér egy elemet indexszáma alapján.
$( "elemcímke" ).get( 0 ) index nulla alapú, így a lekérdezett halmazból, az első elemet adja vissza.
$( "elemcímke" ).get( -1 ) index negatív szám, így a lekérdezett halmazból, az utolsó elemet adja vissza.
Megjegyzés:
Minden jQuery objektum, álcázott tömb formátumban tárolja, szelektor által visszaadott eredményhalmazt.
Eredményhalmazból is lekérdezhetünk úgy, mint a tömb elemeinek lekérdezésekor.
Példa:
Eredményhalmaz első eleme, 0-a vagy pozitív egészszám meghatározással = $( "elemcímke" )[ 0 ]
(Negatív szám, ezzel a szintaxissal nem alkalmazható, de a get() metódusnál, alkalmazható.)
get() példák:
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<script>
$(document).ready(function(){
// ---------------------1. jquery tömb[0] li elem. --------------------------------------
$("#getli01").click(function(){
var elemcimke= $( "li" )[ 0 ].tagName;
var adat= $( "li" )[ 0 ].innerHTML;
$("#eredmeny").after("<br />Jelölőelem cimkéje: " + elemcimke +" Tartalma: " + adat );
});
// ---------------------2. jquery tömb[-1] li elem. --------------------------------------
$("#getli02").click(function(){
var elemcimke= $( "li" )[ -1 ].tagName;
var adat= $( "li" )[ -1 ].innerHTML;
$("#eredmeny").after("<br />Jelölőelem cimkéje: " + elemcimke +" Tartalma: " + adat );
});
// ---------------------3. get(0) li elem. --------------------------------------
$("#getli03").click(function(){
var elemcimke= $("li").get(0).tagName;
var adat= $("li").get(0).innerHTML;
$("#eredmeny").after("<br />Jelölőelem cimkéje: " + elemcimke +" Tartalma: " + adat );
});
// ---------------------4. get(-1) li elem. --------------------------------------
$("#getli04").click(function(){
var elemcimke= $("li").get(-1).tagName;
var adat= $("li").get(-1).innerHTML;
$("#eredmeny").after("<br />Jelölőelem cimkéje: " + elemcimke +" Tartalma: " + adat );
});
// ---------------------5. jquery tömb[0] li elem. --------------------------------------
$("#getli05").click(function(){
var elemcimke= $( "#ol01 li" )[ 0 ].tagName;
var adat= $( "#ol01 li" )[ 0 ].innerHTML;
$("#eredmeny").after("<br />Jelölőelem cimkéje: " + elemcimke +" Tartalma: " + adat );
});
// ---------------------6. jquery tömb[-1] li elem. --------------------------------------
$("#getli06").click(function(){
var elemcimke= $( "#ol01 li" )[ -1 ].tagName;
var adat= $( "#ol01 li" )[ -1 ].innerHTML;
$("#eredmeny").after("<br />Jelölőelem cimkéje: " + elemcimke +" Tartalma: " + adat );
});
// ---------------------7. get(0) li elem. --------------------------------------
$("#getli07").click(function(){
var elemcimke= $( "#ol01 li" ).get(0).tagName;
var adat= $( "#ol01 li" ).get(0).innerHTML;
$("#eredmeny").after("<br />Jelölőelem cimkéje: " + elemcimke +" Tartalma: " + adat );
});
// ---------------------8. get(-1) li elem. --------------------------------------
$("#getli08").click(function(){
var elemcimke= $( "#ol01 li" ).get(-1).tagName;
var adat= $( "#ol01 li" ).get(-1).innerHTML;
$("#eredmeny").after("<br />Jelölőelem cimkéje: " + elemcimke +" Tartalma: " + adat );
});
// ---------------------9. get() li elemek. --------------------------------------
$("#getli09").click(function(){
var tomb = $("li").get();
var jeloloelem=tomb[1].tagName; // jelölőelem cimkéjének lekérdezése, elemszám meghatározással.
var tartalom=tomb[1].innerHTML; // jelölőelem tartalmának lekérdezése, elemszám meghatározással.
var elemekszama=tomb.length;
$("#eredmeny").after("<br />Elemszám: " + elemekszama + " <br />Címkéje : " + jeloloelem + "<br /> Tartalma: " + tartalom );
});
// ---------------------10. get() li elemek. --------------------------------------
$("#getli10").click(function(){
var tomb = $("li").get();
var jeloloelem=tomb[0].tagName; // jelölőelem cimkéjének lekérdezése.
var elemekszama=tomb.length;
for ( var i = 0; i < elemekszama; i++ ) {
var tartalom = tomb[i].innerHTML;
$("#eredmeny").after("<br />"+i+". elem tartalma: " + tartalom );
}
$("#eredmeny").after("<br />Elemek száma: " + elemekszama + " <br />Jelölőelem címkéje : " + jeloloelem );
});
});
</script>
</head>
<body>
<ul id="ul01">
<li id="li01"> UL, első li eleme.</li>
<li id="li02"> UL, második li eleme.</li>
<li id="li03"> UL, harmadik li eleme.</li>
<li id="li04"> UL, negyedik li eleme.</li>
<li id="li05"> UL, ötödik li eleme.</li>
<li id="li06"> UL, utolsó li eleme.</li>
</ul>
<ol id="ol01">
<li id="li07"> OL, első li eleme.</li>
<li id="li08"> OL, második li eleme.</li>
<li id="li09"> OL, harmadik li eleme.</li>
<li id="li10"> OL, negyedik li eleme.</li>
<li id="li11"> OL, ötödik li eleme.</li>
<li id="li12"> OL, utolsó li eleme.</li>
</ol>
<ol id="ol02">
<ul id="ul02">
<li id="li13"> OL-UL, első li eleme.</li>
<li id="li14"> OL-UL, második li eleme.</li>
<li id="li15"> OL-UL, harmadik li eleme.</li>
<li id="li16"> OL-UL, negyedik li eleme.</li>
<li id="li17"> OL-UL, ötödik li eleme.</li>
<li id="li18"> OL-UL, utolsó li eleme.</li>
</ul>
</ol>
| |
Bemutató, ul és ol területén lévő, li elemekkel.
|
Eredmény: jQuery álcázott tömb, és get() tömb, index meghatározással. |
|
| |
Div elemek tartalmának lekérdezése.
.get() és .get().reverse() meghatározásokkal.
|
Példák:
<head>
<style> #sorrend{color: blue; font-weight:bold;} </style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
// --------------------- Eredeti sorrendben. --------------------------------------
$("#get01").click(function(){
function display( divek ) {
var a = [];
for ( var i = 0; i < divek.length; i++ ) {
a.push( divek[ i ].innerHTML ); // push( A zárójelek közötti adatokat, hozáadja a tömbhöz.)
}
$( "#sorrend" ).text( a.join(" ") );
}
display( $( "#teszt div" ).get() );
});
// --------------------- Fordított sorrendben. --------------------------------------
$("#get02").click(function(){
function display( divek ) {
var a = [];
for ( var i = 0; i <divek.length; i++ ) {
a.push( divek[ i ].innerHTML ); // push( A zárójelek közötti adatokat, hozáadja a tömbhöz.)
}
$( "#sorrend" ).text( a.join(" ") );
}
display( $( "#teszt div" ).get().reverse() );
});
});
</script>
</head>
<body>
<div id="teszt"> Div elemek, eredeti sorrenje:<br />
<div>Első div elem tartalma!</div>
<div>Második div elem tartalma!</div>
<div>Harmadik div elem tartalma!</div>
</div>
<br /><br />
Sorrend: <span id="sorrend"></span>
<button id="get01"> Eredeti sorrendben! </button>
<button id="get02"> Fordítótt sorrendben! </button>
</body>
</html>
|
|
Div elemek, eredeti sorrenje:
<div> Első div elem tartalma! </div><div> Második div elem tartalma! </div><div> Harmadik div elem tartalma! </div>
Sorrend: |
Dukumentum területének figyelése.
Példa:
Visszaadja azon jelölőelem cimke nevét, melynek területén kattintunk. (A kijelző a címke nevét a kattintás elem. )
<head>
<meta charset="utf-8">
<title>get demo</title>
<style>
span {
color: red;
}
div {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<span> </span>
<p>Ebben a bekezdésben, van egy <span>lényeges</span> rész</p>
<div> <input type="text"> </div>
<script>
$( "*", document.body ).click(function( event ) {
event.stopPropagation();
var domElement = $( this ).get( 0 );
$( "span:first" ).text( "Kattintottál, ezen elem területén = " + domElement.nodeName );
});
</script>
</body>
|
|
Kattints a weboldal tetszőleges területén, és megmutatom, hogy milyen típusú elem területén kattintottál. <span> </span><p>Ez bekezdés, kattints ide, <span>ez egy span, kattints ide,</span> bekezdés további tartalma.</p> <div> Kattints az inputablakban is: </div>
|