摘要:(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>之前引入,这样防止页面加载时出现阻塞