Video: [Học CSS - 17] Thuộc tính position 2025
Thư viện jQuery cho CSS3 chủ yếu được sử dụng để thực hiện các loại công việc cần thiết nhưng cấp thấp này. Tuy nhiên, bạn có thể sử dụng jQuery để thực hiện một số nhiệm vụ thú vị bằng cách kết hợp CSS. Có một thực tế. css () mà bạn có thể sử dụng để truy cập CSS liên kết với một đối tượng hoặc để sửa đổi CSS được sử dụng bởi đối tượng đó.
Bạn luôn thấy sự thay đổi đối với CSS vì những thay đổi jQuery là nội tuyến, chứ không phải CSS nội bộ hoặc bên ngoài.
Hãy tưởng tượng rằng bạn muốn tạo ra một bảng nhân bản được định dạng tự động thay đổi màu sắc của một ô được chọn để làm cho nó dễ dàng hơn để xem. Ví dụ sử dụng JavaScript để tạo ra bảng. Tất nhiên, bạn cũng có thể tự tạo ra bảng sử dụng mã chuẩn, nhưng cách tiếp cận này đơn giản hơn. (Bạn có thể tìm thấy mã hoàn chỉnh cho ví dụ này trong thư mục Chương 06jQuery của mã có thể tải là NestedLoop. Html.)
// Bắt đầu bảng. tài liệu. viết ("
");} else {document. viết (" | " + i + " | ");}} / / Cuối dòng tiêu đề. tài liệu. viết ("
---|---|
" + i + " | "); cho (var j = 1; j <= 10; j ++) {// Thêm mỗi phần tử dữ liệu. tài liệu. write ("" + i * j + " | ");} // Hết hàng dữ liệu. tài liệu. write ("
Mã này bắt đầu bằng cách tạo một
, các thẻ. Sau khi dòng tiêu đề hoàn tất, mã sẽ bắt đầu tạo các hàng dữ liệu.
Mỗi dòng dữ liệu bắt đầu với một tiêu đề, tiếp theo là các giá trị nhân. Vòng lặp kép tạo ra một bảng vuông cho thấy các giá trị nhân lên đến 10 * 10. Để làm cho ví dụ này dễ chịu khi nhìn, bạn nên sử dụng CSS để phân biệt các hàng và cột. Các tế bào được đánh dấu sẽ sử dụng một cỡ chữ lớn hơn và một màu chữ khác nhau. Để thực hiện thay đổi này, ví dụ sử dụng. Đã chọn kiểu CSS nội bộ được hiển thị ở đây. . Đã chọn {color: blue; kích cỡ phông chữ: 30px; font-weight: bold;} Ví dụ bây giờ chứa một bảng với giá trị nhân và một kiểu đặc biệt cho ô đã chọn. Tuy nhiên, nó vẫn thiếu bất kỳ định dạng cho các hàng và không có cách nào để chọn một tế bào cụ thể để nó sẽ có các định dạng đặc biệt yêu cầu.Đoạn mã sau đây trình bày một cách để hoàn thành các mục tiêu này. // Thực hiện một số định dạng cơ bản. $ ("th: even"). css ("background-color", "lightblue"); $ ("th: lẻ"). css ("background-color", "lightgreen"); $ ("td: even"). css ("background-color", "lightgreen"); $ ("td: lẻ"). css ("background-color", "lightblue"); $ ("th, td"). css ("chiều rộng", "50px"); / / Thêm một hiệu ứng đặc biệt. $ ("td"). mouseover (function () {$ (this). toggleClass ("Đã chọn");}); $ ("td"). mouseout (function () {$ (this). toggleClass ("Đã chọn");}); Định dạng bao gồm việc chọn các phần tử | và | và sau đó sử dụng một bộ lọc cơ bản để chọn giữa các phần tử lẻ và các phần tử. Các yếu tố lẻ nhận được một màu nền, và các yếu tố ngay cả nhận được một. Sau đó mã sử dụng bộ chọn nhiều để áp dụng cùng một định dạng chiều rộng cho mỗi ô.
Bằng cách kết hợp bộ chọn và bộ lọc chọn lọc, bạn có thể tạo ra một số hiệu ứng thú vị với lập trình nhỏ. Điều quan trọng cần nhớ rằng bảng này được lập trình tạo ra, do đó việc áp dụng định dạng cho nó có thể là khó khăn. Hiệu ứng đặc biệt bắt đầu với các phần tử | . Khi một người sử dụng trỏ chuột qua một phần tử đặc biệt, mã sẽ áp dụng. Đã chọn định dạng CSS cho nó. Tương tự như vậy, khi người dùng đặt con trỏ chuột ở nơi khác, hiệu ứng sẽ được chuyển về định dạng ban đầu được sử dụng bởi phần tử | . Chuyển đổi định dạng là một cách nhanh chóng để tạo hiệu ứng di chuột qua.
![]() |
---|