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>
  • 相关阅读:
    hdu 4597 记忆化搜索
    hdu 4494 最小费用流
    hdu 4598 差分约束
    poj 3621 0/1分数规划求最优比率生成环
    poj 1695 动态规划
    noi 97 积木游戏
    hdu 4705 排列组合
    洛谷P2014 选课
    洛谷P1776 宝物筛选
    洛谷P1782 旅行商的背包
  • 原文地址:https://www.cnblogs.com/helife/p/1913347.html
Copyright © 2011-2022 走看看