1、尽可能的用#id和属性选择器
在选择DOM元素时,jQuery的选择器无疑提供了非常多的功能,除了特性选择器外,对文档元素的查找操作,我觉得还是#id和[attribute]最为实用,当然这不是否定其它的选择器。我这样说是有原因的。
在实际开发中,程序员一般是以模块为单位进行功能开发,那么从前台到后台都是一个人在做。而页面的美化工作可能会交给美工(也可能是前台开发人员)来完成,如果需要对DOM的结构进行调整或重新布局,这时,当脚本中使用了CSS选择器或位置选择器,这时,你能保证不会对功能有影响吗?难道还要和开发人员进行沟通,这里不能这样写,那里需要调整。可是一个系统中的页面会只有一两个吗?这样改下来,得要多少时间?这时有人会说了,你设计没做好,设计之初就应该考虑好,样式布局就应该做好。那么就不会出现这样的问题。是的,设计很重要,设计的好坏决定项目成败。但是,我要告诉你,世上没有绝对的事情,我们所做的一切都是以客户为出发点,客户不满意了,要你改,你能不改吗?
使用ID的好处显而易见,给元素加上ID,通过ID获得该元素对象,然后进行相应操作,不管结构如何变化,代码不用修改。请一定注意,ID不能重复了。
可是ID只能对单一元素进行操作(这是相对的,后面有讲到对ID也可以批量操作),如果有多个元素怎么办呢?这里就要用到属性选择器了。帮助文档里罗列了各种属性选择器,而且有说明和示例。不过例子太简单了,会让很多人没有感觉,对它没有引起足够的重视,在这里大象用几个实例来说明一下它们的用法。
a)
$("[name=ctrRadio]").each(function(){
$(this).click(
function(){
// click事件代码
}
);
});
});
<input type="radio" name="ctrRadio" />// 有很多个单选按钮,组成一个单选按钮组
b)
$("[name$='chk']").attr("checked","checked").click(
function(){
var chkbox = $(this); // this是当前的复选框对象,$(this)是获得该复选框的jQuery对象
if(chkbox.attr("checked")){
alert("选择: "+chkbox.val());
}else{
alert("取消: "+chkbox.val());
}
}
);
});
<div><input type="checkbox" name="stationchk" value="a" />1</div>
<div><input type="checkbox" name="stationchk" value="b" />2</div>
<div><input type="checkbox" name="intervalchk" value="c" />3</div>
<div><input type="checkbox" name="intervalchk" value="d" />4</div>
<div><input type="checkbox" name="commonchk" value="e" />5</div>
<div><input type="checkbox" name="commonchk" value="f" />6</div>
[attribute^=value]和[attribute$=value]是相对的一组选择器,前者是匹配指定的属性以某些值开始的元素,后者刚好相反,匹配给定的属性是以某些值结尾的元素,请一定记住attribute是属性,比如上面的type、name、value等等。在项目中大量的通过id、name属性来批量的操作DOM元素。
我说下怎么通过ID获得多个集合,其实很简单,在设置ID值的时候,给它定义一个字符串再加上其它的唯一标识就能够实现这一功能。
<input name="modinfo" id="modInfo_${info.parent_id}_${info.f_id}" type="checkbox" value="${info.f_id},${info.parent_id}"/>
</c:forEach>
在实际项目当中如何组合,还是得具体问题具体分析。另外,我们也不能忘掉那些特性选择器,它们同样很有用。
c)
$("[name^='station']:checkbox").attr("checked","checked").click(
function(){
if($(this).attr("checked")){
alert("选择: "+$(this).val());
}else{
alert("取消: "+$(this).val());
}
}
);
});
<div><input type="checkbox" name="stationchk" value="a" />1</div>
<div><input type="checkbox" name="stationchk" value="b" />2</div>
<div><input type="checkbox" name="intervalchk" value="c" />3</div>
<div><input type="checkbox" name="intervalchk" value="d" />4</div>
<div><input type="checkbox" name="commonchk" value="e" />5</div>
<div><input type="checkbox" name="commonchk" value="f" />6</div>
<div><input type="radio" name="stationrad" value="g" />7</div>
<div><input type="radio" name="stationrad" value="h" />8</div>
$("[id^='modInfo_']").is(":hidden"); //如果表达式中的集合只要有一个不可见,就返回true
$("select[name='contract_kind'] option:eq(0)").attr("selected","selected"); //选中第一条记录
attr、addClass、removeClass、css、html、text、val、height、width这些命令在实际应用中的使用频率非常高,应该把它们全部掌握。这些属性都有赋值与取值的方法,为我们操作DOM提供了很方便的支持。举几个例子说明一下:
$("#ctr_info").attr("src","${ctx}/BaseAction.do?method=list"); //给id为ctr_info的iframe的src属性设置地址
$("#stationchk").attr("checked"); //获得复选框是否选中,选中为true,否则为false
$("#sum").css("ime-mode","disabled"); //屏蔽输入法
$("[name='stationchk']").parent().html("哈哈"); //返回包含匹配表达式的唯一父元素的元素集合
$("#ctr_info").load(function(){
var ifr_height = $(this).contents().find("#ctr_other").height(); //通过ID重新计算iframe的高度
ifr_height = ifr_height <400?350 : ifr_height;
$(this).height(ifr_height);
});
3、丰富的文档处理功能
从帮助文档中,我们可以看到,jQuery提供了一套很完备的文档处理函数。基本上需要有的都包含了。大象目前也只是使用了其中一部分,当然这跟应用环境也有关。来看个例子:
$("#btn_add").click(
function(){
$("<div name='_info'><input type='text' name='info'/> <input name='btndel' type='button' value='删除' /></div>").find(":button").click(
function(){
var index = jQuery("[name='btndel']").index(this); //this是删除按钮这个对象,index是获得该按钮在这组集合中的索引值
$("[name='_info']:eq("+index+")").remove();
}
).end().appendTo("#div_info");
}
);
});
<div><input id="btn_add" type="button" value="增加" /></div>
<div id="div_info"></div>
在文档初始化的时候,对增加按钮绑定事件,当点击增加时,我们创建一个文本框和一个删除按钮的div,然后使用查找功能(find)在刚创建的html中找到button按钮(:button),这时会返回<input name='btndel' type='button' value='删除' />这个DOM元素的jQuery对象,接着给这个按钮绑定事件,使之,当我们点击某个删除按钮时,删除对应的元素。随后我们退回(end)到创建的div。最后把这个新增的元素追加到div_info元素之后,运行这个示例看看效果。PS:创建DOM时,如果比较复杂,可以用变量来拼接字符串,最后再放到$()里面。
这个例子充分体现了jQuery链的强大,一条语句就完成了这么多的功能,请大家充分利用jQuery链。牢记:jQuery对象与DOM对象的区别。
在删除的时候使用的是remove()而没有使用empty(),这两个方法执行后都会返回jQuery集合,不同的是,remove()会将元素从页面DOM中删除,而empty()只是删除匹配集合中的子节点(包括文本),但仍保留其在DOM中所占的位置。示例:
$("#btn_del").click(
function(){
$("p").empty();
//$("p").remove();
}
);
});
<input id="btn_del" type="button" value="删除"/>
<p>hello</p>
jquery
<p>welcome</p>
当我们点击删除后,结果如下:
再看执行remove方法后的结果:
文档处理的方法还有很多,我只能就遇到及使用过的举些例子说明一下,其它的就需要在大家工作中去发现去总结,也请各位把自己的心得体会分享出来,让我们一起学习,共同提高。所有代码均在jquery-1.2.6版本下测试通过。
本文为菠萝大象原创,如要转载请注明出处。
http://www.blogjava.net/bolo/archive/2010/02/24/313412.html