AJAX手写JQuery封装方法实现不使用dom元素操作对象------AJAX

男娘i 2024-02-18 11:44 21阅读 0赞

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <title>JQ</title>
>     
>     
>     
>     
>     
>     
>     
>     
>     
>     
>     
>     
>     
>     
>     </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.focus = function(fun)
>         {
>           IE.onfocus = fun;
>         }
>         this.blur = function(fun)
>         {
>           IE.onblur = fun;
>         }
>         this.submit = function(fun)
>         {
>           IE.onsubmit = fun;
>         }
>         this.change = function(fun)
>         {
>           IE.onchange = fun;
>         }
>       }
>       $ = 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();
>         })
>       });
>     </script>
>       <button id="btn">显示信息</button>
>       <div id="myDiv"></div>
>       <input name="aiHao" type="checkbox">
>       <input name="aiHao" type="checkbox">
>       <span class="myClass"></span>
>       <span class="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>
>     
>     
>     
>     
>     
>     
>     
>     
>     
>     
>     
>     
>     
>     
>     </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.focus = function(fun)
>         {
>           IE.onfocus = fun;
>         }
>         this.blur = function(fun)
>         {
>           IE.onblur = fun;
>         }
>         this.submit = function(fun)
>         {
>           IE.onsubmit = fun;
>         }
>         this.change = function(fun)
>         {
>           IE.onchange = fun;
>         }
>       }
>       $ = 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();
>         })
>       });
>     </script>
>       <button id="btn">显示信息</button>
>       <div id="myDiv"></div>
>       <input name="aiHao" type="checkbox">
>       <input name="aiHao" type="checkbox">
>       <span class="myClass"></span>
>       <span class="myClass"></span>
>       <span class="myClass"></span>
>       <span class="myClass"></span>
>       <span class="myClass"></span>
>     </body>
>     </html>