zoukankan      html  css  js  c++  java
  • 基础DOM操作

    这个部分代码其实参考jquery的一些函数写法,唯一区别就是调用不用,参数一样. 
    比如下面的栗子

    //设置对象内容

    jquery:$('#xxx').html('hello world');

    现在:html(document.getElementById('xxx'),'hello world')

    //获取对象内容

    jquery:$('#xxx').html();

    现在:html(document.getElementById('xxx'))

    4-1检测对象是否有哪个类名

    function hasClass(obj,classStr){

       var arr=obj.className.split(/s+/); //这个正则表达式是因为class可以有多个,判断是否包含

       return (arr.indexOf(classStr)==-1)?false:true;

    },

    4-2添加类名

    function addClass(obj,classStr){

       if (!this.hasClass(obj,classStr)){obj.className += " " + classStr};

    },

    4-3删除类名

    function removeClass(obj,classStr){

       if (this.hasClass(obj,classStr)) {

           var reg = new RegExp('(\s|^)' + classStr + '(\s|$)');

           obj.className = obj.className.replace(reg, '');

       }

    },

    4-4替换类名(“被替换的类名”,”替换的类名”)

    function replaceClass(obj,newName,oldName) {

       removeClass(obj,oldName);

       addClass(obj,newName);

    }

    4-5获取兄弟节点

    function siblings(obj){

       var a=[];//定义一个数组,用来存o的兄弟元素

       var p=obj.previousSibling;

       while(p){//先取o的哥哥们 判断有没有上一个哥哥元素,如果有则往下执行 p表示previousSibling

           if(p.nodeType===1){

           a.push(p);

           }

           p=p.previousSibling//最后把上一个节点赋给p

       }

       a.reverse()//把顺序反转一下 这样元素的顺序就是按先后的了

       var n=obj.nextSibling;//再取o的弟弟

       while(n){//判断有没有下一个弟弟结点 n是nextSibling的意思

           if(n.nodeType===1){

               a.push(n);

           }

           n=n.nextSibling;

       }

       return a;

    },

    4-6设置样式

    function css(obj,json){

       for(var attr in json){

           obj.style[attr]=json[attr];

       }

    }

    4-7设置文本内容

    function html(obj){

       if(arguments.length==0){

           return this.innerHTML;

       }

       else if(arguments.length==1){

           this.innerHTML=arguments[0];

       }

    }

    4-8显示隐藏

    function show(obj){

       obj.style.display="";

    }

    function hide(obj){

       obj.style.display="none";

    }

     

  • 相关阅读:
    ELF BIN HEX[zz]
    电路、信号和PCB设计
    ADHelper中AD属性赋值的修正
    发布一个图片库轮显WebPart
    MOSS的ItemUpdated执行了10次,您碰到了吗?
    InfoPath 保存时自动生成文件名
    最新版WSS3.0 SDK
    自定义MOSS网站的masterpage
    自定义InfoPath数据验证有效性
    (暂时)解决InfoPath一直显示“installing”问题 续
  • 原文地址:https://www.cnblogs.com/BaoWeiHome/p/7264191.html
Copyright © 2011-2022 走看看