标签归档:jquery

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

安装了一个防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

用jquery控制图片的最大宽度

选了这个3 columns的wordpress模板,发现一个问题,就是如果图片比较大,页面的排版会被撑乱,css正在学习中,还没搞清楚到底该咋改,如果您能帮我请留言。
正好看了一些jquery的资料,就拿这个问题来练手,基本思路是查看所有网页上的图片,如果大于一个数值,则设定宽度,否则,就按照原来的尺寸显示。代码如下:

$(document).ready(function() {
$("img").each(function(i){ 
	var maxwidth=screen.width-$("#column2").width()-$("#column3").width()-100;
	if (this.width>maxwidth)
	 this.width = maxwidth; 
	});
});

第一行不用解释了吧?
第二行是查找所有img标签,每一个做后边的function处理
第三行设定最大的宽度,我这里取得是屏幕分辨率减去左右2列的宽度和一个常量。
第四,五行判断图片的宽度,如果超过这个宽度则设其宽度为允许的最大宽度。

现在看来,第三行应该和第二行换一下,效率应该会高些,这么写还有一个问题就是必须浏览器最大化才正常,还有什么好的解决方案呢?
————
想做一个点击阅读全部,显示所有内容的功能,对用户体验有好处,二来对seo有好处,还没时间做,空下来再说吧。