首页 > Web开发 > 详细

模拟jQuery库

时间:2016-04-20 11:21:05      阅读:256      评论:0      收藏:0      [点我收藏+]

 用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" style="position:absolute;top:250;left:50"/>
  <input id="show" type="button" value="show" style="position:absolute;top:250;lfet:120"/>
  <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"了.

模拟jQuery库

原文:http://www.cnblogs.com/pingzi001/p/5411698.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!