Home > Web Front-end > Front-end Q&A > jquery a button hide

jquery a button hide

王林
Release: 2023-05-19 12:25:08
Original
827 people have browsed it

jquery is a very popular JavaScript library that provides many convenient operation methods, making regular JavaScript programming faster and simpler. This article will introduce how to hide a button using jquery.

First of all, before using jquery, you need to add a reference to the jquery file in the HTML page. The jquery file can be introduced into the page using the following code:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
Copy after login

Next, we can add a button element in the HTML as shown below:

<button id="btnHide">隐藏按钮</button>
Copy after login

Then, use jquery in JavaScript The selector selects the button element and adds a hidden operation, as shown below:

// 选中id为btnHide的按钮元素
var $btnHide = $("#btnHide");

// 定义隐藏操作
$btnHide.hide();
Copy after login

The above code uses jquery's hidden method hide(), which can make the selected element invisible and removed from the page. Therefore, when we run the above code, the button element will be hidden and disappear from the page.

If we want to display the button element again, we only need to use jquery's display method show(). The code is as follows:

// 选中id为btnHide的按钮元素
var $btnHide = $("#btnHide");

// 定义显示操作
$btnHide.show();
Copy after login

It should be noted that when using jquery to hide or show When elements are loaded, the corresponding code can be placed in the event after the page is loaded to ensure that all elements in the page are loaded correctly and available for operation. The following is the complete sample code:




    使用jquery隐藏一个按钮
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<button id="btnHide">隐藏按钮</button> <script> // 等待页面加载完成后执行 $(function() { // 选中id为btnHide的按钮元素 var $btnHide = $("#btnHide"); // 定义隐藏操作 $btnHide.hide(); // 定义显示操作 // $btnHide.show(); }); </script>
Copy after login

With the above code, we can implement an operation of hiding ourselves by clicking a button on the page. It needs to be emphasized that jquery provides a wealth of operation methods, which we can choose and use according to our needs in actual programming.

The above is the detailed content of jquery a button hide. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template