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代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法 ...
随机推荐
- C#图片处理,缩略图制作
准备参数:图片文件流.文件名 方法:1.先将图片流通过System.Drawing.Image.FromStream方法转成图片对象 2.通过图片对象.GetThumbnailImage方法生成自定义 ...
- 【转】Lucene工作原理——反向索引
原文链接: http://my.oschina.net/wangfree/blog/77045 倒排索引 倒排索引(反向索引) 倒排索引源于实际应用中需要根据属性的值来查找记录.这种索引表中的每一项 ...
- jzoj5906
我們首先發現,每一條邊都至少走1次,因為我們必須走到每一個節點按按鈕 如果我們不走一個節點,說明這個節點已經有傳送門了,但是必須走到這個節點開傳送門,矛盾 然後我們發現,每一條邊至多經過2次 如果我們 ...
- sublime text 另一种对齐
效果如下: http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/extensibility/plugins.h ...
- php 删除二维数组中某个key值
/** * 根据key删除数组中指定元素 * @param array $arr 数组 * @param string/int $key 键(key) * @return array */ priva ...
- Flask从入门到精通之自定义错误界面
如果你在浏览器的地址栏中输入了不可用的路由,那么会显示一个状态码为404 的错误页面.现在这个错误页面太简陋.平庸,而且样式和使用了Bootstrap 的页面不一致. 像常规路由一样,Flask 允许 ...
- Python爬虫之关于登录那些事
常见的登录方式有以下两种: 查看登录页面,csrf,cookie;授权:cookie 直接发送post请求,获取cookie 上面只是简单的描述,下面是详细的针对两种登录方式的时候爬虫的处理方法 第一 ...
- 【GDKOI2017】小队任务 莫比乌斯反演+杜教筛
题目大意:给你n,求$\sum_{i=1}^{n}\sum_{j=i}^{n}[gcd(i,j)=1](i+1)(j+1)$ 子任务一:暴力 子任务二:$T=50000,n≤10^7$ 子任务三:$T ...
- (转) Linux(Centos7)yum安装最新mysql
原文:http://blog.csdn.net/gebitan505/article/details/54613549 环境 CentOS 7.1 (64-bit system) MySQL 5.6. ...
- 摘要:ASP.NET的路由
原文:ASP.NET的路由系统:路由映射 对物理存在文件的路由 在成功注册路由的情况下,如果我们按照传统的方式访问一个物理文件(比如http://localhost:2738/Default.aspx ...