最近在读js编程艺术,发现几个不错的函数,总结如下:

1、页面初始化加载函数onload

操作DOM的函数应该在页面元素初始化结束之后再立即执行,否则页面元素还没有初始化完成,DOM操作就会搁浅了;网页加载完毕时会触发一个onload事件,应该写在onload函数里面执行,现封装一个将多个操作绑定的onload事件上的函数addLoadEvent:

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

在使用的时候直接将要执行的函数作为参数传进去就行了,

addLoadEvent(firstFunction)
addLoadEvent(secondFunction)
这将把那些在页面加载完毕时执行的函数创建为一个队列,使其依次执行
2、封装将元素插入到元素之后的方法insertAfter
function insertAfter(newElement,targetElement) {
var parent=targetElement.parentNode;
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}

目标元素为父元素最后一个元素时,直接追加到父元素之后;否则插入到目标元素和目标元素的下一个兄弟元素之间

DOM几个重要的函数的更多相关文章

  1. 封装的一些常见的JS DOM操作和数据处理的函数.

    //用 class 获取元素 function getElementsByClass(className,context) { context = context || document; if(do ...

  2. javascript中函数的3个高级技巧

    × 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本 ...

  3. jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  4. jquery----中级函数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. DOJO DOM 功能

    In this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browse ...

  6. DOM 事件

    1.注册事件 // 事件处理函数 function handleMouseOver(event) { // process ...... } p.addEventListener("mous ...

  7. js操作DOM动态添加和移除事件

    非IE下,注意事件名不带on,如onclick为click 添加事件:DOM对象.addEventListener('事件名',函数名,true/false); 删除事件:DOM对象.removeEv ...

  8. jQuery.bind() 函数详解

    bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数. 此外,你还可以额外传递给事件处理函数一些所需的数据. 执行bind()时,事件处理函数会绑定到每个匹配元素上.因此你使用bind( ...

  9. javascript函数中的三个技巧【二】

    技巧二: [惰性载入函数] 因为浏览器之间的行为的差异,我们经常会在函数中包含了大量的if语句,以检查浏览器特性,解决不同浏览器的兼容问题,比如,我们最常见的为dom节点添加时间的函数 functio ...

随机推荐

  1. 翻译 – CSS3 Backgrounds相关介绍——张鑫旭

    —————以下为翻译内容—————- CSS2.1中有5个background属性可以用来控制元素的背景.这5个属性是: background-color background-image backg ...

  2. 基于Vue实现图片在指定区域内移动

    当图片比要显示的区域大时,需要将多余的部分隐藏掉,我们可以通过绝对定位来实现,并通过动态修改图片的left值和top值从而实现图片的移动.具体实现效果如下图,如果我们移动的是div 实现思路相仿. 此 ...

  3. vue.js高仿饿了么(前期整理)

    1.熟悉项目开发流程 需求分析——>脚手架工具——>数据mock——>架构设计——>代码编写——>自测——>编译打包. 2.熟悉代码规范 从架构设计.组件抽象.模块 ...

  4. clr_zmq Vs2010版本

    .net的消息队列很方便的一个库. 在github上的主版本虽然也支持fw4.0,但是必须使用vs2012以上进行编译. 这样就依赖vcredist运行时. 因为win7 sp1以下版本,无法安装vc ...

  5. zabbix系列之五——安装后配置一

    https://www.zabbix.com/documentation/3.4/manual/appliance Configuration 1Hosts and host groups Overv ...

  6. Python 3从入门到精通02-python的简单使用

    Python 3中的打印语句和字符串使用: Python中的常见数学运算: 这样的简单基础知识,你需要花5分钟就可以了,很基础的东西.

  7. c# 编译期常量const和运行时常量readonly

    注意:const编译期常量是编译的时候就确定的,可以查看IL代码,是写死的.如果另一个程序集引用后,该程序集没有进行编译,则值不会改变. 看效果: 项目中有2个程序集: 其中:常量在这个程序集中定义并 ...

  8. 关于Entity Framework关系配置,提示列名XXXX_Id无效的问题

    问题描述 : 数据库中有两张表,如下: Member(会员)表有外键RoleId,对应的是Role(角色)表的主键Id,业务逻辑是Member表的RoleId必须与Role表的Id对应(但在设计数据表 ...

  9. 用block将UIAlertView与UIActionSheet统一起来

    用block将UIAlertView与UIActionSheet统一起来 效果 1. 将代理方法的实例对象方法转换成了类方法使用 2. 要注意单例block不要长期持有,用完就释放掉 源码 https ...

  10. TreeMap:是基于红黑树的Map接口的实现

    > TreeMap:是基于红黑树的Map接口的实现. 红黑树:平衡二叉树 取出时,可以有三种方式:前序遍历,中序遍历,后序遍历 >排序: A 自然排序  --TreeMap无参构造 Tre ...