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

作者: KingDZ 发表于 2011-05-09 20:42 原文链接

推荐.NET配套的通用数据层ORM框架:CYQ.Data 通用数据层框架
新浪微博粉丝精灵,刷粉丝、刷评论、刷转发、企业商家微博营销必备工具"