jQuery - Metode Pemilih CSS
Pustaka jQuery mendukung hampir semua penyeleksi yang termasuk dalam spesifikasi Cascading Style Sheet (CSS) 1 hingga 3, sebagaimana diuraikan di situs World Wide Web Consortium.
Menggunakan pengembang perpustakaan JQuery dapat meningkatkan situs web mereka tanpa mengkhawatirkan browser dan versinya selama browser mengaktifkan JavaScript.
Sebagian besar Metode CSS JQuery tidak mengubah konten objek jQuery dan digunakan untuk menerapkan properti CSS pada elemen DOM.
Terapkan Properti CSS
Ini sangat sederhana untuk menerapkan properti CSS apa pun menggunakan metode JQuery css( PropertyName, PropertyValue ).
Berikut adalah sintaks untuk metode tersebut -
selector.css( PropertyName, PropertyValue );Di sini Anda dapat mengirimkan PropertyName sebagai string javascript dan berdasarkan nilainya, PropertyValue bisa berupa string atau integer.
Contoh
Berikut adalah contoh yang menambahkan warna font ke item daftar kedua.
<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>Ini akan menghasilkan hasil sebagai berikut -
Terapkan Beberapa Properti CSS
Anda dapat menerapkan beberapa properti CSS menggunakan satu metode JQuery CSS( {key1:val1, key2:val2....). Anda dapat menerapkan properti sebanyak yang Anda suka dalam satu panggilan.
Berikut adalah sintaks untuk metode tersebut -
selector.css( {key1:val1, key2:val2....keyN:valN})Di sini Anda dapat memasukkan kunci sebagai properti dan val sebagai nilainya seperti dijelaskan di atas.
Contoh
Berikut ini adalah contoh yang menambahkan warna font serta warna latar belakang ke item daftar kedua.
<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>Ini akan menghasilkan hasil sebagai berikut -
Mengatur Lebar & Tinggi Elemen
Itu width( val ) dan height( val ) metode dapat digunakan untuk mengatur lebar dan tinggi masing-masing elemen.
Contoh
Berikut ini adalah contoh sederhana yang mengatur lebar elemen divisi pertama sedangkan elemen lainnya memiliki lebar yang diatur oleh style sheet
<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>Ini akan menghasilkan hasil sebagai berikut -
Metode CSS JQuery
Tabel berikut mencantumkan semua metode yang dapat Anda gunakan untuk bermain dengan properti CSS -
| Sr.No. | Metode & Deskripsi |
|---|---|
| 1 | css (nama) Kembalikan properti gaya pada elemen pertama yang cocok. |
| 2 | css (nama, nilai) Tetapkan satu properti gaya ke nilai di semua elemen yang cocok. |
| 3 | css (properti) Tetapkan objek kunci / nilai sebagai properti gaya untuk semua elemen yang cocok. |
| 4 | tinggi (val) Atur tinggi CSS dari setiap elemen yang cocok. |
| 5 | tinggi () Dapatkan penghitungan, piksel, tinggi elemen pertama yang cocok saat ini. |
| 6 | innerHeight () Mendapat tinggi bagian dalam (tidak termasuk perbatasan dan termasuk bantalan) untuk elemen pertama yang cocok. |
| 7 | innerWidth () Mendapat lebar bagian dalam (tidak termasuk perbatasan dan termasuk bantalan) untuk elemen pertama yang cocok. |
| 8 | offset () Dapatkan offset saat ini dari elemen pertama yang cocok, dalam piksel, relatif terhadap dokumen. |
| 9 | offsetParent () Mengembalikan koleksi jQuery dengan induk yang diposisikan dari elemen pertama yang cocok. |
| 10 | outerHeight ([margin]) Mendapatkan tinggi luar (termasuk perbatasan dan bantalan secara default) untuk elemen pertama yang cocok. |
| 11 | outerWidth ([margin]) Dapatkan lebar luar (termasuk perbatasan dan bantalan secara default) untuk elemen pertama yang cocok. |
| 12 | posisi () Mendapat posisi atas dan kiri elemen relatif terhadap induk offsetnya. |
| 13 | scrollLeft (val) Ketika sebuah nilai dimasukkan, offset kiri gulir diatur ke nilai tersebut pada semua elemen yang cocok. |
| 14 | scrollLeft () Mendapat gulir offset kiri dari elemen pertama yang cocok. |
| 15 | scrollTop (val) Saat nilai diteruskan, offset atas gulir disetel ke nilai tersebut pada semua elemen yang cocok. |
| 16 | scrollTop () Mendapat offset atas gulir dari elemen pertama yang cocok. |
| 17 | lebar (val) Atur lebar CSS dari setiap elemen yang cocok. |
| 18 | lebar () Dapatkan penghitungan, piksel, lebar elemen pertama yang cocok saat ini. |