作家
登录

疯狂Jquery第一天(Jquery学习笔记)

作者: 来源:www.28hudong.com 2013-03-30 00:29:46 阅读 我要评论

好了开始我的Jquery第一天。 我也是从Hello wrod!开始的。关于jquery 的引用我直接一笔带过。如下: 复制代码 代码如下: <html> <head> <title>jquery 链式操作</title> <script type="text/javascript" src="jquery-1.3.1.js"></script> <script type='text/javascript'> $(document).ready(function(){ alert("hello word!"); //静止右键点击 // $(document).bind("contextmenu",function(e){ // return false; // }); }); </script> </head> <body> </body> </html> 接下来让我们来看看一个复杂的实例,这个实例让我们知道什么是:jquery的链式操作, 我用 . 来连接jquery 的链式操作。 可能有的人刚开始学query ,看起来比较陌生,在后面的疯狂Jquery 中我会一一解释。慢慢的你就会明白。 复制代码 代码如下: <html> <head> <title>Jquery 链式操作</title> <script type="text/javascript" src="jquery-1.3.1.js"></script> <style type="text/css"> #menu {width:300px} .has_children { background:#555;color:#fff;cursor:pointer; } .highligt{color:#fff;background:green;} div{padding:0;margin:0px;} div a { background:#888;display:none;float:left;width:300px; } </style> <script type='text/javascript'> $(document).ready(function(){ // alert("给所有目录添加click 事件"); $(".has_children").click(function(){ $(this).addClass('highligt') //为当前元素添加highligt类。 .children("a").show().end() //将子节点的<a>元素显示出来。并且重新定位到上次操作的元素 .siblings().removeClass("highligt") //获取同级的元素。(或兄弟元素),并且去掉他们highligt类 .children("a").hide(); //将同级的元素,兄弟元素下的<a> 元素隐藏 }); }); </script> </head> <body> <div id='menu'> <div class='has_children'> <span>第一章 认识Jquery</span> <a>1.1 Javascript 和 Javascript库</a> <a>1.2 加入Jquery</a> <a>1.3 编写简单的Jquery 代码</a> <a>1.4 Jquery对象 和 Dom对象</a> <a>1.5 解决Jquery 和其他库的冲突</a> <a>1.6 Jquery 开发工具和插件</a> <a>1.7 小结</a> </div> <div class='has_children'> <span>第二章 Jquery选择器</span> <a>2.1 Jquery 选择器是什么?</a> <a>2.2 Jquery 选择器的优势?</a> <a>2.3 Jquery 选择器</a> <a>2.4 应用Jquery改写实例</a> <a>2.5 选择器中的一些注意事项</a> <a>2.6 案例研究————类似淘宝品牌列表的效果</a> <a>2.7 还有其他选择器吗?</a> <a>2.8 小结</a> </div> <div class='has_children'> <span>第三章 Jquery中的DOM操作</span> <a>3.1 DOM的操作分类</a> <a>3.2 Jquery 中的DOM操作</a> <a>3.3 案例研究————某网站的超链接和图片效果</a> <a>3.4 小结</a> </div> </div> </body> </html>

  推荐阅读

  js查错流程归纳

归纳是为了更好的理解。受jQuery "Discussion"(http://docs.jquery.com/Discussion)页面启发,平时同事有问题找我帮忙解决问题,往往都是很小的问题,这种情况他们并不是缺乏解决问题的知识,而是需要找到问题的办>>>详细阅读


本文标题:疯狂Jquery第一天(Jquery学习笔记)

地址:http://www.17bianji.com/kaifa2/JS/23450.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)