这个笔记的记录的是一个在线刷题系统的前端搭建过程中遇到的一些问题，作为一个新手记录下来，警醒自己同时也希望给刚刚入门的小伙伴们有一定的帮助。
在开始的时候有电脑自带的“画图”桌面应，对前端的界面进行了设计，主要是规划了每个界面的那个部分放置什么样的内容，以及设计了系统的数据库。虽然作为一个新手在真正实践的过程中，所做出来的会与规划的有所不同，发现期初规划的有不合理之处。但是在这里我是把前期的设计当做是自己理清整个系统框架的一部分。整个系统主要包括登陆界面，主页（刷题界面），个人中心。在下边介绍一些自己遇到的问题以及记录一些以后可以重复使用的插件。
-
url相对路径与绝对路径
绝对路径是指文件在硬盘上的真实路径，而相对路径指的是相对于另一个文件来书，本文件的路径。（个人理解是，既然能用相对路径表示那也就说明了这两个问价同属于一个文件集下，如果一个在你的电脑，一个在我的电脑那也就无从可来所谓的相对路径，甚至说是在同一个电脑中一个在E盘一个在C盘）。但是在做web项目时应该采用相对路径，绝对路径容易造成文件的寻找失败。打个比喻就是，绝对路径就好比在地球上时以地球来定位宇航员与飞船中某个物品的位置，但是当他们脱离了太阳系，两者之间的位置再通过地球来定位就不对了。如果他们以飞船为参考系那就可以清楚的定位宇航员与飞船中某个物品的位置时就容易的多了。
下面的实例帮大家理解（引用自网络）：
绝对路径是指文件在硬盘上真正存在的路径。比如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”文件夹下。那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。
比如上面的样例，“s1.htm” 文件中引用了“bg.jpg”图片。因为“bg.jpg”图片相对于“s1.htm”来说。是在同一个文件夹的，那么要在“s1.htm”文件中使用下面代 码后。仅仅要这两个文件的相对位置没有变(也就是说还是在同一个文件夹内)。那么不管上传到Webserver的哪个位置，在浏览器里都能正确地显示图片。
<body background="bg.jpg">
再 举一个样例。如果“s1.htm”文件所在文件夹为“E:\book\网页布局\代码\第2章”，而“bg.jpg”图片所在文件夹为“E:\book\网页 布局\代码\第2章\img”，那么“bg.jpg”图片相对于“s1.htm”文件来说。是在其所在文件夹的“img”子文件夹里，则引用图片的语句应该 为：
<body background="img/bg.jpg">
注意：相对路径使用“/”字符作为文件夹的分隔字符，而绝对路径能够使用“\”或“/”字符作为文件夹的分隔字符。因为“img”文件夹是“第2章”文件夹下的子文件夹，因此在“img”前不用再加上“/”字符。
在 相对路径里常使用“../”来表示上一级文件夹。如果有多个上一级文件夹。能够使用多个“../”，比如“http://www.cnblogs.com/”代表上上级文件夹。
如果 “s1.htm”文件所在文件夹为“E:\book\网页布局\代码\第2章”，而“bg.jpg”图片所在文件夹为“E:\book\网页布局\代码”。那 么“bg.jpg”图片相对于“s1.htm”文件来说，是在其所在文件夹的上级文件夹里。则引用图片的语句应该为：
<body background="../bg.jpg">
再举一个样例，如果“s1.htm”文件所在文件夹为“E:\book\网页布局\代码\第2章”，而“bg.jpg”图片所在文件夹为“E:\book\网 页布局\代码\img”。那么“bg.jpg”图片相对于“s1.htm”文件来说，是在其所在文件夹的上级文件夹里的“img”子文件夹里，则引用图片的语句 应该为：
<body background="../img/bg.jpg">
-
JS的字符串拼接
在系统的搭建过程中用到字符串的拼接的主要是在函数中，由来传递参数的（变化的参数）部分的源代码如下：
$("#buttonA" + mount + "").css("opacity", "0.2");经过测试上边的代码这个也是可以的（上边的双括号容易引起误解）：
$("#buttonA" + mount).css("opacity", "0.2");"#buttonA" + mount + ""表示的主要是#buttonA1，#buttonA2.......这类的信息，在这里留作一个参考。一般来说JS的拼接主要是分为三种：+，josn，对象
有关String的一些知识点：
1.字符串是放在一对引号中的文本，引号可以是单引号也可以是双引号；如果带引号的表达式包含一个撇号，就应该讲外面的引号改为双引号，如果在带引号的字符串中同时出现了撇号和引号，就需要使用转义序列
字符串的不同拼接方法：
toLocaleString方法与+，+=：首先调用每个数组元素的 toLocaleString() 方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.toLocaleString())
</script>
<script type="text/javascript">
var today = new Array(2);
today[0] = "daaf";
var msg = "this is JavaSctrip saying it's now" + today.toLocaleString();
document.write(msg);
</script>
第一个<script>的输出的结果是：George, John, Thomas；第二个<script>的输出结果是：this is JavaSctrip saying it's nowdaaf，；但是当toLocaleString处理一些其他的数据类型的时候还是很好用的，例如date。
下边的几个代码时JavaScript宝典中的例子帮助理解：
var msg="four score";
msg += "and seven"+"years ago";用concat方法：
<script type="text/javascript">
var str4 = "字符串连接";
str4 = str4.concat("use concat function connec string");
alert(str4);
</script>运行结果为：字符串连接use concat function connec string
数组的join方法：参数可选,指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
document.write(arr.join(''));
</script>关于字符串的拼接不同的方法有不同的效率，一般来说+是用来比较简单的字符串拼接。具体的拼接算法比较以及优化网上的不少博客都有介绍
-
JS/Jquery的内容动态添加
-
frame，inframe的区别，以及关于使用中的问题——跨frame的JS控制
关于frame以及inframe的区别，网上的这篇博客写的非常的好：博客链接
在这里讲一下关于JS跨frame的操作（位于一个frame中的元素控制位于另一个frame中的元素）；一种是通过子节点父节点的方式进行控制这个应该比较复杂；还有一个就是通过<a>标签的方式进行控制。在实践的过程是想实现导航栏的效果，但是这种frame的方式应该是老旧的，利用position的定位属性来进行设计应该是更加方便的。如果要是引入了框架（例如bootstrip之类的框架用起来实际上是更加方便的，效果也会更好，但是当初的初心就是想通过这个机会学到更多的东西）
通过<a>标签实现：
在开发的过程中，出现了一个问题就是，在锚点跳转的时候出现了直接跳转到只有rightframe的窗口，显然这不是所期望的，期望的应该是一个类似于有导航栏的界面。一直也没有找到解决的方案，但是最后改变了frame的name 就可以了，当然改回去之后依旧可以，关于这点到现在依旧不是很明白，在这里给大家提个醒
<a> 标签的 target 属性规定在何处打开链接文档。如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。下图是几个关于target属性的几个预留的特殊值：
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
项目中的代码：
整个框架的代码（主要是left，right代码的相互操作）：
<frameset rows="60px,*">
<frame src="top.html" frameborder="no" marginheight="0px" marginwidth="0px" scrolling="no" noresize="noresize" />
<frameset cols="250px,*">
<frame src="left.html" name="leftframe" frameborder="no" marginheight="0px" marginwidth="0px" scrolling="no" noresize="noresize">
<frame src="right.html" name="rightframe" frameborder="no"marginwidth="0px" marginheight="0px">
</frameset>
</frameset>
<noframes></noframes>锚点代码（righ.html）：
<a name="box1">
<a>连接代码（left.html）：
<a href="right.html#box1 " target="rightframe ">
<div class="show_div " id="show1 ">
1
</div>
</a>跨frame的子节点父节点操作法：
关于编写框架和多窗口脚本的相关知识点：
1.在二代层次结构中，脚本引用可能需要三个路径：父到子，子到父，子到子；这些窗口之间的不同路径都需要不同的引用格式
- 父到子：父文档中的脚本访问其框架中的一些元素是不常见的引用路径，再此情况下要定位一个框架就可以使用数组语法或框架名，而框架名可以用<frame>标记中的id或name的属性来进行设置；在下面的实例中用objFuncVarName占位符来替代在其他窗口或框架中访问的对象，函数，或全局变量。每个可见框架都包含一个document对象，他一般是脚本使用的元素容器，所以元素的引用应该包括document，父到子的应用如下：
[window.]frames[n].objFuncVarName
[window.]frames["frameName"].objFuncVarName
[window.]frameName.objFuncVarName
- 子到父的引用：脚本通常放在父框架文档中（在head部分），多个子框架或一个框架中的多个文档将这个父框架作为公共脚本库。这些脚本在载入框架集时，加载框架集可见时载入一次。如果以后把同一个服务器上的其他文档载入框架，他们就可以利用父框架中的文本，而不必将自己的副本载入浏览器
子到父框架中元素的引用:parent.objFuncVarName
如果父框架中被访问的元素是有返回值的函数，这个返回值就会直接传给子框架：var sValue=parent.FuncName()
如果父窗口也位于当前载入浏览器对象层次结构的顶部，就可以把他作为顶窗口：top.objFuncVarName
- 子到子的引用：框架或窗口都有parent属性（对单个窗口该值是null），因此引用的时候必须使用parent属性跳出当前框架，并且要跳到两个子框架共用的父框架之上。之后就可以执行该引用的其余部分，就像在父框架上开始执行一样
parent.frames[n].ObjFuncVarName
parent.frames[“frameName”].ObjFuncVarName
parent.frameName.ObjFuncVarName
- <noframe>无框架；框架标记不是向后兼容的，在不支持框架的浏览器中什么都不显示，所以可以使用无框架版本——<noframe>,他可以是实际内容也可以是超链接
具体的操作并没有去实现，哪位通知实现了，可以把代码贴出来，上边的东西起码可以帮大家理清一下思路，对这个知识点有个基本的认识，总的来说如果只是想实现位于框架基础上的导航栏当让是用<a>更加方便快捷，当时节点的这个知识应该是可以解决更加广泛的问题
-
meta属性
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
-
bootstrip框架的引用与操作：
日后补充
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
