关于jQuery操作DOM的内容完了吗?不,还没有,还有更多!
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'& gt;<input type='text' name='info'/> & lt;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 >
当我们点击删除后,结果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/ea9e15e4ecfc6f64c70fca20cea32889.jpeg)
再看执行remove方法后的结果:
文档处理的方法还有很多,我只能就遇到及使用过的举些例子说明一下,其它的就需要在大家工作中去发现去总结,也请各位把自己的心得体会分享出来,让我们一起学习,共同提高。所有代码均在jquery-1.2.6版本下测试通过。
本文为菠萝大象原创,如要转载请注明出处。