jQuery styling
Ik heb een algemeen vraagje over jQuery.
In deze video tutorial http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-4/ laten ze zien hoe je css classes kunt toevoegen aan een bepaald element. Stel je hebt een lijstje met 10 items, dan kun je via jQuery het 4e item rood kleuren (vraag me niet waarom je dat zou doen, het is maar een voorbeeld). Ook laten ze zien dat je alle links op een pagina die een bepaalde titel hebben via jQuery bijvoorbeeld een bepaalde kleur kunt geven. Dus bijvoorbeeld iedere link waarvan de title 'klik hier' is wordt rood.
Wat ik me nu afvraag is of, en zo ja in hoeverre, jQuery bedoeld is voor het stylen van elementen.
Voor client side scripting snap ik de toepassing helemaal. Dus je klikt ergens op en er gebeurt iets. Maar gebruik je jQuery ook als opmaak tool vraag ik me af?
Het is natuurlijk heel handig om alle links met een bepaalde title een bepaalde kleur te geven, maar je zou deze links ook handmatig een class kunnen meegeven.
css:
a.klik_hier_link {
color:red;
}
Optie 1:
Stylen via css:
<a href="#" title="klik hier" class="klik_hier_link">klik hier<a>
Optie 2:
Stylen via jQuery:
<a href="#" title="klik hier">klik hier<a>
En dan via jQuery:
$('a[title=klik hier]').addClass('klik_hier_link');
Wat is volgens jullie de beste manier?
In deze video tutorial http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-4/ laten ze zien hoe je css classes kunt toevoegen aan een bepaald element. Stel je hebt een lijstje met 10 items, dan kun je via jQuery het 4e item rood kleuren (vraag me niet waarom je dat zou doen, het is maar een voorbeeld). Ook laten ze zien dat je alle links op een pagina die een bepaalde titel hebben via jQuery bijvoorbeeld een bepaalde kleur kunt geven. Dus bijvoorbeeld iedere link waarvan de title 'klik hier' is wordt rood.
Wat ik me nu afvraag is of, en zo ja in hoeverre, jQuery bedoeld is voor het stylen van elementen.
Voor client side scripting snap ik de toepassing helemaal. Dus je klikt ergens op en er gebeurt iets. Maar gebruik je jQuery ook als opmaak tool vraag ik me af?
Het is natuurlijk heel handig om alle links met een bepaalde title een bepaalde kleur te geven, maar je zou deze links ook handmatig een class kunnen meegeven.
css:
a.klik_hier_link {
color:red;
}
Optie 1:
Stylen via css:
<a href="#" title="klik hier" class="klik_hier_link">klik hier<a>
Optie 2:
Stylen via jQuery:
<a href="#" title="klik hier">klik hier<a>
En dan via jQuery:
$('a[title=klik hier]').addClass('klik_hier_link');
Wat is volgens jullie de beste manier?
ik denk dat het beter is met css...
waarom zou je onnodig JavaScript gebruiken,
volgens mij maak je je website zo alleen maar langzamer...
waarom zou je onnodig JavaScript gebruiken,
volgens mij maak je je website zo alleen maar langzamer...
Ze laten het in die tutorial alleen maar zien zodat ze je dat later kunnen leren doen bij een muisklik. Een statische pagina opmaken met Javascript is nogal doelloos. Maar een element een class geven als je met de muis erop klikt, dat is best praktisch.
Ah oke, thanks. Maar als je bijvoorbeeld een lijstje hebt en je wilt het 4e item een kleur geven, dan kan dit volgens mij niet met css (toch?). Dan zou je dit dus wel met jQuery heek makkelijk kunnen doen, of je moet via PHP telkens een bepaalde class meegeven aan het 4e element. Wat heeft dan de voorkeur?
Dat kan wel met CSS3 het 4e element nemen, dit werkt gewoon precies het zelfde als de selectors in jQ.
En of je jQ of PHP moet gebruiken. Het ligt eraan hoe je je gegevens op haalt. Haal je elk item uit de database dan kan je natuurlijk beter PHP gebruiken. Maar heb je een statische HTML pagina dan ga ik toch voor JS, niet voor jQ.
En of je jQ of PHP moet gebruiken. Het ligt eraan hoe je je gegevens op haalt. Haal je elk item uit de database dan kan je natuurlijk beter PHP gebruiken. Maar heb je een statische HTML pagina dan ga ik toch voor JS, niet voor jQ.
"Dat kan wel met CSS3 het 4e element nemen, dit werkt gewoon precies het zelfde als de selectors in jQ."
Betekent dit dat de jQuery oplossing niet werkt in browsers die css3 niet ondersteunen?
"En of je jQ of PHP moet gebruiken. Het ligt eraan hoe je je gegevens op haalt. Haal je elk item uit de database dan kan je natuurlijk beter PHP gebruiken. Maar heb je een statische HTML pagina dan ga ik toch voor JS, niet voor jQ."
Hoe bedoel je dit? Je bouwt iedere pagina toch zelf op. Wat is het verschil of het wel of niet uit de database komt?
Betekent dit dat de jQuery oplossing niet werkt in browsers die css3 niet ondersteunen?
"En of je jQ of PHP moet gebruiken. Het ligt eraan hoe je je gegevens op haalt. Haal je elk item uit de database dan kan je natuurlijk beter PHP gebruiken. Maar heb je een statische HTML pagina dan ga ik toch voor JS, niet voor jQ."
Hoe bedoel je dit? Je bouwt iedere pagina toch zelf op. Wat is het verschil of het wel of niet uit de database komt?
Ozzie PHP op 27/01/2011 18:04:46:
"Dat kan wel met CSS3 het 4e element nemen, dit werkt gewoon precies het zelfde als de selectors in jQ."
Betekent dit dat de jQuery oplossing niet werkt in browsers die css3 niet ondersteunen?
Betekent dit dat de jQuery oplossing niet werkt in browsers die css3 niet ondersteunen?
Nee
Dus als een browser geen css3 ondersteunt, dan werkt het met jQuery wel?
Ozzie PHP op 27/01/2011 18:13:29:
Dus als een browser geen css3 ondersteunt, dan werkt het met jQuery wel?
Ja
oke :)
Ja, jQ heeft alleen de selectors van CSS3 overgenomen. Maar de manier van selecteren heeft hij met javascript gedaan. Dit werkt dus gewoon overal.
oke, duidelijk




