Làm thế nào để thêm tên lớp trong jQuery? | Học jQueryLearning jQuery

Bạn đang xem: thêm jquery tên lớp

Để thêm một hoặc nhiều tên lớp vào phần tử đã chọn, phương thức addClass () được sử dụng. Nó chỉ được sử dụng để THÊM một hoặc nhiều tên lớp vào các thuộc tính của lớp và không loại bỏ các thuộc tính lớp hiện có. Nó thêm một lớp cụ thể cho từng phần tử từ các phần tử đã chọn.

jQuery addClass ()

Cú pháp: (Theo trang web chính thức )

  .addClass (className)  

Loại: Chuỗi

Với cú pháp này, bạn có thể thêm nhiều lớp vào thuộc tính của mỗi phần tử đã khớp.

  .addClass (classNames)  

Loại: Mảng

Cú pháp này thêm nhiều lớp vào thuộc tính của mỗi phần tử đã khớp.

  .addClass (function)  

Loại: Hàm (Chỉ mục số nguyên, Tên chuỗi hiện tại)
= & gt; Chuỗi

Bạn có thể thêm một hàm trả về nhiều hơn một lớp hoặc một loạt các lớp vào (các) tên lớp hiện có. Cialis http://valleyofthesunpharmacy.com/cialis/

Bây giờ chúng ta đã thấy một số cú pháp để thêm tên lớp, hãy xem ví dụ để hiểu rõ hơn:

  & lt; html & gt;
  & lt; đầu & gt;
    & lt; script
     src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" & gt;
    & lt; / script & gt;

    & lt; script & gt;
      $ (tài liệu) .ready (function () {
      $ ("nút"). nhấp vào (function () {
      $ ("p: last"). addClass ("phần giới thiệu");
      });
      });
    & lt; / script & gt;

    & lt; phong cách & gt;
    .intro {
    cỡ chữ: 200%;
    màu xanh lá cây;
    }
    & lt; / style & gt;
  & lt; / head & gt;

  & lt; body & gt;
    & lt; h1 & gt; Đây là tiêu đề & lt; / h1 & gt;

    & lt; p & gt; Đây là câu đầu tiên. & lt; / p & gt;
    & lt; p & gt; Đây là câu CUỐI CÙNG & lt; / p & gt;

    & lt; nút & gt; Thêm tên lớp vào phần tử p đầu tiên & lt; / button & gt;

  & lt; / body & gt;
& lt; / html & gt;  

Bây giờ chúng ta hãy xem các cú pháp jQuery hasClass ().

jQuery hasClass ()

Để biết liệu các phần tử có tên lớp được chỉ định có tồn tại hay không, hasClass () được sử dụng. Nó giúp biết liệu có bất kỳ phần tử phù hợp nào được gán cho lớp đã cho hay không. Thuốc cường dương cho nữ http://www.healthfirstpharmacy.net/female-viagra.html

Xem Thêm  System Architect/Engineering - system engineer

Cú pháp (Theo trang web chính thức )

  .hasClass (className)  

Loại: Chuỗi

Tại đây, bạn thêm tên lớp mà bạn đang tìm kiếm.

Hãy để chúng tôi xem một ví dụ:

  & lt; html & gt;
  & lt; đầu & gt;
    & lt; script
    src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" & gt;
    & lt; / script & gt;
    & lt; script & gt;
    $ (tài liệu) .ready (function () {
    $ ("nút"). nhấp vào (function () {
    alert ($ ("p"). hasClass ("intro"));
    });
    });
    & lt; / script & gt;

    & lt; phong cách & gt;
    .intro {
    cỡ chữ: 200%;
    màu xanh lá cây;
    }
    & lt; / style & gt;
  & lt; / head & gt;

  & lt; body & gt;

    & lt; h1 & gt; Header1: Đầu đoạn văn & lt; / h1 & gt;
    & lt; p class = "intro" & gt; Đây là một câu. & lt; / p & gt;
    & lt; p & gt; Đây cũng là một câu. & lt; / p & gt;
    & lt; nút & gt; Có phần tử p nào có lớp "giới thiệu" không? & lt; / button & gt;

  & lt; / body & gt;
& lt; / html & gt;  

jQuery toggleClass ()

Hãy chuyển sang jQuery toggleClass (). Nếu bạn muốn thêm hoặc xóa nhiều hơn một lớp khỏi các phần tử đã chọn, toggleClass () sẽ được sử dụng. Nếu lớp được chỉ định không có mặt, toggleClass () sẽ thêm nó. Nếu lớp được chỉ định đã có mặt, toggleClass () sẽ xóa nó.

Nếu bạn sử dụng tham số switch với toggleClass (), bạn có thể quyết định chỉ thêm lớp đã chỉ định hoặc xóa lớp đã chỉ định.

Cú pháp (Theo trang web chính thức ):

  .toggleClass (className)  

Loại: Chuỗi

Tại đây, hãy thêm một hoặc nhiều lớp (được phân tách bằng dấu cách) sẽ được chuyển đổi cho từng phần tử trong tập hợp đã so khớp.

  .toggleClass (className, state)  

Đối với cú pháp này, kiểu className sẽ là chuỗi và kiểu cho trạng thái sẽ là boolean. Tương tự như cú pháp trên, bạn có thể thêm một hoặc nhiều lớp (phân tách bằng dấu cách) sẽ được chuyển đổi cho từng phần tử trong tập hợp đã so khớp. Đối với trạng thái, hãy thêm giá trị boolean true nếu lớp cần được thêm và false nếu không.

  .toggleClass (classNames)  

Xem Thêm  Cách xây dựng trang web bằng HTML - xây dựng trang html đơn giản

Bạn có thể thêm một mảng các lớp sẽ được chuyển đổi cho từng phần tử trong tập hợp đã so khớp dưới dạng một thuộc tính.

  .toggleClass (classNames, state)  

Điều này tương tự như đoạn mã trên, trong đó các lớp là kiểu chuỗi và trạng thái là giá trị boolean.

  .toggleClass (function [, state])  

Loại: Hàm (Chỉ mục số nguyên, Tên lớp chuỗi, Trạng thái Boolean) = & gt; Chuỗi

Do đó, bạn có thể thêm một hàm trả về một hoặc nhiều lớp được phân tách bằng dấu cách hoặc một mảng các lớp sẽ được chuyển trong thuộc tính lớp của mỗi phần tử trong tập hợp đã so khớp. Một lần nữa, trạng thái sẽ là một giá trị boolean true nếu lớp cần được thêm vào và false nếu không.

Để hiểu rõ hơn những mã này, hãy để chúng tôi lấy một ví dụ:

  & lt; html & gt;
  & lt; đầu & gt;
    & lt; script
    src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" & gt;
    & lt; / script & gt;
    & lt; script & gt;
    $ (tài liệu) .ready (function () {
    $ ("nút"). nhấp vào (function () {
    $ ("p"). toggleClass ("chính");
    });
    });
    & lt; / script & gt;
    & lt; phong cách & gt;
    .chính {
    cỡ chữ: 200%;
    màu xanh lá cây;
    }
    & lt; / style & gt;
  & lt; / head & gt;
  & lt; body & gt;

    & lt; nút & gt; Chuyển đổi lớp "chính" cho p phần tử & lt; / button & gt;
    & lt; p & gt; Đây là một câu. & lt; / p & gt;
    & lt; p & gt; Đây cũng là một câu. & lt; / p & gt;
    & lt; p & gt; Nhấp vào nút bên dưới để hiểu hiệu ứng chuyển đổi. & lt; / p & gt;

  & lt; / body & gt;
& lt; / html & gt;  

Kết luận

addClass (), hasClass () và toggleClass () là các phương thức được định nghĩa trước trong jQuery có thể được sử dụng để thao tác với lớp của các phần tử đã chọn. addClass () được sử dụng để thêm một hoặc nhiều tên lớp vào phần tử đã chọn. hasClass () được sử dụng để biết liệu các phần tử có tên lớp được chỉ định có tồn tại hay không. toggleClass được sử dụng để thêm hoặc xóa một hoặc nhiều lớp khỏi các phần tử đã chọn.

Để bắt đầu học jQuery từ đầu, hãy truy cập blog trước của chúng tôi! Để tiếp tục thưởng thức những hướng dẫn như vậy, hãy đăng ký blog của chúng tôi!

Xem Thêm  Tạo bảng trong HTML - html tạo bảng


Xem thêm những thông tin liên quan đến chủ đề thêm tên lớp jquery

5 JQuery Basic Arrays and Loops

alt

  • Tác giả: Mitchell Hudson
  • Ngày đăng: 2015-05-03
  • Đánh giá: 4 ⭐ ( 4623 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript jQuery tutorial. Here you expand adding items to an array from a form, and displaying those items as a list in the page. This uses the javaScript for in loop, and jQuery html() method. These ideas are used in my Parse tutorial.

Tìm hiểu Classess trong jQuery

  • Tác giả: quachquynh.com
  • Đánh giá: 5 ⭐ ( 3905 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách thêm và xóa các lớp CSS bằng jQuery, cú pháp và ví dụ

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 5518 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: cach them va xoa cac lop css bang jquery, Cách thêm và xóa các lớp CSS bằng jQuery, cú pháp và ví dụ

jQuery API Documentation

  • Tác giả: api.jquery.com
  • Đánh giá: 3 ⭐ ( 3493 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

jquery đổi tên lớp

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 9170 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn có thể thiết lập lớp (bất kể đó là gì ) bằng cách sử dụng…

Phương thức addClass() trong jQuery

  • Tác giả: webcoban.vn
  • Đánh giá: 5 ⭐ ( 8744 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử dụng phương thức addClass() trong jQuery để thêm một lớp mới cho phần tử HTML bằng jQuery

toggleClass(class) trong jQuery

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 2674 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: toggleClass(class) trong jQuery – Học jQuery cơ bản và nâng cao theo các bước đơn giản về jQuery Selector, Bộ chọn, thuộc tính, Attribute, CSS, Thao tác DOM, Truy cập DOM, AJAX trong jQuery, hiệu ứng, sự kiện trong jQuery, Drag và Drop, Effect, Event Handler, UI, Plug-ins và các tiện ích khác trong jQuery.

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