日期:2014-05-16  浏览次数:20468 次

JQ入门遇到问题
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery学习</title>

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


     $("#showww").click(
        function() {

            $('div:odd').show(300);

        }
  );
   </script>

    <style type="text/css">
        body div
        {
            width: 500px;
            height: 30px;
            background: #ccc;
            border: 1px double yellow;
        }
        body div div
        {
            width: 500px;
            height: 10px;
            background: #666;
            
        }
    </style>
</head>
<body>
    <div>

    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <input type="button" value="隐藏"  id="hid"/><input type="button" value="显示"  id="showww"/>
    
    <script type="text/javascript">

        $("#hid").click(
        function() {

            $('div:odd').hide(300);

        }
  );
</script>
</body>
</html>






为什么代码放在<head></head>之间没反应,但是放在input 后面就正常。这是为什么呢?没学过javascript,直接就学JQ了,所以好多都不明白,请指教!!!

------解决方案--------------------
JScript code
window.onload=function(){

        $("#hid").click(
        function() {

            $('div:odd').hide(300);

        }
  );

}

------解决方案--------------------
JScript code

$(document).ready(function(){
   $("#hid").click(
        function() {

            $('div:odd').hide(300);

        });
});

------解决方案--------------------
$("#showww")的意思其实就是 document.getElementById('showww');

在元素showww未加载到页面上的时候,$("#showww")没有反应的,因为它找不到 名为showww的元素。
所以引用$("#showww")必须要到
<input type="button" value="显示" id="showww"/>加载之后。

一种方法是在input 后面写,
还有一种方法是在 方法体内部写