一:在页面上增加类和删除类的方法:
增加类:传两个参数 节点和类名 方法如下:
- function addClass(obj,className){
-
obj.className+=" " +className;
-
return obj;
- }
删除类 也是传两个参数 节点和类名 然后获取该节点的所有类名并且用正则表达式 用空格把他们隔开 然后一个for循环 判断当前的任何一个类名 是不是和我当前的传的参数类名 是不是相同 如果是相同的话 就删掉 最后返回该对象!代码如下:
- function delClass(obj,className){
-
var s = obj.className.split(/\s+/);
-
for(var i=0;i<s.length;i++){
-
if(s[i]==className){
-
delete s[i];
- }
- }
-
obj.className = s.join(" ");
-
return obj;
- }
二:简单的用try{}catch(e){}语句写个收藏夹:
代码如下:
- <a href="javascript:void(0)" onclick="addFav()">aaaaa</a>
-
<script>
- //把相应网址添加到收藏夹里面去
- //IE的方式是:window.external.addFavorite(sUrl,sTitle);
- //火狐的方式是:window.sidebar.addPanel(sTitle,sUrl,"");
- //IE和火狐分别实现了自己的添加到收藏夹的方式 其中address是页面的网址 name是页面的标题
- //可以写个简单的函数来判断
-
-
- function addFav(){
- try{
- window.sidebar.addPanel("百度","http://www.baidu.com",""); //火狐的
- }catch(e){
- try{
- window.external.addFavorite("http://www.baidu.com","百度"); //IE的
- }catch(e){
- }
- }
- }
-
</script>
三 跨游览器事件:
- function addEvent(obj,evt,fn,userCape){
-
if(obj.addEventListener){
-
obj.addEventListener(evt,fn,false);
-
}else{
-
obj.attachEvent("on"+evt,function(){
- fn.call(obj);
- });
- }
- }
-
function delEvent(obj,evt,fn,userCape){
-
if(obj.removeEventListener){
-
obj.removeEventListener(evt,fn,false);
-
}else{
-
obj.detachEvent("on"+evt,fn);
- }
- }
-
function fixEvt(evt){
- evt = evt || window.event;
-
if(!evt.target){
- evt.target = evt.srcElement;
- evt.layerX = evt.offsetX;
- evt.layerY = evt.offsetY;
-
evt.stopPropagation = function(){
-
this.cancelBubble = true;
- }
- }
-
return evt;
- }
- </script>
特别注意上面的attachEvent这个方法 千万不要写成这样的 attachEvent(obj,"on"+evt,fn),如果写成这样的话 那么函数fn(如果你用this的话 那么函数内的this就指向与window)所以这也是个IEbug 因为我们是想要该函数this指向与当前实例化对象 所以我们要改成这样的方式:attachEvent(obj,"on"+evt,function(){fn.call(obj)});用当前的函数调用该对象 那么该函数的指针就指向与该对象!这个地方要注意点!虽然改了后 this也是指向与对象的!但是用这个函数也要注意一个地方 如果用attachEvent(obj,"on"+evt,function(){fn.call(obj)}); 这个方法在IE下 注册三个同样的函数 三个同样的事件的话 那么在IE下 你点击一下元素的话 他们会同时触发三个事件 而在火狐下只会触发一个事件 所以用这个函数在IE下 也并不是说没有bug 但是用这个函数注册事件的话 一般情况下是没有什么问题的 但是这个也是我们要注意的地方!如果要修改下这个bug话 也并不是说不能改 只是要写个更复杂的函数来判断下 就是在页面上判断当前函数及事件是不是在页面上已经注册了 如果注册了 那么我们就返回!但是这个函数比较复杂 所以也没有去研究!不过用上面的那种方式一般情况下足够了!
四:滚动的文字:
在有的网站上我们经常看到title有文字滚动的效果:其实这个用js来实现也是一件非常简单的事情!其实这个和在页面上实现滚动是一样的道理 首先我们用document.title就可以获取该对象内容 接着我们只做两件事情 第一用字符串分开 第二把第一个文字放到最后去
代码如下:
- <button id="oStart">开始</button>
-
<button id="oEnd">结束</button>
- <!-- <script>
-
function $(id){
-
return document.getElementById(id);
- }
-
var start = $("oStart"),
-
end = $("oEnd");
-
var flag;
-
addEvent(start,'click',scroll);
-
addEvent(end,'click',stop);
-
function scroll(){
-
flag = true;
-
var s = document.title.split("");
-
setInterval(function(){
-
if(flag){
- s.push(s.shift());
-
document.title = s.join("");
- }
- },300);
-
this.disabled = true;
-
end.disabled = false;
- }
-
-
function stop(){
-
flag = false;
-
start.disabled = false;
-
this.disabled = true;
- }
-
-
function addEvent(obj,evt,fn,userCape){
-
if(obj.addEventListener){
-
obj.addEventListener(evt,fn,false);
-
}else{
-
obj.attachEvent("on" + evt,function(){
- fn.call(obj);
- })
- }
- }
- </script> -->
上面代码 在页面上给了两个按钮 当我点击开始时候 文字就开始滚动 当点击结束时候 文字就停止滚动!然后点击后 在相应的按钮上设置成不可点击状态!上面的函数用了一个变量flag 判断如果是true的话 用setInterval执行这个函数 但是用flag有个bug 就是不能清除游览器的缓存 就是当我点击停止按钮后 再点击开始时候 文字会滚动的很快!这样的效果并不是我们想要的!
所以我们可以接着继续写代码:
- function $(id){
- return document.getElementById(id);
- }
-
var start = $("oStart"),
-
end = $("oEnd");
- var t;
- addEvent(start,'click',scroll);
- addEvent(end,'click',stop);
- function scroll(){
-
var s = document.title.split("");
- clearInterval(t);
-
t = setInterval(function(){
- s.push(s.shift());
-
document.title = s.join("");
- },300);
- }
-
- function stop(){
- clearInterval(t); //用这种方式就可以清除缓存 但是还存在另一个问题 就是说假如我点击多次开始按钮时候 它还会执行上面的代码setInterval这段代码
- // 而现在我执行结束按钮时候 结束不掉 !所以我们要做他们执行setIvterval之前要clearInterval清除一次
- }
-
- function addEvent(obj,evt,fn,userCape){
- if(obj.addEventListener){
- obj.addEventListener(evt,fn,false);
- }else{
- obj.attachEvent("on" + evt,function(){
- fn.call(obj);
- })
- }
- }
-
</script>
代码如上所示!
下面我们就在文档中写个简单的文字滚动 当然是用面向对象的方式来写个函数 代码如下:
-
-
<p id="op">aaaaaa</p>
-
<script>
- function $(id){
- return document.getElementById(id);
- }
-
obj = $("op");
-
var oStart = $("oStart");
-
var oEnd = $("oEnd");
- function addEvent(obj,evt,fn,userCape){
- if(obj.addEventListener){
- obj.addEventListener(evt,fn,false);
- }else{
- obj.attachEvent("on" + evt,function(){
- fn.call(obj);
- })
- }
- }
- var test;
- /* function scrollText(text,fn,t){
-
test = text.split("");
- setInterval(function(){
- test.push(test.shift());
- fn(test.join(""));
- },t)
- } */ //这种方式可以 但是如果我想要和上面一样 能有控制按钮 那么我们现在可以使用下面面向对象方法来解决
- function ScrollText(s,fn,t){
-
this.s = s.split("");
-
this.fn = fn;
-
tthis.t = t || 500;
- }
-
ScrollText.prototype = {
- start : function(){
- clearInterval(this.interval);
-
var s = this.s,fn = this.fn;
-
this.interval = setInterval(function(){
- s.push(s.shift());
- fn(s.join(""));
- },this.t);
- },
- stop : function(){
- clearInterval(this.interval);
- }
- }
-
var sss = new ScrollText("要滚动的文字",function(g){
-
obj.innerHTML = g;
- },1000);
-
oStart.onclick = function(){
- sss.start();
- };
-
oEnd.onclick = function(){
- sss.stop()
- };
上面就是用了个简单的面向对象的方式写了个简单的函数!
五:获取类名封装(getElementsByClassName)
在用js时候 我们经常要用到获取类名的方法!但是我们原审js是没有这个方法的 当然不用js框架情况下 那么我们可以简单的用函数封装一个!但是封装这个函数之前 我们要考虑先写个简单的函数 就是hasClass()这个方法 这个方法就是判断当前的页面有没有这个类 这个方法也是为获取类名做好准备的 首先我们肯定要判断当前的页面有没有这个类名 如果有的话 我就获取它!下面是hasClass()方法
-
-
function hasClass(node,className){
-
var names = node.className.split(/\s+/);
-
-
for(var i=0;i<names.length;i++){
-
if(names[i]==className)
-
return true;
- }
-
return false;
- }
下面是获取类名的代码:
- function getElementsByClassName(className,context){
- context = context || document;
-
if(context.getElementsByClassName){
-
return context.getElementsByClassName(className);
- }
-
var nodes = context.getElementsByTagName("*"),ret=[];
-
for(var i=0;i<nodes.length;i++){
-
if(hasClass(nodes[i],className)) ret.push(nodes[i]);
- }
-
return ret;
- }
获取类名的代码 和我那个相比简单很多 只是传了两个参数 一个是类名 还有一个当前的上下文!默认情况下文档document !代码也比较简洁!
下面是所有代码一起贴上来吧!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>无标题文档</title>
-
<style>
- #oDiv{ width:200px; height:200px; background:#900; position:relative; top:150px; left:150px;}
-
</style>
-
</head>
-
-
<body>
-
<div class="oDiv">
-
<p><a>aaa</a></p>
-
<div></div>
-
</div>
-
-
<script>
- function getElementsByClassName(className,context){
-
contextcontext = context || document;
- if(context.getElementsByClassName){
- return context.getElementsByClassName(className);
- }
-
var nodes = context.getElementsByTagName("*"),ret=[];//获取页面上的所有节点
-
for(var i=0;i<nodes.length;i++){ //遍历所有的节点
- if(hasClass(nodes[i],className)) ret.push(nodes[i]);
- }
- return ret;
- }
-
- //检查有没有类
- function hasClass(node,className){
-
var names = node.className.split(/\s+/);//正则表达式所有的类名用空格分开
- //遍历这个类名
-
for(var i=0;i<names.length;i++){
- if(names[i]==className)
- return true;
- }
- return false;
- }
-
- //获取元素的第一个子节点 js本来是有获取第一个子节点的方法 但是获取时候会把空白 其他字符也当作节点 此函数就是为了解决这样的方法
- function firstNode(node){
- if(node.firstChild){
-
if(node.firstChild.nodeType==1){
- return node.firstChild;
- }else{
-
var n = node.firstChild;
- while(n.nextSibling){
-
if(n.nextSibling.nodeType==1) return n.nextSibling;
-
nn = n.nextSibling;
- }
- return null;
- }
- return null;
- }
- }
-
- function next(node){ //返回node的下一个兄弟元素
- if(node.nextSibling){
-
if(node.nextSibling.nodeType==1){
- return node.nextSibling;
- }else{
-
var n = node.nextSibling;
- while(n.nextSibling){
-
if(n.nextSibling.nodeType==1) return n.nextSibling;
-
nn = n.nextSibling;
- }
- return null;
- }
- return null;
- }
- }
-
</script>
-
<script>
-
var ss = getElementsByClassName("oDiv")[0];
-
var kk = ss.childNodes;
-
var h = firstNode(ss);
- alert(h.tagName)
-
</script>
-
</body>
-
</html>
javascript判断浏览器是不是IE6
- if(window.XMLHttpRequest){
- if(!window.ActiveXObject){
- alert('Mozilla, Safari');
- }else{
- alert('IE7');
- }
- }else {
- alert('IE6');
- }
本文转自 涂根华 51CTO博客,原文链接:http://blog.51cto.com/tugenhua/750833,如需转载请自行联系原作者