jQuery 学习体验

昨天从文超那了解到JavaScript脚本中有一个javascript库叫:jQuery;我对这个东东蛮有兴趣的,所以现在抽点时间 学习一下,并记录一下自己的体验心得:

     首先了解一下jQuery:

     jQuery 是一个新型的JavaScript库.
     jQuery是一个简洁快速的JavaScript库,它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。

     jQuery是一个轻量级的脚本,其代码非常小巧,JavaScript包只有15K左右。

     jQuery支持CSS1-CSS3,以及基本的xPath(xPath是什么呢?)

     jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+

 

     注:xPath:为XML路径语言(XML Path Language),它是一种用来确定XML文档中某部分位置的语言。(详细参考http://zh.wikipedia.org/wiki/XPath)
==========================================================================================
1、ready函数

     格式:

     $(document).ready(function()

     {
          //当文档载入后从此处开始执行代码
     });

     说明:

     $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

     $(document).ready表示:获取文档对象就绪的时候。

     注:DOM:是Document Object Model文档对象模型的缩写

     2、鼠标点击事件

     格式:$("div/#id/.class").click(function()

     {

          //事件效果代码,每个事件结束后用分号结束语句。

     })

     $(div/#id/.class)表示事件发生在当前页面的所有层/同名id/同名类都绑定了**事件,若用this表示返回当前对象

     例子:点击文字那一层,出现提示信息:这是我的第一个jQuery例子!!!

<html>
     <head>    
          <title>第一个jQuery例子</title>
     </head>
     <script language="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
     <script language="javascript">
     <!--
          $(document).ready(function()
          {
               $("div").click(function()
               {
                    alert("这是我的第一个jQuery例子!!!");
               })
          })
     -->
     </script>

     <body>
          <div>
               点击这些文字看会出现什么效果……
          </div>
     </body>
</html>

 

     不明地方: <script language="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>

     这句语句做何解释,为什么没有这句时,点击文字不会出现提示信息?

     3、对CSS 的操作方法:addclass & removeclass

     addclass:添加指定层的样式类名

     removeclass:移除指定层的样式类名

     格式: $("div/#id/.class").addClass("样式类名");

               $("div/#id/.class/this").removeClass("样式类名");

     例子:

     <script language="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
     <style>
         .a {  background-color:#00FF66}

     </style>
     <script language="javascript">
     <!--
          $(document).ready(function()

          {
              $("div").addClass("a");//加载网页时添加样式
              $("div").click(function()

               {
                      $(this).removeClass("a");//鼠标点击时触发绑定的click事件
               })
          })
     -->
     </script>

 <body>

     <div>

          点击我看看,是不是有变化呢?

     </div>

</body>

     注:addClass & removeClass 中的Class中的C一定要大写,否则看不出效果!!!

==========================================================================================
4、css\height\width

     格式:1) css(key,value)      2) css(name)       3) css(properties)

              height(value)

              width(value)

     说明:css(key,value)  key:标记类名或ID名   value:属性值

            css(name)  name:标记类名或ID名

            css(properties)  properties:把一个“名/值对”对象设置为所有匹配元素的样式属性。

     例子:

     <script language="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
     <script language="javascript">
           <!--
                 $(document).ready(function()
                 {
                       $("#bb").click(function()
                       {
                             $(this).css("background","#0033FF");
                             alert($(this).css("background"));
                       })

                       $("#b").click(function()
                       {
                             $(this).css({ background: "#33FF00", height:"100px" });
                       })

                     $("#h").click(function()
                       {
                             $(this).css("background","#0033ff");
                             $(this).height("200px");
                             $(this).width("300px");
                       })
  
                 })
      -->
     </script>

 

      <div id="bb">
            css(key,value);
            css(name);
      </div>
      <div id="b">
            css(properties);
      </div>

      <div id="h">
            height,width;
      </div>


 

posted on 2009-03-05 19:08  钱途无梁  阅读(316)  评论(0编辑  收藏  举报