共计 7563 个字符,预计需要花费 19 分钟才能阅读完成。
一:在页面上减少类和删除类的办法:
减少类:传两个参数 节点和类名 办法如下:
- 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
- <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){// IE 下
- 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; // 用 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>
代码如上所示!
上面咱们就在文档中写个简略的文字滚动 当然是用面向对象的形式来写个函数 代码如下:
- <!– 下面实现题目文字滚动没有多大意思 上面实现段落或者 div 中的文字滚动 –>
- <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>
- </style>
- </head>
- <body>
- <div class=”oDiv”>
- <p>aaa</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){//Mozilla, Safari, IE7
- if(!window.ActiveXObject){// Mozilla, Safari,
- alert(‘Mozilla, Safari’);
- }else{
- alert(‘IE7’);
- }
- }else {
- alert(‘IE6’);
- }