关于jQuery使用的几点体会

用jQuery类库已经有很长一段时间了,但是直到今天我才发现平时我们在写一段js代码的时例如:

$(function(){
    $('#mine').click(function(){
        alert('hi,i"m jxcent'); 
    })
})

事实上,我们都习惯这么写,其实$(function(){})是允许你绑定一个在 DOM 文档载入完成后执行的函数。对它就是一个回调函数,这样写的话有一点优势就是这段代码不管放在哪里都能够执行。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MyTest</title>
<script src="http://s.my.com/js/jquery-1.8.2.min.js"></script>
<script>
$(function(){
    $('#mine').click(function(){
        alert('hi,i"m jxcent'); 
    })
})
</script>
</head>

<body>
<a href="#" id="mine">Run Click</a>
</body>
</html>

在这里我特意将jQuery的代码放在head中,我们运行之后依然可以触发点击事件。该函数的作用如同 $(document).ready() 一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的其他 $() 操作符都包装到其中来。尽管从技术上来说,这个函数是可链接的,但真正以这种方式链接的情况并不多。

所以我们要改进一种更为优雅的jQuery写法,这是一种习惯。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MyTest</title>
</head>

<body>
<a href="#" id="mine">Run Click</a>
</body>
<script src="http://s.my.com/js/jquery-1.8.2.min.js"></script>
<script>
    $('#mine').click(function(){
        alert('hi,i"m jxcent'); 
    })
</script>
</html>

通过上段代码你会发现页面上面不存在$(function(){})之类的代码了,但是我们依旧可以触发点击事件,更为优雅的是jQuery或者其他js代码都在</body>之后,那么加载页面的速度也有了很大的提升。但是有一点你必须注意,如果现在把

<script src="http://s.my.com/js/jquery-1.8.2.min.js"></script>
<script>
    $('#mine').click(function(){
        alert('hi,i"m jxcent'); 
    })
</script>

移动到head中,你会发现是触发不了点击事件的。原因就是函数写在DOM(mine)之前了。

我们采用优雅的写法给我们的代码带来清晰感,不会使代码过于臃肿和繁杂。

作者:Yinchiang

i'm X

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

评论审核已启用。您的评论可能需要一段时间后才能被显示。