Hướng dẫn về màu nền jQuery. Ở đây chúng ta cũng thảo luận về phần giới thiệu và Cách đặt màu nền trong jQuery? cùng với các ví dụ

Bạn đang xem: màu nền kiểu jquery

 jQuery background color

Giới thiệu về màu nền jQuery

Trong jquery, việc đặt màu nền hoặc thay đổi màu nền được thực hiện bằng cách sử dụng thuộc tính của phương thức CSS () do jquery cung cấp và do đó chúng ta có thể xác định thuộc tính màu nền này trong phương thức CSS (). Nó được sử dụng để thiết lập màu nền hoặc thêm màu vào nền được chỉ định trong phương thức CSS (). Nói chung, màu nền được xác định là thuộc tính kiểu cho bất kỳ trang nào thiết kế quảng cáo trong jQuery. Nó được thực hiện bằng cách sử dụng phương thức CSS () trong đó thuộc tính background-color được xác định cùng với giá trị được chỉ định và phương thức này cũng có nhiều thuộc tính kiểu khác.

Làm việc về cách đặt màu nền trong jquery với các ví dụ

Trong bài viết này, chúng ta sẽ thảo luận về cách đặt màu nền của bất kỳ trang web nào bằng jquery. Trong Jquery, để đặt màu nền được coi là thuộc tính kiểu của phương thức CSS (). Nói chung, chúng ta có thể nói khi xử lý CSS, chúng ta dễ dàng thiết lập màu nền, đây là thuộc tính kiểu để thiết lập màu nền của trang web. Do đó, trong jquery, chúng tôi cũng coi nó như một thuộc tính CSS nhưng thuộc tính này có thể được sử dụng trong phương thức CSS (), nơi chúng tôi có thể xác định nhiều thuộc tính CSS để tạo kiểu cho các trang web bằng jquery. Thuộc tính CSS này có thể được sử dụng để thiết lập màu nền cho bất kỳ phần tử nào trong trang web như đoạn văn, văn bản, vùng văn bản, v.v. Phương thức CSS () này lấy thuộc tính tạo kiểu CSS làm đối số để thay đổi hoặc đặt bất kỳ thuộc tính tạo kiểu cho trang web hiện tại.

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Bây giờ, chúng ta hãy xem cú pháp và ví dụ để đặt màu nền bằng jquery trong phần bên dưới.

Cú pháp:

css (“styles_property_name”, “value”);

Thông số:

  • Styling_property_name: CSS là một phương thức trong jquery có thể đặt thuộc tính nền bằng cách sử dụng thông số ở trên được gọi là styles_property_name làm “background-color”.
  • Giá trị: thông số này được sử dụng để đặt giá trị cho màu nền của thuộc tính tạo kiểu, chẳng hạn như các giá trị cho thuộc tính này có thể là màu RGB chẳng hạn như giá trị thập lục phân của màu hoặc màu theo tên của nó.

Chức năng này của jquery được sử dụng để thiết lập màu nền của trang web hiện tại hoặc bất kỳ phần tử nào trên trang web. Do đó, phương thức này sẽ trả về thuộc tính tạo kiểu cho phần tử đã chọn.

Xem Thêm  SQL là gì và nó hoạt động như thế nào? Hướng dẫn về ngôn ngữ truy vấn có cấu trúc - truy vấn sql là gì

Bây giờ chúng ta sẽ xem một ví dụ về cách đặt màu nền bằng phương thức CSS () trong jquery trong phần bên dưới.

Ví dụ

Hãy để chúng tôi thảo luận về các ví dụ về màu nền jQuery.

Ví dụ # 1

Chúng tôi sẽ đặt màu nền là màu xanh lam trong ví dụ dưới đây.

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; script src = "// code.jquery.com/jquery-1.11.1.min.js"></script>
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; Trình diễn cách đặt màu nền trong jquery & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; p & gt; Đặt màu nền bằng cách sử dụng phương thức css () với thuộc tính màu nền tạo kiểu. & lt; / p & gt;
& lt; script & gt;
$ (document.body) .css ("background", "blue");
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

jQuery background color 1

Trong chương trình trên, chúng ta có thể thấy chúng ta đang viết mã jquery trong cấu trúc HTML và đoạn mã jquery có thể được nhìn thấy trong & lt; script & gt; thẻ & lt; body & gt; nhãn. Sau đó, chúng tôi chỉ khai báo một thẻ đoạn văn bằng cách sử dụng & lt; p & gt; bên trong cơ thể để hiển thị nó trên màn hình đầu ra. Vì vậy, mã jquery luôn bắt đầu bằng ký hiệu “$” nơi chúng tôi đang tạo tài liệu dưới dạng nội dung trong & lt; body & gt; trong đó chúng tôi đang sử dụng phương thức CSS () để đặt màu nền cho nội dung của phần tử body và giá trị được đặt là “blue” cho nền này. Nơi chúng ta có thể thấy chúng ta đang chuyển thuộc tính tạo kiểu này, chẳng hạn như “background” cho biết thuộc tính background-color và giá trị được viết bằng cách phân tách bằng dấu phẩy và ở đây chúng ta đang đề cập trực tiếp đến tên màu nơi chúng ta có thể sử dụng mã RGB hoặc hệ thập lục phân giá trị cho các màu sắc khác nhau. Đầu ra có thể được nhìn thấy trong ảnh chụp màn hình ở trên.

Bây giờ chúng ta sẽ xem một ví dụ khác về cách đặt màu nền cho các chức năng của chuột bằng cách sử dụng thuộc tính tạo kiểu này theo một cách khác.

Ví dụ # 2

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Thể hiện màu nền trong jquery cho các phần tử web & lt; / title & gt;
& lt; script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" & gt; & lt; / script & gt;
& lt; phong cách & gt;
div {
chiều rộng: 100px;
chiều cao: 100px;
lề: 5px;
}
& lt; / style & gt;
& lt; script & gt;
$ (tài liệu) .ready (function () {
$ ("p"). trên ({
mouseleave: function () {
$ (this) .css ("background-color", "cyan");
},
nhấp vào: function () {
$ (this) .css ("background-color", "orange");
}
});
$ ("div") .dblclick (function () {
var color = $ (this) .css ("background-color", "blue");
});
});
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; p & gt; Bấm vào đây để xem sự thay đổi của màu nền bằng cách di chuyển chuột và bấm vào đoạn này. & lt; / p & gt;
& lt; h4 & gt; Nhấp đúp vào hộp màu đỏ bên dưới để xem sự thay đổi của màu nền & lt; / h4 & gt;
& lt; div style = "background-color: red;" & gt; & lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Xem Thêm  Danh Sách Việt Gian Hải Ngoại - phân quyền wordpress

jQuery background color 2

jQuery background color 3

Ví dụ 2

Trong chương trình trên, chúng ta có thể thấy chúng ta đã sử dụng màu nền làm thuộc tính tạo kiểu trên một số chức năng của chuột vì chúng ta có thể thấy trong đoạn mã trên, chúng ta đang thay đổi màu nền của đoạn khi chúng ta di chuột qua nó và rời khỏi sau đó màu nền của đoạn văn sẽ chuyển thành màu “lục lam” và khi chúng ta chỉ nhấp một lần vào đoạn văn đó thì màu nền của đoạn văn sẽ chuyển thành màu “cam”. Những thay đổi này chúng ta có thể thấy bằng cách đặt thuộc tính “background-color” trong phương thức CSS () và mỗi chức năng này của chuột đều được viết trong tài liệu. ready () nơi chúng tôi đang làm cho tài liệu sẵn sàng cho các chức năng như vậy khi các sự kiện chuột xảy ra và màu nền thay đổi. Tương tự, chúng ta cũng đã tạo một hộp với màu đỏ và khi chúng ta nhấp đúp vào hộp thì màu nền của hộp cũng chuyển thành màu xanh lam. Trong ảnh chụp màn hình ở trên, chúng ta có thể thấy đoạn đầu tiên chuyển sang màu lục lam và trong ảnh chụp màn hình thứ hai, chúng ta có thể thấy sau một cú nhấp chuột vào đoạn đó sẽ chuyển sang màu cam và trong ảnh chụp màn hình thứ ba, hộp được nhấp đúp và màu nền của hộp chuyển thành màu xanh lam.

Kết luận

Trong bài viết này, chúng tôi kết luận rằng trong jquery, việc đặt màu nền của bất kỳ phần tử hoặc trang web nào cũng rất đơn giản như chúng tôi làm trong CSS. Màu nền này là một thuộc tính tạo kiểu được xác định và khai báo trong phương thức CSS () do jquery cung cấp. Trong bài viết này, chúng ta đã xem một ví dụ đơn giản về cách đặt màu nền và sau đó trong một ví dụ khác, chúng ta đã xem cách đặt màu nền hoặc thay đổi màu nền cho các sự kiện nhấp chuột bằng ảnh chụp màn hình thích hợp.

Các bài báo được đề xuất

Đây là hướng dẫn về màu nền jQuery. Ở đây chúng ta cũng thảo luận về phần giới thiệu và Cách đặt màu nền trong jQuery? cùng với các ví dụ khác nhau và triển khai mã của nó. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

Xem Thêm  Mã nhãn hiệu HTML - thực thể html đã đăng ký nhãn hiệu

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề màu nền phong cách jquery

jQuery selectable widget

alt

  • Tác giả: kudvenkat
  • Ngày đăng: 2015-07-21
  • Đánh giá: 4 ⭐ ( 8313 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Link for all dot net and sql server video tutorial playlists
    https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

    Link for slides, code samples and text version of the video
    http://csharp-video-tutorials.blogspot.com/2015/07/jquery-selectable-widget.html

    Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
    https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

    In this video we will discuss jQuery selectable widget

    jQuery selectable widget allows us to select elements, individually or in a group using the mouse. Let us understand this with an example.

    Here is the example code used in the demo

    HTML
    <ul id=”selectable”>
    <li>Mon</li>
    <li>Tue</li>
    <li>Wed</li>
    <li>Thu</li>
    <li>Fri</li>
    <li>Sat</li>
    <li>Sun</li>
    </ul>
    You selected : <div id=”result”></div>

    CSS
    li{
    display:inline-block;
    padding:20px;
    border:1px solid black;
    cursor:pointer
    }
    .ui-selected{
    background-color:green;
    color:white
    }
    .ui-selecting{
    background-color:grey;
    color:white
    }

    jQuery
    $(document).ready(function () {
    $(‘selectable’).selectable({
    stop: function () {
    var result = ”;
    $(‘.ui-selected’).each(function () {
    result += $(this).text() + ‘<br/>’;
    });

    $(‘result’).html(result);
    }
    });
    });

Bài tập Tạo trang tùy chỉnh Nội dung và Giao diện bằng JQUERY

  • Tác giả: nentang.vn
  • Đánh giá: 5 ⭐ ( 1944 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài tập Tạo trang tùy chỉnh Nội dung và Giao diện bằng JQUERY.Cung cấp các kiến thức Nền tảng, cơ bản về Lập trình, Lập trình web, Lập trình di động, Cơ sở dữ liệu, Học web, học web cần thơ, đồ án mẫu, bài tập thực hành web…

Màu sắc trong HTML

  • Tác giả: tedu.com.vn
  • Đánh giá: 5 ⭐ ( 4441 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về màu, và các giá trị màu trong HTML

Tạo bảng chọn màu (Color Picker ) đơn giản với jQuery

  • Tác giả: www.thuthuatweb.net
  • Đánh giá: 5 ⭐ ( 9174 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế web,Hướng dẫn làm Blog, Web

50 mẫu jQuery menu hiện đại dành cho web designer (P.1)

  • Tác giả: www.ngoisaoso.vn
  • Đánh giá: 4 ⭐ ( 1185 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một thiết kế website chuyên nghiệp chắc chắn không thể thiếu thành phần là một navigation menu. Chủ đề lần này sẽ mang bạn tới với bộ sưu tập những jQuery menu…

Jquery thay đổi màu nền

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 9946 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Các .css()chức năng không xếp hàng đằng sau hình ảnh động chạy, nó ngay lập tức.…

Công cụ tạo bảng chọn màu jQuery

  • Tác giả: download.com.vn
  • Đánh giá: 3 ⭐ ( 3239 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Pick-a-Color, Pick-a-Color là công cụ tạo bảng chọn màu jQuery dễ sử dụng. Phần mềm này được thiết kế chi tiết để mọi người dễ dàng sử dụng, có thể lưu trữ tới 16

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php