Question

以下是有效的：

<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript">
function getElemWidth(){
   var x =  $( "#menuDiv").width();
   alert(x);
}
</script>
</head>
<body onLoad="getElemWidth()" />
<div id="menuDiv" style="width:250px" />
</body>

这里有什么不起作用：

<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</head>
<body onLoad="getElemWidth()" />
<div id="menuDiv" style="width:250px" />
</body>

＆＃34; common.js＆＃34;的内容：

function getElemWidth(){
   var x =  $( "#menuDiv").width();
   alert(x);
}

它在两种情况下调用函数。我可以在两种情况下使用jquery，例如：

x = $(window).width();

工作得很好。出于某种原因，我无法从.js包含的文件中获取文档元素。我有什么遗失的吗？

我甚至在＆＃34; common.js＆＃34;下面添加了这个。包括：

<script type="text/javascript">
  $(document).ready(function(){
  alert($('#menuDiv').width());
  });
  </script>

完美无缺。我可以在menuDiv出现的同一文件中引用#menuDiv，但不能在包含的javascript文件中引用#menuDiv。这是正常的吗？

Answer 1

<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</script> <-- this is wrong, remove this extra tag

取决于更新问题：

你应该在jQuery DOM ready中调用该函数

$(function (){
    getElemWidth();
});

和HTML应该是

<head>
    <script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/common.js"></script>
</head>
<body> <!-- remove onload -->
     <div id="menuDiv" style="width:250px" />
</body>

Answer 2

问题是DOM可能还没有为jQuery做好准备。在DOM上操作的最安全点是在document is ready之后。页面可能已加载但未完全呈现。你的common.js应该是这样的：

function getElemWidth(){
   var x =  $("#menuDiv").width();
   alert(x);
}

$(document).ready(function(){
    getElemWidth();
});

你的HTML就像这样：

<head>
    <script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/common.js"></script>
</head>
<body>
    <div id="menuDiv" style="width:250px"></div>
</body>

jquery没有从js文件中选择元素

2 个答案: