• 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>
  • 相关阅读:
    java编程继承的第一原则
    Java基本语法总结
    java 语言实现的随机数生成算法
    java实现微公众平台自定义菜单
    使用Java调用谷歌搜索
    Java 语言实现的随机数生成算法
    浅谈Java中的instanceof关键字
    Java 编程基础 类和继承总结
    异常封装提高Java代码质量
    CSS-font
  • 原文地址:https://www.cnblogs.com/helife/p/1913347.html
Copyright © 2020-2023  润新知