分类 "js/Jquery" 的存档.

新浪微博应用开发小案例

这是一个用JS开发的小应用,目的是获取指定ID的微博账户的前N条(N不大于20)微博。
不是什么有内涵的东西,纯粹作为一个简单的小应用而已。

首先是要根据官方指定的,引入一个JS脚本。


<script type="text/javascript" src="http://js.wcdn.cn/t3/platform/js/api/wb.js" charset="utf-8" ></script>

Read more…

Jquery selectors 选择器 在线练习

Jquery selectors 选择器 在线练习:

 https://fukun.org/dd_share/jqueryselectors/

通过该Jquery练习可以很好的掌握Jquery的选择器的使用。

Notice: 在360浏览器下布局会有点乱,建议使用非360浏览器。

Read more…

独立轻量级模式对话框控件TinyBox-美化页面效果

TinyBox是一个轻量级(3.5kb)模式对话框控件,没有依赖于任何javascript框架,不必使用Jquery等任何javascript框架。它可以展示任意Ajax或HTML内容包括文本,图片,视频等。模式窗体能够以淡入/淡出的效果弹出和关闭并且能依据所加载的内容动态调整窗体大小。TinyBox还支持按设定的时间自动消失。

它是一个轻量级并且独立的模态窗口脚本,只有 3.5KB,不包括任何内置的幻灯片功能,但是可以显示任何的 AJAX 和 HTML 内容,还支持图片,并且能够自动隐藏,可以通过简单的 CSS 来定制样式的效果。TinyBox 已经在 Firefox 2/3, IE 6/7/8, Opera, Safari 和 Chrome 中测试过。使用 TinyBox 非常简单,通过以下代码即可:

TINY.box.show(‘showcontent.php?id=2’,1,300,150,1,3)

Read more…

document.body.scrollTop 的值总是等于 0 的解决方法;DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN 与 JS冲突

做页面的时候可能会用到浮动层,读取 document.body.scrollTop 来设置层的位置,如以下代码,可以达到让一个ID为“Div1”的层一直居中显示的目的:

<script language=’javascript’>
function Sc()
{
document.getElementById(“Div1”).style.top=document.body.scrollTop+(document.body.clientHeight-document.getElementById(“Div1”).offsetHeight)/2
document.getElementById(“Div1”).style.left=document.body.scrollLeft+(document.body.clientWidth-document.getElementById(“Div1”).offsetWidth)/2;
}
window.onscroll=Sc;
window.onresize=Sc;
window.onload=Sc;
</script>

Read more…

正则表达式—js,Jquery验证电子邮箱,js,Jquery验证电话号码,js,Jquery验证邮编,jquery 表单验证

在引入Jquery文件后,可以使用以下函数调用正则表达式对表单进行验证。

js,Jquery验证电子邮箱的函数:

function checkmail(s,name){
str = $("#"+s).val();
var reg=/^[a-zA-Z]([a-zA-Z0-9]*[-_.]?[a-zA-Z0-9]+)+@([w-]+.)+[a-zA-Z]{2,}$/;
if(!reg.test(str)){
msg=name+"请输入合法的Email地址";
alert(msg);
return false;
}
else{
return true;
}
}

js,Jquery验证电话号码:
Read more…

json验证,json串可用性测试,如何查看所构造的json是否可以使用?

http://www.jsonlint.com/

只要打开这个网址,将构造出来的字符串放到里面,点击 Validate ,稍等片刻,马上就可以看到结果啦。而且还会给你格式化,看起来也很方便,实在是Jquery,Ajax之居家必备啊。

使用jQuery.LightBox美化图片效果,美化博客

使用LightBox可以美化图片的显示效果,在点击图片时显示并不用跳转到另一个页面去查看图片,而是在当前页前置显示,并且带有很cool的效果~~

如图:

jQuery.lightbox美化图片显示效果

jQuery.lightbox美化图片显示效果(点我就能看到效果啦)

只要点击图片,就会在当前页面弹出图片的大图,背景遮罩,点击空白处即可关闭大图。动画效果也是很cool的~~~

使用也非常简单,只要四步就能搞定~

1、引入必要的JS文件;5张展现效果时用的图片。

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.lightbox-0.5.js”></script>

2、引入必要的样式。

<link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox-0.5.css” media=”screen” />

3、检查小图处的样式,要在小图外加A标签,其链接为大图,此A标签的title属性为显示该图片的文件名。例如:

<a href=”largeimage1.jpg” title=””><img src=”thumb_image1.jpg” width=”72″ height=”72″ alt=”” /></a>

4、使用jQuery选择器,选择到自己的A标签,然后.lightBox()就OK啦~~~~以下选择器中任选一个使用就可以:

<script type=”text/javascript”>
$(function() {
// Use this example, or…
$(‘a[@rel*=lightbox]’).lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or…
$(‘#gallery a’).lightBox(); // Select all links in object with gallery ID
// This, or…
$(‘a.lightbox’).lightBox(); // Select all links with lightbox class
// This, or…
$(‘a’).lightBox(); // Select all links in the page
// … The possibility are many. Use your creative or choose one in the examples above
});
</script>

经过以上四步,就可以使用很绚丽的jQuery.lightBox效果了~~~~
不过这次我用的这个主题比较复杂,总是调用来调用去的~~jQuery文件的位置很不好放,折腾半天发现放在最下角才好,为了稍显美观,我把jQuery选择器调用显示效果的代码也放到jQuery.lightbox这个js文件里了。由于主题的特殊性,此效果用到的一些图片的路径都需要调正,要放在网站的根目录下才可以,当然,也可以通过调整JS文件内的路径来达到效果。我使用的是jquery.lightbox-0.5.pack.js,这个瘦身后的js只有6K,最节省流量了~~哈哈。。

利用javascript实现web页面刷新的方法

javascript refresh page

Javascript刷新页面的几种方法:
1     history.go(0)
2     location.reload()
3     location=location
4     location.assign(location)
5     document.execCommand(‘Refresh’)
6     window.navigate(location)
7     location.replace(location)
8     document.URL=location.href

自动刷新页面的方法:
1.页面自动刷新:把如下代码加入<head>区域中
<meta http-equiv=”refresh” content=”20″>
其中20指每隔20秒刷新一次页面.

2.页面自动跳转:把如下代码加入<head>区域中
<meta http-equiv=”refresh” content=”20;url=http://www.wyxg.com”>
其中20指隔20秒后跳转到http:页面//www.wyxg.com

3.页面自动刷新js版
<script language=”JavaScript”>
function myrefresh()
{
        window.location.reload();
}
setTimeout(‘myrefresh()’,1000); //指定1秒刷新一次
</script>

ASP.NET如何输出刷新父窗口脚本语句
1.   this.response.write(“<script>opener.location.reload();</script>”);  

2.   this.response.write(“<script>opener.window.location.href = opener.window.location.href;</script>”);   

3.    Response.Write(“<script>opener.window.navigate(”你要刷新的页.asp”);</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.otherFrameID.location.reload();
</script>

如果想关闭窗口时刷新或者想开窗时刷新的话,在<body>中调用以下语句即可。
<body onload=”opener.location.reload()”> 开窗时刷新
<body onUnload=”opener.location.reload()”> 关闭时刷新
<script language=”javascript”>
window.opener.document.location.reload()
</script>