Posts Tagged ‘jquery’

如何跳出jquery的each?

八月 1st, 2009

jquery再遍历选定的对象时候用each比较方便。有种应用是找到里面符合条件的对象后,要跳出这个循环。
javascript的跳出循环一般用break.
同事遇到这个问题,下意识 的用了break,想跳出这个循环。结果报错

SyntaxError: unlabeled break must be inside loop or switch

经查,应该用一个

return false;

continue是跳出当前循环,继续下一个循环。

Popularity: 49%

jquery实现ajax投票一例

七月 30th, 2009

其实是很简单的,一个或多个页面有一堆摄影作品,用户点击投票,相应的作品数量增加1.

前台jsp部分的代码如下:

  1. ...
  2. 票数:<span id="i<%=id%>"><%=vote_number%></span><br/>
  3.     <a onclick=myvote(<%=id%>); href='javascript:;'">投票</a>
  4. ...

js部分的代码如下

  1. function myvote(id){
  2.     $.post("vote.jsp", { id: id },
  3.   function(data){
  4.         eval("var data="+data);
  5.     if (data.issucc=="0"){
  6.         alert(data.mess)
  7.     }else{
  8.         //alert("更新页面");
  9.         $("#i"+data.myid).html(data.votenum);
  10.         }
  11.   });
  12. }

后台返回的json数据如下

{issucc:<%=issucc%>,mess:”<%=mess%>“,votenum:<%=votenum%>,myid:<%=myid%>}

issucc:是否成功
mess:信息,主要是错误信息,比如没登录,超过限制等
votenum:投票后的得票总数
myid:投票的id,用于更新页面的投票数。

Popularity: 35%

jQuery 的图片幻灯片插件imgslideshow

一月 8th, 2009

有一个wp-magazine的theme,用了一个prototype的glider插件。但是偶不会用prototype,会一点jquery,并且用jquery的应用越来越多,比如使用的相册就是用的jquery,想统一一下JavaScript的类库。所以一直想找一个jquery类似效果的插件。除了这个之外,又发现一个不错的,有点像taobao首页广告的链接。
代码也很简单,一段简单的css,一个jquery+一个js就行了。
demo请点击这里,我稍微做了修改,原来是要点击数字,变化,现在鼠标移动到上边就可以变化图片了。

Popularity: 48%

python版本的jquery

一月 5th, 2009

jquery在做html内容提取,分析的时候很方便。而python做类似的工作就麻烦一点,原来我都是用正则表达式或者HtmlParser的。
两者用着都不是太爽,今天发现了一个好东西 pyquery ,一个类似jquery的python库。
摘抄一段使用说明

  1. >>> from pyquery import PyQuery as pq
  2. >>> from lxml import etree
  3. >>> d = pq("<html></html>")
  4. >>> d = pq(etree.fromstring("<html></html>"))
  5. >>> d = pq(url='http://google.com/')
  6. >>> d = pq(filename=path_to_html_file)

Now d is like the $ in jquery:

  1. >>> d("#hello")
  2. [<p#hello.hello>]
  3. >>> p = d("#hello")
  4. >>> p.html()
  5. 'Hello world !'
  6. >>> p.html("you know <a href='http://python.org/'>Python</a> rocks")
  7. [<p#hello.hello>]
  8. >>> p.html()
  9. 'you know <a href="http://python.org/">Python</a> rocks'
  10. >>> p.text()
  11. 'you know Python rocks'

简单吧,安装也很简单
下载

http://pypi.python.org/packages/source/p/pyquery/pyquery-0.3.tar.gz

解压缩
python setup.py install
就可以了,可能要安装ezsetup
现在的版本是0.3,还有一些jquery的东西没有实现,比如:radio,:password,以及一些ajax的功能,但是已经够用了,强烈推荐。
赶紧试试吧。

还有一个BeautifulSoup,也推荐一下

Popularity: 42%

jquery货币数值排序

四月 22nd, 2008

jquery是个好东西,现在有很多基于它的plugin,tablesorter 就是一个。
上面有好多例子,就不转贴了。最近做了一个小东西,用到了它。
因为是财务的东西,金额用到了千分位,就是每多三位,加一个逗号。原来用都是按照数字来的,加了这个逗号之后,tablesorter不认为它是数字了,他认为234.00比1,234.53大。这也难怪,看了例子,如果是这种货币格式,前面如果是$符号的话,这种格式排序是没问题的。
仔细看了一下文档,原来人家已经考虑到了这样的问题,加下面代码就可以了。

$("#myTable").tablesorter({
    
headers: { 4: {sorter:"currency"}}
});

测试通过

另:推荐一篇关于中国教育讨论的文章

Popularity: 31%

上百个让你事半功倍的jquery插件

三月 20th, 2008

jQuery是一个了不起的javascript库,它可以是我们用很少的几句代码就可以创建出漂亮的页面效果。从网站的方面说,这使得javascript更加有趣。

很多jquery爱好者开发了基于jquery的插件,在这里
发现作者收集好多jquery的插件,转贴过来,给大家分享。

File upload-文件上传

Ajax File Upload
jQUploader
Multiple File Upload plugin
jQuery File Style
Styling an input type file
Progress Bar Plugin

Form Validation-表单验证

jQuery Validation
» More: 上百个让你事半功倍的jquery插件

Popularity: 88%

jquery选择例子3

九月 27th, 2007

选取一个name为”S_03_22″的input text框的上一个td的text值
$(“input[@name=S_03_22]“).parent().prev().text()

名字以”S_”开始,并且不是以”_R”结尾的
$(“input[@name^='S_']“).not(“[@name$='_R']“)

一个名为radio_01的radio所选的值
$(“input[@name=radio_01][@checked]“).val();

Popularity: 34%

jquery 3例

七月 20th, 2007

jquery使用2例
1.把

<div id="a01">0</div>

里面的数值增加1
$(“#a01″)[0].innerHTML=parseInt($(“#a01″)[0].innerHTML)+1;
2.所有的checkbox有多少个选上的
var all_check=$(“input[@type='checkbox'][@checked]“);
alert(all_check.length+”个选中”);
3.给每个checkbox增加click事件

$("input[@type='checkbox']").click(function(){
                                
Redirect_login()
                                
return true;
                            
});

Popularity: 23%

jquery进行and选择操作

六月 21st, 2007

工作中遇到需求,就是form里面所有的checkbox,radio都是必填的。
原来的做法是写多个function进行检查,部分代码如下

function checkElement(c) {
    
for (var i=0;i<c.length;i++) {
        
if (c[i].checked) return true;
    
}
    
c[0].focus();
    
alert("请完成所有答题!");
    
return false;
}

需要传入要检查的radio或者checkbox。
原来的写法是要把所有要检查的object都写进去,比如

result=checkElement(form1.check_1)&&checkElement(form1.radio_2);

如果有10道8道还可以,如果多的话,就要写好多,还容易漏掉,出错。
这次有100多道题目,所以想用jquery来选择所有的checkbox和radio,然后再来检查。
代码如下:

var myt="";
//用于存储生成的js校验字符串
//每次load页面,只生成一次,第一次的速度还是有点慢的
function check() {
    
var result = true;
    
if (myt==""){
//如果没有myt,就选择所有要检验的element列表,用来校验。
    
var alle=$("select[@name='text_79'],input[@type='radio'],input[@type='checkbox']");
    
for (var i=0;i < alle.length;i++) {
    
var myobj = alle[i];
        
if (i==0||alle[i].name!=alle[i-1].name){
            
if (i>0) myt+="&&";
//根据不同的类型,调用不同的check function
//应该写成一个函数,在函数里面判断比较好:S
            
if (myobj.type!="select-one")
            
myt+="checkElement(form1."+myobj.name+")"+"\n";
        
else
            
myt+="checkText(form1."+myobj.name+")"+"\n";
 
}
}}
//最后执行拼出来的js语句
    
eval("result =     "+myt+";");
    
if (!result) return false;
    
return true;
}

checkText是检验text的值的程度,是否为0,如果0就是未填写
花了点时间的是
var alle=$(“select[@name='text_79'],input[@type='radio'],input[@type='checkbox']“);
这一句,选择多个类型的element

但是上述写法有个问题,就是顺序和自然顺序不一样。还需要改进。

上面的and有点像union,如果是同一个element的属性的and,用下面的方法
$(“input[@name^='S_'][@name$='_R']“).autocomplete(“autocomplete_backend.jsp”);

上面的是,input,名字以S_开始,并且以_R结束的元素。

Popularity: 21%

jquery选择满足条件,排除指定条件

六月 3rd, 2007

jQuery的选择器是CSS 1-3,XPath的结合物。现在有个需求,连接到外部网站的链接都在新窗口打开,以前的方法很简单就是在链接的地方写上target=”_blank”,但是这样有2个不好的地方。
1.target=”_blank”,不符合严格的DOCTYPE(xhtml1-strict.dtd),参见这里
2.如果自己写blog,代码里面如果有其他网站的链接,都要自己手工加,可能会忘。

现在想用jquery来完成这个工作,思路是,找到所有有链接的节点,如果里面的href是以”http”开始的,并且里面没有本站的域名juyimeng.com的,就给他加一个value为”_blank”的target(如果原来有,就修改成”_blank”)。
第一个很简单,就是
a[@href^=http]
现在是要过滤掉里面含有指定关键字的,找了半天手册,google,发现其实很简单,用一个not就可以了
not(“[@href*=juyimeng.com]
意思是,去除掉href属性里面含有juyimeng.com的节点。
其他的一些用法如下:

E[@foo] 拥有foo属性的E元素
E[@foo=bar] foo属性的值为bar的E元素
E[@foo^=bar] foo属性的值以字符串”bar”开始的E元素
E[@foo$=bar] foo属性的值以字符串”bar”结尾的E元素
E[@foo*=bar] foo属性的值包含有字符串”bar”结尾的E元素

实现整个功能的代码如下:

$("a[@href^=http]").not("[@href*=juyimeng.com]").click(function() {
    
this.target="blank";
});

测试通过,可能写的不是十分严密,但是已经能解决目前的问题了,不知道这里面能不能用正则表达式,或者大小写不敏感,如果可以,就能更精确地实现功能。
有错请提出.:D

Popularity: 22%