javascript里面的if条件判断,==比较和页面刷新跳转

爱吃牛肉的大老虎

已于 2022-03-06 12:32:52 修改

阅读量4k

点赞数

分类专栏： # JavaScript 文章标签： javascript

于 2018-08-09 11:12:23 首次发布

本文链接：https://blog.csdn.net/u012060033/article/details/81532986

版权

JavaScript 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

3.2.2 href=javascript:void(0);

1 if条件判断

在JS中，If 除了能够判断bool的真假外，还能够判断一个变量是否有值。

变量值	true	'1'	1	'0'	'null'	2	'2'	false	0	null		0.0
输出序列号	0	1	2	3	4	5	6	7	8	9	10	11
输出结果	true	true	true	true	true	true	true	false	false	false	false	false

var test = function () {
var data = [true, "1", 1, '0', 'null', 2, '2', false, 0, null, , 0.0]
for (var i = 0; i < data.length; i++) {
if (data[i]) {
console.log(i + ' - true - ' + data[i])
}
else {
console.log(i + ' - false - ' + data[i])
}
}
for (var i = 0; i < data.length; i++) {
if (!data[i]) {
console.log(i + ' - ! true - ' + !data[i])
}
else {
console.log(i + ' - ! false - ' + !data[i])
}
}
}

JS中，If 语句判断为false的变量值为： false, 0, 0.0, null, undefined

　　　其他变量值判断为true: true, 1, [任何字串/数字]

2 ==(相等)与===(全等)

很多前端新手在使用==和===时都表现得模棱两可，下面我们来对它进行全面的讲解

2.1 基础类型比较

string,number,boolean等基础类型之间进行比较时

==比较：先将比较的两者转换为同一类型然后进行比较

===比较：不进行类型的转换，如果类型不同则直接返回false

2.2 高级对象类型比较

Array,Object等高级类型之间进行比较

==和===一样比较两者的指针值是否相同

2.3 基础类型和高级类型进行比较

基础类型和高级类型进行比较

==比较：先将高级类型转换为基础类型然后进行比较

===比较：直接返回false

2.4 特例

null==undefined的返回值为true，然而在进行比较时null和undefined都不会转换为其它任何类型的值

总结：其实抓住一点总的准则相等比较时将进行数据类型的转换，而全等则不会进行数据类型的转换，只要数据类型不相同则直接返回false。掌握这些基础知识在实际的项目开发过程中是相当重要的

3 页面刷新跳转

3.1 页面刷新

3.1.1 方法刷新

reload方法，该方法强迫浏览器刷新当前页面。

语法：location.reload([bForceGet]) ，参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")

replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，就不能通过“前进”和“后退”来访问已经被替换的URL。

语法： location.replace(URL) 通常使用： location.reload() 或者是 history.go(0) 来做。

此方法类似客户端点F5刷新页面，所以页面method="post"时，会出现"网页过期"的提示。

因为Session的安全保护机制。

当调用 location.reload() 方法时， aspx页面此时在服务端内存里已经存在，因此必定是 IsPostback 的。

如果有这种应用：需要重新加载该页面，也就是说期望页面能够在服务端重新被创建，期望是 Not IsPostback 的。

这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。

代码： location.replace(location.href);

location.replace(document.referrer);document.referrer //前一个页面的URL

不要用 history.go(-1)，或 history.back();来返回并刷新页面，这两种方法不会刷新页面。

3.1.2 其他方法刷新

Javascript刷新页面的几种方法：

history.go(0) 
location.reload() 
location=location 
location.assign(location) 
document.execCommand('Refresh') 
window.navigate(location) 
location.replace(location) 
document.URL=location.href

3.1.3 页面刷新

页面自动刷新：把如下代码加入<head>区域中

<meta http-equiv="refresh" content="20">

其中20指每隔20秒刷新一次页面.

页面自动跳转：把如下代码加入<head>区域中

<meta http-equiv="refresh" content="20;url=http://www.jb51.net">

其中20指隔20秒后跳转到http://www.jb51.net页面

页面自动刷新js版

<script language="JavaScript">
function myrefresh()
{
   window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>

JS刷新框架的脚本语句

刷新包含该框架的页面用   
<script language=JavaScript>
   parent.location.reload();
</script>
子窗口刷新父窗口
<script language=JavaScript>
    self.opener.location.reload();
</script>
(　或　<a href="javascript:opener.location.reload()">刷新</a>   )
刷新另一个框架的页面用   
<script language=JavaScript>
   parent.另一FrameID.location.reload();
</script>

如果想关闭窗口时刷新或想开窗时刷新，在<body/>中调用以下语句即可。

<body onload="opener.location.reload()"> 开窗时刷新
<body onUnload="opener.location.reload()"> 关闭时刷新
<script language="javascript">
window.opener.document.location.reload()
</script>

3.2 跳转

3.2.1 跳转方法

按钮式：

<INPUT name="pclog" type="button" value="GO" onClick="location.href='http://www.lezhu99.com/'">

链接式：

<a href="javascript:history.go(-1)">返回上一步</a>  
<a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一步</a>

直接跳转式：

<script>window.location.href='http://www.lezhu99.com';</script>

开新窗口：

<a href="javascript:" 
onClick="window.open('http://www.lezhu99.com/','','height=500,width=611,scrollbars=yes,status=yes')">
net
</a>

JS跳转页面参考代码

第一种
<script language="javascript" type="text/javascript">  
window.location.href="login.jsp?backurl="+window.location.href;  
</script>  

第二种
<script language="javascript">  
alert("返回");  
window.history.back(-1);  
</script>  

第三种
<script language="javascript">  
window.navigate("top.jsp");  
</script>

第四种
<script language="JavaScript">  
self.location='top.htm';  
</script>  

第五种
<script language="javascript">  
alert("非法访问！");  
top.location='xx.jsp';  
</script>

3.2.2 href=javascript:void(0);

给<a>标签增加href属性，就意味着以下事情：

:link选择器可以选择到它
这个a标签可以获得焦点（可以通过tab按键访问到）
在浏览器的默认样式表中，有href属性的<a>标签才有cursor:pointer的效果

绑定了onclick事件的<a>标签，尤其是它的作用是ajax请求时，基本上我们就用不上这个标签的默认行为，也连接不到的实际页面，一般而言也会在CSS里给予了这个元素的cursor等样式。这时候还要加上href属性，是为了让<a>够响应键盘事件并获得焦点（从而屏幕阅读器能够读出背后的内容，增强可访问性,优雅降级，在网络连接很差，还没有加载到CSS的时候，<a>依然有手型与正常的link样式

给<a>标签以href属性，并不连接到实际的页面的方案有

<a href="#"></a>
<a href="#nogo"></a>
<a href="##"></a>
<a href="###"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:;"></a>
<a href="javascript:"></a>

他们的体验有细微的差别。

链接1会让页面跳到头部，window.location.href末尾增加#（若window.location.href末尾没有#），除非在js里面捕获onclick事件并阻止默认事件。

链接2有了初步的语义。但是，如果页面里面有id为nogo的元素，点击这个链接后，锚点机制会作用，页面贴齐这个元素上缘

链接3在chrome中不再默认跳转到页面头部，4在IE11中不再跳转到页面头部。正常的点击不会在地址栏增加#，但若用户使用open in new tab的方式（比如中键），就会跳到形如http://segmentfault.com/q/1010000000339082###的地址

链接5~8作用相同，但使用了javascript伪协议。在IE6下面，这个a标签被点击后，IE6会使得页面中的gif暂停，并且触发onbeforeunload事件，IE6认作这个页面有了重定向，并abort之后所有的请求（参考这里）。所以假如你在此之后替换了一个的src，IE6完全不会完成这个新的请求。

至于语义上LZ这种<a href="javascript:void(0)">使用方式，这种情形依然可以做到搜索引擎友好支持无障碍应用

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

<a href="javascript:void(0)">单击此处什么也不会发生</a>

当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果

爱吃牛肉的大老虎

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录