jquery dreamweaver

作者: 神评啊哈哈哈哈
来源: 51数据库
2020-10-03

先给你写一个正确的。
<html>
<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<script>
$(document).ready(function(){
$("#btnShow").bind("click",function(){$("#divMsg").show();});
$("#btnHide").bind("click",function(){$("#divMsg").hide();});
$("#btnChange").bind("click",function(){$("#divMsg").html("Value Change");});
});
</script>
</head>
<body>
<div id="divMsg">Hello World </div>
<input type="button" id="btnShow" value="显示"/><br />
<input type="button" id="btnHide" value="隐藏"/><br />
<input type="button" id="btnChange" value="Change DIV Value"/>
</body>
</html>

其实click的绑定，jq有更简单的写法
$("#btnShow").click(function(){$("#divMsg").show();});
$("#btnHide").click(function(){$("#divMsg").hide();});
$("#btnChange").click(function(){$("#divMsg").html("Value Change");});

你的代码的几个问题。
1.js的引用，必须是空节点的script，并写明src。这里要绝对注意，这里面的script标签内，不要写任何东西。因为写了也没用。
2.页面代码是顺序执行的，就是html代码的先后书写顺序，你在前面绑定方法，可是这个时候dom对象都还没有创建，当然没法绑定了。如果细心看一些用到jq的代码，就能发现，都写上了$(document).ready(function(){});或者简写$(function(){});

这个是jq最重要的一个方法。代替了window.onload.并且可以在同一页面的不同位置无限次调用。

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

</script>

<script type="text/javascript"
$("#btnShow").bind("click",function(event) {$("#divMsg").show();});
$("#btnHide").bind("click",function(event) {$("#divMsg").hide();});
$("#btnChange").bind("click",function(event) {$("#divMsg").html("Value Change");});

</script>

把中间的代码分离出来。

　　<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
//确定src="jquery/jquery-1.4.2.js"路径正确！
<script type="text/javascript">
$("#btnShow").click(function(){
$("#divMsg").show();
});
$("#btnHide").click(function(){
$("#divMsg").hide();
});
$("#btnChange").click(function(){
$("#divMsg").html("Value Change");
});
</script>