正在加载中

最后更新于 2018年11月13日

通过html()来获取对应的元素里的html内容,从上一篇文章继续,我们还是使用连缀的方式:

html部分

<div id="box" style="color:red;">id</div>
<input type="radio" name="sex" value="男" />
<div id="aaa">
    <p class="das">标签</p>
    <p class="das">标签</p>
    <p class="das">标签</p>
    <p class="das">标签</p>
</div>
<div id="bbb">
    <p class="das">标签</p>
    <p class="das">标签</p>
    <p class="das">标签</p>
    <p class="das">标签</p>
</div>

js调用部分:

$().getId('box').html();  //获取id为box的元素里面html内容

js封装库:

    var $ = function() {
        return new Base();
    }
    function Base() {
        this.arr = [];
        this.getId = function(id) {
            this.arr.push(document.getElementById(id));
            return this;
        }
        this.getTagName = function(tag) {
            var tags = document.getElementsByTagName(tag);
            for(var i = 0;i<tags.length;i++){
                this.arr.push(tags[i]);
            }
            return this;
        }    
    }
    Base.prototype.html = function(str) {
        for(var i = 0;i<this.arr.length;i++){
            if(arguments.length == 0){          //因为每个对应的元素都要做获取到,所以我们直接写在for语句中判断
                return this.arr[i].innerHTML;
            }
            this.arr[i].innerHTML = str;
        }
        return this;        
    }

注意:

arguments 表示这个函数中传入的参数数组,如果传入了一个参数,那么他的length就是1,没有则是0,于是我们就可以判断我们倒是是要获取还是要修改。

由于你并不知道你要获取的元素是单个的还是多个,索性就直接在for语句中一个个判断,然后一个个return出来。

通过css('color')来获取对应的css:

上一篇的js内容:

    Base.prototype.css = function(attr,value) {
        for(var i = 0;i<this.arr.length;i++){
            this.arr[i].style[attr] = value;
        }
        return this;
    }

一样我们也是使用arguments来判断,也是在for语句中:

    Base.prototype.css = function(attr,value) {
            for(var i = 0;i<this.arr.length;i++){
                if(arguments.length == 1) {
                    if(typeof window.getComputedStyle != 'undefined') {
                        return window.getComputedStyle(this.arr[i],null)[attr];
                    }else if(typeof this.arr[i].currentStyle != 'undefined') {
                        return this.arr[i].currentStyle[attr];
                    }
                    
                }
                this.arr[i].style[attr] = value;
            }
            return this;
    }

我们是要获取css内容,所以this.arr[i].style[attr]是不能满足需要的,这个只能获取到行内的css,外联和内联的css无法获取,所以我们通过window.getComputedStyle来获取计算后的css,但是由于旧版ie并不支持,所以加上currentStyle 来兼容ie。

通过.getclass('das');class名称来获取元素:

w3c提供了getElementsByClassName方法来获取,但是会有一些兼容问题,所以常见的做法是直接获取到全部的元素节点,然后一个个做判断,直到这个元素的className是一样的,然后我们再将它提取出来(常用数组保存)。

    Base.prototype.getclass = function(className) {
        var elements = document.getElementsByTagName('*');  //获取所有的元素节点
        for(var i = 0;i < elements.length;i++){
           if(elements[i].className == className) {
               this.arr.push(elements[i])
           }
        }
        return this;
    }

拥有相同的class名称的会有多个,指定第几个getElment(x):

我们只需要把指定第几个元素的参数传入函数中,在函数中将对应的元素传入数组即可,由于我们只需要一个,所以在传入之前需要将之前的数组重置。

    Base.prototype.getElemet = function(num) {
        var element = this.arr[num];
        this.arr = [];   //重置
        this.arr[0] = element;
        return this;    
    }

如果我们只需要id为bbb的元素下面class为das的元素更改css:

我们只需要在获取所有元素节点之前加上选择范围,也就是将document.getElementsByTagName('*')中的document改为对应的id节点。

    Base.prototype.getclass = function(className,idName) {
        var node = null;    //创建一个变量
        if(arguments.length == 2) {
            node = document.getElementById(idName);   //如果有第二个值,node则为这个id节点
        }else {
            node = document;        //只有第一个值,返回document
        }
        var elements = node.getElementsByTagName('*');
        for(var i = 0;i<elements.length;i++)  {
            if(elements[i].className == className) {
                this.arr.push(elements[i]);
            }
        }
        return this;
    }
    
    $().getclass('das','bbb').css('background','#999');     //调用
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao