JavaScript部分兼容性函数
1.getElementsByClassName()
function getElementsByClassName(node,classname){
if(node.getElementsByClassName){
//使用现有方法
return node.getElementsByClassName(classname);
}else{
var results=new Array();
var elems=node.getElementsByTagName("*");
for(var i=0;i<elems.length;i++){
if(elems[i].className.indexOf(classname)!=-1){
results[results.length]=elems[i];
}
}
return results;
}
}
var list1=document.getElementById("linklist");
var test=getElementsByClassName(list1,"test");
console.log(test);
2.共享onload事件
假设我有两个函数,firatFunction,secondFunction,如果想让他们在加载时得到执行,如果把他们注意绑定到onload事件上,他们当中将只有最后那个才会被实际执行:
window.onload=firstFunction;
window.onload=secondFunction;
secondFunction将取代firstFunction,你可能会想,每个事件处理函数只能绑定一条指令。有一种方法可以让我避过这个难题:可以先创建一个匿名函数来容纳这两个函数,然后把那个匿名函数绑定到onload事件上,如下所示:
window.onload=function(){
firstFunction();
secondFunction();
}
它确实能很好的工作--在需要绑定的函数不是很多的场合,这应该是最简单的解决方法,
这里还有一个最佳的解决方法--不管你打算在页面加载完毕时执行多少个函数,它都可以应付自如。
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);
3.在现有元素后插入一个新元素
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
这里注意insertBefore的使用,在目标元素前面插入新元素
parentElement.insertBrfore(newElement,targetElement);
4.寻找下一个元素节点
function getNextElement(node){
if(node.nodeType==1){ //1代表元素节点
return node;
}
if(node.nextSibling){
return getNextElement(node.nextSibling);
}
return null;
}
var header=document.getElementById("header");
var elem=getNextElement(header.nextSibling);
5.追加类名
function addClass(element,value){
if(!element.className){
element.classNmae=value;
}else{
newClassName=element.className;
newClassName+=" ";
newClassName+=value;
element.className=newClassName;
}
}
6.当前页面导航突出显示,并给body添加不同的id
function highlightPage(){
var headers=document.getElementsByTagName("header");
if(headers.length==0) return false;
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<links.length;i++){
linkUrl=links[i].getAttribute("href");
if(window.location.href.indexOf(linkUrl)!=-1){ //获取当前页面链接
links[i].className="here";
var linkText=links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linkText);
}
}
}
7.点击label,表单字段获得焦点
作为增进可访问性的元素,label非常有用,它通过for属性把一小段文本关联到表单的一个字段,对于屏幕阅读器来说,标签中的这一小段文本几乎是不可或缺的。很多浏览器都会为label添加默认行为:如果label中的文本被单击,关联的表单字段就会获得焦点。这对于增进表单的可用性是很有帮助的,然而并不是所有浏览器都实现了该行为。
function focusLabels(){
var labels=document.getElementsByTagName("label");
for(var i=0;i<labels.length;i++){
labels[i].onclick=function(){
var id=this.getAttribute("for");
var element=document.getElementById(id);
element.focus();
}
}
}
8.占位符值
function resetFields(whichform){
//form.elements.length 返回表单包含的表单元素个数
for(var i=0;i<whichform.elements.length;i++){
var element=whichform.elements[i];
if(element.type=="submit") continue;
var check=element.placeholder || element.getAttribute("placeholder");
if(!check) continue;
element.onfocus=function(){
var txt=this.placeholder || this.getAttribute("placeholder");
if(this.value==txt){
this.className="";
this.value="";
}
}
element.onblur=function(){
if(this.value==""){
this.className="placeholder";
this.value=this.placeholder || this.getAttribute("placeholder");
}
}
element.onblur();
}
} addLoadEvent(prepareForms)
function prepareForms(){
for(var i=0;i<document.forms.length;i++){
var thisform=document.forms[i];
resetFields(thisform);
}
}
JavaScript部分兼容性函数的更多相关文章
- 深入理解javascript:揭秘命名函数表达式
这是一篇转自汤姆大叔的文章:http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 前言 网上还没用发现有人对命名函数表达式进去重复深 ...
- JavaScript 事件兼容性写法
1.以下是JavaScript事件兼容性写法,使用者可以随意使用,兼容所有浏览器.包括IE6(亲测) <!DOCTYPE html> <html> <head> & ...
- JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
- 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签
今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...
- JavaScript基础学习-函数及作用域
函数和作用域是JavaScript的重要组成部分,我们在使用JavaScript编写程序的过程中经常要用到这两部分内容,作为初学者,我经常有困惑,借助写此博文来巩固下之前学习的内容. (一)JavaS ...
- JavaScript 基础回顾——函数
在JavaScript中,函数也是一种数据类型,属于 function 类型,所以使用Function关键字标识函数名.函数可以在大括号内编写代码并且被调用,作为其他函数的参数或者对象的属性值. 1. ...
- JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解
二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...
- javascript立即执行函数
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花;当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( ...
- JavaScript 立即执行函数
js中(function(){…})()立即执行函数写法理解 javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法 ...
随机推荐
- Oracle数据库中 to_date()与24小时制表示法及mm分钟的显示
一.在使用Oracle的to_date函数来做日期转换时,时候也许会直接的采用“yyyy-MM-dd HH:mm:ss”的格式作为格式进行转换,但是在Oracle中会引起错误:“ORA 01810 ...
- Angular6 学习笔记——内容投影, ViewChild和ContentChild
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- BitAdminCore框架更新日志20180523
20180523更新内容 本次更新两个内容,一是增加视频处理功能,二是增加定时服务功能. 视频处理 定时服务 BitAdminCore框架,用最少的代码,实现最多的功能 本次新暂未发布,后续有空发布 ...
- c#使用NPOI快速导出到Excel
接上篇博文<C#快速导出到excel>:由于此种方法不能导出成.xlsx格式,为解决此问题,本次分享使用NPOI. 参考:https://www.cnblogs.com/lazyneal/ ...
- [Xamarin]我的Xamarin填坑之旅(一)
一想到明天是星期五,不对,是今天,心里就很激动,毕竟明天没课.激动之余,来写一篇博客,记录一下最近踏坑Xamarin开发校园助手APP的一些事儿.也许更像是一篇流水账. 在扯Xamarin之前,有必要 ...
- Java的动态编译、动态加载、字节码操作
想起来之前做的一个项目:那时候是把需要的源代码通过文件流输出到一个.java文件里,然后调用sun的Comipler接口动态编译成.class文件,然后再用专门写的一个class loader加载这个 ...
- (samba启动失败)smb.service: main process exited, code=exited, status=1/FAILURE
按照指示,前往:journalctl -xe 没什么发现,搜的时候有人说也可以查看 journalctl -r 打出来之后我也看不出什么门道来 又看到有人说 smb 方面可以看看 testparm 我 ...
- IntelliJ IDEA 2016 破解旗舰版
JRebel 授权服务器http://idea.lanyus.com/ilanyulanyu19950316@gmail.com
- javascript数据结构与算法--二叉树(插入节点、生成二叉树)
javascript数据结构与算法-- 插入节点.生成二叉树 二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 /* *二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 * * ...
- 转 ZFC公理系统
http://blog.sina.com.cn/s/blog_5d045b5c0100spld.html 首先,ZFC集合论中的公理大致分为3组: 1.外延公理. 2.子集公理模式.无序对公理.并集公 ...