CSS Selector trong jQuery

Nhật Vượng

Thư viện jQuery hỗ trợ gần như tất cả các Selector trong Cascading Style Sheet (CSS), khi đã được đề cập trên World Wide Web Consortium.

Sử dụng thư viện jQuery, các nhà lập trình có thể nâng cấp các Website của họ mà không cần lo lắng về các trình duyệt và phiên bản của nó, miễn là các trình duyệt này đã kích hoạt JavaScript.

Hầu hết các phương thức jQuery CSS 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 các thuộc tính CSS trong jQuery

Thực sự đơn giản để áp dụng các thuộc tính CSS bởi sử dụng phương thức css( PropertyName, PropertyValue ) của jQuery.

Dưới đây là cú pháp cho phương thức này:

selector.css( PropertyName, PropertyValue );

Ở đây, bạn có thể truyền PropertyName như là một chuỗi JavaScript và dựa trên giá trị của nó, PropertyValue có thể là một chuỗi hoặc integer.

Ví dụ

Ví dụ sau thêm màu Font tới list item thứ ba:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

Nó sẽ cho ra kết quả sau:

list item 1
list item 2
list item 3
list item 4
list item 5
list item 6

Áp dụng nhiều thuộc tính CSS trong jQuery

Bạn có thể áp dụng nhiều thuộc tính CSS bởi sử dụng phương thức CSS( {key1:val1, key2:val2....) của jQuery. Bạn có thể áp dụng bao nhiêu thuộc tính như bạn muốn chỉ trong một lần gọi phương thức đơn.

Sau đây là cú pháp cho phương thức này:

selector.css( {key1:val1, key2:val2....keyN:valN})

Tại đây bạn có thể truyền key như là thuộc tính và val như là giá trị của nó được miêu tả ở trên.

Ví dụ

Sau đây là ví dụ đơn giản mà thêm màu Font cũng như màu nền tới list item thứ 3:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

Nó sẽ cho kết quả sau:

list item 1
list item 2
list item 3
list item 4
list item 5
list item 6

Thiết lập độ rộng và chiều cao phần tử trong jQuery

Phương thức width( val ) và height( val ) có thể được sử dụng để thiết lập độ rộng và chiều cao tương ứng của bất kỳ phần tử.

Ví dụ

Ví dụ đơn giản sau thiết lập độ rộng của phần tử div đầu tiên, trong khi phần còn lại của các phần tử có độ rộng được thiết lập bởi Style Sheet.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

Nó sẽ cho kết quả sau:

list item 1
list item 2
list item 3
list item 4
list item 5
list item 6

Các phương thức CSS trong jQuery

Bảng dưới liệt kê tất cả phương thức mà bạn có thể sử dụng để xử lý các thuộc tính CSS:

STT	Phương thức & Miêu tả
1	css( name ) Trả về thuộc tính style trên phần tử đã so khớp đầu tiên
2	css( name, value ) Thiết lập thuộc tính style đơn tới một giá trị trên tất cả phần tử đã so khớp
3	css( properties ) Thiết lập một đối tượng key/value như là các thuộc tính style tới tất cả các phần tử đã so khớp
4	height( val ) Thiết lập chiều cao CSS của mỗi phần tử đã so khớp
5	height( ) Nhận chiều cao, giá trị pixel, được tính toán hiện tại của phần tử đã so khớp đầu tiên
6	innerHeight( ) Nhận chiều cao bên trong (trừ Border và bao gồm padding) cho phần tử đã so khớp đầu tiên
7	innerWidth( ) Nhận độ rộng bên trong (trừ Border và bao gồm padding) cho phần tử đã so khớp đầu tiên.
8	offset( ) Nhận offset hiện tại của phần tử so khớp đầu tiên, bằng giá trị pixel, liên quan tới tài liệu
9	offsetParent( ) Trả về một tập hợp jQuery với phần tử cha đã xác định vị trí của phần tử so khớp đầu tiên
10	outerHeight( [margin] ) Nhận chiều cao bên ngoài (bao gồm Border và padding theo mặc định) cho phần tử đã so khớp đầu tiên
11	outerWidth( [margin] ) Nhận độ rộng bên ngoài (bao gồm Border và padding theo mặc định) cho phần tử đã so khớp đầu tiên
12	position( ) Nhận vị trí trên cùng và bên trái của một phần tử liên quan tới phần tử cha ở offset của nó
13	scrollLeft( val ) Khi một giá trị được truyền vào trong, scrollLeft offset được thiết lập tới giá trị đó trên các phần tử đã so khớp.
14	scrollLeft( ) Nhận ScrollLeft offset của phần tử đã so khớp đầu tiên
15	scrollTop( val ) Khi một giá trị được truyền vào, scrollTop offset được thiết lập tới giá trị đó trên tất cả phần tử đã so khớp
16	scrollTop( ) Nhận scrollTop offset của phần tử đã so khớp đầu tiên.
17	width( val ) Thiết lập độ rộng CSS của mỗi phần tử đã so khớp
18	width( ) Nhận độ rộng, giá trị pixel, được tính toán hiện tại của phần tử so khớp đầu tiên