锋利Jquery 第一天

之前一直学习,现在终于有时间来整理一下文档了。

以下文章都是自己学习Jquery 的笔记,

希望能留下痕迹,也希望能帮助到您。

好了开始我的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 {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;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>

原文地址:https://www.cnblogs.com/htwdz-qhm/p/3719269.html