zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    人月神话阅读笔记01
    个人每日总结14
    个人每日总结13
    个人每日总结12
    个人每日总结11
    个人每日总结10
    个人每日总结9
    第五周学习进度表
    梦断代码阅读笔记
    05构建之法阅读笔记之五
  • 原文地址:https://www.cnblogs.com/helife/p/1913347.html
Copyright © 2011-2022 走看看