Hiding elements in jQuery is a very important concept. Before using jQuery to hide elements, you need to first understand the properties of hidden elements in CSS styles, such as display, visibility, opacity and other properties. Among them, display:none completely hides the element and does not occupy the document flow, visibility:hidden hides the element but still occupies the document flow, and opacity changes the transparency of the element without affecting the position of the element occupying the document.
The operating system of this tutorial: Windows 10 system, jQuery 3.6.4 version, Dell G3 computer.
jQuery is a very popular JavaScript library that simplifies HTML document traversal, event handling, animation, and Ajax operations. Hidden elements are a very important concept in jQuery. This article will elaborate on the usage of jQuery hidden elements from multiple aspects such as CSS styles, jQuery functions, methods, acquisition, control, judgment and selection.
1. CSS Style
Before using jQuery to hide elements, you need to first understand the properties of CSS styles about hidden elements, such as display, visibility, opacity and other properties. Among them, display:none means that the element is completely hidden and does not occupy the document flow, and visibility:hidden means that the element is hidden but still occupies the document flow. Opacity changes the transparency of an element and does not affect the position of the element in the document.
2. jQuery functions
jQuery provides some basic functions to hide elements, such as .hide() and .show() functions. The .hide() function is used to hide matching elements, and the .show() function is used to display matching elements.
3. How to hide elements in jQuery
There are many ways to hide elements in jQuery. You can choose different methods according to actual needs, such as using CSS styles and jQuery functions, Class methods.
CSS styles and jQuery functions
/* 使用display属性来隐藏元素 */ $(element).css("display", "none"); /* 使用display属性来显示元素 */ $(element).css("display", "block"); /* 使用visibility属性来隐藏元素 */ $(element).css("visibility", "hidden"); /* 使用visibility属性来显示元素 */ $(element).css("visibility", "visible"); /* 使用opacity属性来改变元素的透明度 */ $(element).css("opacity", "0"); /* 使用opacity属性来恢复元素的透明度 */ $(element).css("opacity", "1"); /* 使用.hide()函数来隐藏元素 */ $(element).hide(); /* 使用.show()函数来显示元素 */ $(element).show();
Classes
Define the class of the hidden element in CSS, and then use jQuery to add or delete the class to hide or show the element.
/* 在CSS中定义隐藏元素的类 */ .hide { display: none; } /* 使用addClass()函数来添加该类 */ $(element).addClass("hide"); /* 使用removeClass()函数来删除该类 */ $(element).removeClass("hide");
4. Acquisition of jQuery hidden elements
In actual development, it is necessary to obtain hidden elements and perform related operations. You can use the following functions provided by jQuery to get hidden elements: .is(":hidden"), .not(":visible"), .filter(":hidden"), etc.
Use the .is() function to determine whether the element is hidden
/* 判断元素是否被隐藏 */ if ($(element).is(":hidden")) { // 隐藏时的操作 } else { // 显示时的操作 }
Use the .not() function to filter out non-hidden elements
/* 获取非隐藏的元素 */ var visibleElements = $("div").not(":hidden");
Use the .filter() function to filter out Hidden elements
/* 获取隐藏的元素 */ var hiddenElements = $("div").filter(":hidden");
5. jQuery controls display and hiding
In actual development, you may need to control events to display and hide elements, which can be provided by jQuery The following functions are implemented: .toggle(), .fadeIn(), .fadeOut(), etc.
Use the .toggle() function to switch the state of the element
/* 在按钮点击时切换元素的显示状态 */ $("#toggleBtn").click(function() { $("div").toggle(); });
Use the .fadeIn() function to fade in the element
/* 在按钮点击时淡入元素 */ $("#fadeInBtn").click(function() { $("div").fadeIn(); });
Use the .fadeOut() function to fade out the element
/* 在按钮点击时淡出元素 */ $("#fadeOutBtn").click(function() { $("div").fadeOut(); });
6. jQuery determines display and hiding
In actual development, you may need to determine whether an element is currently displayed or hidden. You can use the following method to achieve this.
Use the .is() function to determine whether the element is hidden
/* 判断元素是否被隐藏 */ if ($(element).is(":hidden")) { // 元素是隐藏的 } else { // 元素是显示的 }
Use the .css() function to obtain the display attribute of the element
/* 获取元素的display属性 */ var display = $(element).css("display"); if (display == "none") { // 元素是隐藏的 } else { // 元素是显示的 }
7. jQuery hides and displays
In actual development, you may need to hide or show elements under specific conditions. You can use the following methods to achieve this.
Use the .hide() function to hide elements
/* 在条件成立时隐藏元素 */ if (condition) { $(element).hide(); }
Use the .show() function to display elements
/* 在条件成立时显示元素 */ if (condition) { $(element).show(); }
Use the .toggle() function to switch the element state
/* 在按钮点击时切换元素的显示状态 */ $("#toggleBtn").click(function() { $("div").toggle(); });
8. Select elements
In actual development, you need to select specified elements to perform related operations. You can use the following functions provided by jQuery for selection: .eq(), .siblings(), .next(), .prev(), etc.
Use the .eq() function to select the element with the specified subscript
/* 选取第1个div元素 */ var firstDiv = $("div").eq(0);
Use the .siblings() function to select the sibling element
/* 选取div元素的同级元素 */ var siblings = $("div").siblings();
Use the .next() function to select the next one Sibling elements
/* 选取div元素的下一个兄弟元素 */ var nextElement = $("div").next();
Use the .prev() function to select the previous sibling element
/* 选取div元素的上一个兄弟元素 */ var prevElement = $("div").prev();
The above is the detailed content of What is a hidden element in jquery. For more information, please follow other related articles on the PHP Chinese website!