码迷,mamicode.com
首页 > Web开发 > 详细

模拟jQuery库

时间:2016-04-20 11:23:37      阅读:188      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!