Cách ẩn DIV bằng jQuery – cách ẩn lớp div trong jquery

Bạn đang xem : cách ẩn lớp div trong jquery

jqueryhidediv Ở đó rất nhiều lý do tại sao bạn có thể muốn ẩn một phần trang web của mình: ví dụ: có thể có một hình ảnh mà bạn không muốn hiển thị dựa trên loại người dùng hoặc một hành động có thể có sẵn cho phép người dùng ẩn một phần của trang. Ẩn / hiển thị có thể thêm tính năng động cho một trang và jQuery làm cho việc đó trở nên dễ dàng. Nếu bạn xem một số ví dụ JavaScript về ẩn DIV, bạn sẽ nhận thấy rằng cần khá nhiều dòng mã để hoàn thành nhiệm vụ.

Bạn mới sử dụng JavaScript? Tìm hiểu kiến ​​thức cơ bản

Nếu bạn có bất kỳ kinh nghiệm nào với jQuery, bạn sẽ biết rằng nó cung cấp một cách đơn giản hơn nhiều để đạt được cùng một mục tiêu. jQuery là một thư viện JavaScript và vẻ đẹp của sức mạnh của nó là nó ẩn nhiều chi tiết bắt buộc bên dưới bìa và cho phép bạn viết những dòng đơn giản như

 $ (“DIVtarget”). hide (); 

Để hiểu hoàn toàn câu lệnh trên và những gì tiếp theo, bạn cần biết một số jQuery. Hàm jQuery $ () là hàm jQuery chính được gọi cho hầu hết các hoạt động jQuery. Chuỗi được chuyển tới $ (), trong ví dụ này là “DIVtarget”, được gọi là bộ chọn. Nó yêu cầu hàm $ () tìm kiếm trong Mô hình Đối tượng Tài liệu (DOM) cho bất kỳ đối tượng nào phù hợp với bộ chọn được cung cấp – ở đây là DIV với “Mục tiêu DIV” làm ID. Những gì được trả về là một đối tượng jQuery mới có chứa phần tử (hoặc tập hợp các phần tử) thỏa mãn bộ chọn. Phương thức hide () được chuyển cho đối tượng được trả về đó, dẫn đến DIV có tên “DIVtarget” biến mất. Xem đoạn mã trong Hình Một bên dưới để biết ví dụ hoạt động. Bạn có thể lấy ví dụ dưới đây và thả vào một tệp văn bản có phần mở rộng html và chạy nó trong trình duyệt của bạn. Hãy xem qua ví dụ và nói về những gì đang diễn ra.

Bạn mới sử dụng jQuery? Tìm hiểu ngay tại Udemy

hide-div-jquery

Hình Một .

Tập lệnh đầu tiên trong ví dụ trên chỉ đơn giản là trỏ đến thư viện jQuery. Kịch bản thứ hai là nơi hành động. Tập lệnh bắt đầu bằng cách chuyển đối tượng “document” tới $ (). Đối tượng tài liệu là một phần của DOM. Phương thức ready () đảm bảo rằng hàm ẩn danh được chuyển cho nó sẽ không chạy cho đến khi DOM được xây dựng hoàn chỉnh. Bạn thấy hai trình xử lý sự kiện nhấp chuột được xác định trong hàm. Đầu tiên chuyển bộ chọn #hide tới $ () cho jQuery biết rằng chúng tôi quan tâm đến phần tử trong DOM có chứa “hide” làm mã định danh, là nút có nhãn “Gone” như bạn có thể thấy trong ví dụ. Sau đó, chúng tôi đính kèm một hàm khác vào sự kiện nhấp chuột cho nút đó chuyển #DIVtarget làm bộ chọn cho $ () và chạy phương thức hide () trên kết quả. Chơi lô tô! DIV có id mục tiêu #DIV sẽ biến mất. Điều đó dễ dàng làm sao! Câu lệnh sau thực hiện logic tương tự cho nút có id = ”show” và thay vì ẩn DIV, nó sẽ hiển thị lại. Hãy tự trò chuyện qua vấn đề này để chắc chắn rằng bạn hiểu chuyện gì đang xảy ra.

Xem Thêm  Cách triển khai tính năng tự động hoàn thành bằng JavaScript trên trang web của bạn - Algolia Blog - thanh tìm kiếm javascript với các đề xuất

Hide () hỗ trợ rất nhiều chức năng bên cạnh việc sử dụng đơn giản mà chúng tôi đặt nó ở đây. Tài liệu API jQuery hiển thị tất cả các hoán vị có sẵn . Hãy xem xét một số cách sử dụng nâng cao hơn của hide ().

Hide (“swing”) chuyển một hàm được gọi là nới lỏng để ẩn (). Các chức năng làm dịu chỉ định tốc độ xảy ra hoạt ảnh. Native jQuery chỉ cung cấp hai hàm như vậy (“tuyến tính” là hàm còn lại) nhưng nhiều hàm khác có sẵn dưới dạng trình cắm thêm, đặc biệt là trong giao diện người dùng jQuery. Sử dụng ví dụ ở trên và sửa đổi hàm ẩn () bằng “swing” hoặc “linear” để xem các thay đổi cho chính bạn.

Bạn cũng có thể kiểm soát tốc độ ẩn () bố trí phần tử hoặc các phần tử đã chọn. Có hai lựa chọn: ẩn (“chậm”) và ẩn (“nhanh”). Tốc độ được đo bằng mili giây. Chậm tương đương với 600 mili giây và nhanh là 200. Nhân tiện, ẩn () đồng thời thay đổi chiều cao, chiều rộng và độ mờ của phần tử mà nó đang hoạt động.

Tham gia khóa học giao diện người dùng jQuery để thông thạo ngôn ngữ

Hide () cũng hỗ trợ một hàm gọi lại được kích hoạt khi hoạt ảnh kết thúc. Hình 2 cho thấy ẩn () đầu tiên từ Hình 1 với tham số thời lượng (“chậm”) và một hàm gọi lại được thêm vào. Đưa điều này vào ví dụ của bạn và xem điều gì sẽ xảy ra.

Xem Thêm  Phương thức Java indexOf String và lastIndexOf (5 Ví dụ) - indexof và lastindexof trong java

jquery-hide-div2

Hình Hai.

Bây giờ bạn đang trên đường sử dụng jQuery, bạn sẽ không thể chống lại giao diện người dùng jQuery quá lâu. Giao diện người dùng JQuery là một tập hợp các tương tác giao diện người dùng, tiện ích và chủ đề được xây dựng trên đầu thư viện JavaScript jQuery – giống như bản thân jQuery được xây dựng trên JavaScript. Một ví dụ về cách jQuery UI mở rộng phương thức hide () sẽ cho bạn thấy sức mạnh của jQuery UI. Trước hết, hãy xem xét chữ ký mở rộng của hide () trong giao diện người dùng jQuery. Đây rồi:

ẩn (hiệu ứng [, tùy chọn] [, thời lượng] [, hoàn thành])

Vì vậy, hãy thử thay đổi trình xử lý nhấp chuột đầu tiên trong ví dụ của chúng tôi thành:

$ (“# DIVtarget”). hide (“bounce”, {times: 4}, “slow”);

DIV thực hiện một bước nhảy nhỏ trước khi nó biến mất. Lưu ý rằng bạn sẽ cần thêm & lt; script & gt; câu lệnh trỏ đến thư viện giao diện người dùng jQuery để điều này hoạt động. Bạn có thể tìm thấy thư viện giao diện người dùng jQuery để tải xuống tại

http://code.jquery.com/

Vì vậy, đừng dừng lại với ẩn (). Đi sâu vào tài liệu jQuery và jQuery UI API và bắt đầu thử nghiệm. Có một loạt các hiệu ứng thú vị khác mà bạn có thể sử dụng để không chỉ làm sống động các trang web của mình mà còn giúp chúng dễ sử dụng hơn. Bạn có thể tìm hiểu thêm về giao diện người dùng jQuery tại giao diện người dùng jQuery trong Chuyên sâu tại Udemy.

Trang được cập nhật lần cuối:


Xem thêm những thông tin liên quan đến chủ đề cách ẩn lớp div trong jquery

How to show Hide Elements By click on checkbox in JQuery | JQuery Checkbox Show Hide

alt

  • Tác giả: DCODE SHOW
  • Ngày đăng: 2020-06-01
  • Đánh giá: 4 ⭐ ( 9325 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Download the File:
    https://drive.google.com/file/d/1YCEPRH_6dCxsI1B4BVg3o3uG9m0g1VOo/view?usp=sharing

    Other PlayList:

    There is a complete playlist of JavaScript Basic Program –
    Link: https://www.youtube.com/playlist?list=PL-emRyUgj9kVU8_f37XFomc-zJFLU-JGG

    There is a complete playlist of jQuery Basic Example –
    Link: https://www.youtube.com/playlist?list=PL-emRyUgj9kU-mFYbc5hfeqCSkqKGg67_

    There is a complete playlist of C Basic Programme –
    Link: https://www.youtube.com/playlist?list=PL-emRyUgj9kUX1bYfU1ykdbSfnDvOoNiI

    There is a complete playlist of CSS Tips and Tricks –
    Link: https://www.youtube.com/playlist?list=PL-emRyUgj9kVT6Vq0FCEqSvfGji6buTo2

    Follow Us:
    FaceBook: https://www.facebook.com/dcodeshow/
    Telegram: http://t.me/dcodeshow

    Keywords:
    jquery show-hide div based on checkbox value
    show hide div based on checkbox jquery
    jquery checkbox checked
    checked checkbox jquery selector
    jquery checkbox show hide

    Tags:
    Jquery checkbox showhide dcode

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

  • Tác giả: webcoban.vn
  • Đánh giá: 4 ⭐ ( 8145 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 hide() trong jQuery để ẩn một phần tử HTML

Cách ẩn hoặc hiện thẻ div trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 3872 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đôi khi, bạn có thể muốn hiển thị hoặc ẩn một div trong ứng dụng web của mình. Trong bài viết này, mình sẽ chỉ cho bạn cách ẩn hoặc hiện thẻ div

Show() và Hide() trong jQuery – Freetuts

  • Tác giả: hoctapsgk.com
  • Đánh giá: 3 ⭐ ( 7129 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách sử dụng Show() và Hide() trong jQuery, Show() và hide() được dùng khá nhiều khi bạn làm việc với jQuery, nó giúp ẩn hoặc hiện thị một nội dung nào đó

[JQuery] Phần 5: Hiệu ứng ẩn và hiện — hide() và show()

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

Code ẩn và hiện thẻ div bằng Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 8513 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hãy viết ứng dụng ẩn và hiện thẻ div bằng Javascript bằng cách tạo ra 2 button, click vào button1 thì ẩn thẻ div và khi click vào button2 thì hiển thị thẻ.

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

  • Tác giả: www.daipho.com
  • Đánh giá: 5 ⭐ ( 8725 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()

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

Xem Thêm  6 cách chuyển đổi chuỗi thành mảng trong Javascript - stringify thành mảng javascript