酷爱代码,但无记性
经常看,经常忘记,今天开始总结下代码块,便于今后翻阅
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