jQuery - CSS Seçme Yöntemleri
JQuery kitaplığı, World Wide Web Consortium sitesinde belirtildiği gibi Basamaklı Stil Sayfası (CSS) özellikleri 1'den 3'e kadar olan seçicilerin neredeyse tamamını destekler.
JQuery kitaplığını kullanarak geliştiriciler, tarayıcılarda JavaScript etkin olduğu sürece tarayıcılar ve sürümleri hakkında endişelenmeden web sitelerini geliştirebilirler.
JQuery CSS Yöntemlerinin çoğu jQuery nesnesinin içeriğini değiştirmez ve DOM öğelerine CSS özelliklerini uygulamak için kullanılır.
CSS Özelliklerini Uygula
Bu, JQuery yöntemini kullanarak herhangi bir CSS özelliğini uygulamak çok basittir. css( PropertyName, PropertyValue ).
İşte yöntemin sözdizimi -
selector.css( PropertyName, PropertyValue );Burada PropertyName'i bir javascript dizesi olarak geçirebilirsiniz ve değerine bağlı olarak, Özellik Değeri dize veya tamsayı olabilir.
Misal
Aşağıda, ikinci liste öğesine yazı tipi rengi ekleyen bir örnek verilmiştir.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).css("color", "red");
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Birden Çok CSS Özelliği Uygulama
Tek bir JQuery yöntemini kullanarak birden çok CSS özelliği uygulayabilirsiniz CSS( {key1:val1, key2:val2....). Tek bir aramada istediğiniz kadar mülk uygulayabilirsiniz.
İşte yöntemin sözdizimi -
selector.css( {key1:val1, key2:val2....keyN:valN})Burada anahtarı özellik olarak ve val değerini değeri olarak yukarıda açıklandığı gibi geçirebilirsiniz.
Misal
Aşağıda, ikinci liste öğesine yazı tipi renginin yanı sıra arka plan rengi ekleyen bir örnek verilmiştir.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).css({"color":"red", "background-color":"green"});
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Öğe Genişliğini ve Yüksekliğini Ayarlama
width( val ) ve height( val ) yöntem, herhangi bir elemanın sırasıyla genişliğini ve yüksekliğini ayarlamak için kullanılabilir.
Misal
Aşağıda, ilk bölme öğesinin genişliğini ayarlayan basit bir örnek verilmiştir; burada öğelerin geri kalanının genişliği stil sayfası tarafından belirlenir.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div:first").width(100);
$("div:first").css("background-color", "blue");
});
</script>
<style>
div {
width:70px; height:50px; float:left;
margin:5px; background:red; cursor:pointer;
}
</style>
</head>
<body>
<div></div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
JQuery CSS Yöntemleri
Aşağıdaki tablo, CSS özellikleriyle oynamak için kullanabileceğiniz tüm yöntemleri listelemektedir -
| Sr.No. | Yöntem ve Açıklama |
|---|---|
| 1 | css (ad)
İlk eşleşen öğede bir stil özelliği döndür. |
| 2 | css (ad, değer)
Tek bir stil özelliğini eşleşen tüm öğelerdeki bir değere ayarlayın. |
| 3 | css (özellikler)
Tüm eşleşen öğelere stil özellikleri olarak bir anahtar / değer nesnesi ayarlayın. |
| 4 | yükseklik (val)
Eşleşen her öğenin CSS yüksekliğini ayarlayın. |
| 5 | yükseklik( )
İlk eşleşen öğenin geçerli hesaplanan pikselini, yüksekliğini alın. |
| 6 | innerHeight ()
İlk eşleşen öğe için iç yüksekliği alır (kenarlığı hariç tutar ve dolguyu içerir). |
| 7 | innerWidth ()
İlk eşleşen öğe için iç genişliği alır (kenarlığı hariç tutar ve dolguyu içerir). |
| 8 | ofset ()
Belgeye göre ilk eşleşen öğenin piksel cinsinden geçerli ofsetini alın. |
| 9 | offsetParent ()
İlk eşleşen öğenin konumlandırılmış üst öğesiyle bir jQuery koleksiyonu döndürür. |
| 10 | OuterHeight ([margin])
İlk eşleşen öğe için dış yüksekliği (varsayılan olarak kenarlığı ve dolguyu içerir) alır. |
| 11 | OuterWidth ([margin])
İlk eşleşen öğe için dış genişliği (varsayılan olarak kenarlığı ve dolguyu içerir) alın. |
| 12 | durum( )
Bir öğenin, öteleme üst öğesine göre üst ve sol konumunu alır. |
| 13 | scrollLeft (val)
Bir değer iletildiğinde, sol kaydırma ofseti eşleşen tüm elemanlarda bu değere ayarlanır. |
| 14 | scrollLeft ()
İlk eşleşen öğenin kaydırma sol ofsetini alır. |
| 15 | scrollTop (val)
Bir değer iletildiğinde, kaydırma üst ofseti eşleşen tüm elemanlarda bu değere ayarlanır. |
| 16 | scrollTop ()
İlk eşleşen öğenin kaydırma üst ofsetini alır. |
| 17 | genişlik (val)
Eşleşen her öğenin CSS genişliğini ayarlayın. |
| 18 | Genişlik( )
İlk eşleşen öğenin geçerli hesaplanan pikselini, genişliğini alın. |