jQuery CSS Stilleri

İçindekiler

jQuery ve JavaScript

jQuery, 2006 yılında John Resig tarafından oluşturuldu. Tarayıcı Uyumsuzluklarını gidermek ve HTML DOM Düzenlemesini, Olay İşlemeyi, Animasyonları ve Ajax'ı basitleştirmek için tasarlanmıştır.

10 yıldan fazla bir süredir jQuery dünyanın en popüler JavaScript kütüphanesi olmuştur.

Ancak, JavaScript Sürüm 5'ten (2009) sonra jQuery yardımcı programlarının çoğu, birkaç satırlık standart JavaScript ile çözülebilir:

HTML Öğelerini Gizleme

Bir HTML Öğesini Gizleyin:

jQuery

myElement.hide();

Kendiniz Deneyin →

<!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";

Kendiniz Deneyin →

<!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 Öğeleri Gösteriliyor

Bir HTML Öğesini Göster:

jQuery

myElement.show();

Kendiniz Deneyin →

<!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 = "";

Kendiniz Deneyin →

<!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>

HTML Öğelerini Şekillendirme

Bir HTML öğesinin yazı tipi boyutunu değiştirin:

jQuery

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

Kendiniz Deneyin →

<!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";

Kendiniz Deneyin →

<!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>