<head>
<title>jQuery - Hello jQuery</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
</head><input id="btnShow" type="button" value="Say hello to jQuery world" />
<div id="divMsg" style="border:5px solid #00003c; display:none; width:400px;">Hello jQuery!</div>
<script type="text/javascript">
  var thisPage = {
  initialize :function  ()
     {
     this.initializeDom();
    this.initializeEvent();
   },
   initializeDom: function ()
  {
  this.$btnShow = $("#btnShow");
  },
  initializeEvent: function ()
   {
  this.$btnShow.bind("click", function (event)
  {
    $("#divMsg").toggle(300);
   });
  }
}
  $(thisPage.initialize());
</script>

解决方案 »

  1.   

      var thisPage = {
      initialize :function  ()
         {
         this.initializeDom();
        this.initializeEvent();//分别执行两个方法,这些方法是thisPage对象的属性
       },
       initializeDom: function ()
      {
      this.$btnShow = $("#btnShow");//获得那个div 元素
      },
      initializeEvent: function ()
       {
      this.$btnShow.bind("click", function (event)//增加onclick事件处理函数
      {
        $("#divMsg").toggle(300);//显示,隐藏切换。
       });
      }
    }  $(thisPage.initialize())//调用 thisPage对象的init方法,入口
      

  2.   


    <input id="btnShow" type="button" value="Say hello to jQuery world" />
    <div id="divMsg" style="border:5px solid #00003c; display:none; width:400px;">Hello jQuery!</div><script type="text/javascript">
    /*
    var 对象名 = {
    成员名: 成员值(如果为函数,则该成员就是该对象的一个方法)

    this指代对象自身
    */
    var thisPage = {
    //定义initialize方法,其调用了对象自身的另外两个方法
    initialize: function() {
    this.initializeDom();
    this.initializeEvent();
    },
    //定义initializeDom方法
    initializeDom: function() {
    //将 #btnShow 选择器取到的jquery对象赋给 $btnShow 属性,尽管之前没有声明它,javascript就是这么灵活
    this.$btnShow = $("#btnShow");
    },
    //定义initializeEvent方法
    initializeEvent: function() {
    //为属性 $btnShow(值是一jquery对象) 绑定 单击 事件处理函数
    this.$btnShow.bind(
    "click", 
    function(event) {
    $("#divMsg").toggle(300);
    }
    );
    }
    }
    /*
    这样写更容易看懂
    $(document).ready(function() {
    thisPage.initialize();
    });
    $(); 是$(document).ready()的简写;
    */
    $(thisPage.initialize());
    </script>
      

  3.   

    另外我补充一下:
    var a = function(){}
    这是一个函数对象。
    var b = {
       c: function(){},
       d: function(){}
    }
    这是一个对象
    这两个的区别是:
    a 有prototype属性,而b没有,a 可以实例化,但b已经是一个实例,不能再被实例化。
    其实b这种方式只是一种变量的封装,有的也叫命名空间。不是你不懂,而是你没仔细看。
    其实:var a={}等同于var a=new Object; var b=[]等同于var b=new Array; var c={name:"syj",id:"0"};等同于 var c=new Object; c.name="syj"; c.id="0";
      

  4.   

     this.$btnShow = $("#btnShow");
    这句话没意义嘛
    就是把外边的btnShow赋值给函数的这个