JS学习中遇到的一些问题总结

从几天前开始接触《JavaScript DOM编程艺术 第二版》这本书,准备在以下文章里把在学习中遇到的问题来汇总起来。

平稳退化(在不确定浏览器支持不支持JavaScript或者用户禁用JavaScript情况下,完成页面的基本操作)
一个在网页中打开链接的例子:

<!doctype html>
<html>
<head>
<meta charset="utf-8"></meta>
<title></title>
<script>
function popUp(winURL){
  window.open(winURL,"popup","width:300px,height:480px")
}
</script>
</head>
<body>
<a href="http://www.baidu.com" onclick="popUp(this.href;return false)">点击链接</a>  
</body>
</html>

类似于css中可以将style从html中分离出来方便维护,JavaScript可以将onclick属性从html中分离出来,存放在独立的js文件中,方便调出和维护。于是可以加入下面js代码

window.onload=prepareslink; //定义全页面加载完毕再开始执行prepares函数
function prepareslink(){
  var links=getElmentsByTagNames("a");
  for(i=0;i<links.length;i++){
    if(links[i].getAttribute("class")=="popup"){
      links[i].onclick=function(){
        popUp(this.getAttribute("href"))
        return false;
      }
    }
  }
  function popUp(winURL){
  window.open(winURL,"popup","width:300px,height:480px")
  }
}
当然其中body中的a标签要加上class="popup"样式,方便for循环去遍历所有数组中的元素后与之匹配

向后兼容(浏览器不支持一些DOM语句时,识别操作)

if(!getAttribute||getElmentsByTagNames)return false; //判断是否识别多种方法或者属性

addloadEvent函数(共享onload)

function addloadEvent(func){
  var oldonload=window.onload;
  if(typeof window.onload !='function'){
    window.onload=func;
  }else{
        window.onload=function(){
          oldonload();
          func();
        }
   }
}

猜你喜欢

转载自blog.csdn.net/weixin_35993084/article/details/74643004