Trang chủ » Kho tài liệu » Hướng dẫn sử dụng JQuery


Cập nhật ngày: 4/23/2015 2:28:59 PM

Bài 5 – jQuery CSS



Thư viện jQuery hỗ trợ hầu như gần hết các bộ lựa(selector) thuộc css.


Thư viện jQuery hỗ trợ hầu như gần hết các bộ lựa(selector) thuộc css.

 

Áp dụng một dòng lệnh CSS trong jQuery

Cú pháp

1
$("tên tag/id/class").css( thuộc tính css, giá trị cần gán);

B1: Tạo file bai5.html trong thư mục jquery đã tạo. Nhập đoạn code sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Viet Object - jQuery</title>
<script type="text/javascript" language="javascript" src="js/jquery-2.1.0.min.js"></script>
</head>
 
<body>
<div id="content">
    <ul>
         <li>list item 1</li>
         <li>list item 2</li>
         <li class="color">list item 3</li>
         <li>list item 4</li>
         <li>list item 5</li>
         <li>list item 6</li>
       </ul>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("li.color").css("color", "#f00");
    });
</script>
 
</body>
</html>

B2: Mở file với trình duyệt

Sử dụng jQuery với CSS

Áp dụng nhiều dòng lệnh CSS trong jQuery

Cú pháp

1
$("tên tag/id/class").css( {key1:val1, key2:val2,....,keyN:valN} );

B3: Nhập đoạn code sau vào file bai5.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Viet Object - jQuery</title>
<script type="text/javascript" language="javascript" src="js/jquery-2.1.0.min.js"></script>
</head>
 
<body>
<div id="content">
    <ul>
         <li>list item 1</li>
         <li>list item 2</li>
         <li class="color">list item 3</li>
         <li>list item 4</li>
         <li>list item 5</li>
         <li>list item 6</li>
       </ul>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("li.color").css({"color":"#f00","background-color":"#CF3"});
    });
</script>
 
</body>
</html>

B4: Mở file với trình duyệt

Sử dụng jQuery với CSS

Tham khảo thêm tại http://api.jquery.com/css/