可见性过滤选择器可见性过滤选择器是指根据元素的可见性来筛选元素的选择器。

最新推荐文章于 2024-01-13 22:21:09 发布

Hoshino`

最新推荐文章于 2024-01-13 22:21:09 发布

阅读量347

点赞数 1

文章标签： css html html5 jquery

其中，:hidden选择器用于选取所有不可见元素，包括< input type=“hidden” />、< div style=“display:none”; >等形式的不可见元素。

示例：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
   </head>
   <body>
       <div id="topDiv">页面顶部</div>
       <div id="menuDiv" style="display: none;">菜单栏</div>
       <div id="mainDiv" style="height: 60px;">
           用户ID：<input type="hidden" value="用户ID" /><br />
           用户名：<input type="text" name="userName" value="请输入用户名"/>
       </div>
       <button id="showHidden" οnclick="showHiddenElement()">显示</button>
       <script type="text/javascript">
           $(function(){
               //页面可见div
               $("div:visible").css("background-color","blue");
               //页面可见input
               $("input:visible").css("border","2px solid red");
               //所有可见元素
               $(":visible").css("font-size", "20px");
           });
           function showHiddenElement(){
               //隐藏的div
               $("div:hidden").show(1000);
               //隐藏的input
               $("ipunt:hidden").attr("type","text");
           }
       </script>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>jQuery属性过滤选择器</title>
       <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
   </head>
   <body>
       <div id="topDiv" title="top" desc="页面顶部">页面顶部</div>
       <div id="menuDiv" title="menu">菜单栏</div>
       <div id="mainDiv">主题区</div>
       <div id="leftDiv" title="mainLeft">左侧栏</div>
       <div id="rightDiv" title="mainRight">右侧栏</div>
       <div id="bottomDiv" title="bottom" desc="页面底部">底部栏</div>
       <div id="advDiv" title="advbottom">广告栏</div>

       <script type="text/javascript">
           $(function(){
               //具有titile属性的div
               $("div[title]").css({width:"300px",height:"30px",margin:"3px"});
               //title属性值为menu的div
               $("div[title=menu]").css("border","2px solid red");
               //title属性值不为menu的div
               $("div[title!=menu]").css({backgroundColor:"blue"});
               //title属性值以main开头的div
               $("div[title^=main]").css("margin-left","100px");
               //title属性值以bottom结尾的div
               $("div[title$=bottom]").css("padding-left","50px");
               //title属性值包含o的div
               $("div[title*=o]").css("font-style","initial");
               //title属性值包含o且含有desc属性的div
               $("div[title*=o][desc]").css("font-weight","800");
           });
       </script>
   </body>
</html>

Hoshino`

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可见性过滤选择器可见性过滤选择器是指根据元素的可见性来筛选元素的选择器。

其中，:hidden选择器用于选取所有不可见元素，包括< input type=“hidden” />、< div style=“display:none”; >等形式的不可见元素。示例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script...
复制链接

扫一扫