29
10

推荐一个javascript类库:jsonpath

0
归档:2012年10月分类:前端技术

在我们的研发过程中,有时会遇到这样的情况:程序很简单,数据是固定的,不想使用服务端语言(php、java、.net),但是要实现一些分页和检索功能。这种情况下我们应该选择javascript+xml+div就ok,不过javascript解析xml的数据比较慢。json是现在非常流行的一种数据格式,所以有另外一种解决方案:javascript+json+div。

json是目前web的通用数据格式,在轻量级的web服务中占据主导地位,这里推荐一个非常轻巧的类库:jsonpath(下载地址:http://code.google.com/p/jsonpath/)。作为一个轻量级类库,你可以使用它来对json数据进行精确查找、条件查找和模糊查找,这样就能满足简单网站的功能了。下面是一个简单例子:
<html>
<head>
<title> JSONPath - Example (js)</title>
<script type="text/javascript" src="jsonpath.js"></script>
</head>
<body>
<pre>
<script type="text/javascript">
   var json =
                  { "store": {
                        "book": [
                          { "category": "reference",
                                "author": "Nigel Rees",
                                "title": "Sayings of the Century",
                                "price": 8.95
                          },
                          { "category": "fiction",
                                "author": "Evelyn Waugh",
                                "title": "Sword of Honour",
                                "price": 12.99
                          },
                          { "category": "fiction",
                                "author": "Herman Melville",
                                "title": "Moby Dick",
                                "isbn": "0-553-21311-3",
                                "price": 8.99
                          },
                          { "category": "fiction",
                                "author": "J. R. R. Tolkien",
                                "title": "The Lord of the Rings",
                                "isbn": "0-395-19395-8",
                                "price": 22.99
                          }
                        ],
                        "bicycle": {
                          "color": "red",
                          "price": 19.95
                        }
                  }
                },
       var test1 = jsonPath(json, "$.store.book[*].author").toJSONString() + "\n>";//精确检索
       var test2 = jsonPath(json, "$..author").toJSONString() + "\n";
       var test3 = jsonPath(json, "$.store.*").toJSONString() + "\n";
       var test4 = jsonPath(json, "$.store..price").toJSONString() + "\n";
       var test5 = jsonPath(json, "$..book[(@.length-1)]").toJSONString() + "\n";
       var test6 = jsonPath(json, "$..book[-1:]").toJSONString() + "\n";
       var test7 = jsonPath(json, "$..book[0,1]").toJSONString() + "\n";
       var test8 = jsonPath(json, "$..book[:2]").toJSONString() + "\n";
       var test9 = jsonPath(json, "$..book[?(@.isbn)]").toJSONString() + "\n";
       var test10 = jsonPath(json, "$..book[?(@.price<10)]").toJSONString() + "\n";//条件建设
       var test11 = jsonPath(json, "$..*").toJSONString() + "\n";//所有
       var test12 = jsonPath(json, "$..book[?(@.title.indexOf('the') > -1)]").toJSONString() + "\n";  </script>//模糊检索
</pre>
</body>
</html>

21
5

Js实现Cookie操作,JavaScript的Cookie操作,源代码
在JavaScript中如何实现Cookie操作呢,下面给出源代码实现:

function SetCookie(name,value,days)
{
if(days == null) days = 30;
var exp = new Date;
exp.setTime(exp.getTime() + days*24*60*60*1000);
document.cookie = name + "="+ escape(value) +";expires="+ exp.toGMTString() + "; path=/";
}
function GetCookie(name)
{
var arr = document.cookie.match(new RegExp("(^ )"+name+"=([^;]*)(;$)"));
if(arr != null) return unescape(arr[2]); return null;
}
21
5

这两天要做一个JavaScript的弹出层效果,就是鼠标移动上面的时候弹出一个效果层,移开的时候就消失,网上搜索了一下,得到下面的一段实现代码:
1、JavaScript部分

function $(){return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);}
var OverH,OverW,ChangeDesc,ChangeH=50,ChangeW=50;
function OpenDiv(_Dw,_Dh,_Desc) {
$("BigBearLoading").innerHTML="";
OverH=_Dh;OverW=_Dw;ChangeDesc=_Desc;
$("BigBearLoading").style.display='';
if(_Dw>_Dh){ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/50))}else if(_Dw<_dh){changew=math.ceil((_dw-10)/((_dh-10)/50))} top="(document.documentElement.clientHeight-10)/2+" left="(document.documentElement.clientWidth-10)/2+" nw="10,Nh=">OverW-ChangeW)ChangeW=2;
if (Nh>OverH-ChangeH)ChangeH=2;
Nw=Nw+ChangeW;Nh=Nh+ChangeH;
if(OverW>NwOverH>Nh) {
if(OverW>Nw) {
$("BigBearLoading").style.width=Nw+"px";
$("BigBearLoading").style.left=(document.documentElement.clientWidth-Nw)/2+"px";
}
if(OverH>Nh) {
$("BigBearLoading").style.height=Nh+"px";
$("BigBearLoading").style.top=(document.documentElement.clientHeight-Nh)/2+"px"
}
window.setTimeout("OpenNow()",10)
}else{
Nw=10;Nh=10;ChangeH=50;ChangeW=50;
$("BigBearLoading").innerHTML=ChangeDesc;
}
}
function CloseDiv()
{
$("BigBearLoading").style.display="none";
}

2、css部分

body {margin:0px}
#BigBearLoading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;width:10px;height:10px}

3、div部分
创建一个span,包含下面的内容:
onmouseover="javascript:OpenDiv(500,300,'有时间请经常来看看大熊工作室噢')" onmouseout="javascript:CloseDiv()" 请用鼠标移动到这里
创建一个div,设置为:
id="BigBearLoading" ondblclick="this.style.display='none'" style="DISPLAY: none"

21
5

相信很多人都遇到这样的问题:如何利用css样式来控制,网站查了资料,发现都是给出下面这样的解释:
.txt {width:120px; overflow:hidden; text-overflow:ellipsis;}
“overflow:hidden;”是隐藏显示不下的部分;
“text-overflow:ellipsis;”是尾部跟随省略号。
这里一定要记住,必须设置宽度和行高,否则无法实现这样的效果。
上面这样的做法没有考虑浏览器直接的兼容,应该做成这样:
*html ul.aboutnews li { width:46%;height:22px;float:left;line-height:180%;word-break:break-all;overflow:hidden;}
*+html ul.aboutnews li { width:46%;height:22px;float:left; line-height:180%;word-break:break-all;overflow:hidden;}

21
5

JQuery下载,最新版本持续更新

0
归档:2009年5月分类:前端技术

JQuery是一个非常酷的JavaScript框架,极大地简化了JavaScript的操作,本人这段时间开始学习它,并且用它,现在把它当成了一个类似.NET框架的开发类库了,每一个项目我都需要引用到这个框架。
这篇日志我提供JQuery下载地址,并且持续更新,希望给各位带来方便:
1、JQuery下载地址(1.3.2版本——最新发布版本)
精简版本: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js
完全版本:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js
VS2008职能提示版本:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc2.js
2、JQuery下载地址(1.3版本)
精简版本: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.min.js
完全版本:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.js
VS2008职能提示版本:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3-vsdoc.js
3、JQuery下载地址(1.2.6版本——这是现在用得最多的版本)
精简版本: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js
打包版本:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.pack.js
完全版本:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js
VS2008职能提示版本:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6-vsdoc.js

21
5

JQuery页面加载顺序

0
归档:2009年5月分类:前端技术

JQuery页面加载顺序
JQuery在页面加载顺序方面提供了更好更合理的操作,在JavaScript中,window.onload事件下的代码是必须在所有页面元素都加载完成之后才执行(注意:包括了图片和文件等),可是有的时候我们希望hmtl代码加载完成之后(即DOM加载完成之后)就执行某些代码,在JQuery里有这样的函数:
$(document).ready(function(){
alert("hello");
});
上面的代码在Dom结构被浏览器解析之后就可以执行了。当然也有其他人使用JavaScript来编写一些函数可以实现这样的功能,只不过JQuery更好。另外,使用这样的函数还有一个好处,就是可以基于同一个页面在加载结束之后执行多个脚本函数。

21
5

JavaScript框架Jquery介绍

0
归档:2009年5月分类:前端技术

想必很多人都知道JQuery框架了,现在有很多JavaScript的框架,但是真正非常优秀的框架还属JQuery,从微软在VS2008中专门为其提供只能提示这一侧面可以看得出来它的分量。 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。  jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
Jquery是继prototype之后又一个优秀的Javascrīpt框架。对prototype我使用不多,简单了解过。但使用上jquery之后,马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery:prototype就像Java,而jquery就像ruby.实际上我比较喜欢java(少接触Ruby 罢了)但是jquery的简单的实用的确有相当大的吸引力啊!在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得,其实这些心得,在jquery的文档上面也可能有讲,不过还是记下来,以备忘罢。
下面是最为简单的JQuery的应用:
告别代码重复的时代
还记得$()这个东西吧?prototype还是DWR都使用了这个函数代替document.getElementById()。没错,jquery也跟风了。为达到document.getElementById()的目的,jquery是这样写的:var someElement = $("#myId").
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

21
5

IE下页面只有一个text回车将自动submit提交

这是IE的一个缺陷,不过还是有解决的办法的:

1、解决办法一:再增加一个text,然后隐藏这个text;

2、解决办法二:可以在这个页面的form里面加上onsubmit="return false;" 。

公告栏

欢迎大家来到我的博客,我是dodoro,希望我的博客能给你带来帮助。