【DOM编程艺术】综合示例

￡神魔★判官ぃ 2022-01-06 06:23 290阅读 0赞

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>Jay Skript And The Domsters</title>
      <script src="scripts/modernizr-1.6.min.js"></script>
      <link rel="stylesheet" media="screen" href="styles/basic.css" />
    </head>
    <body>
      <header>
        <img src="images/logo.gif" alt="Jay Skript and the Domsters" />
        <nav>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="photos.html">Photos</a></li>
            <li><a href="live.html">Live</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </header>
      <article>
        <h1>Welcome</h1>
        <p id="intro">Welcome to the official website of Jay Skript and the Domsters. Here, you can <a href="about.html">learn more about the band</a>, view <a href="photos.html">photos of the band</a>, find out about <a href="live.html">tour dates</a> and <a href="contact.html">get in touch with the band</a>.</p>
      </article>
      <script src="scripts/global.js"></script>
    </body>
    </html>

global.js

function addLoadEvent(func){
        var oldonload = window.onload;
        if(typeof window.onload != 'function'){
            window.onload = func;
        }else{
            window.onload = function(){
                oldonload();
                func();
            }
        }    
    }
    
    function insertAfter(newElement,targetElement){
        var parent = targetElement.parentNode;
        if( parent.lastChild == targetElement){
            parent.appendChild(newElement);
        }else{
            parent.insertBefore(newElement,targetElement.nextSibling);
        }
    }
    
    function addClass(element,value){
        if(!element.className){
            element.className = value;
        }else{
            newClassName = element.className;
            newClassName += ' ';
            newClassName += value;
            element.className = newClassName;
        }
    }
    
    function highlightPage(){
        if( !document.getElementById) return false;
        if( !document.getElementsByTagName ) return false;
        var headers = document.getElementsByTagName('header');
        if( headers.length == 0) return false;
        var navs = headers[0].getElementsByTagName('nav');
        if( navs.length == 0 ) return false;
        var links = navs[0].getElementsByTagName('a');
        var url = window.location.href;
        for(var i=0;i<links.length;i++){
            var linkurl = links[i].getAttribute('href');
            if( url.indexOf(linkurl) != -1 ){
                links[i].setAttribute('href','#');
                links[i].className = 'here' ; } }
    } addLoadEvent(highlightPage);

转载于:https://www.cnblogs.com/positive/p/3699491.html

发表评论取消回复

表情：

评论列表（有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript DOM编程艺术(第2版) 笔记

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档目录基本概念 1、JavaScript语法 1.1 JavaScript 代

电玩女神/ 2022年12月18日 13:58/ 0 赞/ 197 阅读

相关 DOM编程艺术

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

绝地灬酷狼/ 2022年07月11日 07:49/ 0 赞/ 188 阅读

相关【DOM 编程艺术】3.4 节点

> 节点分为：元素节点、文本节点和属性节点等。 <!doctype html> <html lang="en"> <head> <me

阳光穿透心脏的1/2处/ 2022年06月08日 08:38/ 0 赞/ 181 阅读

相关【DOM编程艺术】综合示例

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf

￡神魔★判官ぃ/ 2022年01月06日 06:23/ 0 赞/ 291 阅读

相关【DOM编程艺术】实时动画--进一步

if( xpos < final_x){ xpos ++; } 变量xpos是被移动元素的当前左位置，变量final\_x是这个元素的

快来打我*/ 2022年01月06日 06:23/ 0 赞/ 200 阅读

相关【DOM编程艺术】style属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

矫情吗；*/ 2022年01月06日 06:23/ 0 赞/ 280 阅读

相关【DOM编程艺术】显示"快捷键清单"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

╰半夏微凉°/ 2022年01月06日 06:21/ 0 赞/ 222 阅读

相关【DOM编程艺术】XMLHttpRequest对象

Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器脚本（客户端）与服务器之间的中间人的角色。以往的请求都由浏览器发出，而Javascript通过这

ゞ浴缸里的玫瑰/ 2022年01月06日 06:21/ 0 赞/ 253 阅读

相关【DOM编程艺术】图片库再次改进

图片库中一个图片和一段文字仅仅是为showpic脚本服务的。若能把结构和行为彻底分开那最好不过了。既然这些元素的存在只是为了让DOM方法处理它们，那么用DOM

╰+哭是因爲堅強的太久メ/ 2022年01月06日 06:19/ 0 赞/ 241 阅读

相关 JavaScript Dom 编程艺术阅读笔记

1、最高效的声明方式：var mood="happy",age=33; 2、通常情况下驼峰格式是函数名、方法名、对象属性名命名的首选转载于:https://www.cnb

逃离我推掉我的手/ 2021年11月29日 23:12/ 0 赞/ 286 阅读