前端开发实用的小技巧

整理来自大四上学期自己的一些前端笔记, 分享给大家~

前端开发实用的小技巧_第1张图片

html

  1. contenteditable="true" 设置该属性div内可编辑,如果想要整个网页可编辑,请在body标签内设置contentEditable。
  2. h5新增的轮播标签 。
  3. xiaoxiao  移动端点击可实现拨号功能
      输入法中多一个搜索按钮 默认调数字键盘 默认调数字键盘
  4. 制作一个向下的三角形,  需创一个空div其border: 10px solid #0000FF: 1.必须是绝对定位,position: absolute  2.border-bottom: none   3.border-left-color:transparent;  border-right-color:transparent;   (如需要向上的三角形可按此方法做一个,也可以通过角度变换180度实现)。
  5.   ; 当shape是矩形时,coords表示矩形左上及右下(x2, y2)的坐标shape="circle" coords="x,y,r" // (x,y)=Center, r=Radius;  当shape是圆形时,coords表示圆中心点坐标(x, y)及半径。
  6. enctype="multipart/form-data"一旦表单有type=file,必须在form标签中加入该属性,使表单数据成二进制数据形式。
  7. css

    1. -webkit-text-size-adjust: none;在谷歌浏览器中,设置字体大小小于12px时,设置大小无效,需要加设置这个属性。
    2. list-style-image: url(../img/img-index/cont.jpg) 。
    3. 多张图片排列会有空隙,因为图片默认对齐方式vertical-align: baseline;当设置为vertical-align: top;时可解决,或者把图片display为block。
    4. overflow: hidden;text-overflow: ellipsis;white-space: nowrap;同时使用可实现超出文字已省略号显示。 
    5.  letter-spacing: 3px;设置字间距;  line-height: 20px;设置段落间距;  word-spacing单词间距;  text-indent: 42px;首行缩进距离设置。
    6. display:table-cell;vertical-align;middle;使其垂直居中。
    7. .xiao:after{clear:both}来清除浮动影响。
    8. :link 超链接访问前的样式;  :visited 访问后;  :active 鼠标点击没松那个时间。
    9. borde:1px solid transparent 设置边框颜色透明。
    10. :target选择器,目标描点
      当点击a链接的时候选择器选择的是 div元素。
    11. :checked按钮框或者复选框被选中css属性值发送变化,:disabled文本框等设置其不可编辑发生的变化  :enable可编辑的情况。
    12. 伪类元素选择器,::first-line选择文本内容第一行,::first-letter文本第一个字。
    13. list-style-position:inside ;设置列表样式在内容里面。

    javascript

    1.  ! $img.is(':animated') 如果没有进行动画。
    2.  var frag = document.createDocumentFragment(); frag.appendChild(element) 能够提高加载速度,避免加载过程闪屏,从而先把复杂标签等放里面,然后显示body.appendChild(frag)。
    3. str.split('').reverse().join(''); 反转字符串
    4.  location.reload();页面刷新; history.go(0)也是页面刷新;
    5.  offsetLeft等不一定等于left,因为如其left=0px;如果该元素相对父元素有margin存在,offsetLeft比left大一个margin像素,
    6. JSON.parse用于从一个字符串中解析出json对象,JSON.stringify()用于从一个对象解析出字符串$.parseJSON(data)用于从一个字符串中解析出json对象。
    7. $.fn.xiao = function(){ return $(this).each(function(){}); 让自定义的方法能够连缀
    8. (function xx(value){ console.log(value); })(i);  声明一个函数xx(value)并调用(i)为实参
    9. 一般来说console.log(ele.style.color)输出是为空的,需要使用函数 var e=document.getElementsByTagName('header')[0];  var h =getComputedStyle(e,null)['height'];
    10. 判断某个对象是否存在某个属性 obj.hasOwnProperty('sname') 只能判断自有属性; 'sname'  in obj 能判断自有和原型属性。
    11.  document.οnmοusemοve=null;清除移动处理事件。
    12. touch事件获得事件的起源坐标 var touch = eve.touches[0];var cliY = touch.clientY;
    13.  字母之间可以比较大小,但不能相减得出具体数字。

    你可能感兴趣的:(前端开发)