jquery实战
jquery判断元素是否是指定的标签类型
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="author" content="http://www.51texiao.cn/" /> 6 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 7 <script language="javascript"> 8 $(document).ready(function(){ 9 $("#bt").click(function(){ 10 $("#thediv").text($("#thediv").is("div")); 11 }) 12 }) 13 </script> 14 </head> 15 <body> 16 <div id="thediv">蚂蚁部落</div> 17 <input type="button" id="bt" value="查看效果"/> 18 </body> 19 </html>
上面的代码实现了判断功能，主要是使用is()函数
使用jquery实现的清空表单元素代码实例:
$(':input','#theform')
.not(':button,:submit,:reset,:hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
jquery实现的点击可以展开折叠的垂直导航菜单:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="author" content="http://www.51texiao.cn/" /> 6 <style type="text/css"> 7 body{ 8 margin:0; 9 padding:0 0 12px 0; 10 font-size:12px; 11 line-height:22px; 12 font-family:"\5b8b\4f53", "Arial Narrow"; 13 background:#fff; 14 } 15 form, ul, li, p, h1, h2, h3, h4, h5, h6{ 16 margin:0; 17 padding:0; 18 } 19 input, select{ 20 font-size:12px; 21 line-height:16px; 22 } 23 img{border:0;} 24 ul, li{list-style-type:none;} 25 a{ 26 color:#00007F; 27 text-decoration:none; 28 } 29 a:hover{ 30 color:#bd0a01; 31 text-decoration:underline; 32 } 33 .box{ 34 width:150px; 35 margin:0 auto; 36 } 37 .menu{ 38 overflow:hidden; 39 border-color:#C4D5DF; 40 border-style:solid; 41 border-width:0 1px 1px; 42 } 43 .menu li.level1 a{ 44 display:block; 45 height:28px; 46 line-height:28px; 47 background:#EBF3F8; 48 font-weight:700; 49 color:#5893B7; 50 text-indent:14px; 51 border-top:1px solid #C4D5DF; 52 } 53 .menu li.level1 a:hover{ 54 text-decoration:none; 55 } 56 .menu li.level1 a.current{ 57 background:#B1D7EF; 58 } 59 60 .menu li ul{ 61 overflow:hidden; 62 } 63 .menu li ul.level2{ 64 display:none; 65 } 66 .menu li ul.level2 li a{ 67 display:block; 68 height:28px; 69 line-height:28px; 70 background:#ffffff; 71 font-weight:400; 72 color:#42556B; 73 text-indent:18px; 74 border-top:0px solid #ffffff; 75 overflow:hidden; 76 } 77 .menu li ul.level2 li a:hover { 78 color:#f60; 79 } 80 </style> 81 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 82 <script type="text/javascript"> 83 $(document).ready(function(){ 84 $(".level1 > a").click(function(){ 85 $(this).addClass("current") 86 .next().show() 87 .parent().siblings().children("a").removeClass("current") 88 .next().hide(); 89 return false; 90 }); 91 }); 92 </script> 93 </head> 94 <body> 95 <div class="box"> 96 <ul class="menu"> 97 <li class="level1"> 98 <a href="#none">前端专区</a> 99 <ul class="level2"> 100 <li><a href="#none">html教程</a></li> 101 <li><a href="#none" >css教程</a></li> 102 <li><a href="#none" >div教程</a></li> 103 <li><a href="#none" >jquery教程</a></li> 104 </ul> 105 </li> 106 <li class="level1"> 107 <a href="#none">资源专区</a> 108 <ul class="level2"> 109 <li><a href="#none">特效下载</a></li> 110 <li><a href="#none">电脑特效</a></li> 111 <li><a href="#none">手机特效</a></li> 112 <li><a href="#none">图片下载</a></li> 113 </ul> 114 </li> 115 <li class="level1"> 116 <a href="#none">蚂蚁部落</a> 117 <ul class="level2"> 118 <li><a href="#none">前端专区</a></li> 119 <li><a href="#none">特效专区</a></li> 120 <li><a href="#none">站长交流</a></li> 121 <li><a href="#none">管理专区</a></li> 122 </ul> 123 </li> 124 </ul> 125 </div> 126 </body> 127 </html>
.jquery代码注释:
1.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
2.$(".level1 > a").click(function(){})，为class属性值为level1元素下的一级a元素注册click事件处理函数，也就是为主导航链接注册事件处理函数。
3.$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide()，这段代码是一个链式调用效果，实现了点击主导航链接实现当前点击主导航后面的二级菜单展开，其他菜单折叠效果。
4.return false，取消主导航链接的跳转效果。
