第一讲 jQuery入门

 大家在平时浏览网页的时候，无不对网页中的特效情有独钟，那这些特效是这样制作出来的呢？
        现在我就为大家介绍一门技术来实现那网页中看似不可思议的事情，它就是受到大多数编程人员青睐的jQuery，它至今已有6岁了，说起它应该是一门成熟的技术了。那jQuery到底是什么呢？其实说简单点，Jquery是就一个Javascript的函数库，封装大量的JS操作。它所强调的理念就是“写的少，做的多”，其独特的选择器、链式的DOM操作方式、事件绑定机制、封装完善的Ajax都是其他JavaScript库望尘莫及的，值得特别强调的是它出色的浏览器兼容性，它解放了程序员不在考虑浏览器的兼容问题。
        
    说了这么多了，现在带大家来瞧瞧jQuery的基本使用方式吧！（需要导入jQuery，百度一下、你懂的）
        

Jquery的核心语法是：$();

1. 引入jquery的函数库。<script type=”text/javascript” src=”路径”></script>

2. 编写jquery的固定语法格式。

 

<script type=”text/javascript”>

//此段代码，表示页面在加载的时候，自动调用的代码。

$(function(){

       //这里写Jquery的代码

});

</script>

这里是一个简单的例子：

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>无标题文档</title>
 <script src="jquery-1.3.2.min.js"></script>
 <script type="text/javascript">
  $(function(){
    //每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二
    //个函数。随后的每次点击都重复对这两个函数的轮番调用。可以使用unbind("click")来删除
     $(".title").toggle(function(){
    $("ul").hide(300);
    $(this).parent().children("ul").slideDown(500);
   },function(){
    $(this).parent().children("ul").slideUp(500);
   }).mouseover(function(){
    $(this).stop().animate({paddingLeft:"45px"},200);
   }).mouseout(function(){
    $(this).stop().animate({paddingLeft:"20px"},200);
   });
   $("li").mouseover(function(){
    $(this).addClass("highlight");
   }).mouseout(function(){
    $(this).removeClass("highlight");
   });
  });
 </script>
 <style type="text/css">
  #menu{
   background:url(img/bg-body.gif) repeat-y;
   height:540px;
   width:220px;
   padding:100px 0px 0px 30px;
   font-size:12px;
   color:#999999;
  }
  .title{
   background:url(img/bg-menu-item-green.gif) no-repeat;
   height:33px;
   padding:10px 0px 0px 20px;
   margin-left:10px;
   width:180px;
   color:#FFFFFF;
   cursor:pointer;
   font-family:Arial, Helvetica, sans-serif;
   font-stretch:wider;
   font-size:14;
  }
  ul{
   list-style:none;
   padding:0px;
   display:none;
  }
  ul li{
   padding:5px 0px 0px 50px;
   cursor:pointer;
  }
  .highlight{
   color:#FFFFFF;
  }
  
 </style>
</head>
 <body>
  <div id="menu">
   <div>
    <div class="title">题目1</div>
    <ul>
     <li>111111</li>
     <li>222222</li>
     <li>333333</li>
    </ul>
   </div>
   <div>
    <div class="title">题目2</div>
    <ul>
     <li>aaaaaa</li>
     <li>bbbbbb</li>
     <li>cccccc</li>
    </ul>
   </div>
   <div>
    <div class="title">题目3</div>
    <ul>
     <li>!!!!!!</li>
     <li>@@@@@@</li>
     <li>######</li>
    </ul>
   </div>
   <div>
    <div class="title">题目4</div>
    <ul>
     <li>111111</li>
     <li>222222</li>
     <li>333333</li>
    </ul>
   </div>
   <div>
    <div class="title">题目5</div>
    <ul>
     <li>aaaaaa</li>
     <li>bbbbbb</li>
     <li>cccccc</li>
    </ul>
   </div>
   <div>
    <div class="title">题目6</div>
    <ul>
     <li>!!!!!!</li>
     <li>@@@@@@</li>
     <li>######</li>
    </ul>
   </div>
  </div>
 </body>
</html>

 

 

 

posted on 2012-11-05 09:41  somewhere!  阅读(185)  评论(0)  编辑  收藏  举报

导航