jQuery có thể nhìn thấy được – jquery find phần tử hiển thị

Hướng dẫn về jQuery là Hiển thị. Ở đây chúng ta cũng thảo luận về việc giới thiệu jquery có thể nhìn thấy cùng với các ví dụ khác nhau và việc triển khai mã của nó.

Bạn đang xem : jquery find phần tử hiển thị

jQuery hiển thị

Giới thiệu về jQuery là hiển thị

jQuery là phương thức hiển thị được sử dụng để phát hiện xem một phần tử cụ thể trong trang có hiển thị hay không. JQuery là một phương thức hiển thị là một phương thức tích hợp sẵn. Đôi khi trong một ứng dụng, chúng ta cần kiểm tra xem một phần tử trong trang có hiển thị hay bị ẩn hay không vì chúng bảo toàn không gian trong trang ngay cả khi chúng không hiển thị với chúng ta trong trang, vì vậy chúng ta có thể sử dụng phương thức jQuery is () với bộ chọn: hiển thị để phát hiện xem một phần tử trong trang có hiển thị hay không.

Phương thức “.is” của jQuery sẽ kiểm tra tập hợp các phần tử cụ thể của bộ chọn so với bộ chọn CSS đã chuyển cho nó. Phương thức “.is” không tạo một đối tượng jQuery mới, hãy kiểm tra trên cùng một đối tượng mà không có bất kỳ sửa đổi nào. “: Display” là một công cụ chọn CSS khớp với các phần tử hiển thị cho người dùng trong trang. Khả năng hiển thị được xác định bằng cách kiểm tra xem một phần tử có chiếm bất kỳ không gian hiển thị nào trên trang hay không (chiều rộng hoặc chiều cao lớn hơn 0). Phương thức “.is” cũng có thể sử dụng các bộ chọn CSS khác nhau để chọn các phần tử có độ mờ: 0; hoặc khả năng hiển thị: hidden ;.

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

Cú pháp:

$ (phần tử) .is (": hiển thị");

Thông số:

  • : hiển thị: Đây là công cụ chọn CSS, chỉ định để chọn các phần tử hiển thị cho người dùng trên trang.
  • Giá trị trả về: Giá trị trả về của phương thức này là liệu một phần tử có hiển thị hay không.

Ví dụ về jQuery là phương thức hiển thị

Tiếp theo, chúng ta viết mã html để hiểu rõ hơn về phương thức jQuery .is (“: display”) với ví dụ sau, trong đó phương thức hiển thị được sử dụng để kiểm tra phần tử h1 có hiển thị hay không trong trang.

Xem Thêm  Thuộc tính HTML - danh sách các thuộc tính trong html

Ví dụ # 1

Mã:

& lt;! doctype html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; Đây là một ví dụ cho phương thức jQuery là hiển thị & lt; / title & gt;
& lt; script
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" & gt;
& lt; / script & gt;
& lt; phong cách & gt;
# s1 {
display: block;
}
& lt; / style & gt;
& lt; script & gt;
$ (tài liệu) .ready (function () {
// Kiểm tra xem h1 có hiển thị hay không
if ($ ("h1"). is (": display")) {
alert ("h1 hiển thị.");
} khác {
alert ("h1 bị ẩn.");
}
});
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 id = "s1" & gt; Đây là phần tử h1. & lt; / h1 & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Như trong chương trình trên, mã $ (“h1”). is (“: display”)) để kiểm tra xem phần tử h1 có hiển thị hay không. Xa hơn trong mã nếu h1 hiển thị thì hiển thị một số thông báo cảnh báo “h1 hiển thị”. Khác hiển thị thông báo “h1 bị ẩn”. Vì kiểu thẻ h1 là s1 là “display: block;”, nên thông báo cảnh báo đang hiển thị “h1 hiển thị”.

Ví dụ tiếp theo, chúng tôi viết lại đoạn mã trên trong đó phương thức jQuery .is (“: display”) được sử dụng trên phần tử ẩn và kiểm tra xem phần tử có hiển thị hay không, như trong đoạn mã dưới đây –

Ví dụ # 2

Mã:

& lt;! doctype html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; Đây là một ví dụ cho phương thức jQuery là hiển thị & lt; / title & gt;
& lt; script
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" & gt;
& lt; / script & gt;
& lt; phong cách & gt;
# s1 {
hiển thị: không có;
// hoặc display: hidden;
}
& lt; / style & gt;
& lt; script & gt;
$ (tài liệu) .ready (function () {
// Kiểm tra xem h1 có hiển thị hay không
if ($ ("h1"). is (": display")) {
alert ("h1 hiển thị.");
} khác {
alert ("h1 bị ẩn.");
}
});
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 id = "s1" & gt; Đây là phần tử h1. & lt; / h1 & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Như một lần nữa trong chương trình trên, mã $ (“h1”). is (“: display”)) để kiểm tra xem phần tử h1 có hiển thị hay không và một lần nữa xa hơn trong mã, nếu h1 hiển thị thì hiển thị một số thông báo cảnh báo “h1 đang hiển thị.” khác hiển thị thông báo “h1 bị ẩn”. Vì kiểu thẻ h1 là s1 và bây giờ kiểu s1 là “display: none;”, nên thông báo cảnh báo đang hiển thị “h1 bị ẩn”.

Xem Thêm  Thiết kế blog với html5 - làm thế nào để tạo một blog trong html

Ví dụ tiếp theo, nơi chúng tôi viết lại đoạn mã trên trong đó phương thức jQuery .is (“: display”) áp dụng cho phần tử ẩn sau khi gọi phương thức toggle () trên phần tử đó. Chúng tôi biết rằng phương thức toggle () được sử dụng để chuyển đổi khả năng hiển thị của phần tử, như trong đoạn mã dưới đây –

Ví dụ # 3

Mã:

& lt;! doctype html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; Đây là một ví dụ cho phương thức jQuery là hiển thị & lt; / title & gt;
& lt; script
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" & gt;
& lt; / script & gt;
& lt; phong cách & gt;
# s1 {
hiển thị: không có;
// hoặc display: hidden;
}
& lt; / style & gt;
& lt; script & gt;
$ (tài liệu) .ready (function () {
$ ("h1"). toggle ("chậm", function () {
// Kiểm tra đoạn khi chuyển đổi
// hiệu ứng đã hoàn thành
// Kiểm tra xem h1 có hiển thị hay không
if ($ ("h1"). is (": display")) {
alert ("h1 hiển thị.");
} khác {
alert ("h1 bị ẩn.");
}
});
});
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 id = "s1" & gt; Đây là phần tử h1. & lt; / h1 & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Như trong chương trình trên, phần tử h1 là ẩn hoặc bị ẩn, do đó, một thông báo cảnh báo sẽ được hiển thị rằng “h1 bị ẩn.” (kiểu thẻ h1 là s1 là display: none; ”) nhưng nó đang hiển thị rằng “h1 có thể nhìn thấy được”, bởi vì phương thức toggle () được gọi trên phần tử h1 đang chuyển đổi khả năng hiển thị của phần tử h1 và do đó khi chúng tôi gọi mã $ (h1 ″). là (“: hiển thị”)) thông báo cảnh báo đang hiển thị “h1 có thể nhìn thấy.”.

Kết luận

Phương thức jQuery .is (“: display”) được sử dụng để phát hiện xem một phần tử cụ thể trong trang có hiển thị hay không. Đây là một phương thức được tích hợp sẵn trong jQuery, “: display” là bộ chọn CSS chọn phần tử hiển thị cụ thể. Các bộ chọn CSS khác cũng có thể được chọn bằng phương thức “.is” có thể là opacity: 0; hoặc khả năng hiển thị: ẩn;

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

Đây là hướng dẫn về jQuery là Hiển thị. Ở đây chúng ta cũng thảo luận về việc giới thiệu jquery có thể nhìn thấy cùng với các ví dụ khác nhau và việc 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  Cách tạo các thành phần tùy chỉnh trong React - phản ứng tạo một thành phần

1

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề jquery find phần tử hiển thị

jQuery: Search, Find and Highlight using jQuery

alt

  • Tác giả: Crypters Infotech
  • Ngày đăng: 2016-08-17
  • Đánh giá: 4 ⭐ ( 2976 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: https://www.udemy.com/course/jquery-web-development-made-easy/?referralCode=65882CEEB151DBF75AEE
    jQuery in Action: Build 15 jQuery Projects

    https://www.udemy.com/course/jquery-ui-practical-build-jquery-ui-projects/?referralCode=75D379628D2FB4BF5134
    jQuery UI in Action: Build 9 jQuery UI Projects

    https://www.udemy.com/course/hands-on-jquery-jquery-examples/?referralCode=925EF917F513C5A6B847
    Hands-On jQuery: jQuery Examples

    Find all our Udemy courses here:
    https://www.udemy.com/user/cryptersinfotech/

    jQuery: Search, Find and Highlight using jQuery

    Learn how to search, find and highlight some text using jQuery.

Jquery kiểm tra xem phần tử có hiển thị trong khung nhìn không

  • Tác giả: vie.faithcov.org
  • Đánh giá: 4 ⭐ ( 6789 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chức năng kiểm tra xem lớp div “media” có nằm trong khung nhìn trực quan của trình duyệt hay không bất kể vị trí cuộn cửa sổ. Tài liệu HTML đầu tiên của tôi

Hiệu ứng ẩn hiện phần tử HTML DOM với jQuery

  • Tác giả: xuanthulab.net
  • Đánh giá: 3 ⭐ ( 4396 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng jQuery để ẩn hiện phần tử có kèm hiệu ứng với các phương thức như hide(), show(), toggle(), fadeToggle(), slideToggle()

jQuery ẩn hiện phần tử HTML

  • Tác giả: www.daipho.com
  • Đánh giá: 3 ⭐ ( 8247 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: jQuery Hide/Show gồm các hàm ẩn, hiện, và đảo trạng thái hiển thị của các phần tử được chỉ định. Bao gồm các hàm hide(), show() và toggle(). jQuery hide()

Cách kiểm tra 1 element đang có trên màn hình hiển thị hay không bằng jQuery

  • Tác giả: phongmy.vn
  • Đánh giá: 5 ⭐ ( 2754 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách kiểm tra 1 element đang có trên màn hình hiển thị hay không bằng jQuery dễ dàng, bạn chỉ việc copy và sử dụng, siêu gọn & tiện lợi. Thiết kế web chuẩn SEO

Phương thức find() và closest() trong Jquery

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

JAVASCRIPT: Jquery kiểm tra xem phần tử có hiển thị trong khung nhìn không

  • Tác giả: vi.chathamabc.org
  • Đánh giá: 5 ⭐ ( 7496 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chức năng kiểm tra xem lớp div “media” có nằm trong khung nhìn trực quan của trình duyệt hay không bất kể vị trí cuộn cửa sổ. Tài liệu HTML đầu tiên của tôi

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