Day15:大前端

短命女 2021-09-29 14:38 377阅读 0赞

## 垂直水平居中 ##

css:

display: table-cell; text-align: center; vertical-align: middle;
    
    div:
    display: inline-block; vertical-align: middle;

## position几个属性 ##

position: relative, absolute, fixed, static

## 开关灯 ##

## px，em，rem的区别？ ##

px 像素（Pixel）  
em 是相对长度单位  
相对于当前对象内文本的字体尺寸  
rem是一个相对单位

## 什么是BFC？ ##

BFC(Block formatting context)直译为"块级格式化上下文"。

一个独立的渲染区域

## 实现无缝轮播图 ##

## box-sizing、transition、translate ##

box-sizing用来指定盒模型的大小的计算方式  
分为boreder-box（从边框固定盒子大小）、content-box（从内容固定盒子大小）两种计算方式。

transition： 当前元素只要有“属性”发生变化时，可以平滑的进行过渡。

transtion-duration 设置过渡时间；  
trantion-timing-function 设置过渡速度；  
trantion-delay 设置过渡延时  
translate：通过移动改变元素的位置；有 x、y、z 三个属性

## 选择器优先级 ##

！important>行内样式>id 选择器>类选择器>标签选择器>通配符>继承

## Iframe的作用？ ##

用来在网页中插入第三方页面

## xhtml和 html 有什么区别 ##

XHTML 是一个基于 XML 的置标语言  
HTML是一种基本的 WEB 网页设计语言

XHTML元素必须被正确地嵌套。  
XHTML元素必须被关闭。  
标签名必须用小写字母。  
XHTML文档必须拥有根元素。

## title 与 alt 属性 ##

Alt 当图片不显示时，用文字代表  
Title为该属性提供信息

## 在新窗口打开链接 ##

target：\_blank。

## Web 语义化的理解 ##

让浏览器更好的读懂你写的代码，在进行 HTML 结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简介明了，易于进行Web 操作和网站 SEO

## DOCTYPE ##

一种标准通用标记语言的文档类型声明  
告诉标准通用标记语言解析器

## display：none；与 visibility： hidden ##

display：none；  
各种属性值都将“丢失”；  
visibility：hidden；  
它所占据的空间位置仍然存在

## 实现无缝轮播图 ##

/*
     * 该函数是返回的是指定格式的日期,是字符串类型
     * 参数:date ----日期
     * 返回值: 字符串类型的日期
     * */
    function getDatetoString(date) {
        var strDate;//存储日期的字符串
        //获取年
        var year=date.getFullYear();
        //获取月
        var month=date.getMonth()+1;
        //获取日
        var day=date.getDate();
        //获取小时
        var hour=date.getHours();
        //获取分钟
        var minute=date.getMinutes();
        //获取秒
        var second=date.getSeconds();
        hour=hour<10?"0"+hour:hour;
        minute=minute<10?"0"+minute:minute;
        second=second<10?"0"+second:second;
        //拼接
        strDate=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;//隐藏问题,关于变量声明的位置
        return strDate;
    }
    
    //根据id获取元素对象
    function my$(id) {
        return document.getElementById(id);
    }
    
    
    /*
     *
     * innerText属性IE中支持
     * textContent火狐中支持
     * dvObj.innerText="您好";设置innerText的值
     * console.log(dvObj.innerText);获取innerText的值
     * 因为上述原因,inerText有时候需要设置值，有时候需要获取值
     * 所以,需要写一个兼容的代码能在火狐中使用,也可以在IE中使用
     *
     *
     * */
    
    /*
     *设置innerText属性的值
     * element-----为某个元素设置属性值
     * content-----设置的值
     * */
    function setInnerText(element,content) {
        if(typeof element.textContent==="undefined"){
            //IE浏览器
            element.innerText=content;
        }else{
            element.textContent=content;
        }
    }
    /*
     * 获取innerText属性的值
     * element 要获取的元素
     * 返回的是该元素的innerText值
     * */
    function getInnerText(element) {
        if(typeof element.textContent==="undefined"){
            //IE浏览器
            return element.innerText;
        }else{
            return element.textContent;
        }
    }
    
    
    //获取当前元素前一个元素
    function getPreviousElement(element) {
        if(element.previousElementSibling){
            return element.previousElementSibling;
        }else{
            var ele=element.previousSibling;
            while (ele&&ele.nodeType!==1){
                ele=ele.previousSibling;
            }
            return ele;
        }
    }
    //获取当前元素的后一个元素
    function getNextElement(element) {
        if(element.nextElementSibling){
            return element.nextElementSibling;
        }else{
            var ele=element.nextSibling;
            while(ele&&ele.nodeType!==1){
                ele=ele.nextSibling;
            }
            return ele;
        }
    }
    
    //获取父元素中的第一个元素
    function getFirstElementByParent(parent) {
        if(parent.firstElementChild){
            return parent.firstElementChild;
        }else{
            var ele=parent.firstChild;
            while (ele&&ele.nodeType!==1){
                ele=ele.nextSibling;
            }
            return ele;
        }
    }
    //获取父元素中的最后一个元素
    function getLastElementByParent(parent) {
        if(parent.lastElementChild){
            return parent.lastElementChild;
        }else{
            var ele=parent.lastChild;
            while(ele&&ele.nodeType!==1){
                ele=ele.previousSibling;
            }
            return ele;
        }
    }
    
    //获取兄弟元素
    function getsiblings(ele) {
        if(!ele)return;//判断当前的ele这个元素是否存在
        var elements=[];//定义数组的目的就是存储当前这个元素的所有的兄弟元素
        var el=ele.previousSibling;//当前元素的前一个节点
        while (el){
            if (el.nodeType===1){//元素
                elements.push(el);//加到数组中
            }
            el=el.previousSibling;
        }
        el=ele.nextSibling;
        while(el){
            if(el.nodeType===1){
                elements.push(el);
            }
            el=el.nextSibling;
        }
        return elements;
    }
    //    //能力检测多个浏览器为同一个对象注册多个事件
    var EventTools= {
        //为对象添加注册事件
        addEventListener: function (element, eventName, listener) {
            if (element.addEventListener) {
                element.addEventListener(eventName, listener, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + eventName, listener)
            } else {
                element["on" + eventName] = listener;
            }
        },
        //为对象移除事件
        removeEventListener: function (element, eventName, listener) {
            if (element.removeEventListener) {
                element.removeEventListener(eventName, listener, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + eventName, listener);
            } else {
                element["on" + eventName] = null;
            }
        },
        //获取参数e
        getEvent: function (e) {
            return e || window.event;
        },
        getPageX: function (e) {
            if (e.pageX) {
                return e.pageX;
            } else {
                //有的浏览器把高度设计在了文档的第一个元素中了
                //有的浏览器把高度设计在了body中了
                //document.documentElement.scrollTop;//文档的第一个元素
                //document.body.scrollTop;
                var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                return e.clientX + scrollLeft;
            }
        },
        getPageY: function (e) {
            if (e.pageY) {
                return e.pageY;
            } else {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                return e.clientY + scrollTop;
            }
        }
    
    };
    
    //获取元素的当前位置,移动,每次移动多少像素
    // function animate(element,target) {
    //     //每次调用这个函数的时候先清理之前的计时器
    //     clearInterval(element.setId);
    //     element.setId=setInterval(function () {
    //         //获取元素当前的位置
    //         var current=element.offsetLeft;
    //         //每次移动的像素
    //         var step=15;
    //         //判断移动的步数应该是正数还是负数
    //         step=current<target?step:-step;
    //         //当前的位置=之前的当前位置+移动的步数
    //         current=current+step;
    //         if(Math.abs(target-current)<Math.abs(step)){
    //             //把计时器清理
    //             clearInterval(element.setId);
    //             element.style.left=target+"px";
    //         }else{
    //             //赋值给要移动的元素
    //             element.style.left=current+"px";
    //         }
    //     },20);
    // }
    //

## 检测Internet Explorer版本 ##

$(document).ready(function() {
    if(navigator.userAgent.match(/msie/i)){
    alert();
    }
    }):

## 平稳滑动到页面顶部 ##

$("a[href='#top']").click(function(){
    $("html, body").animate({ scrollTop: 0 }, "slow");
    return false;
    });

## 固定在顶部 ##

function() {
    var $win = $(window)
    var $nav = $(".mytoolbar");
    var navTop = $(".mytoolbar").length && $(".mytoolbar").offset().top;
    var isFixed = 0;
    
    processScroll()
    $win.on("scroll", processScroll)
    
    function processScroll() {
    var i, scrollTop = $win.scrollTop()
    
    if(scrollTop >= navTop && !isFixed) {
     isFixed = 1
     $nav.addClass("subnav-fixed")
    }else if(scrollTop <= navTop && isFixed) {
    isFixed = 0
    $nav.removeClass("subnav-fixed")
    }

## 取代html标志 ##

$("li").replaceWith(function() {
     return $("<div />").append($(this).contents());
    });

## 检测视窗宽度 ##

var responsive_viewport = $(window).width();
    if(responsive_viewport < 481){
    alert();
    }

## 检测复制、粘贴和剪切的操作 ##

$("#textA").bind("copy", function() {
    $("span").text("copy")
    });
    
    $("#textA").bind("paste", function() {
    $("span").text("paste")
    });
    
    $("#textA").bind("cut", function() {
    $("span").text("cut")
    });

## 在文本或密码输入时禁止空格键 ##

$("input.nospace").keydown(function(e){
    if(e.keyCode == 32){
     return false;
     }
    });

## JS创建对象方式 ##

工厂模式

![image.png][]

![image.png][image.png 1]

构造函数模式  
![image.png][image.png 2]

原型模式

![image.png][image.png 3]

将信息直接添加到原型对象上。

可以让所有的实例对象共享它所包含的属性和方法

![image.png][image.png 4]

Object.defineProperty方法

Object.defineProperty(Person.prototype, 'constructor', {
      enumerable: false,
      value: Person
    })

动态原型模式

![image.png][image.png 5]

寄生构造函数模式  
![image.png][image.png 6]

## 如何理解 JS 中的this关键字 ##

“this” 一般是表示当前所在的对象  
JS中的this关键字由函数的调用者决定，谁调用就this就指向哪个。如果找不到调用者，this将指向windows对象。

由于 this 关键字很混乱，如何解决这个问题

使用bind，call，apply函数也可以解决问题。

## 什么是闭包 ##

闭包是在另一个作用域内创建一个封闭的词法范围

function add(n){
    var num = n
    return function addTo(x) {
     return x + num
    }
    }
    addTwo = add(2)
    addTwo(5)

## 变量的提升 ##

初始化不会被提升，提升仅作用于变量的声明。  
变量的提升是JavaScript的默认行为

## JS处理同步和异步情况 ##

一旦函数被调用，函数将被推入堆栈。然而，异步函数不会立即被推入调用堆栈，而是会被推入任务队列(Task Queue)，并在调用堆栈为空后执行。

## 如何理解高阶函数 ##

![image.png][image.png 7]

## 区分声明函数和表达式函数 ##

// 声明函数
    function hello() {
     return "hello"
    }
    // 表达式
    var a = function hello(){
    return "hello"
    }

## 严格模式(strict mode) ##

严格模式用于标准化正常的JavaScript语义。

![image.png][image.png 8]

原型继承  
![image.png][image.png 9]

## 判断对象的数据类型 ##

Object.prototype.toString.call(target)
    isType
    isArray()

a标签不可以嵌套交互式元素  
p标签不能包含块级元素  
li标签可以包含div以及ul，ul的子元素应该只有li

![image][]

![image][image 1]

![image][image 2]

![image.png][image.png 10]

![image.png][image.png 11]

![image.png][image.png 12]

![image.png][image.png 13]

## 水平居中和垂直居中，水平垂直居中 ##

![image.png][image.png 14]

![image.png][image.png 15]

## jQuery轮播图 ##

![image.png][image.png 16]

$(function() {
        var index = 0; //计数器
        var lw=$(".banner ul li").width();//获取li的宽度
        //复制第一个li标签元素及其内容
        var firstImg = $(".banner ul li").eq(0).clone();
        $(".banner ul").append(firstImg);
        var imgLen = $(".banner ul li").length;
    
        //向左移动
        $(".arrow-left").click(function() {
            index--;
            move();
        })
        //向右移动
        $(".arrow-right").click(function() {
            index++;
            move();
        })
    
        //移动事件
        function move() {
            //当索引index=图片的长度为第五张（回到下标为1的图片)
            if(index == imgLen) {
                $(".banner ul").css("left", "0px");
                index = 1;
            }
            //当索引index为-1即克隆的那张，第一张下标为0，前面那张下标为-1（回到下标为4的图片)倒数第二张
            if(index == -1) {
                $(".banner ul").css("left", -(imgLen - 1) * lw + "px");
                index = imgLen - 2;
            }
    
            $(".banner ul").stop().animate({
                "left": -index * lw + "px"
            }, 500);
    
            if(index == imgLen - 1) {
                $(".banner .icon span ").eq(0).addClass("on").siblings().removeClass("on")
    
            } else {
                $(".banner .icon span ").eq(index).addClass("on").siblings().removeClass("on")
            }
        }
        //动态添加分页器内容
        for(var j = 1; j<imgLen; j++) {
            $(".banner .icon").append("<span>"+j+"</span>");
        }
        $(".banner .icon span ").eq(0).addClass("on").siblings().removeClass("on");
    
        /*自动轮播*/
    
        var timeId = setInterval(function() {
            index++;
            move();
        }, 1500);
        
        /*鼠标滑入原点事件*/
        $(".banner .icon span").mouseenter(function(){
            var x=$(this).index();//获取当前索引值
            index=x;
            $(".banner ul").stop().animate({"left":-index*lw+"px"},500);
            $(this).addClass("on").siblings().removeClass("on");
            
        })
        /*鼠标悬停事件*/
    
        $(".banner").hover(function() {
            clearInterval(timeId); //鼠标悬停时清除定时器
        }, function() {
            timeId = setInterval(function() {
                index++;
                move();
            }, 1500); //鼠标移出时开始定时器
        });
    
    })

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]

吹逼交流群：**711613774**

![吹逼交流群][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]

[image.png]: /images/20210724/52171e55b3664438bfee0d58ca2cdc5e.png
[image.png 1]: /images/20210724/4b99cdec7e724caeae0c19b2d7566c33.png
[image.png 2]: /images/20210724/af9a691113c84bdeb1260a00cf47813d.png
[image.png 3]: /images/20210724/0133e3a0d138403285e3db3720089b7d.png
[image.png 4]: /images/20210724/311243f9e5b540cab994f6e3e48f5c2b.png
[image.png 5]: /images/20210724/7767807c41e34a978075349203d9c1d7.png
[image.png 6]: /images/20210724/e6e88d734b194d36b5131e62178eadb1.png
[image.png 7]: /images/20210724/c650ad1795de4c03bd32c38675dfc32a.png
[image.png 8]: /images/20210724/33ebcd9999b54548ac242695243a5144.png
[image.png 9]: /images/20210724/bc7b001c064847329489a46625ef52cc.png
[image]: /images/20210724/0e5aed104597483f8f0f1c77aad214bd.png
[image 1]: /images/20210724/5c59a846b6524c23a0ed0b1bfcaaa921.png
[image 2]: /images/20210724/fef14c3fa9ee4342a606b257011da064.png
[image.png 10]: /images/20210724/9100b087a983405fbb19843e89fc2923.png
[image.png 11]: /images/20210724/a5e31aa0774647a994147f81f0c2c9c0.png
[image.png 12]: /images/20210724/13afab693d8d46b998a028669e1b9c07.png
[image.png 13]: /images/20210724/4827bbe6e06e4a418e77b201d6a9f38e.png
[image.png 14]: /images/20210724/b62961f8a08547e2b575d5514870bd35.png
[image.png 15]: /images/20210724/e34dd4db23a941dea0d3058eed75fa21.png
[image.png 16]: /images/20210724/77bac7d3b6ee44e4b113a0fba939b558.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]: /images/20210724/36678e0624844b9b9b51a615f68ab3e7.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]: /images/20210724/4e1d5ad8beda4e1a9abd28af8f900d2e.png