找回密码
当前位置：前端开发者 > jQuery > 正文

jQuery中的$(obj)

2018-07-24 分类：jQuery 阅读(866) 评论(0)

青岛前端开发招聘|前端与移动开发 传智播客视频|jq 前端组件化开发框架
html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
    <title>index.html</title>
    <meta name=”description” content=””>
    <meta name=”keywords” content=””>
    <link href=”” rel=”stylesheet”>
</head>
<body>
    <div id=”box”>aaaa</div>
    <div class=”box”>bbbbb</div>
    <a href=”#” id=”alink”>console</a>
    <!– <script type=”text/javascript” src=”jquery-1.11.1.min.js”></script>
–>
    <script type=”text/javascript”>
        function $(obj) {
            return new Ray(obj);
        };
        function Ray(obj) {
            this.elements = [];
            if (obj.match(/^\./)) {
                var tar = obj.split(‘.’);
                if (document.getElementsByClassName) {
                    var arr = document.getElementsByClassName(tar[1]);
                    this.elements.push(arr);
                } else {
                    this.elements.push(getClass(tar[1]))
                }
            } else if (obj.match(/^\#/)) {
                var tar = obj.split(‘#’);
                this.elements.push(document.getElementById(tar[1]));
            } else {
                var arr = document.getElementsByTagName(obj);
                this.elements.push(arr);
            }
            return this;
        }
        function getClass(obj) {
            var arr = [];
            var all = document.getElementsByTagName(“*”);
            for (var i = 0; i < all.length; i++) {
                if (all[i].className == obj) {
                    arr.push(all[i])
                }
            }
            return arr;
        }
        Ray.prototype = {
            constructor: ‘Ray’,
            addClass: function (className) {
                for (var i = 0; i < this.elements.length; i++) {
                    if (!this.elements[i].className.match(new RegExp(‘(\\s|^)’ + className + ‘(\\s|$)’))) {
                        if (!this.elements[i].className) {
                            this.elements[i].className = className;
                        } else {
                            this.elements[i].className += ‘ ‘ + className;
                        }
                    }
                }
                return this;
            },
            css: function (attr, value) {
                for (var i = 0; i < this.elements.length; i++) {
                    //如果css()传进来的只有一个参数，那么就是获取css,如果是两个参数，那就是设置css
/*
if(arguments.length==1){
return this.elements[i].style[attr]
}//不兼容
*/
                    if (arguments.length == 1) {
                        if (typeof window.getComputedStyle != ‘undefined’) {//W3C…
                            return window.getComputedStyle(this.elements[i], null)[attr];
                        } else if (typeof this.elements[i].currentStyle != ‘undefined’) {//IE…
                            return this.elements[i].currentStyle[attr];
                        }
                    } else {
                        this.elements[i].style[attr] = value;
                    }
                }
                return this;
            }
        }
        $(‘#box’).addClass(‘addClass’).addClass(‘bbb’).addClass(‘ccc’);
        $(‘#box’).css(‘color’, ‘green’);
        $(‘#box’).css(‘font-size’, ’50px’);
        console.log($(‘.alink’))
    </script>
</body>
</html>

前端混合app开发框架|手机web前端开发框架|对前端开发的框架

赞(0)
前端开发者 » jQuery中的$(obj)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论