Bevezetés a jQuery elemekbe
A jQuery html elemekkel működik. Ez azt jelenti, hogy kiválasztjuk a html oldal egyes elemeit, és elvégzünk bizonyos műveleteket rajta. A jQuery-ben sok választó található. Minden választót részletesen látni fogunk.
Szintaxis:
$(selector).action()
Ahol a $ jelet a jQuery szimbolizálására használják,
A választógombnak ki kell választania a html elemet, a művelet pedig a jquery művelet végrehajtása a kiválasztott elemnél. Így a fenti szintaxist használó jQuery szelektorok az alábbi példákhoz hasonlóak lesznek.
Példa:
$('div').css('background-color', 'green');
$('p').css('border', '2px solid red');
$('span').css('color', 'red');
Demóprogram a fenti szintaxis és a jQuery működésének bemutatására.
Kód:
element demo
div p span(
width: 120px;
height: 60px;
padding: 10px;
)
$('document').ready(function() (
$('div').css('background-color', 'green');
$('p').css('border', '2px solid red');
$('span').css('color', 'red');
));
The div element
a p elem
a SPAN elemKimenet:
A jQuery az CSS szintaxist használja az elemek kiválasztásához. A jQuery választógépek először megkeresik / kiválasztják a html elemet, majd végrehajtanak egy műveletet a html elemeknél.
A 8 legfontosabb jQuery választógép
Minden elem itt kiválasztásra kerül az elemnév, azonosító, osztályok, típusok stb. Alapján. Felépíthetjük saját felhasználó által definiált választókat is. A választók, amelyeket ebben az oktatóanyagban tanulunk.
- Az elemválasztó
- Az azonosító választó
- Az osztályválasztó
- A: eq () választó
- Az: első választó, az: utolsó választó, a: páros választó, a: páratlan választó
- Az első és az első gyermek közötti különbség
- Az utolsó és az utolsó gyermek közötti különbség
- A jQuery módszer láncolása
1. Az elemválasztó
Amint a fenti programból láthatjuk, hasonlóan
$('p').css('border', '2px solid red');
A választó mindig a $ -val (dollárjel) kezdődik, amelyet zárójel () követ. Ez a választó kiválasztja az összes bekezdést
elemek egy adott oldalon. A CSS a p elemre elvégzendő művelet, amely további 2 px szegélyt, szegélytípusú szilárd anyagot és piros színű szegélyt hoz létre minden p elemnél.
Példa:
- Esemény: A felhasználó egy gombra kattint, amikor a dokumentum teljesen be van töltve (a dokumentum esemény funkciójával).
- Művelet az eseményen: Beállíthat egy bekezdéselemet.
Kód:
$(document).ready(function() (
$('#button').click(function() (
$('p').css('border', '2px solid red');
));
));
2. Az azonosító választó
Ez a választó #-vel kezdődik, amelyet a html elem azonosítója követ, amely a html elem id attribútumára utal.
Szintaxis:
$('#idname').someaction();
Kód:
$(document).ready(function()(
$("#new").css("background-color", "green");
));
Welcome to My Page!
$(document).ready(function()(
$("#new").css("background-color", "green");
));
Welcome to My Page!
$(document).ready(function()(
$("#new").css("background-color", "green");
));
Welcome to My Page!
$(document).ready(function()(
$("#new").css("background-color", "green");
));
Welcome to My Page!
Ez az első elem
Ez a második elem
Kimenet:
3. Az osztályválasztó
A html elem ezen .osztálynévvel rendelkező osztályának attribútuma ezzel a választóval lesz kiválasztva. Az class attribútum stílusok hozzáadásához használható több HTML elemhez.
Szintaxis:
$('.classname').someaction();
4. Az: eq () választó
Ez: eq () választó kiválaszt egy html elemet az adott indexhez. Ez az index 0-nál kezdődik.
Szintaxis:
$(“:eq(index)”)
Kód:
$(document).ready(function()(
$("p:eq(1)").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:eq(1)").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:eq(1)").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:eq(1)").css("background-color", "green");
));
Welcome to My Page
Első elem
Második elem
Harmadik elem
Foruth Elemnet
- kávé
- tea
Kimenet:
5. Az: első választó, : utolsó választó, : páros választó, : páratlan választó
Vessen egy pillantást erre a választóra.
Csoport
- The: first Selector - Megtalálja a csoport első elemét.
Kód:
$(document).ready(function()(
$("p:first").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:first").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:first").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:first").css("background-color", "green");
));
Welcome to My Page
Első elem
Második elem
Harmadik elem
Foruth Elemnet
Kimenet:
- A: utolsó választó - Megtalálja a csoport utolsó elemét.
Kód:
$(document).ready(function()(
$("p:last").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:last").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:last").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:last").css("background-color", "green");
));
Welcome to My Page
Első elem
Második elem
Harmadik elem
Foruth Elemnet
Kimenet:
asztal
- A: páros választó - megtalálja a táblázat összes páros sorát.
- A: páratlan választó - Megtalálja a táblázat összes páratlan sorát.
Az alábbi programban a zöld kiemeli a páros sorokat, a sárga pedig a páratlan sorokat.
Kód:
$(document).ready(function()(
$("tr:even").css("background-color", "green");
$("tr:odd").css("background-color", "yellow");
));
Welcome to My Page
S.No
Email
Phone
1
91-799-2909878
1
91-777-4909878
1
91-789-5909878
$(document).ready(function()(
$("tr:even").css("background-color", "green");
$("tr:odd").css("background-color", "yellow");
));
Welcome to My Page
S.No
Email
Phone
1
91-799-2909878
1
91-777-4909878
1
91-789-5909878
$(document).ready(function()(
$("tr:even").css("background-color", "green");
$("tr:odd").css("background-color", "yellow");
));
Welcome to My Page
S.No
Phone
1
91-799-2909878
1
91-777-4909878
1
91-789-5909878
$(document).ready(function()(
$("tr:even").css("background-color", "green");
$("tr:odd").css("background-color", "yellow");
));
Welcome to My Page
S.No
Email
Phone
1
91-799-2909878
1
91-777-4909878
1
91-789-5909878
| | |
|---|---|---|
| | |
| | |
| | |
$(document).ready(function()(
$("tr:even").css("background-color", "green");
$("tr:odd").css("background-color", "yellow");
));
Welcome to My Page
S.No
Email
Phone
1
91-799-2909878
1
91-777-4909878
1
91-789-5909878
Kimenet:
Mivel megismerkedtünk az első és az utolsó, a páros és a páratlan, tanuljuk meg az első és az első gyermek különbségeit is.
6. Az első és az első gyermek közötti különbség
- : első - Mint tudjuk: az első kiválasztja az első elemet.
- : első gyermek - Válassza ki azokat az elemeket, amelyek a szülők első gyermekei.
Az alábbiakban bemutatunk egy demót, amely magyarázza ezt a különbséget.
$(document).ready(function()(
$("#buttonfirst").click(function()(
$("p:first").css("background-color", "green");
));
$("#buttonfirstchild").click(function()(
$("p:first-child").css("background-color", "green");
));
));
show first
show first-child
Első elem
Második elem
Első elem
Utolsó elem
Ez a kimenet akkor jelenik meg, amikor az első mutató gombra kattintanak.
Kimenet:
Ez a kimenet akkor jelenik meg, amikor a második gomb azt mutatja, hogy az első gyermekre kattintottak.
Kimenet:
7. Az utolsó és az utolsó gyermek közötti különbség
Hasonlóképpen: az utolsó és az utolsó gyermek közötti különbség megegyezik a fentiekkel, csak meg kell változtatnunk a választó típusát.
Kód:
$(document).ready(function()(
$("#buttonfirst").click(function()(
$("p:last").css("background-color", "green");
));
$("#buttonfirstchild").click(function()(
$("p:last-child").css("background-color", "green");
));
));
8. jQuery módszer láncolása
Mostanáig egyetlen választógombot láttunk egy művelettel, de a jQuery lehetővé teszi, hogy ugyanazon elemre egyetlen választógombot és több műveletet írjunk.
Kód:
$(document).ready(function()(
$("button").click(function()(
$("div").css("background-color", "red").css("color", "white");
));
));
Welcome to My Page
Hello World
Click me
$(document).ready(function()(
$("button").click(function()(
$("div").css("background-color", "red").css("color", "white");
));
));
Welcome to My Page
Hello World
Click me
$(document).ready(function()(
$("button").click(function()(
$("div").css("background-color", "red").css("color", "white");
));
));
Welcome to My Page
Hello World
Click me
$(document).ready(function()(
$("button").click(function()(
$("div").css("background-color", "red").css("color", "white");
));
));
Welcome to My Page
Hello World
Click me
Mielőtt rákattintana gombra
Kimenet:
After Click me gomb
Kimenet:
Ajánlott cikkek
Ez egy útmutató a jQuery Elementshez. Itt tárgyaljuk a bevezetést és a 8 legfontosabb jQuery választót, valamint a kód megvalósítását. A következő cikkeket is megnézheti további információkért -
- 4 Java öröklési típusok
- Az 5 legfontosabb Java telepítési eszköz
- Fibonacci sorozat Java-ban
- Kulcsszavak listája a Java-ban
- Útmutató a JQuery Progress Bar példákhoz
- Fibonacci sorozat generálása példával