javascript的一些有用函数记录,不断更新。。。
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的一些有用函数记录,不断更新。。。的更多相关文章
- PHP,JavaScript,CSS三种HTML内嵌语言的语法,变量,循环,函数记录
PHP PHP简介: PHP 是服务器端脚本语言. PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器")是一种通用开源脚本语言. PH ...
- 《Javascript高级程序设计》阅读记录(三):第五章 上
这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 这个系列,我会把阅读< ...
- 《Javascript高级程序设计》阅读记录(七):第七章
<Javascript高级程序设计>中,2-7章中已经涵盖了大部分精华内容,所以摘录到博客中,方便随时回忆.本系列基本完成,之后的章节,可能看情况进行摘录. 这个系列以往文字地址: < ...
- 《Javascript高级程序设计》阅读记录(六):第六章 下
这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...
- JavaScript的sleep延时函数
JavaScript没有像Java的sleep延时函数,所以记录JavaScript的sleep延时函数 function sleep(milliSeconds) { var startTime = ...
- JavaScript的几种函数的结构形式
匿名函数,普通函数,变量函数,基于对象的方法 介绍它们的优劣点(性能,执行条件,可维护性,适合大型还是小型) Javascript有着灵活多变的函数方法,具体选用何种形式,都会极大地影响应用程序的编写 ...
- 黄聪:mysql 存在该记录则更新,不存在则插入记录的sql
一条mysql教程 存在该记录则更新,不存在则插入记录的sql , ‘yourname') ON DUPLICATE KEY UPDATE auto_name='yourname' ON DUPLIC ...
- javascript世界一等公民—函数
简介 在很多传统语言(C/C++/Java/C#等)中,函数都是作为一个二等公民存在,你只能用语言的关键字声明一个函数然后调用它,如果需要把函数作为参数传给另一个函数,或是赋值给一个本地变量,又或是作 ...
- (转载)mysql 存在该记录则更新,不存在则插入记录的sql
(转载)http://www.codesky.net/article/201003/105754.html 代码如下: INSERT table (auto_id, auto_name) values ...
随机推荐
- Wox使用指南
下载安装 从下载地址下载最新版本的 wox ,我下载的是 exe 版的 Wox-1.3.578.exe 下载以后直接安装即可,不会有选择项,安装成功以后会在屏幕上出现一个搜索框,默认失去焦点以后搜索框 ...
- Java多线程之ThreadPoolExecutor详解使用
1.概述 我将讲解JAVA原生线程池的基本使用,并由此延伸出JAVA中和线程管理相关的类结构体系,然后我们详细描述JAVA原生线程池的结构和工作方式 2.为什么要使用线程池 前文我们已经讲到,线程是一 ...
- 解决vue中使用laydate.js选择日期后再修改其他model时日期会被清空问题
首先描述一下问题,下图中均绑定v-model,例如先选择出生开始时间,然后当再选择地区或其他选项时该时间就会被清空 首先看一下我这边开始的默认值,开始我设置都为空 当我选择如下图的生日开始时间与结束时 ...
- OGG ERRORS 总结
OGG ERRORS 总结 */--> OGG ERRORS 总结 Table of Contents 1. libnnz11.so 2. 00446 2.1. missing filename ...
- input 表单
1:datalist元素,一般与input组建配合使用,以定义可能输入的值,例如: <!DOCTYPE html> <html lang="en"> < ...
- 在Android初次的前期学习中的二个小例子(2)
Hello13:SQLite数据库 一.简述SQLite的概念和主要特性 SQLite是一个轻量级的关系型数据库,运算速度快,占用资源少,使用非常方便,支持SQL语法标准和数据库事务原则. 相对于Sh ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_4-03 高级篇幅之Ribbon负载均衡源码分析实战
笔记 3.高级篇幅之Ribbon负载均衡源码分析实战 简介: 讲解ribbon服务间调用负载均衡源码分析 1.完善下单接口 2.分析@LoadBalanced ...
- Centos7.4 下cobbler安装及配置
1.背景介绍 作为运维,在公司经常遇到一些机械性重复工作要做,例如:为新机器装系统,一台两台机器装系统,可以用光盘.U盘等介质安装,1小时也完成了,但是如果有成百台的服务器还要用光盘.U盘去安装,就显 ...
- 【分布式事务】使用atomikos+jta解决分布式事务问题
一.前言 分布式事务,这个问题困惑了小编很久,在3个月之前,就间断性的研究分布式事务.从MQ方面,数据库事务方面,jta方面.近期终于成功了,使用JTA解决了分布式事务问题.先写一下心得,后面的二级提 ...
- java数据结构之LinkedList
一.LinkedList源码注释 //LinkedList源码 jdk版本1.8.0_121 public class LinkedList<E> extends AbstractSequ ...