前端 input怎么显示null_前端一些知识点区别

最新推荐文章于 2021-06-23 18:48:14 发布

tomorrow-77

最新推荐文章于 2021-06-23 18:48:14 发布

阅读量991

点赞数

文章标签：前端 input怎么显示null

前端东西太多，总是容易记混淆，我在这里整理一些相似知识点的区别，自己也加强一下记忆，不全面或有误的地方大家多补充补充。

1.fixed、absolute、relative的区别：

fixed：固定定位；脱离文档流^[1]，相对于浏览器窗口，元素通过top、right、bottom、left来进行定位，不会根据滚动条的滚动而滚动（注：若是要让固定定位的元素，会跟着滚动条移动，就是改变这几个值即可，在导航栏中最常见）。

absolute:绝对定位；脱离文档流，后面的元素会占据它的位置，元素通过top、right、bottom、left来可以放在任何位置，会根据滚动条的滚动而滚动。

relative：相对定位；不会脱离文档流，元素通过top、right、bottom、left来相对于其在普通流中的位置进行定位（最主要就是相对于前一个元素进行定位）。

fixed和absolute的区别：

在无滚动条的情况下，是没什么区别的；
在存在滚动条的时候，fixed不会随着滚动条的滚动而滚动，absolute会根据滚动条的滚动而滚动。

//注：在使用伪元素的时候，父元素为relative；伪元素设置为absolute。

2.关于title和alt的区别：

title：是鼠标移动到上面停留时的提示内容；

alt：是img标签的属性，在图片不能加载成功时显示的内容。

3.link和@import的区别：

link的使用方式：<link rel="stylesheet" href="test.css">；@import的使用方式：@import url("test.css")，在style的最上方被引入；
link属于HTML的元素，@import属于CSS的语法规则；
在页面加载的时候，link引入的CSS同时被加载；而@import引入的CSS会在页面加载完后再加载；
link不存在兼容性，@import得在ie5以上版本才行；

4.px、em、rem的区别：

px:相对长度单位,像素px是相对于显示器屏幕分辨率而言的；

em:并不是固定的,会继承父级元素的字体大小,根据基准来缩放字体的大小；

rem:是相对大小，但是相对的只有HTML根元素，按照比例放大（适合拿来做移动端开发）。

html{
font-size:20px;
}
.remBox{
font-size:2rem;//就是表示HTML字体的两倍--40px
}
<div class="remBox">
rem
</div>

5.display：none和visibility:hidden的区别：

display：none：隐藏元素，后面的元素会占据它的位置；

visibility:hidden：会隐藏元素，后面的元素不会占据它的位置，会把位置放在那里的。

6.Xhtml、html和html5的区别：

xhtml:可扩展超文本标记语言，是一种置标语言，表现方式与html类似，不过语法上更加严格(元素必须正确嵌套，元素必须被关闭，标签名必须小写文档必须有根元素^[2])。

html:超文本标记语言 ;没有体现结构语义化的标签;

html5:在语义上却有很大的优势。提供了一些新的标签，比如:<header><article><footer><nav>;提供了语义化标签可以更好地支持搜索引擎的读取便于seo的蜘蛛的爬行。

7.href和src的区别：

href:主要应用于link引入CSS、a标签，是一种超文本引用，用来建立当前元素与文档之间的关联；

src:主要应用于img、script ;src的内容是必不可少的，是引入。

8.size和maxlength的区别：

size：表示input输入框显示的可见字符个数，但是你可以输入无数个字符。

maxlength：表示input输入框，你只能输入限定的个数。

9.window.οnlοad=function(){}和$(function(){})的区别：

window.onload:是等页面中所有元素完全加载完再执行；

$(function(){})：等页面中的标签加载完就执行；

因此： $(function(){})会比 window.onload先执行；

一个页面中只能有一个 window.onload，若是出现多个后面的会覆盖前面的；但是一个页面可以有多个$(function(){})；

10.（juqery）attr和prop的区别：

（我记得是因为有次关于复选框的问题，使用attr无效时，查询时才注意到了prop）

<input type="checkbox" name="book" id="all">
<input type="checkbox" name="book" ><label>语文</label>
<input type="checkbox" name="book" ><label>数学</label>
$("#all").change(function () {
    if($(this).is(":checked")){
        //全部置为选中；
        //$("input[name='book']").attr({"checked":true});//若是单独先选择了某一个，则再点击all，就不会生效
        $("input[name='book']").prop({"checked":true});
    }
    else{
       //全部置为不选中
        // $("input[name='book']").attr({"checked":false});
        $("input[name='book']").prop({"checked":false});
    }
})

建议：属性值有 true和false的，如 checked, selected 或者 disabled 使用prop()，其他的使用attr()；

11.（jQuery）mouseover和mouseenter的区别：

mouseover和mouseout配合使用：若是移入子元素，不会触发父元素的mouseout；

mouseenter和mouseleave配合使用：若是移入子元素，不会触发父元素的mouseleave；也就是不会

冒泡^[3].

12.==和===的区别：

==：相等运算符；就是看数据是否相同；

===：严格运算符；不光要看数据是否相同还要看其数据类型是否相同。

13.return、continue和break的区别：

break：是跳出循环

continue：是跳过这次

return：是跳出函数体

//break
     for (var i = 0; i < 10; i++) {
        if (i == 5) {
            break;//跳出这个for循环
        }
        console.log(i);//输出0，1,2,3,4
      }
//continue
for (var i = 0; i < 5; i++) {
        if (i == 2) {
            continue;//跳过i==2的这次
        }
        console.log(i);//输出0，1,3,4
    }
//return
   function fn() {
        for (var i = 0; i < 5; i++) {
            if (i == 2) {
                return;//跳出函数体
            }
            console.log(i);//输出0,1
        }
    }
    fn();

14.null和undefined的区别：
undefined：定义了，但是没有赋值；

null ：表示无的对象，例：获取某个dom元素，但是HTML中没有这个元素，就会返回来null；

 console.log(document.getElementById("dom"));//返回来null，因为没有id为dom的元素

15.call,apply和bind的区别：
相同点是：三者都是来改变this的指向。

call和apply的区别：

相同点：都是调用一个对象的一个方法，用另一个对象替换当前对象；

不同点：参数书写方式不同：call:第一个参数是this要指向的对象，后面传入的是参数列表，参数顺序传入，可以为空(null)；

apply:第一个参数是要指向的对象，第二个参数是数组，可以为空([]);

Call和bind的区别：

相同点：两个的传参是一样的。

不同点：call改过this的指向后，会再执行函数;

bind改过this后，不执行函数，会返回一个绑定新的函数；

function fn(sex,height) {
    return this.name+":"+sex+":"+height;
};
var ob={
    name:"cx",
}
 console.log(fn.call(ob,"女",165)) ;//返回cx:女:165
 console.log(fn.apply(ob,["女",165])) ;//返回cx:女:165
 console.log(fn.bind(ob,"女",165)) ;//返回这个函数
 console.log(fn.bind(ob,"女",165)())//返回cx:女:165

16.let和var的区别：

let：是es6新增的，只在变量声明时所在的代码块中有效；

var：声明变量

例：
//关于变量提升
    var a=10;//设置全局变量a
    console.log(a);//输出10
    fn();//调用函数
    function fn() {
      console.log(a);//输出10
    }


//在这里大家感觉都知道，很简单；接下来
    var a=10;//设置全局变量a
    console.log(a);//输出10
    fn();//调用函数
    function fn() {
      console.log(a);//输出什么呢？-----------输出undefined；
                     //因为当前的a是下面变量a声明提升后的，但是这个时候a并没有被赋值------这就叫做变量提升
       var a=20;
    }

//若是块级使用let定义一个a
    var a=10;//设置全局变量a
    fn();//调用函数
    function fn() {
      console.log(a);//这样这里会报错
       let a=20;
    }

总结：let没有变量提升，在没有定义变量前，变量不能使用；

let不能重复定义某变量；

跟for循环配合使用比较好；

建议：定义全局变量使用var；在代码块中定义若是要使用let定义，记得先定义再使用；let与for循环配合使用。

17.ajax中的async和cache：

async：请求的方式；为true：异步请求，（三心二意，可以同时做多个）相当于多线程；

为false：同步请求，（一心一意，浏览器在做这个的时候不能做其他的）相当于单线程。

cache：是否在缓存中读取数据；

为true：会默认获取缓存中的数据；

为false：每次读取的都是最新的。

18.cookie、localStorage和sessionStorage的区别

a.存储大小：

cookie：数据大小不能超过4K；但是localStorage和sessionStorage要比cookie大得多；

b.有效时间：

cookie:在设置的cookie过期时间之前一直有效，即窗口或浏览器关闭； localStorage：存储持久的数据，浏览器关闭也不会删除数据除非主动删除数据； sessionStorage：数据在当前浏览器窗口关闭后自动删除。

注：在使用前都需要先判断一下浏览器是否关闭了。

19.窗口事件：

窗口滾動條滾動：

js:
window.onscroll=function(){
  var left=document.documentElement.scrollLeft;//滾動條滾動離左邊的距離
}

jquery:
$(document).scroll(function(){
var left=$(document).scrollLeft;
})

窗口大小變化：

js:
window.onresize=function(){

}
jquery:
$(window).resize(function(){
})

参考

^文档流：将窗体至上而下形成一行一行的，并在每行中按从左至右的顺序排放元素
^根元素：什么标签开始就要用什么标签结束，如<body>开始就要在内容结束用</body>来关闭
^冒泡：事件发生后开始传播，由里及外；阻止冒泡：e.stopPropagation();或e.cancelBubble=true.

tomorrow-77

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端 input怎么显示null_前端一些知识点区别

前端东西太多，总是容易记混淆，我在这里整理一些相似知识点的区别，自己也加强一下记忆，不全面或有误的地方大家多补充补充。1.fixed、absolute、relative的区别： fixed：固定定位；脱离文档流[1]，相对于浏览器窗口，元素通过top、right、bottom、left来进行定位，不会根据滚动条的滚动而滚动（注：若是要让固定定位的元素，会跟着滚动条移动，就是改变这...
复制链接

扫一扫