第一讲 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>

 

 

 

你可能感兴趣的:(jquery)