The example in this article describes jquery: visible selector usage. Share to everyone for your reference. The specific analysis is as follows:
This selector can match all currently visible elements.
Syntax structure:
Copy Code code as follows:
This selector is typically used in conjunction with other selectors, such as the class selector and the element selector, and so on. For example:
Copy Code code as follows:
$ ("div:visible"). CSS ({color: "Blue"})
The above code can set the font color in the visible div element to blue.
if not used with other selectors, the default state is to use with the * selector, for example $ (": visible") is equivalent to $ ("*:visible").
Instance code:
Example one:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title> Cloud-dwelling community </title>
<style type= "Text/css" >
. Display{display:none;}
</style>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("div:visible"). CSS ({color: "blue"});
})
})
</script>
<body>
<div class= "Display" > I am invisible </div>
<div> I was visible </div>
<ul>
<li> Cloud-dwelling communities welcome you </li>
</ul>
<button> Click to view Effect </button>
</body>
The code above can set the text color in the visible div to blue.
Example two:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title> Cloud-dwelling community </title>
<style type= "Text/css" >
. display {
Display:none;
}
</style>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ (": Visible"). CSS ({color: "blue"});
})
})
</script>
<body>
<div class= "Display" > I am invisible </div>
<div> I was visible </div>
<ul>
<li> Cloud-dwelling communities welcome you </li>
</ul>
<button> Click to view Effect </button>
</body>
Since the above code does not specify a selector to be used in conjunction with the: visible selector, the default and * selector are used, so the code can set the text color in all visible elements to blue.
I hope this article will help you with your jquery programming.
