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>

你可能感兴趣的:(jquery)