1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>第2章示例5</title>
6 <style type="text/css">
7 body { width:760px; }
8 div,p,h3,h1 { border:4px solid black; background-color:green; color:white; margin:6px; padding:5px; font:bold 14px/1 Arial,Helvetica,sans-serif; width:220px; float:left; }
9 div p { width:205px; border-width:2px; margin:5px 0; float:none; }
10 h1 { margin:6px 256px; } h3 { position:relative; margin-right:500px; }
11 div.top { height:65px; }
12 .clear { clear:both; }
13 div.hide { display:none; } p.hide { visibility:hidden; }
14 .highlight { background-color:gold; color:black; }
15 form { clear:both; }
16 button { font:bold 16px/1 Arial,Helvetica,sans-serif; margin:1px 3px; padding:2px; cursor:pointer; width:240px; }
17 </style>
18 <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
19 <script type="text/javascript">
20 $(document).ready(function(){
21 $("#btn1").click(function(){alert("不可见的p元素有:"+$("p:hidden").length+"个");});
22 $("#btn2").click(function(){alert("可见的div元素有:"+$("div:visible").length+"个");});
23 function swing() {
24 $("h3").animate({left:"500"},7000)
25 .animate({left:"0"},7000, swing);
26 }
27 swing();
28 });
29 </script>
30 </head>
31 <body>
32 <h1><h1> </h1></h1>
33 <div class="clear top">
34 <div class="clear top">
35 <p><p>hello</p></p>
36 </div>
37 </div>
38 <div class="top" id="core">
39 <div class="top" id="core">
40 <p><p> </p></p>
41 </div>
42 </div>
43 <div class="top">
44 <div class="top"><br/>
45 hello, John<br/>
46 </div>
47 </div>
48 <p class="clear"><p class="clear"> </p></p>
49 <p><p > </p></p>
50 <p><p > </p></p>
51 <h3 class="clear"><h3 class="clear"> </h3></h3>
52 <p class="clear"><p class="clear"> </p></p>
53 <p><p > </p></p>
54 <p class="hide"><p class="hide"> </p></p>
55 <div class="clear bottom">
56 <div class="clear bottom">
57 <p><p> </p></p>
58 <p><p> </p></p>
59 <p><p> </p></p>
60 </div>
61 </div>
62 <div class="bottom">
63 <div class="bottom">
64 <p><p> </p></p>
65 <p><p> </p></p>
66 <p><p> </p></p>
67 </div>
68 </div>
69 <div class="hide bottom">
70 <div class="hide bottom">
71 <p><p> </p></p>
72 <p><p> </p></p>
73 <p><p> </p></p>
74 </div>
75 </div>
76 <form>
77 <button type="button" id="btn1">$("p:hidden")</button>
78 <button type="button" id="btn2">$("div:visible")</button>
79 </form>
80 </body>
81 </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 上周热点回顾(1.20-1.26)
· 【译】.NET 升级助手现在支持升级到集中式包管理