复制代码 代码如下:
无标题文档
1
2
3
4
一
二
三
四
label1
label2
label4
label3
label4
显示div的后序结点id
显示div的子li结点
显示位于label下一个input元素的value值
显示于input1元素同级的label元素内容
result:
先对上面代码中的课外知识点说明下
1.element.attr(attributename)
描述：此方法用户获取某element元素的某个属性值，如例子中
$(#div1 > li).each(function(){
$(#result).html($(#result).html() + $(this).attr(id) + , );
})
功能就是获取当前遍历到的element对象的id值；
好了，现在开始来介绍本章的内容吧。本章主要讲的就是jquery里如果去选择某个结点的子结点、兄弟结点等，不浪费时间啦，哈，现在进入正题
1.$(selector descendant)
描述：此方法主要用于获取“selector”选择器（注：此选择器为上一章讲的几个的任意一种）选择的element对象或集合的子孙结点，就像例子中
$(#adescendant).click(function(){
$(#result).html();
$(#div1 ul).each(function(){
$(#result).html($(#result).html() + $(this).html() + , );
})
})
功能就是获取id为div1元素的子孙节点里ul节点的html内容，若“selector”选择器返回的是个集合，则获取的子孙结点就是这个集合里，每个element匹配的子孙节点的集合
返回值：array(element);
2.$(selector>child)
描述：此方法与上一个方法类似，主要区别就是上个方法能获取所有的子孙节点，而这方法只能获取奇直属的子节点（多个“>”号就代表是直属的嘛^^)，在此就不多说了，哈，其它都跟上一个一样
返回值：array(element);
3.$(selector + next)
描述：用于获取所有位于selector后面的next元素，如例子中
$(#anext).click(function(){
$(#result).html();
$(label + input).each(function(){
$(#result).html($(#result).html() + $(this).attr(value) + ,);
})
})
获取所有位于label元素后面的input元素，在例子中，只有input1位于label1下个节点，input2与label3两者隔了个div节点，所以不配合。
返回值：array(element);
4.$(selector ~ sibling)
描述：与上一个方法类似，主要区别是此方法匹配的是位于selector之后的所有同级的sibling结点，无论中间是否有隔其它结点，在这也不明说啦，呵
返回值：array(element);