欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jquery学习(1)

程序员文章站 2022-07-15 10:02:16
...

学习jQuery,首先学习的肯定是 John Resig大神的jQuery开篇。

Tutorial:How jQuery works(指南:jQuery怎么工作?)

学习后的目标:

1. jQuery的基本使用方式

2. 明白window.onload 和 $(document).read()的区别

3. 怎么通过jQuery获取dom对象

 

在jQuery的官网下载jQuery,然后创建一个html的测试页面,

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jQuery  tutorial</title>
</head>
<body>
    <h1>jQuery Tutorial!</h1>
    <a href="http://jquery.com">jQuery</a>
    <script type="text/javascript" src="javascript/jquery-1.7.1.js"></script>
</body>
</html>
 

 

注意到一个细节,大神的引入jQuery的<script>的位置在body的最后一行,在firebug下面看了下,这样是有好处的,因为js的加载是阻塞式的,当映入js的代码在head中的时候,浏览器会去加载js,而阻塞了,其他的http请求和页面html的加载。而放在body的最后一行,这样等着dom加载完毕才去请求js,加载js,页面加载的速度会快一点。在firebug看了下,在head中引入jQuery的页面加载速度41ms,而在body的最后一行加载的速度是19ms,如果考虑在网络上,这个差距估计还会大一点。

 

在没有使用jQuery之前,我一般在写非侵入的js的时候会用到window.onload, 如:

 

window.onload = function() {
      ......
}

 

 这样写的好处是,当用document.getElementById的时候避免dom在id元素还没有加载出来,从而得不到dom的id对象。当然也可以不用window.onload,直接把js放在body最后面就像上面说的那样。

 

我们看看大神怎么解释$(document).read()的优点的。

 

当浏览器加载页面时不会去运行js的代码,直到所有图片的下载完成(包括那些侧边广告额~)。在第一个地方使用window.onloa去试着运行你的代码时,html的dom还没有完成加载。而jQuery通过document的ready事件,只要监测到页面的dom完成渲染加载就可以去操作。

 

简单的讲就是,window.onload也等待页面所有的dom元素和属性完成加载,如需要等到图片完成加载后,才可以运行。

而jQuery的原理是只要页面的dom树可以渲染和加载就可以操作dom,效率要高一点。

 

$(document).ready(function(){
    //your code here!
});

 

 

还有就是window.onload只能运行一次,

如:

 

 <script type="text/javascript">
        window.onload = function() {
            console.log("a");
        }
        window.onload = function() {
            console.log("b");
        }
        window.onload = function() {
            console.log("c");
        }
    </script>

 

 可以在firebug或者google的web develop tools里面看到输出的是c,

 

而通过$(document).ready();

 

 $(document).ready(function() {
        console.log("a");
    });

    $(document).ready(function () {
        console.log("b");
    });

    $(document).ready(function() {
        console.log("c");
    });

 

 输出的是a b c

 

jQuery的选择器小试牛刀-- 选择测试页面中的超链接,当点击时,给出一个alert

 

$(document).ready(function() {
        $("a").click(function() {
            alert("I am learning jQuery!");
        });
    });

 

 我们看到页面弹出alert,且发生跳转。

 

如果想阻止事件的默认行为可以:

 

 $(document).ready(function() {
        $("a").click(function(event) {
            alert("I am learning jQuery!");
            event.preventDefault();
        });
    });
 

 

亲,还跳转吗?

 

 

通过js给dom添加css

我们把超链接的字体改一改

 

<style type="text/css">
        .test {
            font-weight: bold;
            font-size: 24px;
        }
    </style>

 $(document).ready(function() {

 

//        $("a").click(function(event) {
//            alert("I am learning jQuery!");
//            event.preventDefault();
//        });
        $("a").addClass("test");
        setTimeout(function() {
            $("a").removeClass("test")
        }, 2000);
    });
 

为了看到效果,两秒后去除css的效果。

 

jQuery简单特效--点解连接慢慢的消失

 

  $(document).ready(function() {
        $("a").addClass("test");
        $("a").click(function(event) {
            event.preventDefault();
            $("a").hide("slow");
        });
    });
 

 

回调函数和函数

 

回调函数是作为另一个函数的参数,在父函数执行完毕的时候开始执行。

如:$.get("home.html", myCallBack);

这里的第二个参数就是一个简单的回调函数,在js中函数可是一等公民啊。

如果回调函数带参数怎么办呢?

$.get("home.html", myCallBack(param1, param2));

这样是不对的,因为不是回调函数,而是第二个参数是函数的返回值。

 

可以这样:

$.get('home.html', function(){

     myCallBack(param1, param2);

})