jQuery CSS stílusok

Tartalomjegyzék

jQuery vs JavaScript

A jQuery-t 2006-ban hozta létre John Resig. Úgy tervezték, hogy kezelje a böngésző inkompatibilitását, és egyszerűsítse a HTML DOM-manipulációt, az eseménykezelést, az animációkat és az Ajax-ot.

A jQuery több mint 10 éve a legnépszerűbb JavaScript-könyvtár a világon.

A JavaScript 5-ös verziója (2009) után azonban a legtöbb jQuery segédprogram néhány soros szabványos JavaScript használatával megoldható:

HTML elemek elrejtése

HTML-elem elrejtése:

jQuery

myElement.hide();

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<h2>Get Text Content</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>
<p id="03">Hello Japan!</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  $("#02").hide();
});
</script>

</body>
</html>

JavaScript

myElement.style.display = "none";

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>Hide HTML Elements</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>
<p id="03">Hello Japan!</p>

<script>
document.getElementById("02").style.display = "none";
</script>

</body>
</html>

HTML elemek megjelenítése

HTML elem megjelenítése:

jQuery

myElement.show();

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<h2>Show HTML Elements</h2>
<p id="01" style="display:none">Hello World!</p>
<p id="02" style="display:none">Hello Sweden!</p>
<p id="03" style="display:none">Hello Japan!</p>

<script>
$(document).ready(function() {
  $("#02").show();
});
</script>

</body>
</html>

JavaScript

myElement.style.display = "";

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>Show HTML Elements</h2>
<p id="01" style="display:none">Hello World!</p>
<p id="02" style="display:none">Hello Sweden!</p>
<p id="03" style="display:none">Hello Japan!</p>

<script>
document.getElementById("02").style.display = "";
</script>

</body>
</html>

Styling HTML elemek

Módosítsa egy HTML-elem betűméretét:

jQuery

$("#demo").css("font-size","35px");

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<p id="demo">Change the style of an HTML element.</p>

<script>
$(document).ready(function() {
  $("#demo").css("font-size","35px");
});
</script>

</body>
</html>

JavaScript

document.getElementById("demo").style.fontSize = "35px";

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<p id="demo">Change the style of an HTML element.</p>

<script>
document.getElementById("demo").style.fontSize = "35px";
</script>

</body>
</html>