慢慢,收集js代码块(持续更新……)

By柏小白

慢慢,收集js代码块(持续更新……)

酷爱代码,但无记性

经常看,经常忘记,今天开始总结下代码块,便于今后翻阅

1.window.onload 事件处理函数

//  加载函数
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

2.添加class 函数

function addClass(element, value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName += " ";
    newClassName += value;
    element.className = newClassName;
  }
}

3.跳转页面-当前导航菜单添加属性

function highlightPage() {

  // 现代浏览器一般都支持
  // if (!document.getElementsByTagName) return false;
  // if (!document.getElementById) return false;

  if (!document.getElementById("navigation")) return false;
  var nav = document.getElementById("navigation");
  var links = nav.getElementsByTagName("a");

 
  for (var i = 0; i < links.length; i++) {
    //links[i]的 URL 
    var linkurl = links[i].getAttribute("href");  
    // 当前页面URL相匹配的链接 
    var currenturl = window.location.href; 
    // links[i]的 URL与当前页面的URL进行比较
    if (currenturl.indexOf(linkurl) != -1) {
      // 添加值为here的class属性
      links[i].className = "here";
      // 获取当前最后一个子节点---就是当表示文本,并转换成小写字母
      var linktext = links[i].lastChild.nodeValue.toLowerCase();
      // 把变量linktext 赋值给 body元素的id属性即可
      document.body.setAttribute("id", linktext);
    }
  }

}

// 调用 window.onload 事件处理函数
addLoadEvent(highlightPage);
<div id="navigation">
    <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>
</div>

4. 点击空白或者页面其他地方,关闭弹框

$(document).mouseup(function(e){
  var _con = $(' 目标区域 ');   // 设置目标区域
  if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
    some code...   // 功能代码
  }
});

//  Mark 1 的原理:
// 判断点击事件发生在区域外的条件是:
// 1. 点击事件的对象不是目标区域本身
// 2. 事件对象同时也不是目标区域的子元素

 

未完待续……

About the author

柏小白 administrator