Monthai: jQuery简单应用

原创 2018-11-06 00:13:35 183
摘要:(1)使用<script>标签引入jQuery.js,【不是link(引用css/icon)】<script type="text/javascript" src="js/jquery-3.3.1.js"></script>(2)ready()函数用于文档加载后激活函数内的function,主要原因是,

(1)使用<script>标签引入jQuery.js,【不是link(引用css/icon)】

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

(2)ready()函数用于文档加载后激活函数内的function,主要原因是,如果函数中选择了div标签,而该标签未完成加载就开始执行函数,函数将无法获取到对象。

(3)加载后激活的函数应该包含在ready()的括号内:

$(document).ready(
    function(){
        $("div").hide()
        $("input").click(
            function() {$("div").show()}
        )
    }
)

(4)回顾:隐藏/显示div功能用javascript的写法;相比之下,jQuery不需要自定义函数,代码少很多。

window.onload = function hide() {
     var e = document.getElementById("div1");
     e.style.display="none";
     alert("元素已被隐藏");

     function show() {
          var e = document.getElementById("div1");
          e.style.display="block";
     }
}

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery选择器</title>
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
        <script type="text/javascript">
         $(document).ready(
                function() {
                    $src = "加载完毕!"
                    alert($src)
                    $("div").hide()
                    $("input").click(function(){
                            $("div").show()
                     })
                })
        </script>
    </head>
    <body>
        <div id="div1" style="height: 120px; background-color: #149BDF;"></div>
        <input type="button" value="点击显示" />
    </body>
</html>

END

批改老师:天蓬老师批改时间:2018-11-06 07:41:57
老师总结:正确, 外部的js文件,推荐放在<body>之前引入,这样防止页面加载时出现阻塞

发布手记

热门词条