关于CSS与Jquery的那些方法
设置网页的顶部、中部、底部为不同的格式，然后隐藏超链接
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 6 <script type="text/javascript"> 7 $(document).ready(function(){ 8 $("a.main").mouseover(function(){ //绑定鼠标移到超级链接事件 9 window.status="http://www.mrbccd.com";return true; //设定状态栏文本 10 }).mouseout(function(){ //绑定鼠标移出超级链接事件 11 window.status="完成";return true; //设定状态栏文本 12 }); 13 }); 14 </script> 15 <title>隐藏超级链接地址</title> 16 <style type="text/css"> 17 body{ 18 margin:0px; /*设置外边距*/ 19 padding:0px; /*设置内边距*/ 20 font-size: 9pt; /*设置字体大小*/ 21 } 22 a:hover { 23 font-size: 9pt; 24 color: #FF4400; 25 } 26 a { 27 font-size: 9pt; 28 text-decoration: none; /*不显示下划线*/ 29 color: #3C404D; 30 } 31 #bottom{ 32 background-image:url(images/bottom.jpg); 33 height:59px; 34 width:800px; 35 clear: both; 36 text-align:center; 37 padding-top:10px; 38 } 39 #top{ /*设置页面头部的DIV样式*/ 40 background-image:url(images/bg_top.jpg); 41 width:800px; 42 height:176px; 43 } 44 #navigation{ /*设置导航条的样式*/ 45 background-image:url(images/navigation_bg.jpg); 46 width:790px; 47 height:26px; 48 padding:5px 5px 0px 5px; 49 margin: 0px; 50 } 51 </style> 52 </head> 53 <body bgcolor="#F0F0F0"> 54 <div id="top"></div> 55 <div id="navigation"> 56 <div style="float:left;color:#006700;"> 57 <b> 》 欢迎光临九宫格日记网！</b> 58 </div> 59 <div style="float:right;text-align: right;"> 60 <a href="23.05.html">首页</a> 61 | <a href="23.05.html" class="main">登录</a> 62 | <a href="23.05.html" class="main">注册</a> 63 | <a href="23.05.html" class="main">找回密码</a> 64 </div> 65 </div> 66 <div style="padding:20px;width:760px;background-color: #FFF;"> 67 暂无内容 68 </div> 69 <div id="bottom"></div> 70 </body> 71 </html>
2.通过button单击事件，调用函数来调整文字的字体与颜色
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>复合选择器</title> 6 <style type="text/css"> 7 .default { 8 border: 1px solid #003a75; 9 background-color: yellow; 10 margin: 5px; 11 width: 90px; 12 float: left; 13 font-size: 12px; 14 padding: 5px; 15 } 16 17 .change { 18 background-color: #C50210; 19 color: #FFF; 20 } 21 </style> 22 23 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 24 <script type="text/javascript"> 25 $(document).ready(function() { 26 $("input[type=button]").click(function() { //绑定按钮的单击事件 27 $("div,#span").addClass("change"); //添加所使用的CSS类 28 }); 29 }); 30 </script> 31 32 </head> 33 34 <body> 35 <p class="default">p元素</p> 36 <div class="default">div元素</div> 37 <span class="default" id="span">ID为span的元素</span> 38 <input type="button" value="为div元素和ID为span的元素换肤" /> 39 </body> 40 </html>
3.按钮事件实现换肤。。。parent>child选择器
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>parent > child选择器的示例</title> 6 <style type="text/css"> 7 input { 8 margin: 5px; /*设置input元素的外边距为5像素*/ 9 } 10 11 //设置所有的input对象的统一格式 12 13 .input { 14 font-size: 12pt; /*设置文字大小*/ 15 color: #333333; /*设置文字颜色*/ 16 background-color: #cef; /*设置背景颜色*/ 17 border: 1px solid #000000; /*设置边框*/ 18 } 19 //设置单独的作用域包，即针对某一个事件，可以调用该包 20 </style> 21 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 22 <script type="text/javascript"> 23 $(document).ready(function() { 24 $("#change").click(function() { //绑定"换肤"按钮的单击事件 25 $("form>input").addClass("input"); //为表单元素的直接子元素input添加样式 26 }); 27 $("#default").click(function() { //绑定“恢复默认”按钮的单击事件 28 $("form>input").removeClass("input"); //移除为表单元素的直接子元素input添加的样式 29 }); 30 }); 31 </script> 32 </head> 33 34 <body> 35 <form id="form1" name="form1" method="post" action=""> 36 姓 名：<input type="text" name="name" id="name" /> <br /> 37 籍 贯：<input name="native" type="text" id="native" /> <br /> 38 生 日：<input type="text" name="birthday" id="birthday" /> <br /> 39 E-mail：<input type="text" name="email" id="email" /> <br /> <span> 40 <input type="button" name="change" id="change" value="换肤" /> </span> <input 41 type="button" name="default" id="default" value="恢复默认" /> <br /> 42 </form> 43 </body> 44 </html>
4.prev+next选择器
$("prev+next");
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>prev + next选择器</title> 6 <style type="text/css"> 7 .background { 8 background: #cef 9 } 10 11 body { 12 font-size: 12px; 13 } 14 </style> 15 16 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 17 <script type="text/javascript" charset="GBK"> 18 $(document).ready(function() { 19 $("label+p").addClass("background"); 20 }); 21 </script> 22 </head> 23 <body> 24 <div> 25 <label>第一个label</label> 26 <p>第一个p</p> 27 <p>第一个p</p> 28 <fieldset> 29 <label>第二个label</label> 30 <p>第二个p</p> 31 </fieldset> 32 </div> 33 <p>div外面的p</p> 34 </body> 35 </html>
