标签归档:javascript

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

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
继续阅读

javascript怪异的access is denied

要实现这样一个功能,一个活动很多人报名,后台做操作界面,可以给某些数据做一下标记。
本地开发,本地的环境+测试数据测试通过,到了线上,就死活不行。
因为表单有简单的校验,用了javascript的document.submit()。总是报错,说 access is denied
原来怀疑是因为提交的按钮在浮动层的原因,后来发现数据量大了就不行,因为每条数据会有checkbox。
网上google了半天,也没有对症的解决方法,大多是安全因素造成的。在冥思苦想没有结果,正一筹莫展的时候。突然想起了GET提交的数据长度是有2048个字节的限制的。
然后查看了代码,原来从别的地方复制过来的form表单,用的是get方法,改成method=”post”后,问题解决。

车到山前啊。

注意.js文件的编码

在调试javascript代码的时候在a.html引用了b.js这个文件。
原来测试都没有问题,但是paste了一些原来的老代码后,ie出现js报错,但是firefox不抱错。
报错的信息如下:
return statement outside of functions
狗了半天,说是retrun写的位置不对,但是新写的代码和老的代码都没问题啊,一直在用。没办法,只能一段段的删除
期间还报过下面的错误
XXX is not defined
XXX是一个函数里面传过来的变量。函数都没用,居然也抱错。狠奇怪。
最后只剩2个function了,中间有一段代码的注释,是中文的。我把注释删掉,好了!

突然想起来问题所在了,原来是编码问题。上面的a.html是utf-8编码,而js里面的中文是gbk的编码,由于a.html是全英文的,所以没注意编码。而老的代码一直都是在gbk或者gb2312编码的页面上用,所以一直也没问题。

最后修改a.html为gbk的编码,问题解决。
比较好的习惯可能应该是公用的js代码里面不要用中文的注释。。

jquery 3例

jquery使用2例
1.把

0

里面的数值增加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;
                            });

object doesn’t support this property or method

公司搞了一个爱情征文的活动,最后投票要写一个程序,对用户投票要做一些限制,在做前台校验的时候,最后提交出现了问题。我用的是
form1.submit();
结果IE报错,内容是:object doesn’t support this property or method。当时就觉得奇怪,开始查,觉得可能是
1.form的名字不叫form1
2.form的关闭标签没有使用
查了一下,2个问题都不是,也没有拼写错误。换了firefox,同样报错,内容是:document.form1.submit is not a function
顿时没了方向,google了一下,也有别人犯这个错误,找了一条有用的信息,说造成这个原因的可能是form里面又一个元素的名字叫submit。
一查,还真是,有个button的名字被俺不小心改成了submit,改了名字,问题解决。
写下来,鄙视自己一下。

jquery进行and选择操作

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

function checkElement(c) {
	for (var i=0;i<c.length;i++) {
		if (c&#91;i&#93;.checked) return true;
	}
	c&#91;0&#93;.focus();
	alert("请完成所有答题!");
	return false;
}
&#91;/code&#93;
需要传入要检查的radio或者checkbox。
原来的写法是要把所有要检查的object都写进去,比如
&#91;code lang="javascript" linenum="off"&#93;
result=checkElement(form1.check_1)&&checkElement(form1.radio_2);
&#91;/code&#93;
如果有10道8道还可以,如果多的话,就要写好多,还容易漏掉,出错。
这次有100多道题目,所以想用jquery来选择所有的checkbox和radio,然后再来检查。
代码如下:
&#91;code lang="javascript" linenum="off"&#93;
var myt="";
//用于存储生成的js校验字符串
//每次load页面,只生成一次,第一次的速度还是有点慢的
function check() {
	var result = true;
	if (myt==""){
//如果没有myt,就选择所有要检验的element列表,用来校验。
	var alle=$("select&#91;@name='text_79'&#93;,input&#91;@type='radio'&#93;,input&#91;@type='checkbox'&#93;");
	for (var i=0;i < alle.length;i++) {
    var myobj = alle&#91;i&#93;;
		if (i==0||alle&#91;i&#93;.name!=alle&#91;i-1&#93;.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结束的元素。

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

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

innerHTML outerHTML innerText和outerText的区别和用法

innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
innerText 和outerText 在读取得时候是一样的,只是在设置的时候outerText 会连带标签一起替换成目标文本
firefox不支持innerText ,但是可以用textContent作为替代方案。
代码如下:

if(document.all){
     document.getElementById('myid').innerText = "text";
} else{
    document.getElementById('myid').textContent = "text";
}

安装了一个防spam的插件

我这个wordpress这几天垃圾评论越来越多,好像是什么工程设备作黑帽seo的,很是气愤。于是google了一下,安装了一个叫Did You Pass Math的插件,地址是 http://www.herod.net/dypm/,遇到了一些问题,记录下来。
1.有中文版,但是编码好像有点问题,把英文版的自己修改了一下,问题解决,保存的时候注意时utf8编码就可以了
2.里面报错用的函数有点问题,数据会乱码,主要是没有指定编码,需要把里面的fail和fail函数替换成wp_die(这个函数的输出也不太好,准备回头再改改)
3.最后一个问题是输出格式的问题,这个插件要在网站的输入框下面添加一个输入框,部分代码如下

<p id="answerdiv">
<input type="text" name="answer" id="answer" size="6" tabindex="4" />
<label for="answer"><?=$dypm_strings&#91;'question'&#93;?></label>     
</p>
         <script type="text/javascript">
            var urlField = document.getElementById("url");
            var submitp = urlField.parentNode;
            var answerDiv = document.getElementById("answerdiv");
            submitp.appendChild(answerDiv, urlField);
       </script>

answer的位置是乱的,查了一下,是因为上述js代码是找到id为url的input,然后在它的parentNode后append一个answerDiv
但是结果却是在url所在的p里面,本来应该是:
<p>id="url" </p>
<p>id="answer"</p>
结果却是
<p>id="url" <p>id="answer"</p></p>
google了一下,不知道怎么直接用js解决(如果您知道,请告诉我哦),于是用了jquery,把上述javascript代码改成了

<script type="text/javascript">
$("#url").parent().after($("#answerdiv"));
</script>

问题解决。
I love jquery!

html tips&faq

html中的rel,rev是什么?
这2个标记主要是用于表示文档之间的联系,rel是从源文档到目标文档的关系;rev是从目标文档到源文档的关系
经常用到的属性如下:

Alternate — 定义交替出现的链接
Stylesheet — 定义一个外部加载的样式表
Start — 通知搜索引擎,文档的开始
Next — 记录文档的下一页.(浏览器可以提前加载此页)
Prev — 记录文档的上一页.(定义浏览器的后退键)
Contents
Index — 当前文档的索引
Glossary — 词汇
Copyright — 当前文档的版权
Chapter — 当前文档的章节
Section — 作为文档的一部分
Subsection — 作为文档的一小部分
Appendix — 定义文档的附加信息
Help — 链接帮助信息
Bookmark — 书签

使用严格的DOCTYPE(xhtml1-strict.dtd)时不能用 target=”_blank” 标记的解决
这么处理,据说是因为不经过允许就开新窗口是不友好的。
有一种方法是javascript+rel属性
html的写法

<a href="http://www.juyimeng.com" rel="external">新建窗口打开</a><br/>
<a href="http://www.juyimeng.com">当前窗口</a><br/>
<a href="http://www.juyimeng.com" rel="external">新建窗口打开</a><br/>
<a href="http://www.juyimeng.com">当前窗口</a><br/>

javascript的一种写法:
function externallinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName(“a”);
for (var i=0; i