一：在页面上增加类和删除类的方法：
增加类：传两个参数 节点和类名 方法如下：
1. function
2. " "
3. return
4. }删除类 也是传两个参数 节点和类名 然后获取该节点的所有类名并且用正则表达式 用空格把他们隔开 然后一个for循环 判断当前的任何一个类名 是不是和我当前的传的参数类名 是不是相同 如果是相同的话 就删掉 最后返回该对象！代码如下：
1. function
2. var s = obj.className.split(/\s+/);//正则把类名分开
3. for(var
4. if(s[i]==className){
5. delete
6. }
7. }
8. " ");
9. return
10. }二：简单的用try{}catch(e){}语句写个收藏夹：
代码如下：
1. <a href="javascript:void(0)" onclick="addFav()">aaaaa</a>
2. <script>
3. //把相应网址添加到收藏夹里面去
4. //IE的方式是：window.external.addFavorite(sUrl,sTitle);
5. //火狐的方式是:window.sidebar.addPanel(sTitle,sUrl,"");
6. //IE和火狐分别实现了自己的添加到收藏夹的方式 其中address是页面的网址 name是页面的标题
7. //可以写个简单的函数来判断
8.
9.
10. function addFav(){
11. try{
12. window.sidebar.addPanel("百度","http://www.baidu.com",""); //火狐的
13. }catch(e){
14. try{
15. window.external.addFavorite("http://www.baidu.com","百度"); //IE的
16. }catch(e){
17. }
18. }
19. }
20. </script>三 跨游览器事件：
1. function
2. if(obj.addEventListener){
3. false);
4. else{
5. "on"+evt,function(){
6. fn.call(obj);
7. });
8. }
9. }
10. function
11. if(obj.removeEventListener){
12. false);
13. else{
14. "on"+evt,fn);
15. }
16. }
17. function
18. evt = evt || window.event;
19. if(!evt.target){ // IE下
20. evt.target = evt.srcElement;
21. evt.layerX = evt.offsetX;
22. evt.layerY = evt.offsetY;
23. function(){
24. this.cancelBubble = true;
25. }
26. }
27. return
28. }
29. </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就可以获取该对象内容 接着我们只做两件事情 第一用字符串分开 第二把第一个文字放到最后去
代码如下：
1. <button id="oStart">开始</button>
2. "oEnd">结束</button>
3. <!-- <script>
4. function
5. return
6. }
7. var start = $("oStart"),
8. "oEnd");
9. var flag; //用flag有个问题 就是不能清除缓存 当我点击停止时候 等一段时间后 再点击开始 文字会滚动的很快
10. 'click',scroll);
11. 'click',stop);
12. function
13. true;
14. var s = document.title.split("");
15. function(){
16. if(flag){
17. s.push(s.shift());
18. "");
19. }
20. },300);
21. this.disabled = true; //点击后 让按钮成为不可以点击的状态
22. false; //让结束按钮成为可以点击的状态
23. }
24.
25. function
26. false;
27. false;
28. this.disabled = true;
29. }
30.
31. function
32. if(obj.addEventListener){
33. false);
34. else{
35. "on" + evt,function(){
36. fn.call(obj);
37. })
38. }
39. }
40. </script> -->上面代码 在页面上给了两个按钮 当我点击开始时候 文字就开始滚动 当点击结束时候 文字就停止滚动！然后点击后 在相应的按钮上设置成不可点击状态！上面的函数用了一个变量flag 判断如果是true的话 用setInterval执行这个函数 但是用flag有个bug 就是不能清除游览器的缓存 就是当我点击停止按钮后 再点击开始时候 文字会滚动的很快！这样的效果并不是我们想要的！
所以我们可以接着继续写代码：
1. function $(id){
2. return document.getElementById(id);
3. }
4. start
5. end
6. var t;
7. addEvent(start,'click',scroll);
8. addEvent(end,'click',stop);
9. function scroll(){
10. s = document.title.split("");
11. clearInterval(t);
12. t = setInterval(function(){
13. s.push(s.shift());
14. document.title = s.join("");
15. },300);
16. }
17.
18. function stop(){
19. clearInterval(t); //用这种方式就可以清除缓存 但是还存在另一个问题 就是说假如我点击多次开始按钮时候 它还会执行上面的代码setInterval这段代码
20. // 而现在我执行结束按钮时候 结束不掉 ！所以我们要做他们执行setIvterval之前要clearInterval清除一次
21. }
22.
23. function addEvent(obj,evt,fn,userCape){
24. if(obj.addEventListener){
25. obj.addEventListener(evt,fn,false);
26. }else{
27. obj.attachEvent("on" + evt,function(){
28. fn.call(obj);
29. })
30. }
31. }
32. </script>代码如上所示！
下面我们就在文档中写个简单的文字滚动 当然是用面向对象的方式来写个函数 代码如下：
1. <!-- 上面实现标题文字滚动没有多大意思 下面实现段落或者div中的文字滚动-->
2. <p id="op">aaaaaa</p>
3. <script>
4. function $(id){
5. return document.getElementById(id);
6. }
7. obj
8. oStart
9. oEnd
10. function addEvent(obj,evt,fn,userCape){
11. if(obj.addEventListener){
12. obj.addEventListener(evt,fn,false);
13. }else{
14. obj.attachEvent("on" + evt,function(){
15. fn.call(obj);
16. })
17. }
18. }
19. var test;
20. /* function scrollText(text,fn,t){
21. test = text.split("");
22. setInterval(function(){
23. test.push(test.shift());
24. fn(test.join(""));
25. },t)
26. } */ //这种方式可以 但是如果我想要和上面一样 能有控制按钮 那么我们现在可以使用下面面向对象方法来解决
27. function ScrollText(s,fn,t){
28. this.s
29. this.fn
30. tthis.t
31. }
32. ScrollText.prototype
33. start : function(){
34. clearInterval(this.interval);
35. s = this.s,fn = this.fn;
36. this.interval = setInterval(function(){
37. s.push(s.shift());
38. fn(s.join(""));
39. },this.t);
40. },
41. stop : function(){
42. clearInterval(this.interval);
43. }
44. }
45. sss = new
46. obj.innerHTML = g;
47. },1000);
48. oStart.onclick = function(){
49. sss.start();
50. };
51. oEnd.onclick = function(){
52. sss.stop()
53. };上面就是用了个简单的面向对象的方式写了个简单的函数！
五：获取类名封装(getElementsByClassName)
在用js时候 我们经常要用到获取类名的方法！但是我们原审js是没有这个方法的 当然不用js框架情况下 那么我们可以简单的用函数封装一个！但是封装这个函数之前 我们要考虑先写个简单的函数 就是hasClass()这个方法 这个方法就是判断当前的页面有没有这个类 这个方法也是为获取类名做好准备的 首先我们肯定要判断当前的页面有没有这个类名 如果有的话 我就获取它！下面是hasClass()方法
1. //检查有没有类
2. function
3. var names = node.className.split(/\s+/);//正则表达式所有的类名用空格分开
4. //遍历这个类名
5. for(var
6. if(names[i]==className)
7. return true;
8. }
9. return false;
10. }下面是获取类名的代码：
1. function
2. context = context || document;
3. if(context.getElementsByClassName){
4. return
5. }
6. var nodes = context.getElementsByTagName("*"),ret=[];//获取页面上的所有节点
7. for(var i=0;i<nodes.length;i++){ //遍历所有的节点
8. if(hasClass(nodes[i],className)) ret.push(nodes[i]);
9. }
10. return
11. }获取类名的代码 和我那个相比简单很多 只是传了两个参数 一个是类名 还有一个当前的上下文！默认情况下文档document ！代码也比较简洁！
下面是所有代码一起贴上来吧！
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>无标题文档</title>
6. <style>
7. #oDiv{ width:200px; height:200px; background:#900; position:relative; top:150px; left:150px;}
8. </style>
9. </head>
10.
11. <body>
12. <div class="oDiv">
13. <p><a>aaa</a></p>
14. <div></div>
15. </div>
16.
17. <script>
18. function getElementsByClassName(className,context){
19. contextcontext
20. if(context.getElementsByClassName){
21. return context.getElementsByClassName(className);
22. }
23. nodes = context.getElementsByTagName("*"),ret=[];//获取页面上的所有节点
24. i=0;i<nodes.length;i++){ //遍历所有的节点
25. if(hasClass(nodes[i],className)) ret.push(nodes[i]);
26. }
27. return ret;
28. }
29.
30. //检查有没有类
31. function hasClass(node,className){
32. names = node.className.split(/\s+/);//正则表达式所有的类名用空格分开
33. //遍历这个类名
34. i=0;i<names.length;i++){
35. if(names[i]==className)
36. return true;
37. }
38. return false;
39. }
40.
41. //获取元素的第一个子节点 js本来是有获取第一个子节点的方法 但是获取时候会把空白 其他字符也当作节点 此函数就是为了解决这样的方法
42. function firstNode(node){
43. if(node.firstChild){
44. node.firstChild.nodeType==1){
45. return node.firstChild;
46. }else{
47. n = node.firstChild;
48. while(n.nextSibling){
49. n.nextSibling.nodeType==1) return n.nextSibling;
50. nn
51. }
52. return null;
53. }
54. return null;
55. }
56. }
57.
58. function next(node){ //返回node的下一个兄弟元素
59. if(node.nextSibling){
60. node.nextSibling.nodeType==1){
61. return node.nextSibling;
62. }else{
63. n = node.nextSibling;
64. while(n.nextSibling){
65. n.nextSibling.nodeType==1) return n.nextSibling;
66. nn
67. }
68. return null;
69. }
70. return null;
71. }
72. }
73. </script>
74. <script>
75. ss = getElementsByClassName("oDiv")[0];
76. kk = ss.childNodes;
77. h = firstNode(ss);
78. alert(h.tagName)
79. </script>
80. </body>
81. </html>
javascript判断浏览器是不是IE6
1. if(window.XMLHttpRequest){ //Mozilla, Safari, IE7
2. if(!window.ActiveXObject){ // Mozilla, Safari,
3. 'Mozilla, Safari');
4. else{
5. 'IE7');
6. }
7. else
8. 'IE6');
9. }
转载于:https://blog.51cto.com/tugenhua/750833
