前注：我在练习的时候，函数命名比较随意，以修改起来简单的简短无意义函数名为主，实际使用时，请使用更易阅读、规范的命名方式
（ps：这篇算是上周的）
（26）让某块随着浏览器的高度变化而自动变化
假设该块的标签名为section
于是：
function ge()
{
var m =document.documentElement.clientHeight;
$("section").css("height",m-100);
}
window.onresize = function(){ge();} //浏览器高度变化时触发事件
$(document).ready(function(){ge();});
效果：
①初始时自适应；
②浏览器高度变化时自适应。
③假如需要根据id来选择，更改$("section")即可。
④m-100是因为该块的上部有一个高度为100px的块。
(27)按钮和标签绑定（按顺序绑定）触发事件
前提：
假设有5个按钮，有5个事件。按钮的类名相同，事件的类名相同。按第一个按钮触发第一个事件，依次类推。
代码：
$(document).ready(function()
{
$(".side").click(function()
{
$(".iframe").css("display","none");
sles = document.getElementsByClassName("side");
var a;
for(a=0;a<sles.length;a++)
{
if(sles[a].id==this.id)
{
break;
}
}
var oo = document.getElementsByClassName("iframe");
oo[a].style.display="block";
})
})
（28）初始不赋值src属性，后续触发事件时加载
适用范围：给标签添加src属性、单页面结构
思路：
①首先，我们需要获得一个src的链接地址；
②某一个标签（例如iframe）需要使用这个链接（但不是即时使用，比如在点击某个按钮时使用）；
③我们通过javascript的class选择器（或者类似的），获取其标签（document.getElementsByClassName(xxxxx)），然后给标签添加一个value属性（即使该标签本身没有value属性），用于在使用该src地址之前，保存该链接地址；
④当触发事件时，将value属性赋值给src属性，即可。
代码：（使用了jquery库）
$(document).ready(function()
{
var oo = document.getElementsByClassName("iframe");
oo[0].value="http://www.baidu.com";
oo[1].value="https://www.so.com";
})
$(document).ready(function()
{
$(".side").click(function()
{
$(".iframe").css("display","none");
sles = document.getElementsByClassName("side");
var a;
for (a = 0; a<sles.length; a++)
{
if(sles[a].id == this.id)
{
break;
}
}
var oo = document.getElementsByClassName("iframe");
if(oo[a].src.indexOf(oo[a].value)<0) //当索引值小于0时，说明src和value值不匹配
{
oo[a].src=oo[a].value; //将value值赋给src值
}
})
})
解释：
①第一个函数用于模拟：当文档加载完毕后，给标签赋值（或者是触发事件，添加了该标签后赋值）；需要注意的是，标签个数是不确定的，确定的是，在导入标签时，一个iframe标签对应一个src地址和一个按钮；
②由于需要在按钮点击时，才触发事件，赋给对应的iframe标签src值。因此，首先要确定点击的是哪个按钮，然后找到该按钮对应的iframe标签；（就是第二个函数的a变量的值表示是第a+1个按钮/标签，
③然后确定该标签目前的src值，通过.indexOf()和value值进行匹配。
如果不匹配（返回值-1），那么将value值赋给该src（即加载链接地址，注意，其他的是没有被加载的）；
如果匹配（返回值大于0），那么跳过。
④于是实现了在触发事件才加载链接地址。
⑤更优办法请参照（29）和（30）的哈希地址的检测
（29）监视hashchange
①什么是hashchange？
简单来说，假设我们设置一个超链<ahref="#top">m1</a>
这个超链的作用，是跳转到页内id="top"处（注意，不是指页面顶端，而是页面内标签等于top的地方）
此时，在浏览器的地址处，最后会添加一个#top
②所谓的hashchange，就是监视这个链接的变化。
具体如下：
$(window).on("hashchange",function(){回调函数});
③效果是：当hashchange事件触发后，将调用回调函数。
④查看当前后缀地址（指的是例如点击上面的超链接后，在浏览器地址后面所加的#top），使用代码：
window.location.hash
以上面为例，返回值是：#top
⑤由于我们有时候不想要第一个“#”字符，于是，我们再使用命令：
x=window.location.hash.substr(1);
返回的是去除#之后的所有字符串。
（30）利用hashchange()监测，实现单页面技术
代码：
$(window).on("hashchange",function()
{
x=window.location.hash.substr(1);
y="iframe_"+x;
m=document.getElementById(y);
if(m==null) //如果找不到，则添加该标签
{
$("#iframe_section").append(function(){return "<iframe id='" + y + "' class='iframe' src='http://www." + x + ".com'>ff</iframe>"});
}
$(".iframe").css("display","none"); //设置所有为none
$("#"+y).css("display","block"); //读取id，修改css属性
});
解释：
①加入的iframe框架，都在一个id为iframe_section的块之下。（所以必须要有这个块，或者修改这个id）；
②监测hash地址的变化，如果有变化，首先检查是否有等于该地址的id的块（例如地址是#abc，那么监测是否有id="abc"的块）；
③如果没有，创造一个这样的块，并给其赋予链接（链接地址是id，具体格式见src，可以根据实际需要修改）；
④有、或者创建之后，设置所有类名为.iframe的块的display属性为隐藏（倒数第二行代码）；
⑤然后设置id为hash地址（实际上这个id有一个前缀iframe_ ，是在前面加入的）的块的display属性为block（显示这个块）。
⑥综合效果是：点击一个链接，哈希地址变化，显示对应的iframe或者创造他，不符合的被隐藏。切换不同的哈希地址时，不会导致之前操作的哈希地址的页面被重新加载。
另一种实现方式：
简单解释一下，是iframe和其按钮按顺序一一对应。不需要影响哈希地址，但相对实现就更复杂一些。（这是（27）和（28）综合起来的办法）
JS代码：
/*功能是点击某个标签，显示该标签对应的iframe
原理：
1.先隐藏其他的，标签对应iframe逐个对应（即标签1对应1#iframe），然后利用其对应顺序，先找到标签是第N个，然后找到第N个iframe，并显示他
2.需要标签的类名是side，iframe的类名是iframe
3.假如标签开始没有被加载的话，读取其value属性，将其值赋给src属性
4.可能存在的缺陷：假如某iframe打开后，其链接地址在操作过程中被改变，name返回时，再重新加载原链接
*/
/*$(document).ready(function()
{
$(".side").click(function()
{
$(".iframe").css("display","none");
sles = document.getElementsByClassName("side");
var a;
for (a = 0; a<sles.length; a++)
{
if(sles[a].id == this.id)
{
break;
}
}
var oo = document.getElementsByClassName("iframe");
if(oo[a].src.indexOf(oo[a].value)<0)
{
oo[a].src=oo[a].value;
}
oo[a].style.display="block";
})
})
//这个是【模拟】在加载iframe标签的时候，给iframe标签赋值（value）
$(document).ready(function()
{
var oo = document.getElementsByClassName("iframe");
oo[0].value="http://www.baidu.com";
oo[1].value="https://www.so.com";
})*/
HTML代码①按钮部分：
<div class="side" id="nav_pane"> <img src="11.png" class="aside_icon"> <span>我的工作台</span> </div> <div class="side" id="aside_newcase"> <img src="13.png" class="aside_icon"> <span>新建案件</span> </div>
HTML 代码② iframe 部分：
<section id="iframe_section"> <iframe class="iframe none" src=""> </section><span style="color:#7030a0;"> </span>
CSS部分：
.display_block
{
display:block;
}
.display_none
{
display:none;
}
注：实际使用的话，可能需要调整一下布局问题。并且本代码省略掉了实时创建iframe标签部分的代码，如果需要实时创建的话，需要在创建后，将src地址赋值给对应的iframe标签（通过获得标签对象后，加入到其value属性中）
