遨翔在知識的海洋裡----（onclick和jquery,click）

遨翔在知識的海洋裡發表於2018-04-18
jQuery

jquery function宣告

<body>
    <button onclick="test()">aa</button>
</body>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function() {
        function test() {
            console.log("aa")
        }
    })
</script>
複製程式碼

報錯

test55ss.html:12 Uncaught ReferenceError: test is not defined
    at HTMLButtonElement.onclick (test55ss.html:12)
複製程式碼

因為$(function(),是html載入完成後才執行，此時的<button onclick="test()">aa</button>,已經生成,但是對應的function test()還沒有生成

$(function() {
})
複製程式碼

正確寫法

<body>
    <button onclick="test()">aa</button>
</body>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    function test() {
        console.log("aa")
    }
</script>
複製程式碼

原生js和jquery對比

<body>
    <button onclick="test1(this)">test1</button>
    <button id="test2" onclick="test2()">test2</button>
</body>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    function test1(obj) {
        $(obj).html("aa");
    }

    function test2() {
        $("#test2").html("bb");
    }
</script>
複製程式碼

相關文章