你的位置:首页 > Java教程

[Java教程]模拟jQuery库


 用js模拟jQuery方法,体会封装思想

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>simulationJquery.html</title>
</head>
<body>
  <img src=images/123.jpg/>
  <input id="hide" type="button" value="hide" />
  <input id="show" type="button" value="show" />
  <script type="text/javascript">
  function photo(){
    var img=document.images[0];
    this.hide=function(){
      img.style.visibility="hide";
      }
    this.show=function(){
      img.style.visibility="visible";
      }
  }  
  </script>

  <script type="text/javascript">
  //d()表示定位指定的标签
   function b(str){
    //获取str变量的类型
    var type=typeof(str);
    if(type=="string"){
    //截取第一个字符串
      var first=str.substring(0,1);
      //判断是否是#号
      if("#"==first){
        //获取#号之后的字符串
        var end=str.substring(1,str.length);
        //根据id定位标签
        var element=document.getElementById(end);
        //如果找到了
        if(element!=null){
          return element;
        }else{
          alert("没有这个标签");
    }
   }
    }else{
      alert("参数必须是字符串");
    }
  }
  </script>

  <script type="text/javascript">
    var p=new photo();
    d("#hide").onclick=function(){
      p.hide();
  }
    d("#show").onclick=function(){
      p.show();
    }
  </script>
</body>
</html>

  将上述中的方法名换成$符号,就是"jquery"了.