邢栋博客

邢栋博客,Action博客,记录工作和生活中的点点滴滴

jquery点击空白处隐藏弹出层

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery点击空白处隐藏弹出层</title>
<style type="text/css">
.pop {width:200px;height:150px;background:green;display:none;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#clickBtn").click(function(){
$(".pop").show();
});
$(document).bind("click",function(e){
var target  = $(e.target);
if(target.closest(".pop,#clickBtn").length == 0){/*.closest()沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止,返回包含零个或一个元素的 jQuery 对象。*/
$(".pop").hide();
};
e.stopPropagation();//不再派发事件
});
})
</script>
</head>

<body>
<div class="pop">点击空白消失</div>
<input type="button" id="clickBtn" value="点击">
</body>
</html>

jquery常用的提交效率的技巧
1.选择器
$("#myId"); // 多少还是会逊色于...
document.getElementById("myId");

2.选择器
var $products = $("div.products"); // 慢
var $products = $(".products"); // 快
3.选择器
$("div.data .gonzalez"); // 丑陋
$(".data td.gonzalez"); // 优化后
4.选择器
$('.class');// 劣质的代码:因为需要遍历整个DOM来找到.clas
$('.class', '#class-container');// 高品代码:因为只需在指定容器范围内进行查找
5.选择器
$('div.container > *'); // 差
$('div.container').children(); // 棒

5.选择器
$('div.someclass :radio'); // 差
$('div.someclass input:radio'); // 棒

6. 关于append,以后尽量用第三种方法
// 这样不好
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("<li>"+i+"</li>");
}
// 这样好
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "<li>"+i+"</li>";
}
$myList.html(list);
// 但这样更好
var array = []; 
for(var i = 0; i < 10000; i++){
    array[i] = "<li>"+i+"</li>"; 
}
$myList.html(array.join(''));


6.做好缓存
糟糕的做法
jQuery('#top').find('p.classA');
jQuery('#top').find('p.classB');
更好的写法
var cached = jQuery('#top');
cached.find('p.classA');
cached.find('p.classB');

7.事件的委托处理
一般
$("td").on("click", function(){
$(this).toggleClass("click");
});
更好
$("table").on("click", "td", function(){
$(this).toggleClass("click");

});


借鉴文章:

http://web.jobbole.com/83277/

http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html



优惠券
最新微语