AJAX手写JQuery并给类和函数扩展方法------AJAX

野性酷女 2024-02-18 11:34 52阅读 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获取元素
>             var IE = document.getElementById(selector.substring(1));
>             return IE;
>           }
>           if (selector.charAt(0) === ".")
>           {
>             var CE = document.getElementById(selector.substring(1));
>             return CE;
>           }
>         }
>         if(typeof selector === "function")
>         {
>           window.onload = selector;
>         }
>       }
>       $ = JQuery;
>       $(function()
>       {
>         $("#btn").onclick = function()
>         {
>           $("#myDiv").innerHTML = "<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获取元素
>             var IE = document.getElementById(selector.substring(1));
>             return IE;
>           }
>           if (selector.charAt(0) === ".")
>           {
>             var CE = document.getElementById(selector.substring(1));
>             return CE;
>           }
>         }
>         if(typeof selector === "function")
>         {
>           window.onload = selector;
>         }
>       }
>       $ = JQuery;
>       $(function()
>       {
>         $("#btn").onclick = function()
>         {
>           $("#myDiv").innerHTML = "<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>