jquery实战
2015-07-17 16:51
591 查看
jquery判断元素是否是指定的标签类型
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script language="javascript"> $(document).ready(function(){ $("#bt").click(function(){ $("#thediv").text($("#thediv").is("div")); }) }) </script> </head> <body> <div id="thediv">蚂蚁部落</div> <input type="button" id="bt" value="查看效果"/> </body> </html>
上面的代码实现了判断功能,主要是使用is()函数
使用jquery实现的清空表单元素代码实例:
$(':input','#theform') .not(':button,:submit,:reset,:hidden') .val('') .removeAttr('checked') .removeAttr('selected');
jquery实现的点击可以展开折叠的垂直导航菜单:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <style type="text/css"> body{ margin:0; padding:0 0 12px 0; font-size:12px; line-height:22px; font-family:"\5b8b\4f53", "Arial Narrow"; background:#fff; } form, ul, li, p, h1, h2, h3, h4, h5, h6{ margin:0; padding:0; } input, select{ font-size:12px; line-height:16px; } img{border:0;} ul, li{list-style-type:none;} a{ color:#00007F; text-decoration:none; } a:hover{ color:#bd0a01; text-decoration:underline; } .box{ width:150px; margin:0 auto; } .menu{ overflow:hidden; border-color:#C4D5DF; border-style:solid; border-width:0 1px 1px; } .menu li.level1 a{ display:block; height:28px; line-height:28px; background:#EBF3F8; font-weight:700; color:#5893B7; text-indent:14px; border-top:1px solid #C4D5DF; } .menu li.level1 a:hover{ text-decoration:none; } .menu li.level1 a.current{ background:#B1D7EF; } .menu li ul{ overflow:hidden; } .menu li ul.level2{ display:none; } .menu li ul.level2 li a{ display:block; height:28px; line-height:28px; background:#ffffff; font-weight:400; color:#42556B; text-indent:18px; border-top:0px solid #ffffff; overflow:hidden; } .menu li ul.level2 li a:hover { color:#f60; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".level1 > a").click(function(){ $(this).addClass("current") .next().show() .parent().siblings().children("a").removeClass("current") .next().hide(); return false; }); }); </script> </head> <body> <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none">前端专区</a> <ul class="level2"> <li><a href="#none">html教程</a></li> <li><a href="#none" >css教程</a></li> <li><a href="#none" >div教程</a></li> <li><a href="#none" >jquery教程</a></li> </ul> </li> <li class="level1"> <a href="#none">资源专区</a> <ul class="level2"> <li><a href="#none">特效下载</a></li> <li><a href="#none">电脑特效</a></li> <li><a href="#none">手机特效</a></li> <li><a href="#none">图片下载</a></li> </ul> </li> <li class="level1"> <a href="#none">蚂蚁部落</a> <ul class="level2"> <li><a href="#none">前端专区</a></li> <li><a href="#none">特效专区</a></li> <li><a href="#none">站长交流</a></li> <li><a href="#none">管理专区</a></li> </ul> </li> </ul> </div> </body> </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,取消主导航链接的跳转效果。
相关文章推荐
- jQuery实现鼠标滑过延时显示的效果
- jQuery中的.bind()、.live()和.delegate()之间区别分析
- jQuery插件使用1
- jQuery 中 attr() 和 prop() 方法的区别
- 使用 JQueryMobile 点击超链接提示“error loading page” 错误
- Jquery调用iframe页面方法、获取节点操作
- jquery判断元素是否可见隐藏
- 动态加载jQuery的两种方法实例分析
- jquery.validate运用和扩展
- jQuery EasyUI实现全部关闭tabs
- jQuery的replaceWith()函数用法详解
- jQuery 遍历 json 方法大全
- jquery.min.map 404 (Not Found)出错的原因及解决办法
- jQuery操作得到DOM元素
- jquery 操作
- jQuery/Ajax/PHP/Json 的一个综合例子
- jQuery Post
- jquery checkbox trigger click 顺序问题
- 基于JQuery 的消息提示框效果代码
- jquery 获取元素本身Html