Top
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/

Liên hệ

Cơ sở 1:

  Tầng 6 - Tòa nhà Viện Công Nghệ (RIMT)
       25 Vũ Ngọc Phan - Láng Hạ - Đống Đa - Hà Nội

  0978.611.889

 devmaster.contact@gmail.com

 hna.tvchung@gmail.com

Cơ sở 2:

  Tầng 6, Số 140 - Đường Cầu Diễn - Nguyên Xá - P. Minh Khai - Q. Bắc Từ Liêm - Tp. Hà Nội

  0978.611.889


  Giờ làm việc:
  • Từ Thứ 2 đến Thứ 6 : 07h30 -> 21h30
  • Thứ 7 - Chủ nhật : 07h30 -> 17h00
Gửi tin nhắn Facebook
Gửi tin nhắn Facebook