css selector trong jquery

CSS Selector trong jQuery hư 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,

Trang 1

CSS Selector trong jQuery

hư 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"

$ document).ready( function () $( "li" ).eq( ).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 kết quả sau:

Á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

Trang 2

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:

$ document).ready( function () $( "li" ).eq( ).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>

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

$ document).ready( function () $( "div:first" ).width( 100 );

</body> </html>

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:

Trang 3

STT Phương thức & Miêu tả

Trả về thuộc tính style trên phần tử đã so khớp đầu tiên

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

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

Thiết lập chiều cao CSS của mỗi phần tử đã so khớp

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

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

Nhận độ rộng bên trong (trừ Border và bao gồm padding) cho phần tử đã so khớp đầu tiên

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

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

Trang 4

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

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

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

Nhận scrollTop offset của phần tử đã so khớp đầu tiên

Thiết lập độ rộng CSS của mỗi phần tử đã so khớp

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

Định dạng
Số trang	4
Dung lượng	202,34 KB