前端开发实用的小技巧

来源：互联网发布：ubuntu下安装jdk1.8 编辑：程序博客网时间：2024/04/29 18:59

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

html

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

css

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

javascript

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

0 0