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

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

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

步入正题

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

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

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

  <script type="text/javascript">
        $(document).ready(function() {
            alert("加载完成");

        });
    </script>

然后这个我们可以简写成

 <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中得到的改进就非常优秀了。

   <script type="text/javascript">
        $(function() {
            
            $("#mydiv").html("<font color=red>我是动态生成的文字</font>");
        });

       
    </script>

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

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

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

<!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):用来将一个数组，转成另一个数组。

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

简单的例子可以这么做

    <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”操作

   <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对象包装后的对象

posted @ 2011-05-09 20:42  KingDZ  阅读(3488)  评论(24)  编辑  收藏  举报