jQuery 学习笔记之一

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 55 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/moyiqun/archive/2013/06/06/3121111.html

文章标签：

#javascript #xhtml #人工智能 #ViewUI

本文详细介绍了如何使用jQuery简化JavaScript编程，通过等待DOM元素加载完成，并对比jQuery对象与DOM对象的区别，展示jQuery如何实现DOM操作。此外，还提供了一个简单的jQuery实例，演示了如何通过事件触发动态改变网页元素。

   1.等待dom元素加载完毕.  
  
   <script type=
   "text/javascript"
   >
  
   //传统写法
  
   window.onload= function(){
  
   alert(
   "test1"
   );
  
   }
  
   //jquery写法
  
   $(document).ready(function(){
  
   $(
   "#one"
   ).html(
   "book"
   );
  
   });
  
   //jqeury简写  
  
   $(function(){
  
   //
  
   })
  
   </script>
  
   2.jquery 对象和dom 对象
  
   <!DOCTYPE html PUBLIC 
   "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
   >
  
   <html xmlns=
   "http://www.w3.org/1999/xhtml"
   >
  
   <head>
  
   <title>1-4</title>
  
   <meta http-equiv=
   "Content-Type" 
   content=
   "text/html; charset=utf-8" 
   />
  
   <!-- 引入 jQuery -->
  
   <script src=
   "../scripts/jquery-1.3.1.js" 
   type=
   "text/javascript"
   ></script>
  
   <script type=
   "text/javascript"
   >
  
   //等待dom元素加载完毕.
  
   $(document).ready(function(){
  
   // Dom对象
  
   var domObj = document.getElementsByTagName(
   "h3"
   )[0];
  
   //jQuery对象
  
   var $jQueryObj = $(domObj);  
  
   alert(
   "DOM对象："
   +domObj.innerHTML);
  
   alert(
   "jQuery对象："
   +$jQueryObj.html());
  
   });
  
   </script>
  
   </head>
  
   <body>
  
   <h3>例子</h3>
  
   <p title=
   "选择你最喜欢的水果." 
   >你最喜欢的水果是?</p>
  
   <ul>
  
   <li>苹果</li>
  
   <li>橘子</li>
  
   <li>菠萝</li>
  
   </ul>
  
   </body>
  
   </html>
  
   2.  简单的jquery 例子 
  
   <!DOCTYPE html PUBLIC 
   "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
   >
  
   <html>
  
   <head>
  
   <meta http-equiv=
   "Content-Type" 
   content=
   "text/html; charset=utf-8" 
   />
  
   <title>1-5-1</title>
  
   <style type=
   "text/css"
   >
  
   #menu { 
  
   width:300px; 
  
   }
  
   .has_children{
  
   background : #555;
  
   color :#fff;
  
   cursor:pointer;
  
   }
  
   .highlight{
  
   color : #fff;
  
   background : green;
  
   }
  
   div{
  
   padding:0;
  
   }
  
   div a{
  
   background : #888;
  
   display : none;
  
   float
   :left;
  
   width:300px;
  
   }
  
   </style>
  
   <!-- 引入 jQuery -->
  
   <script src=
   "http://www.cnblogs.com/scripts/jquery-1.3.1.js" 
   type=
   "text/javascript"
   ></script>
  
   <script type=
   "text/javascript"
   >
  
   // 等待dom元素加载完毕.  当鼠标单击到 class 中含有 has_children 的元素上的时候，给其添加一个名为highlight的class 然后将其内部<a> 子元素都显示出来，并且被单击的class 中含有has_children 元素的同辈元素去掉一个名为highlight的class ，同时同辈元素内部的<a>子元素全部隐藏。

         $(document).ready(function(){
        
         $(
         ".has_children"
         ).click(function(){
        
         $(
         this
         ).addClass(
         "highlight"
         ).children(
         "a"
         ).show().end().siblings().removeClass(
         "highlight"
         ).children(
         "a"
         ).hide();
        
         });
        
         });
        
         </script>
        
         </head>
        
         <body>
        
         <div id=
         "menu"
         >
        
         <div 
         class
         =
         "has_children"
         >
        
         <span>第1章-认识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>第2章-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>第3章-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>