在编写前端代码的过程中，有一些属性和方法是需要经常用到的，但是记忆起来又比较麻烦（反正我是间歇性记得），以前我总是要用了就去百度一下，每次还需要对网页对内进行一下筛选，总之很麻烦。本文总结了一些比较常用但又不容易记住的前端属性和方法，包括：文本溢出、文本禁止选中、点击目标区域以外影藏、获取元素距离与位置等。

文本溢出省略符

.text-ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

禁止文本选中

IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;"来达到user-select:none 的效果；

.noselect {
-webkit-user-select: none;  /* Chrome all / Safari all /opera15+*/  
-moz-user-select: none;     /* Firefox all */  
-ms-user-select: none;      /* IE 10+ */  
user-select: none;  
}

opacity兼容IE的写法

我总是记不住下面的一个。

opacity:0.6; 
filter:alpha(opacity=60);

点击目标区域以外区域影藏元素

下面有一个例子，实现点击.main以外区域时，影藏.dialog：

<!--html-->
<div class="dialog">
<div class="main">
...
</div>
</div>

<!--js-->
$(document).mouseup(function(e){
// 设置目标区域
var _con = $(".dialog .main");   
//target不是目标元素，并且不是目标元素的子元素
if( !_con.is(e.target) && _con.has(e.target).length === 0){
$(".dialog").fadeOut('fast')
}
});

checkbox选中

需要注意的是attr("checked",true)方法只有第一次会生效，请使用prop()方法代替attr()方法，下面的例子实现了全选与全不选效果：

$("checkbox#checkAll").change(function(){
if(this.checked){
 $("table input[type='checkbox']").prop("checked",true);
}else{
 $("table input[type='checkbox']").removeAttr("checked");
}
});

返回顶部

function returnTop(){
$('body,html').animate({ scrollTop: 0 }, 300);
}

获取元素的尺寸

$(window).height(); //浏览器当前窗口可视区域高度
$(window).width(); //浏览器当前窗口可视区域宽度

$(document).height(); //浏览器当前窗口文档的高度
$(document).width();//浏览器当前窗口文档对象宽度

$(document.body).height();//浏览器当前窗口文档body的高度
$(document.body).width();//浏览器当前窗口文档body的宽度

$(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
$(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding 

获取元素在文档中的位置

获取元素在页面中的相对对位置

这是一个相对距离，包括滚动条的偏移量

$('#tar').offset().left;
$('#tar').offset().top;

获取元素在页面中的绝对位置

当我们需要获取元素在浏览器窗口的绝对距离时，首先获取相对距离，然后减去窗口的偏移量就可以了

$('#tar').offset().left-$("body").scrollLeft();
$('#tar').offset().top-$("body").scrollTop();

获取鼠标的位置

$(document).mousemove(function(e){
//鼠标相对于浏览器窗口（不包括浏览器的工具栏）的坐标,不包括滚动条的偏移量
console.log(e.clientX+","+e.clientY);
//鼠标相对于屏幕的坐标,这时加上了滚动条的偏移量
if(e.pageX == null) {
console.log(e.x+","+e.y);
    }else{
    console.log(e.pageX+","+e.pageY);
    }
    //鼠标相对于屏幕的坐标
    console.log(e.screenX+","+e.screenY);
})