<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > jQuery Tutorial 1--Hello World  </ title >
     <!-- 引入jQuery 库 -->
     < script  type ="text/javascript"  src ="jquery-1.2.6.js" ></ script >
< SCRIPT  LANGUAGE ="JavaScript" >
<!--
// 使用方式一，
/**/ /*     
$(document).ready(function(){
     $("#btnShow").click( function(){ $("#divMsg").show('slow');});
     $("#btnHide").click( function(){ $("#divMsg").hide('slow');});
     $("#btnChange").click(function(){ $("#divMsg").html("Hello World, 我变身了");});
     $("#btnInitTxt").click(function(){ $("#divMsg").html("Hello World!");});
});
*/
// -->
</ SCRIPT >

</ head >
< body >
     < div  id ="divMsg" > Hello World! </ div >
     < input  id ="btnInitTxt"  type ="button"  value ="初始!" />
     < input  id ="btnChange"  type ="button"  value ="变身"   /> <!-- 改变文本内容 -->
     < input  id ="btnHide"  type ="button"  value ="隐藏"   /> <!-- 隐藏文本 -->
     < input  id ="btnShow"  type ="button"  value ="显示"   /> <!-- 显示文本 -->
< script  type ="text/javascript"   >
// 使用方式二,
         // 以渐变的方式隐藏或显示
        $( " #btnShow " ).bind( " click " ,  function (event)  {
             // $("#divMsg").show('slow'); 
            $( " #divMsg " ).show(); 
        } );
        $( " #btnHide " ).bind( " click " ,  function (event)  { $( " #divMsg " ).hide('slow'); } );
        $( " #btnChange " ).bind( " click " ,  function (event)  { $( " #divMsg " ).html( " Hello World, 我变身了 " ); } );  
        $( " #btnInitTxt " ).bind( " click " ,  function (event)  { $( " #divMsg " ).html( " Hello World! " ); } );  

</ script >
</ body >
</ html >

@yeafee 2011-01-28 10:49 发表评论

@yeafee 2007-12-28 16:18 发表评论