搜索

首页  >  问答  >  正文

javascript - jquery 事件执行问题

function tableColor() {
    alert(0) //这里执行
    $(".table tr:odd").css("background", "#f8f8f8");
}  

第一种写法:
tableColor();//执行alert(0),弹出“0”,表格颜色**没有变化**。

第二种写法:
$(function() {
    tableColor();请输入代码
})
//弹出“0”,表格颜色变化了。

为什么不同写法造成不同的结果,道理来说同一个函数不会只执行一半吧。

ringa_leeringa_lee2712 天前1086

全部回复(9)我来回复

  • phpcn_u1582

    phpcn_u15822017-06-26 10:55:33

    $(function(){
    //这边是页面加载完后才执行的代码
    })
    你的第一种写法是页面还没加载完就执行了,所以没检测到DOM就不会改变颜色了

    回复
    0
  • 黄舟

    黄舟2017-06-26 10:55:33

    第二种是.ready()的简写。具体的去查文档吧。

    回复
    0
  • 漂亮男人

    漂亮男人2017-06-26 10:55:33

    一般引用js都是放在<head></head>里面,
    第一种写法执行的时候,页面还没加载完,所以找不到$(".table tr:odd")这个选择器;
    第二种是在页面加载完成后执行的,所以能改变选择器的颜色。

    要么采用第二种方法,要么把js引用加在页面最后。

    回复
    0
  • 三叔

    三叔2017-06-26 10:55:33

    第一种写法,在执行你的代码的时候,页面上可能还没有加载出来表格table 这个元素,所以就可能会出现没有找到元素的情况,所以就没有颜色变化。
    第二种写法是等页面元素加载完成之后再执行你的代码,这样就保证了页面中已经加载出来所有的元素了,代码就能找到需要的元素,所以就会做出相应的变化了

    回复
    0
  • 漂亮男人

    漂亮男人2017-06-26 10:55:33

    $(function() {
        // DOM加载完毕
    });

    你两次的区别在于,第一次在DOM没有加载完毕调用 $(".table tr:odd") 可能没有获取到对应元素,你可以打印出来看看,而第二次肯定获取到了。

    建议把 JS 代码或引入的 JS 文件放在页面底部,<BODY> 之前即可.

    回复
    0
  • phpcn_u1582

    phpcn_u15822017-06-26 10:55:33

    跟一楼回答的类似,第一种写法,如果是放在.table标签之前,在dom还没加载之前就执行的话,可能$选择器都找不到dom,也就改不了颜色了。

    而第二种,建议查看jquery文档描述,我这边打不开jquery官网,翻一篇别的其他地方的
    http://www.css88.com/jqapi-1....

    回复
    0
  • 代言

    代言2017-06-26 10:55:33

    1.你第一种中写法是在document标签未加载完成的情况下执行。换句话你html没有加载完,你就对其里面.table tr:odd 添加样式,js脚本就不知道这个对象是哪个,所以会系undefine。元素没有加载完成。但是function的语法没有错误,所以还是会alert 0
    2.$(function(){})执行,即等待html加载完成时候,才执行里面的方法,这个时候,html加载完了,js就补抓到该对象是哪个元素,所以可以设置样式。
    具体参考:http://www.w3school.com.cn/h.asp

    回复
    0
  • 高洛峰

    高洛峰2017-06-26 10:55:33

    此题终结

    回复
    0
  • 迷茫

    迷茫2017-06-26 10:55:33

    第一种写法:
    tableColor();//执行alert(0),弹出“0”,但是dom没有选中,代码是逐行执行的

    第二种写法:是文档加载完成之后执行
    $(function() {

    tableColor();

    })

    结论,js的引入放在文档底部,html内部js除了自定义函数,统一写在$(function() {})里面,确保文档执行完毕js代码执行

    回复
    0
  • 取消回复