• js---18miniJquery


    <html>
    <head>
    <title>jQuery test</title>
    </head>
    <body>
    <div id="1">
        111
    </div>
    <div id="2">
        111
    </div>
    <script type="text/javascript" src="jquery-1.2.6.js"></script>
    <script type="text/javascript">
    function Parent(){ //Parent当成一个类来使用
        this.name = "333";//只能通过 对象.name 访问
        var age = 34;//给嵌套函数使用
        console.log("aaaaaaaa");
    }
    var pp = new Parent();//pp是对象
    pp();//pp is not a function
    Parent();//aaaaaaaa,函数被window调用,这个java没有对应。
    
    //js数据类型:undefined、null、string、number、boolear、[]、{}、函数对象
    var o = {
        name:"123",  //name的值是string
        run:function(){alert("aa");}   //run的值是函数对象(匿名对象)
    }
    console.log(o.name); //输出name的值用o.name
    o.run(); //输出run的值用小括号,run()
    var p = function ff(){   //p的值是函数对象
        console.log(123);
    }
    p();//输出p的值用小括号,所以函数看成是一种特殊的值(特殊的数据类型),用小括号输出,
    var d = new ff();//ff is not defined
    
    ==========================================================================
    function Parent(){
        this.ss = "333";
    }
    var pp = function(){   //pp是一个变量,值是特殊类型,函数类型
        this.ss = "sss";
        return new Parent();
    }
    console.log(pp.ss);//undefined,pp这个变量只能使用调用pp()输出他的值,他本身没有属性,
    var gg = pp();//才返回return的东西
    console.log(gg.ss);//333
    
    
    pp.prorotype = 44;
    console.log(pp.prorotype);//44   对象可以加一个prototype属性,不产生重名
    
    
    var o = {name:666};//{}形式的对象,里面的属性不用加this就可以外部使用,函数形式的要加this,
    o.aa = function(){
        console.log(this.name);//666   这个函数调用的时候,里面的this就是调用他的对象
    }
    o.aa();
    ==========================================================================
    
    //$("div")  这要运行在dom下载完毕,dom加载完毕不是文档加载完毕。
    //$(function(){})  === $(document).ready(function(){})
    //$('div').get(0);  返回dom对象,
    //$.each  静态方法
    //$('div').each(function(index,ele){});
    
    //$.extend({myMeoth:function(){}});
    //$.myMeoth();   给$扩展一个方法
    
    //$.fn.extend({mymeath:function(){}})   实例扩展,给jquery的对象扩展方法
    //$('div').mymeath();
    //jquery对浏览器兼容性,性能,容错处理。
    //jquery: 选择器,ajax,动画
    
    =========================================================================
    //数组型对象,   json里面可以用[]进行读写,但是[]里面要是正确的数据类型。
    var o = {name:123};
    o[0] = 456;
    o[age] = 789;        //age is not defined,age这种数据类型不再js数据类型中
    o['age'] = 789; 
    console.log(o[name]);//undefined
    console.log(o['name']);123
    console.log(o[0]);
    console.log(o[age]);  //age is not defined,age这种数据类型不再js数据类型中
    console.log(o['age']); //789
    
    ========================================================================
    function Parent(){
        console.log("ssssssssss");
    }
    var pp = new Parent();//ssssssssss,new的时候,函数会执行
    ========================================================================
        var o ={};
    /*    o[0] = 5;
        o[1]= 6;
        o.length = 2;
    */
        var arr = [4,5,6];
        for(var i =0 ;i<arr.length;i++){
             o[i] = arr[i];
        }
        o.length = arr.length;//o:{0:4,1:5,2:6}
        
        
        var divs = document.getElementsByTagName("div");
        Array.prototype.push.apply(o,divs);//o调用Array.prototype.push方法,并传入参数divs, o.(Array.prototype.push)(divs);
        //o: {0:div#1,1:div#2,length:2}
    
    </script>
    </body>
    
    
    </html>
    $('div') 就返回了一个对象。  而js是,function F(){}   var f = new F();才返回一个对象。   
    
    
    
    ==========================================================================
    (function  () { //所有代码写在匿名函数里面,减少变量名的冲突,写在里面的所有东西外面是访问不到的,
        
        //函数里面var定义的变量不是this定义的,只能给嵌套函数使用。将jquery和$暴露出去,外面就可以使用了。
        var _$ = window.$;
        var _jQuery = window.jQuery;//_$ === window.$ === window.jQuery === _jQuery === jQuery == 一个函数
        //暴露外部使用的一个接口,jQuery是一个变量值是函数类型,里面return的对象没有赋值给jQuery,
        var jQuery = window.jQuery = window.$ = function(selector){
    
            return new jQuery.fn.init(selector);
        };
    
    //jquery是一个匿名对象,添加静态成员fn,jQuery的fn 和jQuery的prototype指向一个对象{},jQuery.fn.方法名就给原型添加了一个方法,也就给jquery对象添加了一个方法。写jQuery.fn不写jQuery.prototype,fn是等于prototype的,
        jQuery.fn = jQuery.prototype = {
            init:function(selector){//selector选择器
                var elements = document.getElementsByTagName(selector);
                Array.prototype.push.apply(this,elements);//this.push(elements),返回{0:div#1,1:div#2,2:div#3}
                return this;    
            },
            jQuery:"1.0.0",
            length:0,
            size:function(){
                return this.length;
            }
    
        };
        jQuery.fn.init.prototype = jQuery.fn;
        //$.extend({myMeoth:function(){}});        $.myMeoth();
    //给JQuery和JQuery.fn也就是JQuery函数的原型添加一个属性extend指向一个函数(这个函数也是看成一个匿名对象,类似于 o.run = function(){},通过o.run()调用,run指向函数对象的地址,通过小括号调用,),实现继承,并且只处理只有一个参数,写jQuery.extend不写jQuery.fn.extend,fn是等于prototype的,JQery的静态属性extend是等于JQuery的原型对象的静态属性extend,指向一个匿名函数对象,
        jQuery.extend = jQuery.fn.extend = function(){
            var o = arguments[0];
            for(var p in o){
                this[p] = o[p];//this是JQuery对象,this.trim = function(text){},给jquery对象添加一个trim方法,$.trim()就可以调用这个方法。
            }
        };
    
    //添加静态方法
        jQuery.extend({
            trim:function(text){
                return (text||"").replace(/^s+|s+$/g,"");//text||""排除是undefined和null就是空字符串,^开头,$结尾,g全局,s+一个或多个空格,去除空格
            },
            noConflict:function(){
                window.$ = _$;
                window.jQuery = _jQuery;
                return jQuery;
            }
        });
    //添加实例方法
    
        jQuery.fn.extend({
            get:function(num){
                return this[num];//$('div').get(1);
            },
            each:function(fn){//$("div").each(function(){})
                for(var i = 0 ;i< this.length; i++){
                    fn(i,this[i]);//i是索引,this是$("div")这个jquery对象,回调函数
                }
                return this;
            },
            css:function(){//$("div").css("width");获取宽度,//$("div").css("width","33px");设置值
                var l = arguments.length;
                if(l == 1){
                    return this[0].style[arguments[0]];
                } else {
                    var name = arguments[0];
                    var value = arguments[1];
                    this.each(function(index,ele) {
                        ele.style[name] = value;
    
                    });
                }
                return this;//实现链式操作,后面还可以继续点,$("div").css("width","33px").css("height","100px")
            }
        });
    })();
    
    
    《高性能JavaScript》《JS权威指南》
    <html>
    <head>
    <title>mini Query test </title>
    </head>
    <body>
    <div  style="100;height:100;background-Color:red">
        abc
    </div>
    <div>
    </div>
    <script type="text/javascript">
        var $ = 123;//这里写了$=123,miniQuery.js里面也定义了window.$,那么此时后面覆盖前面的,$就等于 new jQuery.fn.init(selector) 了。
        /*var _$ = window.$;
        var _jQuery = window.jQuery;*/
    </script>
    <script type="text/javascript" src="miniQuery.js"></script>
        
    <script type="text/javascript">
    function  FF () {
         return FF.prototype.init();
    }
    FF.prototype ={
         init:function(){
             return this;  //this
        },
         xx:"sss"
    };
    var f = FF(); // Object{xx:"sss"}
    
    var jq = $.conflict();
    </script>
    <script type="text/javascript">
        var $ = 234;
        console.log(jq);
    </script>
    </body>
    </html>
  • 相关阅读:
    emberjs初学记要
    自我的一点介绍(七夕礼物)
    JavaScript数据类型
    Vue+Webpack项目配置
    Git知识点整合
    Log4j简单配置解析
    如何明智地向程序员提问
    Navicat连接mysql报错1251
    多表查询sql语句
    PLSQL面向对象
  • 原文地址:https://www.cnblogs.com/yaowen/p/6856908.html
Copyright © 2020-2023  润新知