Haorooms博客-前端博客-前端技术，记录web前端开发的技术博客

js关闭浏览器事件,js关闭浏览器提示及相关函数

2014年9月24日

项目背景

有时候在用户关闭浏览器的时候，希望给用户一些提示，提示确认了或者其他。有时候需要再关闭浏览器的时候清除cookie进行其他操作等等，需要用到浏览器关闭事件。

关于浏览器关闭事件的相关描述

有些朋友想在浏览器关闭的时候，弹出alert 、confirm或者prompt等。实验证明，这种做法是失败的，原因是浏览器关闭事件自动屏蔽执行js的某些方法，从而防止恶意攻击或者无法关闭浏览器的现象，针对这些事件的处理，一般都是写在浏览器底层。因此，你想在关闭浏览器的时候弹出alert提示框是不可能的。要是你对浏览器感兴趣，您可以去研究这些问题，同时也可以自己写一个简单的浏览器（ps网上应该有相关的方法，据说不是很难）。对于浏览器底层的东西，恕我才疏学浅，不是很了解！

浏览器关闭事件

真正地用js捕捉浏览器关闭事件，写法如下：

  window.onbeforeunload = function(){
      return '您确定要离开haorooms博客吗？';
    };

会弹出“您确定要离开haorooms博客吗”这样的确认框，你可以点击留在此页或者确定离开来进行操作，要是你想简单的对用户进行提示，这句话已经能够达到效果了！

引深

[阅读更多]

js清除浏览器缓存的几种方法

2014年9月24日

关于浏览器缓存

浏览器缓存，有时候我们需要他，因为他可以提高网站性能和浏览器速度，提高网站性能。但是有时候我们又不得不清除缓存，因为缓存可能误事，出现一些错误的数据。像股票类网站实时更新等，这样的网站是不要缓存的，像有的网站很少更新，有缓存还是比较好的。今天主要介绍清除缓存的几种方法。

清理网站缓存的几种方法

meta方法

//不缓存
<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="0">

清理form表单的临时缓存

<body onLoad="javascript:document.yourFormName.reset()">

其实form表单的缓存对于我们书写还是有帮助的，一般情况不建议清理，但是有时候为了安全问题等，需要清理一下！

jquery ajax清除浏览器缓存

方式一：用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control,如下:

  $.ajax({
     url:'www.haorooms.com',
     dataType:'json',
     data:{},
     beforeSend :function(xmlHttp){ 
        xmlHttp.setRequestHeader("If-Modified-Since","0"); 
        xmlHttp.setRequestHeader("Cache-Control","no-cache");
     },
     success:function(response){
         //操作
     }
     async:false
  });

[阅读更多]

jquery常用选择器总结

2014年9月23日

jquery常用选择器

基本选择器
$(‘*’)	匹配页面所有元素
$(‘#id’)	id选择器
$(‘.class’)	类选择器
$(‘element’)	标签选择器

组合/层次选择器
$(‘E,F’)	多元素选择器，用”,分隔，同时匹配元素E或元素F
$(‘E F’)	后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
$(E>F)	子元素选择器，用”>”分隔，匹配E元素的所有直接子元素
$(‘E+F’)	直接相邻选择器，匹配E元素之后的相邻的同级元素F
$(‘E~F’)	普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
$(‘.class1.class2’)	匹配类名中既包含class1又包含class2的元素
基本过滤选择器
$("E:first")	所有E中的第一个
$("E:last")	所有E中的最后一个
$("E:not(selector)")	按照selector过滤E
$("E:even")	所有E中index是偶数
$("E:odd")	所有E中index是奇数
$("E:eq(n)")	所有E中index为n的元素
$("E:gt(n)")	所有E中index大于n的元素
$("E:ll(n)")	所有E中index小于n的元素
$(":header")	选择h1~h7 元素
$("div:animated")	选择正在执行动画效果的元素
内容过滤器
$(‘E:contains(value)’)	内容中包含value值的元素
$(‘E:empty’)	内容为空的元素
$(‘E:has(F)’)	子元素中有F的元素，$(‘div:has(a)’):包含a标签的div
$(‘E: parent’)	父元素是E的元素，$(‘td: parent’):父元素是td的元素
可视化选择器
$(‘E:hidden’)	所有被隐藏的E
$(‘E:visible’)	所有可见的E
属性过滤选择器
$(‘E[attr]’)	含有属性attr的E
$(‘E[attr=value]’)	属性attr=value的E
$(‘E[attr !=value]’)	属性attr！=value的E
$(‘E[attr ^=value]’)	属性attr以value开头的E
$(‘E[attr $=value]’)	属性attr以value结尾的E
$(‘E[attr =value]’)	属性attr包含value的E
$(‘E[attr][attr =value]’)	可以连用
子元素过滤器
$(‘E:nth-child(n)’)	E的第n个子节点
$(‘E:nth-child(3n+1)’)	E的index符合3n+1表达式的子节点
$(‘E:nth-child(even)’)	E的index为偶数的子节点
$(‘E:nth-child(odd)’)	E的index为奇数的子节点
$(‘E:first-clild’)	所有E的第一个子节点
$(‘E:last-clild’)	所有E的最后一个子节点
$(‘E:only-clild’)	只有唯一子节点的E的子节点
表单元素选择器
$(‘E:type’)	特定类型的input
$(‘:checked’)	被选中的checkbox或radio
$(‘option: selected’)	被选中的option

筛选方法

除了上面的选择器，我们还要了解一点点筛选的方法：

.find(selector) 查找集合每个元素的子节点

Get the descendants(子节点) of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

$('li.item-ii').find('li').css('background-color', 'red');

.filter(selector) 过滤当前集合内元素

Reduce(减少) the set of matched elements to those that match the selector or pass the function's test.

$('li').filter(':even').css('background-color', 'red');

jquery如何判断div是否隐藏,jquery判断div隐藏方法

2014年9月23日

应用场景

我们在项目中通过会判断某个div是否隐藏，然后执行某一个函数，或者进行一个操作，其实判断div是否隐藏的方法很简单。

方法

例如：

html代码

<div id="haorooms" style="display:none"></div>

jquery代码

alert($("#haorooms").is(":hidden"))

如果是隐藏了，怎会返回true，否则，则是false

同理，是否可见的属性：

alert($("#haorooms").is(":visible"))

延伸

[阅读更多]

js实现网页换肤功能,javascript网页更换皮肤功能

2014年9月22日

引子

网页换肤是一门老技术了，老的现在都不怎么流行了。但是，有时候有些客户就是想要这个换肤功能。于是就实践做了一下网页换肤，方法有很多，下面先对一种方法做一下简单的介绍。

网页换肤的基本原理

基本原理很简单，就是使用 JS 切换对应的 CSS 样式表。例如导航网站 Hao123 的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外，通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤，这样下次用户访问的时候，就可以自动使用上次用户配置的选项。那么基本工作流程就出来了：访问网页——JS 读取 Cookie ——如果没有，使用默认皮肤——如果有，使用指定皮肤；用户点击换肤选项——JS 控制替换对应的 CSS 样式表——将皮肤选项写进 Cookie 保存。

网页换肤事先需要的准备

首先你可能要准备多套 CSS 样式表文件，当点击换肤按钮的是，使用 JS 来切换对应的 CSS 样式表。之后，就是在网页上增加一个 ul li 列表，用 CSS 修饰一下做成换肤选项。例如：

下面我们就来看具体功能代码。

实现点击切换对应 CSS 功能

[阅读更多]