day12

1-var str = “hgDzGHjhcxghvcgxzhjzcgjhxzgcjhgsduyfuys”将字符串中出现次数最多的字母弹框输 出

var str = 'hgDzGHjhcxghvcgxzhjzcgjhxzgcjhgsduyfuys'; var result = maxN(str); function maxN(str) { //定义一个json对象用于保存str的每一项以及出现次数。 var json = {}; //遍历str,循环其中的每一个字符，将某个字符的值及出现的个数拿出来作为json的key和value for(var i=0;i<str.length;i++){ //判断json中是否有当前str的值 　 if(!json[str.charAt(i)]){ 　 //如果不存在 就将当前值添加到json中去，并设置1 　 json[str.charAt(i)] = 1; 　　　 } else { //如果存在的话就让数组中已有的当前值的value值++； 　　　 json[str.charAt(i)] ++; 　　　　} 　　　　} //存储出现次数最多的值和次数 　　　　 var number = ''; 　　　　 var num = 0; 　　　　//遍历json 使用打擂算法统计需要的值 　　 for(var j in json){ //如果当前项大于下一项 　　　　if (json[j]>num) { //就让当前值更改为出现最多次数的值 　　　　num = json[j]; number = j; 　　　　} 　　} return { 　　number:number, num:num 　　 } 　　} 　　alert('该字符串出现'+ result.num+'次的'+ result.number);

 

2-举例实现对象的深拷贝

function deepClone(source){

const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象

for(let keys in source){ // 遍历目标

if(source.hasOwnProperty(keys)){

if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象，就递归一下

targetObj[keys] = source[keys].constructor === Array ? [] : {};

targetObj[keys] = deepClone(source[keys]);

}else{ // 如果不是，就直接赋值

targetObj[keys] = source[keys];

}

}

}

return targetObj;

}

 

3-举例实现对象方法的继承

function Person (name) {
            this.name = name;
            this.friends = ['小李','小红'];
            this.getName = function () {
                return this.name;
            }
        };

//        Person.prototype.geSex = function () {    //对原型进行扩展的方法就无法复用了
//            console.log("男");
//        };

        function Parent = (age) {
            Person.call(this,'老明');　　//这一句是核心关键
            //这样就会在新parent对象上执行Person构造函数中定义的所有对象初始化代码，
            // 结果parent的每个实例都会具有自己的friends属性的副本
            this.age = age;
        };

        var result = new Parent(23);
        console.log(result.name);　　　　//老明
        console.log(result.friends);　　//["小李", "小红"]
　　　　 console.log(result.getName());　　//老明
　　　　 console.log(result.age);　　　　//23
　　　　 console.log(result.getSex());　　//这个会报错，调用不到父原型上面扩展的方法

 

4-写一个左中右布满全屏，其中左右固定宽度 200px，中间部分自适应，要求先加载中间部 分，写出结构和样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
        margin: 0;
        padding: 0;
    }
    #contentDiv{
        width: 100%;
        display: flex;
        height: 200px;
    }
    #leftDiv,#rightDiv{
        width: 200px;
        height: 200px;
    }
    #leftDiv{
        background: #16A05D;
    }
    #rightDiv{
        background: #DC5044;
    }
    #centerDiv{
        background: #FFCD41;
        height: 200px;
        flex: 1;
    }
    </style>
</head>
<body>
    <div id="contentDiv">
        <div id="leftDiv">左边div</div>   
        <div id="centerDiv">中间div</div>
        <div id="rightDiv">右边div</div>
    </div>
</body>
</html>

 

5-封装一个 jqery 的插件

1.封装静态插件 创建一个jquery文件 里面可以封装多个方法 命名格式多位  jquery.[插件名].js

$.extend({ 
　　add:function(a,b){return a+b;} 
}); 
$.extend({  
   mins:function(a,b){return a-b;}
});

 

2.封装成员函数插件也可以理解为动态插件 创建一个jquery文件 里面可以封装多个方法 命名格式多位  jquery.[插件名].js

$.fn.extend({          
    alertWhileClick:function() {            
         alert(22);         
     }       
}); 
 
$.fn.extend({          
    aa:function() {            
         alert(22777);         
     }       
}); 

 

最好的编写方式

;(function($){
 
    /*这里放插件代码，可以将$作为jQuery的别名*/
$.fn.extend({          
    alertWhileClick:function() {            
         alert(22);         
     }       
}); 
 
$.fn.extend({          
    aa:function() {            
         alert(22777);         
     }       
});
$.extend({          
    bb:function() {            
        return 555;        
     }       
});   
})(jQuery);

 

posted @ 2021-02-23 15:03  雨辰～  阅读(61)  评论(0)    收藏  举报