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>
  • 相关阅读:
    Linux脚本文件注释
    Linux三剑客之grep命令
    Linux获取本机IP
    Linux的cut命令详解
    Linux的wc命令详解
    Linux的uniq命令详解
    Linux的sort命令详解
    shell之a+b求和脚本的三种写法
    shell的文件比较运算符和字符串比较运算符
    shell中变量$系列的含义
  • 原文地址:https://www.cnblogs.com/helife/p/1913347.html
Copyright © 2011-2022 走看看