简单封装jq方法

最新推荐文章于 2022-11-24 00:29:41 发布

xiaobai_wu

最新推荐文章于 2022-11-24 00:29:41 发布

阅读量627

点赞数

本文链接：https://blog.csdn.net/xiaobai_wu/article/details/106261738

版权

简单封装jq方法

(function () {
    function _xQuery(select){
        this.nodes=document.querySelectorAll(select);
        if(this.nodes.length){
            for(var i=0;i<this.nodes.length;i++){
                this[i]=this.nodes[i]
            }
        }else{
            this[0]=this.nodes;
        }
    }
    //===================================
    function xQuery(select) {
        //设置样式
        function setStyle(dom,property,value) {
            for(var i=0;i<dom.length;i++){
                dom[i].style[property]=value
            }
        }
        // 获取样式
        function getStyle(dom,property) {
            return window.getComputedStyle(dom,null)[property];
        }
        _xQuery.prototype.css=function () {
            if(arguments.length==2){
                //$("p") .css("属性名"，"属性值")
                setStyle(this.nodes,arguments[0],arguments[1])
            }else if(arguments.length==1){
                if(typeof arguments[0]=="string"){
                    //$("p") .css("属性名")
                    return getStyle(this.nodes[0],arguments[0]);
                }else if(typeof arguments[0]=="object"){
                    //$("p") .css({"属性名"："属性值"，"属性名"："属性值"})
                    for(var key in arguments[0]){
                        setStyle(this.nodes,key,arguments[0][key])
                    }
                    
                }
            }

        };
        //html获取与设置节点内容
        _xQuery.prototype.html=function () {
            if(arguments.length==0){
                //    $("p").html() 获取节点的值
                // console.log("000")
                return this.nodes[0].innerHTML
            }else if(arguments.length>0){
                //    $("p").html("***") 设置节点的值
                // console.log("111")
                for(var i=0;i<this.nodes.length;i++){
                    this.nodes[i].innerHTML=arguments[0]
                }
            }
        };
        //text获取与设置节点内容
        _xQuery.prototype.text=function () {
            if(arguments.length==0){
                //    $("p").html() 获取节点的值
                // console.log("000")
                return this.nodes[0].innerText
            }else if(arguments.length>0){
                //    $("p").html("***") 设置节点的值
                // console.log("111")
                for(var i=0;i<this.nodes.length;i++){
                    this.nodes[i].innerText=arguments[0]
                }
            }
        };
        //val获取与设置节点内容
        _xQuery.prototype.val=function () {
            if(arguments.length==0){
                //    $("p").html() 获取节点的值
                // console.log("000")
                return this.nodes[0].value
            }else if(arguments.length>0){
                //    $("p").html("***") 设置节点的值
                // console.log("111")
                for(var i=0;i<this.nodes.length;i++){
                    this.nodes[i].value=arguments[0]
                }
            }
        };
        return new _xQuery(select);
    }
    xQuery.ajax=function () {

    };
    xQuery.post=function () {

    };
    //函数对象添加方法
    xQuery.extend=function (obj) {
        for(var key in obj){
            xQuery[key]=obj[key]
        }
    };
    //给实例对象添加方法
    xQuery.fn=_xQuery.prototype;
    xQuery.fn.extend=function (obj) {
        for(var key in obj){
            _xQuery.prototype[key]=obj[key]
        }
    };
    window.$ = window.xQuery = xQuery;
})();