山月

失败
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
Jquery学习01

资源：

http://jquery.com

http://visualjquery.com/

 

1、HelloWorld程序：

<html>
<head>
<title>Jquery demo</title>
<script src="./js/jquery-1.3.2.min.js"></script>

<script Language = "JavaScript">

  $(document).ready(function(){
	  $("#bn").click(function(){
			alert("Hello, world!");
		});
	});
</script>
</head>
<body>
<input type = "button" id = "bn" value = "sign in" />
</body>
</html>

2、感受Jquery的简洁
不使用Jquery的情况：

 

<html>
<head>
<title>Test without jQuery</title>
<script Language="JavaScript">
<!--
function window_onload() {
  var imgl = window.document.getElementById('imgl');
  imgl.style.display = 'none';
}

function btnl_click() {
  var imgl = window.document.getElementById('imgl');
  if(imgl.style.display == 'none') {
    imgl.style.display = '';
  } else {
    imgl.style.display = 'none';
  }
}

//-->
</script>
</head>
<body onload = "window_onload()">
  <input type = "button" id = "btnl" name = "btnl" value = "JavaScript" onclick = "btnl_click()" />
  <br>
  <img id = "imgl" src = "./img/topcat.jpg" />
</body>
</html>

 

使用Jquery:

<html>
<head>
<title>Test with jQuery</title> 

<Script Language = "JavaScript" src = "./js/jquery-1.3.2.min.js"></Script>
<script Language = "JavaScript">
<!--
$(document).ready(function() {
  $('#imgl').hide();
  $('#btnl').click(function() {
    $('#imgl').toggle();
  })
})
//-->
</script>
</head>
<body>
  <input type = "button" id = "btnl" name = "btnl" value = "jQuery" />
  <br>
  <img id = "imgl" src = "./img/topcat.jpg" />
</body>
</html>
posted on 2010-12-22 08:45  山|月  阅读(180)  评论(0)    收藏  举报