为什么要使用jquery?

利用jquery等库的选择器可以不再依赖于特定的ID或类名，而且可以减少很多代码，以下实例说明：

效果:点击article标签里面的nav标签里面的a链接，弹出框“点击了连接”

js写法：

function linksnum(){
var article=document.getElementsByTagName("article");
for(var a=0;a<article.length;a++){
var nav=article[a].getElementsByTagName("nav");
for(var n=0;n<nav.length;n++){
var links=nav[n].getElementsByTagName("a");
for(var l=0;l<links.length;l++){
links[l].onclick=function(){alert("点击了连接");return false;}
}
}
}
}
window.onload=linksnum;

jquery写法：

<script src="jquery.js"></script>
<script>
$(function(){
$('article nav a').click(function(){
alert("点击了连接");return false;
})
})
</script>

把上面的两种写法分别替换下面的js部分，都可以实现同样的效果，但是代码长度却差别很大，当然，如果是那么简单的功能，通常都不会特意引用一个jquery库来写，那样得不偿失

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>利用jquery等库的选择器可以不再依赖于特定的ID或类名，而且可以减少很多代码</title>
</head>
<script>
//js代码区
</script>
<body>

<article>
<nav><a href="1">我是连接一</a><a href="2">我是连接二</a></nav>
</article>
<article class="article">
<nav><a href="#">我是连接三</a><a href="#">我是连接四</a></nav>
</article>

</body>

</html>
posted @ 2013-04-07 20:24  tinyphp  Views(1246)  Comments(0)  Edit  收藏  举报