zoukankan      html  css  js  c++  java
  • 为什么要使用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>
  • 相关阅读:
    滚动图片
    Iframe自动适应高度
    我的生活,我的精彩!
    静下心来
    写给关心我的人
    关于考研
    按时间自动刷新页面
    破除网页鼠标右键禁用的十大绝招
    DotNetNuke 皮肤制作白皮书
    WollOp
  • 原文地址:https://www.cnblogs.com/tinyphp/p/3006052.html
Copyright © 2011-2022 走看看