addLoadEvent函数:

众所周知,html文档加载完后会立即执行一个onload函数。但是onload函数只能包含一个被执行的函数,也就是你需要在加载完文档后执行的一个自己的函数。在实际中html加载完成后需要执行很多预先执行的函数,那么怎样才能让html文档加载完后执行很多自己的函数呢?

1. 最简单的方法:回调

window.onload = function(){

  function1();

  function2();

}

2.另一种解决办法:

function addLoadEvent(func){

  var oldonload = window.onload;

  if(typeof oldonload != 'function'){

    window.onload = func();

  }else{

    window.onload = function(){

      oldonload();

      func();

    }

  }

}

然后再js脚本里执行:

addLoadEvent(function1);

addLoadEvent(function2);

......

它就会在html加载完成后自动的执行window.onload。 其实这个函数和上一个简化版本的功能是一样的。 只不过简化版本需要修改函数内部数据,在需要预加载函数过多的情况下容易写错函数名,造成加载错误。而第二个函数只需要调用函数并传参就可以了。不必动用函数内部造成不必要的错误。

--------------------------------------------------------分割线-------------------------------------------------------------------------

insertAfter函数:

DOM虽然提供了insertBefore函数,用于在已有元素前插入一个新元素,但是DOM没有提供相应的方法在已有元素后插入一个新元素的方法。 所以需要自己编写一个函数,来处理这项工作:

函数如下:

function insertAfter(newElement,targetElement){

  var parent = targetElement.parentNode;

  if(parent.lastChild == targetElement){

    parent.appentChild(newElement);

  }else{

    parent.insertBefore(newElement,targetElement.nextSibling);

  }

}

这个函数不用过多解释了,一目了然!

--------------------------------------------------------分割线-------------------------------------------------------------------------

用js为html表格设置跨行颜色

function setTablesColor(){

  var tables = document.getElementsByTagName("table");

  var odd,rows;

  for(var i = 0; i < tables.length; i++){

    odd = false;

    rows = tables[i].getElementsByTagName("tr");

    for(var j = 0; j < rows.length; j++){

      if(odd == true){

        rows[j].style.backgroundColor = "#ffc";

        odd = false;

      }else{

        odd = true;

      }

    }

  }

}

这个函数无论页面中有多少个表格,都可以统一进行颜色的跨行设置,而不必通过对每个table元素设置class来设置颜色。特别是表格数据量很大的情况下,用js函数设置省时省力。

--------------------------------------------------------分割线-------------------------------------------------------------------------

接下来这个函数,比较当前链接的URL与当前页面的URL是否相同,如果相同,则给当前链接的a元素添加一个类,css依靠这个类设置了一个背景颜色,使其突出显示。 或者也可以这样,如果当前链接URL和当前页面URL相同,则css用display:none;不显示当前元素。

函数如下:

function highlightPage(){

  if(!document.getElementsByTagName) return false;

  if(!document.getElementById) return false;

  

  //nav元素包含在header元素中,先找到header元素

  var headers = document.getElementsByTagname('header');

  if(headers.length == 0) return false;

  //再找到nav元素里的a元素

  var navs = headers[0].getElementsByTagName('nav');

  if(navs.length == 0) return false;

  //取得导航链接,然后循环它们

  var links = navs[0].getElementsByTagName('a');

  var linkurl;

  for(var i=0; i<navs.length; i++){

    //要比较当前链接的URL与当前页面的URL。要取得链接的URL,用getAttribute('href')

    //而要取得当前页面的URL,则可以使用window.location.href

    //用indexOf方法,查找子字符串在字符串中的位置,如果没有匹配到,则indexOf方法返回-1

    linkurl = links[i].getAttribute('href');

    if(window.location.href.indexOf(linkurl) != -1){

      links[i].className = 'here';

      //给每一个链接添加一个here类

    }

  }

}

javascript的一些有用函数记录,不断更新。。。的更多相关文章

  1. PHP,JavaScript,CSS三种HTML内嵌语言的语法,变量,循环,函数记录

    PHP PHP简介: PHP 是服务器端脚本语言. PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器")是一种通用开源脚本语言. PH ...

  2. 《Javascript高级程序设计》阅读记录(三):第五章 上

    这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 这个系列,我会把阅读< ...

  3. 《Javascript高级程序设计》阅读记录(七):第七章

    <Javascript高级程序设计>中,2-7章中已经涵盖了大部分精华内容,所以摘录到博客中,方便随时回忆.本系列基本完成,之后的章节,可能看情况进行摘录. 这个系列以往文字地址: < ...

  4. 《Javascript高级程序设计》阅读记录(六):第六章 下

    这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...

  5. JavaScript的sleep延时函数

    JavaScript没有像Java的sleep延时函数,所以记录JavaScript的sleep延时函数 function sleep(milliSeconds) { var startTime = ...

  6. JavaScript的几种函数的结构形式

    匿名函数,普通函数,变量函数,基于对象的方法 介绍它们的优劣点(性能,执行条件,可维护性,适合大型还是小型) Javascript有着灵活多变的函数方法,具体选用何种形式,都会极大地影响应用程序的编写 ...

  7. 黄聪:mysql 存在该记录则更新,不存在则插入记录的sql

    一条mysql教程 存在该记录则更新,不存在则插入记录的sql , ‘yourname') ON DUPLICATE KEY UPDATE auto_name='yourname' ON DUPLIC ...

  8. javascript世界一等公民—函数

    简介 在很多传统语言(C/C++/Java/C#等)中,函数都是作为一个二等公民存在,你只能用语言的关键字声明一个函数然后调用它,如果需要把函数作为参数传给另一个函数,或是赋值给一个本地变量,又或是作 ...

  9. (转载)mysql 存在该记录则更新,不存在则插入记录的sql

    (转载)http://www.codesky.net/article/201003/105754.html 代码如下: INSERT table (auto_id, auto_name) values ...

随机推荐

  1. 生产者和消费者之间的线程通讯wait()

    生产者与消费者,采用notify()唤醒 package com.dwz.concurrency.chapter9; /** * 生产者和消费者之间的通信问题 * 执行wait()之后锁被释放 */ ...

  2. LG5283 异或粽子

    题意 共有\(n\)个数,选择\(k\)个不同的\([l,r]\)区间,使得它们的异或和最大 $ 1 \leq n \leq 5 \times 10^5,k \leq 2 \times 10^5$ 思 ...

  3. idea2018.3.2版本如何破解

    IntelliJ IDEA2018破解教程(2019.1.11更新)破解方法:下载破解补丁→修改配置文件→输入激活码→激活成功 由于JetBrains封杀,大部分激活服务器已经不能使用,使用下面的比较 ...

  4. 预处理、const、static与sizeof-static全局变量与普通的全局变量有什么区别

    1:全局变量的说明之前再加上static就构成了静态的全局变量.全局变量本身就是静态存储方式,静态全局变量当然也是静态存储方式.这两者在存储方式上并无不同.这两者的区别在于,非静态全局变量的作用域是整 ...

  5. OUC_Summer Training_ DIV2_#2之解题策略 715

    这是第一天的CF,是的,我拖到了现在.恩忽视掉这个细节,其实这一篇只有一道题,因为这次一共做了3道题,只对了一道就是这一道,还有一道理解了的就是第一篇博客丑数那道,还有一道因为英语实在太拙计理解错了题 ...

  6. Python——私有化 和 属性property

    Python——私有化 和 属性property 一.私有化 xx: 公有变量 _x: 单前置下划线,私有化属性或方法,from somemodule import *禁止导入,类对象和子类可以访问 ...

  7. python小白之list使用笔记

     List常见用法 list拆分 I=array([4.,2.]) print(I[:,newaxis])#将原本在一个列表里的两个数拆为两个不同列表里 list合并 法一 运算符重载 num=[1, ...

  8. smarty section 循环不同的四个样式

    <div class="moban_spzs"> <{section name=goodslist loop=$strdata6}> <{if $sm ...

  9. Eclipse中给SVN添加项目

    SVN添加项目, 1.在svn资源库中的目标路径上右键,新建一个远程文件夹,文件夹名称和项目名称一致即可. 2,在新建的远程目录上右键,选导入,导入我们要放到svn的本地项目. 3.导入时选中项目的名 ...

  10. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-8.用户模块开发之保存微信用户信息

    笔记 8.用户模块开发之保存微信用户信息     简介:开发User数据访问层,保存微信用户信息 问题:             微信回调 用户昵称乱码             解决:        ...