浅谈------location
今天在上班的时候碰到了要根据不同的页面随机添加栏目的问题，很简单的问题，想到了判断页面url是否含有某字符串来进行随机添加栏目、。。这就需要了解location对象。
| location | 属性名 | 属性说明 |
| hash | 设置或返回从井号 (#) 开始的 URL | |
| host | 设置或返回主机名和当前 URL 的端口号。 | |
| hostname | 设置或返回当前 URL 的主机名。 | |
| href | 设置或返回完整的 URL。 | |
| pathname | 设置或返回当前 URL 的路径部分。 | |
| port | 设置或返回当前 URL 的端口号。 | |
| protocol | 设置或返回当前 URL 的协议。 | |
| search | 设置或返回从问号 (?) 开始的 URL（查询部分）。 |
以上就是location函数相关，这些在一些方面还是相当不错的选择。具体事例，看下边的demo。
首先我们设置首页，首页中有很多栏目链接，为了方便这里首页用index1命名，简化代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页1</title>
</head> <body>
<a href="index2.html">index2</a>
<a href="index3.html">index3</a>
</body>
</html>
其次我们设置index2栏目的页面，在其页面中，我们要引入jquer文件，和我们自己写的js文件。更重要的是因为是随机添加进去的分栏（小模块），所以，我们要给出我们的分栏容器~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index2</title>
</head>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js.js" type="text/javascript" charset="utf-8"></script>
<body>
<div class="index2"> </div>
</body>
</html>
同理，我们设置index3的页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index3</title>
</head>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js.js" type="text/javascript" charset="utf-8"></script>
<body>
<div class="index3"> </div>
</body>
</html>
这样首页，和首页要连接的页面就设置完毕，接下来我们需要设置的是链接到的index2，和index3页面上的随机分栏的内容页.例如链接到index2的分栏是,我们起名为getweb
<div class="div1">
<ul>
<li>123</li>
<li>345</li>
<li>456</li>
<li>576</li>
</ul>
</div>
<div class="div2">
<ul>
<li>123</li>
<li>345</li>
<li>456</li>
<li>576</li>
</ul>
</div>
<div class="div3">
<ul>
<li>123</li>
<li>345</li>
<li>456</li>
<li>576</li>
</ul>
</div>
<div class="div4">
<ul>
<li>123</li>
<li>345</li>
<li>456</li>
<li>576</li>
</ul>
</div>
<div class="div5">
<ul>
<li>123</li>
<li>345</li>
<li>456</li>
<li>576</li>
</ul>
</div>
同理链接到index3的分栏内容为getweb2
<div class="div1">
<ul>
<li>123</li>
<li>345</li>
<li>456</li>
<li>576</li>
</ul>
</div>
<div class="div2">
<ul>
<li>额版本</li>
<li>额版本</li>
<li>额版本</li>
<li>额版本</li>
</ul>
</div>
分栏的内容页做好后，剩下的就是我们的js代码了；
//根据url的信息来判断需要显示的内容。
$(function(){
var url=window.location.href;//获取完整的URL
if(url.indexOf("index2")>=0){//判断URL中是否含有某字符串(判断是哪一个页面)
$.get("getweb.html",function(data){
$(".index2").html(data);
});
}else if(url.indexOf("index3")>=0){
$.get("getweb2.html",function(data){
$(".index3").html(data);
});
}
});
怎么样是不是非常简单，这样的根据页面来随机添加分栏，在后期的维护和分栏内容更替都是相当方便的，我们只需要修改分栏内容页面就好。
浅谈------location的更多相关文章
- 浅谈location对象
简介 Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址.通过Location对象,可以获取URL中的各项信息,调用对象方法也可 ...
- 浅谈Hybrid技术的设计与实现第三弹——落地篇
前言 接上文:(阅读本文前,建议阅读前两篇文章先) 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 根据之前的介绍,大家对前端与Native的交互应该有一些简单的认识了,很多 ...
- 浅谈Hybrid技术的设计与实现第二弹
前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...
- 浅谈Hybrid技术的设计与实现
前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发 ...
- 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...
- 浅谈Linux中的信号处理机制（二）
首先谢谢 @小尧弟 这位朋友对我昨天夜里写的一篇<浅谈Linux中的信号处理机制(一)>的指正,之前的题目我用的“浅析”一词,给人一种要剖析内核的感觉.本人自知功力不够,尚且不能对着Lin ...
- 浅谈用ModelSim+Synplify+Quartus来实现Altera FPGA的仿真
浅谈用ModelSim+Synplify+Quartus来实现Altera FPGA的仿真 工作内容: Mentor公司的ModelSim是业界最优秀的HDL语言仿真软件,它能提供友好的仿真环境,是业 ...
- 浅谈OCR之Onenote 2010
原文:浅谈OCR之Onenote 2010 上一次我们讨论了Tesseract OCR引擎的用法,作为一款老牌的OCR引擎,目前已经开源,最新版本3.0中更是加入了中文OCR功能,再加上Google的 ...
- 浅谈 URI 及其转义
URI URI,全称是 Uniform Resource Identifiers,即统一资源标识符,用于在互联网上标识一个资源,比如 https://www.upyun.com/products/cd ...
随机推荐
- shell和matlab之间的参数传递
shell和matlab之间的参数传递比shell和Python之间的参数传递要简单,在matlab程序中(以.m脚本文件为例,其他程序如函数等未测试)不需要进行任何配置,直接使用即可,见下面 ...
- 在CentOS-6.3环境下，利用grub工具手工制作Linux U盘安装盘
注:此文是本人亲自操作实现后写的心得,同时也是对自己操作的记录. 制作的全过程概况 准备工作: U盘重新分区: 格式化U盘: 安装grub文件到U盘特定的分区: 拷贝镜像中的相关文件到U盘: 安装时设 ...
- 【bzoj2437】[Noi2011]兔兔与蛋蛋 二分图最大匹配+博弈论
Description Input 输入的第一行包含两个正整数 n.m. 接下来 n行描述初始棋盘.其中第i 行包含 m个字符,每个字符都是大写英文字母"X".大写英文字母&quo ...
- ubtuntu 如何查看内存用量 mongostat详解
free -h top free或者top或者cat /proc/meminfo mongostat是mongdb自带的状态检测工具,在命令行下使用.它会间隔固定时间获取mongodb的当前运行状态, ...
- Js屏蔽键盘输入的某些字符,用以部分代替正则表达式
工作当中用到的:有是,用户会在文本框里输入一些无效的(错误的)内容,比如在手机号中输入#等等,一般使用正则表达式,但是只有点击的时候才会验证,用户体验不好,所以想屏蔽这些按键,让键盘根本打不出来,以下 ...
- python语法学习面向对象之继承
python语法学习面向对象之继承 转载自:http://www.cnblogs.com/Joans/archive/2012/11/09/2757368.html 只要涉及到面向对象,”类“是必须出 ...
- CentOS 7 基础网络管理
网络服务管理 network服务是对整个计算机网络服务的控制,也可以理解为控制所有网卡. [root@localhost ~]# systemctl start network //开启网络服务 [r ...
- C++_函数2-内联函数
内联函数的目的是为了提高程序运行速度所做的一项改进. 常规函数与内联函数的区别不在于编写方式,而在于C++编译器如何将它们组合到程序中. 编译过程的最终产品是:可执行程序,由一组机器语言指令组成.运行 ...
- 【算法笔记】B1046 划拳
1046 划拳 (15 分) 划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字.如果谁比划出的数字正好等于两人喊出的数字之和,谁就赢了,输 ...
- Python-删除列表中重复元素的方法
1.set()方法 x = [1,2,3,4,5,1] y = list(set(x)) print(y) ``` [1, 2, 3, 4, 5] ``` 2. x = ['b','c','d','b ...