AJAX手写JQuery封装常见方法实现不操作dom元素的效果——AJAX

本文介绍: AJAX手写JQue ry 封装常见方法实现不操作 dom 元素的效果——AJAX

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8">
    <title>JQ</title>
<!--  <style type="text/css">-->
<!--    #myDiv-->
<!--    {-->
<!--      /*我是一个ID选择器*/-->
<!--    }-->
<!--    .myClass-->
<!--    {-->
<!--      /*我是一个类选择器*/-->
<!--    }-->
<!--    span-->
<!--    {-->
<!--      /*我是一个元素全选*/-->
<!--    }-->
<!--  </style>-->
</head>
<body>
<script type="text/javascript">
  function User(userCode,username)
  {
    this.userCode = userCode;
    this.username = username;
    this.doSome = function()
    {
      console.log(userCode,username);
    }
  }
  // User = function(userCode,username)
  // {
  //   this.userCode = userCode;
  //   this.username = username;
  //   this.doSome = function()
  //   {
  //     console.log(userCode,username);
  //   }
  // }
  // 封装一个函数,通过这个函数就可以获取页面中的元素了
  function JQuery(selector)//可能时#id或者.class这样的类选择器
  {
    if(typeof selector === "string")
    {
      // 设计思路根据CSS语法
      if (selector.charAt(0) === "#")
      {
        // 根据ID获取元素
        //这个是全局对象,是根据我们的ID获取的dom对象
        IE = document.getElementById(selector.substring(1));
        //返回JQuery对象,这个有html方法
        return new JQuery();
      }
    }
    if(typeof selector === "function")
    {
      window.onload = selector;
    }
    //定义一个HTML方法
    this.html = function(htmlStr)
    {
      IE.innerHTML = htmlStr;
    }
    //定义一个click函数代替onclick方法
    this.click = function(fun)
    {
      IE.onclick = fun;
    }
    //由此可知
    this.val = function(value)
    {
      if(val === undefined)
      {
        return IE.value;
      }
      else
      {
        IE.value = value;
      }
    }
  }
  $ = JQuery;
  $(function()
  {
    $("#btn").click(function()
    {
      $("#myDiv").html("<font color='red'>哈哈哈</font>");
      var user = new User(111,"Tom");//创建对象,堆中分配空间
      // User();//当作函数,不创建对象,堆中没有这个对象
      user.doSome();
      User.prototype.getUser = function()
      {
        alert(this.username);
      }
      // user.getUser();
    });
    $("#MyBtn").click
    (function()
    {
      var value = $("#username").val();
      $("#myClass").html(value);
      $("#username").val("获取了");
    });
  });
</script>
  <button id="btn">显示信息</button>
  <div id="myDiv"></div>
  <input name="aiHao" type="checkbox">
  <input name="username" id="username" type="text">
  <button id="MyBtn">按下</button>
  <span id="myClass"></span>
  <span class="myClass"></span>
  <span class="myClass"></span>
  <span class="myClass"></span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ</title>
<!--  <style type="text/css">-->
<!--    #myDiv-->
<!--    {-->
<!--      /*我是一个ID选择器*/-->
<!--    }-->
<!--    .myClass-->
<!--    {-->
<!--      /*我是一个类选择器*/-->
<!--    }-->
<!--    span-->
<!--    {-->
<!--      /*我是一个元素全选*/-->
<!--    }-->
<!--  </style>-->
</head>
<body>
<script type="text/javascript">
  function User(userCode,username)
  {
    this.userCode = userCode;
    this.username = username;
    this.doSome = function()
    {
      console.log(userCode,username);
    }
  }
  // User = function(userCode,username)
  // {
  //   this.userCode = userCode;
  //   this.username = username;
  //   this.doSome = function()
  //   {
  //     console.log(userCode,username);
  //   }
  // }
  // 封装一个函数,通过这个函数就可以获取页面中的元素了
  function JQuery(selector)//可能时#id或者.class这样的类选择器
  {
    if(typeof selector === "string")
    {
      // 设计思路根据CSS语法
      if (selector.charAt(0) === "#")
      {
        // 根据ID获取元素
        //这个是全局对象,是根据我们的ID获取的dom对象
        IE = document.getElementById(selector.substring(1));
        //返回JQuery对象,这个有html方法
        return new JQuery();
      }
    }
    if(typeof selector === "function")
    {
      window.onload = selector;
    }
    //定义一个HTML方法
    this.html = function(htmlStr)
    {
      IE.innerHTML = htmlStr;
    }
    //定义一个click函数代替onclick方法
    this.click = function(fun)
    {
      IE.onclick = fun;
    }
    //由此可知
    this.val = function(value)
    {
      if(val === undefined)
      {
        return IE.value;
      }
      else
      {
        IE.value = value;
      }
    }
  }
  $ = JQuery;
  $(function()
  {
    $("#btn").click(function()
    {
      $("#myDiv").html("<font color='red'>哈哈哈</font>");
      var user = new User(111,"Tom");//创建对象,堆中分配空间
      // User();//当作函数,不创建对象,堆中没有这个对象
      user.doSome();
      User.prototype.getUser = function()
      {
        alert(this.username);
      }
      // user.getUser();
    });
    $("#MyBtn").click
    (function()
    {
      var value = $("#username").val();
      $("#myClass").html(value);
      $("#username").val("获取了");
    });
  });
</script>
  <button id="btn">显示信息</button>
  <div id="myDiv"></div>
  <input name="aiHao" type="checkbox">
  <input name="username" id="username" type="text">
  <button id="MyBtn">按下</button>
  <span id="myClass"></span>
  <span class="myClass"></span>
  <span class="myClass"></span>
  <span class="myClass"></span>
</body>
</html>