标签为 "jQuery" 的存档

js/jquery — null 为空或不是对象

本文只针对本人遇到的情况进行说明,相信其他人也有可能会遇到类似的情况。
本人用jquery的ajax做了一个省市联动,在本地测试可行,但是当部署到程序的测试环境后却产生错误,说null 为空或不是对象。
引起此错误的原因应该就是如下两种之一:
1、选择器的确是没有找到指定的元素,有可能是因为你的这条语句在html文档中的位置比较靠前,在该元素加载之前你的这条js开始执行,找不到元素。如果还是不希望修改js语句的位置,可以选用

$(function(){
//你的jquery 代码
}

此语句表示在文档加载完后才开始加载此处的js代码。
2、没有加载到jQuery的lib文件,导致选择器失效。
我这里,此程序选用了一个现有的框架,虽然在web页面源码中可以看到jQuery文件被引入了,但是还是报此错误,经排查发现是框架载入文件的顺序问题,在我的此jquery运行前,jquery框架还未运行,所以会提示“null 为空或不是对象”,经修正,即可正常运行了。
Read more…

新浪微博应用开发小案例

这是一个用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…

正则表达式—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,最节省流量了~~哈哈。。