当前位置:编程学习 > asp >>

菜鸟学JQuery第一天--哎,每天写博客,全当写日记

第一个JQuery程序,首先还是引用一个JQUERY库【这个库你可以去网上下载,免费的,有的是】  我用的是
“jquery-1.5.1.min.js”

所以大家可以去网上找相应的下载,我不会上传附件,所以不能提供给大家了,呵呵,不过这个文件很小“83.2 KB”,大家去下载就可以了。

步入正题

废话不多,直接进入第一个jquery程序

首先添加  “JS引用” 我想你懂的

然后开始咱的第一个程序:

view sourceprint?<script type="text/javascript"> 

      $(document).ready(function() { 

          alert("加载完成"); 

 

      }); 

  </script>

然后这个我们可以简写成

view sourceprint?<script type="text/javascript"> 

       $(function() { 

           alert("加载完毕"); 

 

       }); 

   </script>

ready和JS事件中的onload相似,

不过他是有区别的,ready是Dom元素【学过JS的同学应该知道】加载完毕之后就触发,而onload则是,当网页中的所有元素都加在完成之后才触发的,简单的理解就是,onload要把网页上面的图片啊,Flash....都加载完成,但是ready不用,他加载完成<img>标签就可以运行了,自然速度很快。

JQUERY中的选择器

JS中你如何获得网页中的标签呢

我想是“var ele= document.getElementById("idname");

但是这种办法,在JQUERY中得到的改进就非常优秀了。

view sourceprint?<script type="text/javascript"> 

     $(function() { 

           

         $("#mydiv").html("<font color=red>我是动态生成的文字</font>"); 

     }); 

 

      

 </script>

 你可以测试一下,然后再用JS的办法实现一下,

然后我们来看如何获得"标签数组"我的叫法

JS中的“getElementsByTagName”  这个我就不做例子了

view sourceprint?<!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></title> 

  

    <script src="jquery-1.5.1.min.js" type="text/javascript"></script> 

  

    <script type="text/javascript"> 

        $(function() { 

  

  

            $("p").html("我们都是P标签"); 

            // $("#mydiv").html("<font color=red>我是动态生成的文字</font>"); 

        }); 

   

    </script> 

  

</head> 

<body> 

    <div id="mydiv"> 

    </div> 

    <p> 

        1</p> 

    <p> 

        1</p> 

    <p> 

        1</p> 

    <p> 

        1</p> 

</body> 

</html>

是不是代码精简多了呢?

JQuery提供的函数

 

$.map(array,fn):用来将一个数组,转成另一个数组。

这个一般的用法就是,得到网页中元素的值,然后去转换成相应的值

简单的例子可以这么做

view sourceprint?<script type="text/javascript"> 

    $(function() { 

        var arr1 = [3, 5, 9]; 

        var arr2 = $.map(arr1, function(item) { return item * 2; }); 

        for (var i = 0; i < arr2.length; i++) { 

            document.writeln(arr2[i]); 

        } 

    }); 

 

</script>

上面的例子就是实现

对arr1数组中的每一个元素实现“乘以2”操作

view sourceprint?<script type="text/javascript"> 

         $(function() { 

         //$.each(array,fn)对数组arry每个元素调用fn函数进行处理,没有返回值。 

         var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" }; 

         $.each(arr, function(key, value) { 

             alert(key + "=" + value); 

         }); 

     }); 

 

 </script>

$(#div1).html()等价于:document.getElementById("div1").innerHTML;
下节课讨论:

jquery对象

jquery对象就是JQUERY对DOM对象包装后的对象

 

补充:Web开发 , ASP.Net ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,