初学jQuery的同学,很可能会遇到明明是照着代码抄的,为何却没执行,
很有可能的是忽略了,jQuery的代码和HTML中的标签要放在同一个地方(body标签中),并且jQuery代码要放到其作用的HTML代码下方,这是因为浏览器在解析代码时是一行一行地往下执行的,所以,jQuery代码一定要在其修饰的HTML代码下方才能正确被执行。如果JavaScript代码下方的按钮还没有被加载,那么$(‘#btn’)就没有办法获取对应的按钮对象,既然如此,还怎么给它添加单击事件呢?结果肯定是不行的。
比如,<body>
中我有一个按钮,其id=“btn”,
那么,关于这个按钮的jQuery代码也要放在这个按钮的附近,至少要也放在<body>
中,才能让jQuery的代码正确执行。
代码如下:
<body>
<input id="btn" type="button" value="click me">
<script>$("#btn").click(function(){alert('you are so strong')});</script>
</body>
October31th2023Tuesday
继续补充:
如果,硬要把jQuery代码放到HTML代码的上方,也不是不行,只需要写一个DOM加载完毕后的监听函数就可了,$(document.ready
方法可以接收一个东西,但会等页面上所有的DOM资源(不包括图片这种占用带宽的资源)全部加载完毕后,再使用这个东西。这样就不用考虑jQuery代码执行的时候某个HTML元素还没有被加载的情况了。
还有一点需注意的是 $(document).ready
只接收和响应一个东西,所以如果你有多个需要做的事情的 jQuery代码 ,不需要考虑 jQuery代码执行的时候某个HTML元素还没有被加载的情况,那么你就需要写多个 $(document).ready
来接收多个需要做的事情的 jQuery代码,即,一个事件给 一个 $(document).ready
去处理,多个事件分给多个 $(document).ready
去处理。
如下:
事件一:
$(document).ready(function(){
$("#btn").click(function(){
alert('you are so strong');});});
对一个HTML页面按钮,设置其点击事件弹出一个对话框,
内容是:你好强。
事件二:
$(document).ready(function(){
var ul=$("ul");
var lis=ul.find("li");
var li=lis.eq(2);
alert(li.text());
// alert("hello");
});
对一个列表的元素进行提取并在弹出对话框显示其内容。