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";

    }

     

  • 相关阅读:
    v-distpicker 一个好用的三级联动的插件
    截取url参数
    position: relative 和 position: absoution 的详解
    自己封装一个下拉列表
    临界区访问的两个类:临界区类,共享临界区类——多平台版本
    临界区访问的两个类:临界区类,共享临界区类
    beyond compare 4.2.9桌面右键集成的问题修复
    递归创建、删除目录的几个函数
    读取资源中的GIF文件相应像素宽高度
    在关于对话框中,自动获取当前程序的版本,以显示
  • 原文地址:https://www.cnblogs.com/BaoWeiHome/p/7264191.html
Copyright © 2011-2022 走看看