欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Web前端—— JQuery迷你版实现以及使用

程序员文章站 2023-01-01 13:19:37
JQuery迷你版实现以及使用 tiny_jquery.js html文件需要引用上面的js文件 `` ......

jquery迷你版实现以及使用

tiny_jquery.js

var $ = function (selector) {
    var ele = document.queryselector(selector);
    
    //返回当前元素的内容
    ele.val = function () {
        return ele.value;
    }

    //传入css样式，更改元素的样式
    ele.css = function (css) {
        if (typeof css === 'object') {
            var str = '';
            for(var k in css){ // {color: 'red', border: '1px solid blue'}
                str =str.concat(k, ':', css[k], ';') 
            }
            ele.style = str;
        }
    }
    ele.html = (html) => {
        var str = ele.innerhtml;
        ele.innerhtml = str + html;
    }
    return ele;//返回当前元素
}

html文件需要引用上面的js文件

<script src="tiny_jquery.js"></script>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>迷你jquery</title>
    <script src="tiny_jquery.js"></script>
    <script>
    function test() {
        //调用jquery的方法
        var username = $('#username').val();
        console.log(username);

        $('#username').css({color: 'red', border: '1px solid blue',background: 'pink'});

        $('.mydiv').html('<p>新加入的内容</p>');
    }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="stars-one" >
    <br><br>
    <div class="mydiv">原来的内容，</div>
    <button type="button" onclick="test()">点击添加新内容</button>
</body>
</html>

上一篇： 樱桃新品种，你吃过几种

下一篇： Vue学习之监听methods、watch及computed比较小结（十一）

推荐阅读