模擬實(shí)現(xiàn)JQ中的鏈?zhǔn)骄幊毯褪录?/h2>

simpleJQ.js

實(shí)現(xiàn)的方法 :

  • $('選擇器'):可選值, ID,類,標(biāo)簽,屬性
  • click():$(select).click(function(){ }): 注冊點(diǎn)擊事件
  • css(): $(selector).css({color:'red',background:'pink'}): 設(shè)置樣式
  • show(): $(selector).show(): 顯示元素
  • hide():$(selector).hide(): 隱藏元素
  • html():
    • $(selector).html(content) 設(shè)置標(biāo)簽內(nèi)容
    • $(selector).html(): 獲取標(biāo)簽內(nèi)容; 不可繼續(xù)進(jìn)行鏈?zhǔn)骄幊?/li> 
function $(selector) {
    // 獲取dom元素
    var dom = document.querySelector(selector);
    return {
        0:dom,
        click:function(callback){
            dom.onclick=callback
        },
        css: function () {
            // 說明是key,val
            if (arguments.length == 2) {
                dom.style[arguments[0]] = arguments[1];

            } else if (arguments.length == 1) {  //說明傳遞的是對象格式的屬性{}
                for (var key in arguments[0]) {
                    dom.style[key] = arguments[0][key];
                }
            }
            return this;
        },
        show: function () {
            dom.style.display = 'block';
            return this;
        },
        hide: function () {
            dom.style.display = 'none';
            return this;
        },
        html: function (content) {
          if(content){
                dom.innerHTML = content;
                return this;
            }else{
                return dom.innerHTML;
            }
        }
    }
}

測試代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試代碼</title>
    <style>
    
    </style>
</head>
<body>
    <div class="container">
        <button id='show'>顯示</button>
        <button id='hidden'>隱藏</button>
        <button id='bgchange'>修改背景色</button>
        <hr>
    
        <div id="box">
            這是一個用于測試的div盒子, 點(diǎn)擊顯示按鈕,顯示該div, 點(diǎn)擊隱藏按鈕, 隱藏該div
        </div>

    </div>

</body>
<script src="simpleJQ.js"></script>
<script>
    console.log($("#box"));
// 顯示box
$("#show").click(function(){
    $("#box").show();
});

// 隱藏box
$("#hidden").click(function(){
    $("#box").hide();
});

// 修改box的樣式
$("#bgchange").click(function(){
    $("#box").show().css({color:'red',background:'pink'})
});


</script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容