jQuery - Phương thức Bộ chọn CSS
Thư viện jQuery hỗ trợ gần như tất cả các bộ chọn có trong các thông số kỹ thuật của Cascading Style Sheet (CSS) từ 1 đến 3, như được nêu trên trang của World Wide Web Consortium.
Sử dụng thư viện JQuery, các nhà phát triển có thể nâng cao trang web của họ mà không cần lo lắng về trình duyệt và các phiên bản của chúng miễn là trình duyệt đã bật JavaScript.
Hầu hết các Phương thức CSS của JQuery không sửa đổi nội dung của đối tượng jQuery và chúng được sử dụng để áp dụng các thuộc tính CSS trên các phần tử DOM.
Áp dụng thuộc tính CSS
Điều này rất đơn giản để áp dụng bất kỳ thuộc tính CSS nào bằng phương thức JQuery css( PropertyName, PropertyValue ).
Đây là cú pháp của phương thức -
selector.css( PropertyName, PropertyValue );Ở đây bạn có thể chuyển PropertyName dưới dạng một chuỗi javascript và dựa trên giá trị của nó, PropertyValue có thể là chuỗi hoặc số nguyên.
Thí dụ
Sau đây là một ví dụ thêm màu phông chữ vào mục danh sách thứ hai.
<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>Điều này sẽ tạo ra kết quả sau:
Áp dụng nhiều thuộc tính CSS
Bạn có thể áp dụng nhiều thuộc tính CSS bằng một phương thức JQuery CSS( {key1:val1, key2:val2....). Bạn có thể áp dụng bao nhiêu thuộc tính tùy thích trong một cuộc gọi.
Đây là cú pháp của phương thức -
selector.css( {key1:val1, key2:val2....keyN:valN})Ở đây, bạn có thể chuyển khóa làm thuộc tính và val là giá trị của nó như mô tả ở trên.
Thí dụ
Sau đây là một ví dụ thêm màu phông chữ cũng như màu nền vào mục danh sách thứ hai.
<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>Điều này sẽ tạo ra kết quả sau:
Đặt chiều rộng & chiều cao phần tử
Các width( val ) và height( val ) có thể được sử dụng để thiết lập chiều rộng và chiều cao tương ứng của bất kỳ phần tử nào.
Thí dụ
Sau đây là một ví dụ đơn giản đặt chiều rộng của phần tử phân chia đầu tiên trong đó các phần tử còn lại có chiều rộng được đặt theo 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>Điều này sẽ tạo ra kết quả sau:
Phương thức CSS JQuery
Bảng sau liệt kê tất cả các phương pháp mà bạn có thể sử dụng để chơi với các thuộc tính CSS:
| Sr.No. | Phương pháp & Mô tả |
|---|---|
| 1 | css (tên) Trả về thuộc tính kiểu trên phần tử được so khớp đầu tiên. |
| 2 | css (tên, giá trị) Đặt một thuộc tính kiểu duy nhất thành một giá trị trên tất cả các phần tử phù hợp. |
| 3 | css (thuộc tính) Đặt đối tượng khóa / giá trị làm thuộc tính kiểu cho tất cả các phần tử phù hợp. |
| 4 | chiều cao (val) Đặt chiều cao CSS của mọi phần tử phù hợp. |
| 5 | Chiều cao( ) Lấy pixel, chiều cao được tính toán hiện tại của phần tử phù hợp đầu tiên. |
| 6 | innerHeight () Nhận chiều cao bên trong (không bao gồm đường viền và bao gồm phần đệm) cho phần tử được so khớp đầu tiên. |
| 7 | innerWidth () Lấy chiều rộng bên trong (không bao gồm đường viền và bao gồm phần đệm) cho phần tử được so khớp đầu tiên. |
| số 8 | bù lại( ) Nhận độ lệch hiện tại của phần tử phù hợp đầu tiên, tính bằng pixel, liên quan đến tài liệu. |
| 9 | offsetParent () Trả về tập hợp jQuery với phần tử gốc được định vị của phần tử được so khớp đầu tiên. |
| 10 | ngoàiHeight ([lề]) Nhận chiều cao bên ngoài (bao gồm đường viền và phần đệm theo mặc định) cho phần tử phù hợp đầu tiên. |
| 11 | externalWidth ([lề]) Lấy chiều rộng bên ngoài (bao gồm đường viền và phần đệm theo mặc định) cho phần tử phù hợp đầu tiên. |
| 12 | Chức vụ( ) Lấy vị trí trên cùng và bên trái của một phần tử so với phần tử gốc bù đắp của nó. |
| 13 | scrollLeft (val) Khi một giá trị được chuyển vào, phần bù cuộn bên trái được đặt thành giá trị đó trên tất cả các phần tử phù hợp. |
| 14 | scrollLeft () Nhận được độ lệch bên trái cuộn của phần tử phù hợp đầu tiên. |
| 15 | scrollTop (val) Khi một giá trị được chuyển vào, độ lệch đầu cuộn được đặt thành giá trị đó trên tất cả các phần tử phù hợp. |
| 16 | scrollTop () Nhận độ lệch đầu cuộn của phần tử phù hợp đầu tiên. |
| 17 | chiều rộng (val) Đặt chiều rộng CSS của mọi phần tử phù hợp. |
| 18 | chiều rộng( ) Lấy pixel, chiều rộng được tính toán hiện tại của phần tử phù hợp đầu tiên. |