【js编程艺术】 之有用的函数

学习js的过程中有几个有用的函数。

//添加事件函数
function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != "function"){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

//功能:将新节点newElement添加到目标节点targetElement之后
function insertAfter(newElement, targetElement){
    //获取目标节点的父节点parent
    var parent = targetElement.parentNode;

    if(parent.lastChild == targetElement){
        //若目标节点是父节点的最后一个子节点则直接添加新节点
        parent.appendChild(newElement);
    }else{
        //否则,在目标节点的下个兄弟节点之前添加新节点
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

//功能:将元素element添加一个类名value
function addClass(element, value){
    if(!element.className){
        //若元素类名为空,则直接赋值为value
        element.className = value;
    }else{
        //若元素类名非空,则将value添加到原类名后
        var newClassName = element.className;
        newClassName += " ";
        newClassName += value;
        element.className = newClassName;
        // element.className += " " + value;
    }
}
时间: 2024-10-20 20:31:14

【js编程艺术】 之有用的函数的相关文章

【js 编程艺术】小制作二

首先是一个html文档 /* explanation.html */<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Explaining the Doucment Object Model</title> <link rel="stylesheet" type="text/css" href=&qu

【js 编程艺术】小制作四

1. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cities</title> <link rel="stylesheet" type="text/css" href="styles/format.css"> </head> <body>

【js编程艺术】小制作五

1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Design</title> <link rel="stylesheet" type="text/css" href="styles/list.css"> </head> <body&g

JS编程练习:封装insertAfter函数(功能类似于系统insertBefor)

那么insertAfter()要实现的功能: 在指定的子节点后面插入新的子节点: 1 <body> 2 <div> 3 <p></p> 4 <span></span> 5 <em></em> 6 <i></i> 7 </div> 8 9 <script type="text/javascript"> 10 Element.prototype.i

JS DOM编程艺术的学习—— JS学习笔记2015-7-5(第76天)

由于看高程3卡住了,所以现在在学习JS DOM编程艺术来巩固基础: 一.在看JS DOM 编程艺术的时候,有个作者提到的方法很实用, 就是在JS中变量和函数的命名方法:  变量的命名方法为使用下划线,比如: var temp_color = ['red','blue']; 函数就使用驼峰法,比如: function current_date(){}; 这样的习惯可以帮助理解,提高可读性,在理解变量和函数名的时候就很方便了: 二.还有个收获就是关于“对象”的理解又加深了 之前对于什么对象的属性,对

JS DOM 编程艺术 随笔

DOM 最大的作用就是将整个文档通过节点树来展现.通过类似方法可以获取特定节点,并绑定js方法实现与人的交互. 1.通过dom方法,获取页面的元素(getElementsByTagName/id,通过class(getAttribute))2.获取元素之后,为他们绑定行为(点击/其他)的处理事件3.最后把所有函数绑定到window.onload()函数上面去 onload = function(){function1function2...} plus 小技巧: <a onclick=>函数

JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

DOM是一种适用于多种环境和多种程序设计语言的通用型API. 如果想要把本书(JS DOM编程艺术)学到的DOM技巧运用在web浏览器以外的应用环境里,严格遵守“第1级DOM”能够让你避免与兼容性有关的任何问题: tips:setAttribute是第1级DOM; 图片切换初级js: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/

js学习12-《JS DOM 编程艺术》笔记

学习了下<JS DOM 编程艺术>,做个学习总结:1.字符串中放单引号双引号:建议:字符串中放单引号,则用双引号包含字符串 1 var s1="It's my doy"; 字符串中放双引号,则用单引号包含字符串 1 var s2='He said "hi!" '; 其他使用\进行转义 2.==和====== :严格比较.不仅比较值,还比较类型== :不严格比较,转换类型一致比较 3.JS语言里对象的三种类型3.1内建对象:javascript提供的对象

《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数

刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 看到版本翻译为预留退路,刚刚看到个名词,我觉得很奇怪,以前没有听说过啊.不过看到英文注释就知道了Graceful degradation不就是优雅降级么,听说过! 书中举了个例子,点击一个链接,弹出一个窗口的方法. function popUp(WinURL){ window.open(WinURL,&quo