?
?
初学 JQuery,经典的hello world!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>初学JQuery</title>
<script language="javascript" src="jquery-1.8.2.js" type="text/javascript"></script>
</head>
<body>
<div>一、引入"jquery-1.8.2.js"文件,进入JQuery的初体验吧!如下:<br/>
<input id="helloWorld1" type="button" value="点击我呀,隐藏"/>
<input id="helloWorld2" type="button" value="点击我呀,显示"/>
<input id="helloWorld3" type="button" value="点击我呀,显示或隐藏"/>
<p style="background-color:#CCC">点击按钮显示或隐藏此。 hello world!</p>
</div>
</body>
<script language="javascript">
$(document).ready(function(){//它的缩写方法:$(function(){ //do something ? });
$("#helloWorld1").click(function(){
$("p").hide();
});
$("#helloWorld2").click(function(){
$("p").show();
});
$("#helloWorld3").click(function(){
$("p").toggle();
});
});
</script>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>初学JQuery</title>
<script language="javascript" src="jquery-1.8.2.js" type="text/javascript"></script>
</head>
<body>
<div>一、引入"jquery-1.8.2.js"文件,进入JQuery的初体验吧!如下:<br/>
<input id="helloWorld1" type="button" value="点击我呀,隐藏"/>
<input id="helloWorld2" type="button" value="点击我呀,显示"/>
<input id="helloWorld3" type="button" value="点击我呀,显示或隐藏"/>
<p style="background-color:#CCC">点击按钮显示或隐藏此。 hello world!</p>
</div>
</body>
<script language="javascript">
$(document).ready(function(){//它的缩写方法:$(function(){ //do something ? });
$("#helloWorld1").click(function(){
$("p").hide();
});
$("#helloWorld2").click(function(){
$("p").show();
});
$("#helloWorld3").click(function(){
$("p").toggle();
});
});
</script>
</html>