当前位置: 编程技术>WEB前端
本页文章导读:
▪iframe异步加载（点击左边菜单加载右边内容） 关于iframe异步加载，我们常用的大都是左边菜单栏右边是内容页面，要求我们不能左边菜单不能刷新的情况下，异步加载右边的内容页面。话不多说，做了一个实例大致是这样的：1、首先在.........
▪Jquery焦点图/幻灯片效果 插件 KinSlideshow // JavaScript$(function(){ $("#KinSlideshow").KinSlideshow({ moveStyle:"down", &n.........
▪JS闭包的概念（非原创，感觉不错就贴过来了） 先从闭包特点解释,应该更好理解.闭包的两个特点：1、作为一个函数变量的一个引用 - 当函数返回时，其处于激活状态。2、一个闭包就是当一个函数返回时，一个没有释放资源的栈区。其实.........
[1]iframe异步加载（点击左边菜单加载右边内容）
关于iframe异步加载，我们常用的大都是左边菜单栏右边是内容页面，要求我们不能左边菜单不能刷新的情况下，异步加载右边的内容页面。
话不多说，做了一个实例大致是这样的：
1、首先在你的项目中建立三个文件如：
2、在Default页面引入jquery文件并在body中加入也下代码：
1 <div >
2 <div id="butten" >
3 局部刷新(框架加载页面)
4 </div>
5 <div id="hidden" >
6 我是隐藏的，点击局部刷新之后<br />
7 我就显示，页面加载我不会消失
8 </div>
9 </div>
10 <div id="page" >
11 <iframe src='/blog_article/1.htm' frameborder='0' >
12 </iframe>
13 </div>
14 <script type="text/javascript">
15 $(function () {
16 $("#butten").click(function () {
17 $("#hidden").show();
18 $("iframe").attr("src", "2.htm");
19 });
20 });
21 </script>
2 <div id="butten" >
3 局部刷新(框架加载页面)
4 </div>
5 <div id="hidden" >
6 我是隐藏的，点击局部刷新之后<br />
7 我就显示，页面加载我不会消失
8 </div>
9 </div>
10 <div id="page" >
11 <iframe src='/blog_article/1.htm' frameborder='0' >
12 </iframe>
13 </div>
14 <script type="text/javascript">
15 $(function () {
16 $("#butten").click(function () {
17 $("#hidden").show();
18 $("iframe").attr("src", "2.htm");
19 });
20 });
21 </script>
3、在1.htm和2.htm中随便写上什么都行，甚至可以直接这样写（什么html、title、body、title等均可不用写）：
1.htm：
1 页面一<br />
2 原始页面
2 原始页面
2.htm：
1 页面二<br />
2 框架加载的页面
2 框架加载的页面
4、效果如图：
本文链接
[2]Jquery焦点图/幻灯片效果 插件 KinSlideshow
//
JavaScript
$(function(){
$("#KinSlideshow").KinSlideshow({
moveStyle:"down", //设置切换方向为向下 [默认向左切换]
intervalTime:8, //设置间隔时间为8秒 [默认为5秒]
mouseEvent:"mouseover" //设置鼠标事件为“鼠标滑过切换” [默认鼠标点击时切换]
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //设置标题文字大小为14px，颜色：#FF0000
});
})
$("#KinSlideshow").KinSlideshow({
moveStyle:"down", //设置切换方向为向下 [默认向左切换]
intervalTime:8, //设置间隔时间为8秒 [默认为5秒]
mouseEvent:"mouseover" //设置鼠标事件为“鼠标滑过切换” [默认鼠标点击时切换]
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //设置标题文字大小为14px，颜色：#FF0000
});
})
HTML:
<div id="KinSlideshow" >
<a href="javascript:void(0)"><img src="/blog_article/images/1.jpg" alt="这是标题一" /></a>
<a href="javascript:void(0)"><img src="/blog_article/images/2.jpg" alt="这是标题二" /></a>
<a href="javascript:void(0)"><img src="/blog_article/images/3.jpg" alt="这是标题三" /></a>
<a href="javascript:void(0)"><img src="/blog_article/images/4.jpg" alt="这是标题四" /></a>
<a href="javascript:void(0)"><img src="/blog_article/images/5.jpg" alt="这是标题五" /></a>
<a href="javascript:void(0)"><img src="/blog_article/images/6.jpg" alt="这是标题六" /></a>
</div>
<a href="javascript:void(0)"><img src="/blog_article/images/1.jpg" alt="这是标题一" /></a>
<a href="javascript:void(0)"><img src="/blog_article/images/2.jpg" alt="这是标题二" /></a>
<a href="javascript:void(0)"><img src="/blog_article/images/3.jpg" alt="这是标题三" /></a>
<a href="javascript:void(0)"><img src="/blog_article/images/4.jpg" alt="这是标题四" /></a>
<a href="javascript:void(0)"><img src="/blog_article/images/5.jpg" alt="这是标题五" /></a>
<a href="javascript:void(0)"><img src="/blog_article/images/6.jpg" alt="这是标题六" /></a>
</div>
小提示1:外层div建议加上一句样式：不加此句在IE下页面刚加载的瞬间时候会看到所有图片原始样子这是因为KinSlideshow 要等页面加载完成才能解析页面中要设置成焦点图的HTML虽然只有不到0.01秒的瞬间但用户体验不太好，所以建议加上。不加对程序也没影响！
小提示2:想要兼容Chrome需要在img标签中写上图片的实际宽度和高度,其他浏览器不需要。
BAIDU_CLB_SLOT_ID = "551284";
BAIDU_CLB_SLOT_ID = "551289";
本文链接
[3]JS闭包的概念（非原创，感觉不错就贴过来了）
先从闭包特点解释,应该更好理解.
闭包的两个特点：
1、作为一个函数变量的一个引用 - 当函数返回时，其处于激活状态。
2、一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
其实上面两点可以合成一点,就是闭包函数返回时,该函数内部变量处于激活状态,函数所在栈区依然保留.
我们所熟知的主流语言,像C,java等,在函数内部只要执行了return,函数就会返回结果,然后内存中删除该函数所在的区域.生命周期也就停止了.一般的js函数也是这样.
但是有闭包特性的js函数有点特殊.
就例子来说:
var c = a();
c();
这两句执行很重要.
在var c = a();这行里,执行了a函数,那么肯定a经过了return.按照主流语言的函数特性,现在c的值就是a的返回值.
第二行c()的执行实际执行的就是b函数.最后不管执行的是谁,会弹出一个值为0的窗口,到此为止,所有的生命周期按理论来说就算全部结束了.
可是,如果我们再多执行一行.
var c = a();
c();
c();
第一次弹出0，第二次执行却弹出了1.
也就是说,第一次c()后,a中的i依然保留.自然a在内存的栈区依然保留.
a是return过了,但是,a及内部值却依然存在,这就是闭包.
好了,总结下,
1，闭包外层是个函数.
2，闭包内部都有函数.
3，闭包会return内部函数.
4，闭包返回的函数内部不能有return.(因为这样就真的结束了)
5，执行闭包后,闭包内部变量会存在,而闭包内部函数的内部变量不会存在.
闭包的应用场景(呵呵,复制的参考资料)
1、保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。
2、在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。
根据参考资料的应用场景,我们会自然的想到java或是c++的类.虽然JS没有类的概念,但是有了类的相似执行结果.
另外,还有一种格式颇受争议:
(function(a,b))(a,b);
如果你使用过jquery,并且观察过他的代码,你就会很奇怪他的写法,网上有人也把这种格式叫做闭包.
闭包的两个特点：
1、作为一个函数变量的一个引用 - 当函数返回时，其处于激活状态。
2、一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
其实上面两点可以合成一点,就是闭包函数返回时,该函数内部变量处于激活状态,函数所在栈区依然保留.
我们所熟知的主流语言,像C,java等,在函数内部只要执行了return,函数就会返回结果,然后内存中删除该函数所在的区域.生命周期也就停止了.一般的js函数也是这样.
但是有闭包特性的js函数有点特殊.
就例子来说:
1 function a(){
2 var i=0;
3 function b(){
4 alert(++i);
5 }
6 return b;
7 }
8 var c = a();
9 c();
这是个标准的闭包.在函数a中定义了函数b,a又return了b的值.这些可以先不管.2 var i=0;
3 function b(){
4 alert(++i);
5 }
6 return b;
7 }
8 var c = a();
9 c();
var c = a();
c();
这两句执行很重要.
在var c = a();这行里,执行了a函数,那么肯定a经过了return.按照主流语言的函数特性,现在c的值就是a的返回值.
第二行c()的执行实际执行的就是b函数.最后不管执行的是谁,会弹出一个值为0的窗口,到此为止,所有的生命周期按理论来说就算全部结束了.
可是,如果我们再多执行一行.
var c = a();
c();
c();
第一次弹出0，第二次执行却弹出了1.
也就是说,第一次c()后,a中的i依然保留.自然a在内存的栈区依然保留.
a是return过了,但是,a及内部值却依然存在,这就是闭包.
好了,总结下,
1，闭包外层是个函数.
2，闭包内部都有函数.
3，闭包会return内部函数.
4，闭包返回的函数内部不能有return.(因为这样就真的结束了)
5，执行闭包后,闭包内部变量会存在,而闭包内部函数的内部变量不会存在.
闭包的应用场景(呵呵,复制的参考资料)
1、保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。
2、在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。
根据参考资料的应用场景,我们会自然的想到java或是c++的类.虽然JS没有类的概念,但是有了类的相似执行结果.
另外,还有一种格式颇受争议:
(function(a,b))(a,b);
如果你使用过jquery,并且观察过他的代码,你就会很奇怪他的写法,网上有人也把这种格式叫做闭包.
本文链接
最新技术文章: