前端开发小知识点

1. <button></button>标签内可以放置内容,比如文本和图片,而<input type="button" value="确定">是单标签,则不可以,只能通过value属性设置按钮文字。二者均可设置文字大小和颜色。

2. Ajax请求数据渲染页面,这时要注意,给将要渲染到页面的标签设置事件属性时,事件方可生效,如<button type="button" onclick="save()"></button>; 通过js获取标签元素,再绑定事件时无效,因为Ajax异步请求,js还无法获取到该标签元素。这点要牢记!

3. location.reload() 重载当前页面。

4. 等宽的表格单元格样式属性:table-layout:fixed 。

5. IE8不支持background-size属性(css3), IE9支持。兼容方法:滤镜。

    background-image: url('file:///F:/test/images/flashbg.jpg'); 

    background-size: cover; 

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///F:/test/images/flashbg.jpg',sizingMethod='scale');   其中,图片的路径url和src必须一样,同时路径都必须是绝对路径,全路径,才可以,否则会出错。

6. href="#"和href="javascript:void(0)"的区别

    #表示了一个位置信息,默认的锚#top也就是网页的上端。javascript:void(0),仅仅表示一个死链接。在页面很长的时候会使用#来定位到页面的具体位置,格式:# + id 。如果你要定义一个死链接,请使用javascript:void(0) 。

7. js文件引用资源时,相对路径以宿主文件(如引用该js文件的html文件)所处的位置为基准,css文件引用资源时,相对路径以自身为基准。切记!

8. js将一个数字转为带两位小数的数,可以使用num.toFixed(2),不过返回值是数字的字符串表示法。

9. 以下两种声明变量的写法差异还蛮大的,第一种a是局部变量,b是全局变量,相当于b=1,var a=b;第二种c,d都是局部变量。

function add(){
  var a=b=1; 
var c=1,d=1; }

10. js删除对象的某个属性:delete obj.property 

11. border-spacing:10px 20px;  相邻单元格边框之间的水平间距是10px,垂直间距是20px。

12. 置换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。

      不可置换元素:html中的大多数元素是不可置换元素,即其内容直接表现给客户端(如浏览器)。

      <img>,<input>,<textarea>,<select>,<object>等,置换元素在其显示时生成了框,这是有些内联元素能设置宽高的原因。

13. autocomplete属性规定输入字段时是否启用自动完成功能。autocomplete="off",清除input框输入存留的历史值,防止下拉历史显示。

14. <input type="file" multiple="multiple"> 可同时上传多个文件。multiple是html5的新属性。

15. http是计算机通过网络进行通讯的规则,它是一种无状态的协议。

16. onchange事件:内容改变且失去焦点触发,可用于<input>,<select>,<textarea>; oninput事件:内容改变立即触发,可用于<input>和<textarea>。

17. 引入title里的小图标:<link rel="shortcut icon" href="图片路径"/>

18. 数组去重:[...new Set(arr)]    扩展运算符和Set结构结合使用。

19. Array.from()  可以将一个类数组或可迭代对象转成一个数组,并返回这个新数组。如String,arguments,Set, Map。

20. arr.filter((value,index,arr) => value > 2)  返回一个新数组,其包含所有满足测试函数的元素。 此例返回某个数组中所有大于2的元素组成的数组。不会改变原数组。

21. 

22. 

23. CSS HACK:在css样式中加入一些特殊符号,让不同的浏览器识别不同的符号,来达到应用不同的css样式,而最终的显示效果一致。 如_color:#999;   IE6识别。

24. js判断数据类型的四种方法:(1)typeof (2)instanceof (3)constructor (4)toString()

25. Object.freeze(obj) 冻结一个对象,不能增删改。

26. ES6声明变量的6种方式:var,function,let,const,import,class。

27. 原生js禁用按钮:document.getElementById("btn").disabled = true;或document.getElementById("btn").setAttribute("disabled",true);  true可换成"disabled"。

28. Array.of()  将一组值转换为数组,ES6新方法。例:Array.of(1,2,3);  //[1,2,3]   Array.of()  //[]

29. 始终为button标签添加type属性,IE下的默认类型是button,其他浏览器的默认类型是submit。

30. ECMA中所有函数的参数都是按值传递的。如果是引用类型数据,则是将指针对象传给形参,函数内部修改,外部引用类型数据也会改变。

31. <script>标签中的defer属性(只有IE支持),延迟脚本的执行,直到页面加载完毕,比window.onload稍早。

32.vue项目使用<a href='../../my.pdf' download='下载后的名字,由你定义,不写的话默认文件名'>下载</a> 把文件放到static文件夹中才能下载。

33.vue锚点跳转:<a href="" @click.prevent="jump('anchor1')">    methods里的方法 jump(id){document.querySelector("#"+id).scrollIntoView(true);}

34.css预编译器:Less、Sass、Stylus

持续更新中~~~

    

原文地址:https://www.cnblogs.com/crackedlove/p/10026252.html