jQuery elem beazonositási táblázat.
| Szelektorok. | Műveleti leírások. |
|---|---|
| $(" * ") | Minden html 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" |
| $("h1,div,p") | Minden <h1>, <div> és <p> elem |
| $("p") | Minden <p> elem. (Érvényes minden olyan elemre, melynek nevét a "p" helyére írunk.) Jelölőelem példák: h1;h2;h3;h4;h5;h6; div; p; span; pre; table; tr; td; ul; ol; li; stb. |
| $("p:first") | Első <p> elem. (Érvényes minden olyan elemre, melynek nevét a "p" helyére írunk.) |
| $("p:last") | Utolsó <p> elem. (Érvényes minden olyan elemre, melynek nevét a "p" helyére írunk.) |
| $("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) |
| $("p:first-child") | Minden <p> elem, amely a szülőjének első gyermeke |
| $("p:first-of-type") | Minden olyan <p> elem, amely a szülő elemének első <p> eleme |
| $("p:last-child") | Minden <p> elem, amely a szülő utolsó gyermeke |
| $("p:last-of-type") | Minden olyan <p> elem, amely a szülőjük utolsó <p> eleme |
| $("p:nth-child(2)") | Minden <p> elem, amely a szülőjének második gyermeke |
| $("p:nth-last-child(2)") | Minden <p> elem, amely a szülője 2. gyermeke, az utolsó gyermektől számítva |
| $("p:nth-of-type(2)") | Minden olyan <p> elem, amely a szülőjük 2. <p> eleme |
| $("p:nth-last-of-type(2)") | Minden olyan <p> elem, amely a szülőjének 2. <p> eleme, az utolsó gyermektől számítva |
| $("p:only-child") | Minden <p> elem, amely a szülőjének egyetlen gyermeke |
| $("p:only-of-type") | Minden olyan <p> elem, amely a szülőjének egyetlen gyermeke a típusában |
| $("p:contains('Első')") | Minden <p> elem, mely tartalmazza ezt a szövegetet: ('Első') |
| $(":header") | Minden címsor (header) elem. <h1> <h2> <h3> <h4> <h5> <h6> |
| $("h2:header") | Minden <h2> fejléc elem |
| $("[href]") | Minden elem, melynek attribútuma href. (Beleértve, a head szakaszban lévőket is.) |
| $("[src]") | Minden elem, melynek attribútuma src. (Beleértve, a head szakaszban 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. |
| $("div p") | Minden <p> elem, amely egy <div> elem leszármazottja |
| $("div + p") | A <div> elemek mellett található <p> elem |
| $("div ~ p") | Minden <p> elem, amely a <div> elem után szerepel |
| $("div:has(p)") | Minden <div> elem, amely tartalmaz <p> elemet. (has=van) |
| $("input:not(:empty)") | Minden nem üres bemeneti elem |
| $(":focus") | Azon elem, amely jelenleg fókuszban van |
| $(":empty") | All elements that are empty Minden üres elem |
| $(":parent") | Minden olyan elem, amely egy másik elem szülője. (parent=szülő) |
| $("p:hidden") | Minden rejtett <p> elem |
| $("table:visible") | Minden látható tábla |
| $("p:lang(de)") | Minden olyan <p> elem, amelynek lang attribútumértéke "de"-vel kezdődik. |
| $(":root") | A dokumentum root gyökéreleme. HTML-ben a gyökérelem, mindig a <html> elem. |
| $(":contains('Hello')") | Minden olyan elem, amely tartalmazza a "Hello" szöveget |
| $(":animated") | Minden animált elem |
| $("h1").text(); | Kiválasztott jelölőelem, példánkban a <h1> címsor szövege. (text) |
| $("#egyedi01").text(); | Az id=egyedi01 azonosítóval rendelkező elem szövege, normál szövegként. |
| $("#egyedi01").html(); | Az id=egyedi01 azonosítóval rendelkező elem szövege, stílus formátumban |
Beazonosítási példák, szelektorokkal.
|
Változóhoz rendeljük, a kiválasztott szelektort. | |
|---|---|
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="iso-8859-2">
<title>jquery teszt</title>
// Valamelyik jquery verziójának meghívása.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="stilus.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>jquery teszt</h1>
<!-- Táblázat elkészítése.
Példában, az oldalon meglévő táble elemeket használjuk, lekédezésre. -->
<table>
<tr><td></td></tr>
</table>
<p>
Összes <table> elem = <span id="tablazatok"></span> db.<br>
Összes <tr> elem = <span id="trelem"></span> db.<br>
Összes <th> elem = <span id="thelem"></span> db.<br>
Összes <td> elem = <span id="tdelem"></span> db.<br>
</p>
<p>
Összes <div> elem = <span id="divelem"></span> db.<br>
Összes <h2> elem = <span id="h2elem"></span> db.<br>
Összes <p> elem = <span id="pelemek"></span> db.<br>
Összes <span> elem = <span id="spanelemek"></span> db.<br>
</p>
<pre>
Első <td> elem tartalma:
<span id="td1_tartalma"></span>
Második <td> elem tartalma:
<span id="td2_tartalma"></span>
</pre>
<script>
$(document).ready(function(){
var Otabla=$("table"); // Összes <table> elem.
var Otablah=Otabla.length; // <table> elemek db. száma.
$("#tablazatok").html(Otablah); // A kapott eredmény, kiíratása.
// Összes <tr> elem.
var Otr=$("tr"); var Otrh=Otr.length; $("#trelem").html(Otrh);
// Összes <th> elem.
var Oth=$("th"); var Othh=Oth.length; $("#thelem").html(Othh);
// Összes <td> elem.
var Otd=$("td"); var Otdh=Otd.length; $("#tdelem").html(Otdh);
// Összes <div> elem.
var Odiv=$("div"); var Odivh=Odiv.length; $("#divelem").html(Odivh);
// Összes <h2> elem megkeresése, és darabszámuk lekérdezése.
var Oh2=$("h2"); var Oh2h=Oh2.length; $("#h2elem").html(Oh2h);
// Összes <p> elem.
var Op=$("p"); var Oph=Op.length; $("#pelemek").html(Oph);
// $("p:eq(0)").addClass("sargah"); // Első p elemhez, stilus
// Összes <span> elem.
var Osp=$("span"); var Osph=Osp.length; $("#spanelemek").html(Osph);
// Az első és második <td> elem tartalma. ( Első elem index értéke = 0 )
var td1=$("td:eq(0)").html(); $("#td1_tartalma").html(td1);
var td2=$("td:eq(1)").html(); $("#td2_tartalma").html(td2);
});
</script>
</body>
</html>
|
Program, lekérdezési eredmények:
Összes <table> elem = db.
Összes <div> elem = db.
Első <td> elem tartalma:
Második <td> elem tartalma:
|