求助jquery 获取同级元素获取父子元素的问题
点击联系发帖人
时间：2016-11-11 14:35
本帖子已过去太久远了，不再提供回复功能。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&您可能感兴趣的文章：温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
$(document).ready(function(){$("a").parent().addClass('a_par');});
二、获取同级元素：
1、next([expr])：
获取指定元素的下一个同级元素（注意是下一个同级元素哦）
&!DOCTYPE html&&html&&head&& &script type="text/javascript" src="/jquery/jquery.js"&&/script&&/head&
&body&&ul&&& &li&list item 1&/li&&& &li&list item 2&/li&&& &li class="third-item"&list item 3&/li&&& &li&list item 4&/li&&& &li&list item 5&/li&&/ul&
&script&$('li.third-item').next().css('background-color', 'red');&/script&
&/body&&/html&
这个例子的结果是，只有list item 4背景色变为红色
2、nextAll([expr]):
获取指定元素后边的所有同级元素
HelloHello Again&div&&span&And Again&/span&&/div&
var p_nex = $("p").nextAll();p_nex.addClass('p_next_all');
注意看最后一个”&p>”标签哦，也被加上了’p_next_all’这个类名哦~~
3、andSelf():
获取指定元素后边的所有同级元素，之后加上指定的元素
我感觉这个函数是最有意思的一个函数了，什么意思？直译过来就是”还有我“,”还有自己”,没错，还有自己。
&p&Hello&/p&&p&Hello Again&/p&&div&&span&And Again&/span&&/div&
var p_nex = $("p").nextAll().andSelf();p_nex.addClass('p_next_all');
注意看第一个“&p&”标签啊，这句话的意思是选择p标签后面的所有同级标签，以及自己。。。
以下这两个不举具体的例子了，实际上就是next()和nextAll()的相反喽
4、prev()：获取指定元素的上一个同级元素（是上一个哦）。
5、prevAll()：获取指定元素的前边所有的同级元素。
三、获取子元素
1、查找子元素方式1：&
例如：var aNods = $("ul & a");查找ul下的所有a标签
2、查找子元素方式2：children()
3、查找子元素方式3：find()
这里再简单介绍以下children()和find()的异同：
1& children及find方法都用是用来获得element的子elements的，两者都不会返回 text node，就像大多数的jQuery方法一样。 2& children方法获得的仅仅是元素一下级的子元素，即：immediate children。 3& find方法获得所有下级元素，即：descendants of these elements in the DOM tree 4& children方法的参数selector 是可选的（optionally），用来过滤子元素，
但find方法的参数selector方法是必选的。 5& find方法事实上可以通过使用 jQuery( selector, context )来实现。即$('li.item-ii').find('li')等同于$('li', 'li.item-ii').
&ul class="level-1"&& &li class="item-i"&I&/li&& &li class="item-ii"&II&&& &ul class="level-2"&&&&&& &li class="item-a"&A&/li&&&&&& &li class="item-b"&B&&&&&&& &ul class="level-3"&&&&&&&&&& &li class="item-1"&1&/li&&&&&&&&&& &li class="item-2"&2&/li&&&&&&&&&& &li class="item-3"&3&/li&&&&&&&& &/ul&&&&&& &/li&&&&&& &li class="item-c"&C&/li&&&& &/ul&& &/li&& &li class="item-iii"&III&/li&&/ul&使用：$('ul.level-2').children().css('border', '1px solid green'); 的效果是：
使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是： &
阅读(213644)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'jquery选择器 之
获取父级元素、同级元素、子元素',
blogAbstract:'一、获取父级元素
1、&parent([expr]):
获取指定元素的所有父级元素
&div id=\"par_div\"&&a id=\"href_fir\" href=\"#\"&href_fir&/a&&a id=\"href_sec\" href=\"#\"&href_sec&/a&&a id=',
blogTag:'',
blogUrl:'blog/static/1',
isPublished:1,
istop:false,
modifyTime:9,
publishTime:3,
permalink:'blog/static/1',
commentCount:2,
mainCommentCount:2,
recommendCount:9,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}Javascript获取父级元素、子级元素、兄弟元素的例子-jquery-网页制作-壹聚教程网Javascript获取父级元素、子级元素、兄弟元素的例子
本文章来为各位介绍一篇Javascript获取父级元素、子级元素、兄弟元素的例子，这里包括了原生的js与jquery的实现方法，具体的操作如下所示。
先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比
js的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素
原生的JS获取ID为test的元素下的子元素。可以用：
&div id=&dom&&
&& &div&&/div&
&& &div&&/div&
&& &div&&/div&
var a = docuemnt.getElementById(&dom&).getElementsByTagName_r(&div&); 这样是没有问题的
此时a.length=3；
但是我们现在换一种方法获取就是我上章提到的var b = document.getElementByIdx_x(&dom&).childN如果& 这样alert(b.length)IE浏览器上没问题还是3，但是在FF浏览器上会提示是4，这就是因为FF把换行也当做一个元素了。
所以我们必须处理一下才能用JS的那些属性。处理思想很简单就是遍历一下这些元素。把元素类型为空格而且是文本都删除。处理函数是这样的
function del_space(elem){
&var elem_child = elem.childN//得到参数元素的所有子元素
&for(var i=0;i&elem_child.i++){ //遍历子元素
&&&&&&& if(elem_child.nodeName == &#text& && !/\S/.test(elem_child.nodeValue)) {
&&&&&&&&& elem.removeChild(elem_child)}
&&&&&&&& }
上述函数遍历子元素，当元素里面有节点类型是文本并且该节点的节点值是空的。就把他删除。
nodeNames可以得到一个节点的节点类型，/\s/是非空字符在JS里的。前面加！,则表示是空字符
test() 方法用于检测一个字符串是否匹配某个模式.语法是： RegExpObject.test(string)
如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
nodeValue表示得到这个节点里的值。
removeChild则是删除元素的子元素。
下面就是重点了啊！
&div id = &dom&&
&&&&&&&& &div&&/div&
&&&&&&&& &div&&/div&
&&& &div&&/div&
& function dom(){
&&&& var a = document.getElementByIdx_x_x(&dom&);
&&&& del_space(a);调用清理空格的函数
&&&& var b = a.childN获取a的全部子节点；
&&&& var c = a.parentN获取a的父节点；
&&&& var d = a.nextS获取a的下一个兄弟节点
&&&& var e = a.previousS获取a的上一个兄弟节点
&&&& var f = a.firstC获取a的第一个子节点
&&&& var g = a.lastC获取a的最后一个子节点
下面介绍JQUERY的父，子，兄弟节点查找方法
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$(&span&).parent()或者$(&span&).parent(&.class&)
jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个
jQuery对象返回，children()则只会返回节点
jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll()，返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点，不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()
的返回结果，不会有初始集合中的内容，比如$(&p&),find(&span&),是从
p元素开始找,等同于$(&p span&)
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&一、获取父级元素
1、 parent([expr]):
获取指定元素的所有父级元素
&div id=&par_div&&&a id=&href_fir& href=&#&&href_fir&/a&
&a id=&href_sec& href=&#&&href_sec&/a&
&a id=&href_thr& href=&#&&href_thr&/a&&/div&
&span id=&par_span&&
&a id=&href_fiv& href=&#&&href_fiv&/a&
$(document).ready(function(){
$(&a&).parent().addClass('a_par');
firebug查看jquery parent效果
二、获取同级元素：
1、next([expr])：
获取指定元素的下一个同级元素（注意是下一个同级元素哦）
&!DOCTYPE html&
& &script type=&text/& src=&/jquery/jquery.js&&&/script&
&& &li&list item 1&/li&
&& &li&list item 2&/li&
&& &li class=&third-item&&list item 3&/li&
&& &li&list item 4&/li&
&& &li&list item 5&/li&
$('li.third-item').next().css('background-color', 'red');
这个例子的结果是，只有list item 4背景色变为红色
2、nextAll([expr]):
获取指定元素后边的所有同级元素
Hello Again
&div&&span&And Again&/span&&/div&
var p_nex = $(&p&).nextAll();
p_nex.addClass('p_next_all');
firebug_jq_nextall
注意看最后一个&&p>&标签哦，也被加上了&p_next_all&这个类名哦~~
3、andSelf():
获取指定元素后边的所有同级元素，之后加上指定的元素
我感觉这个函数是最有意思的一个函数了，什么意思？直译过来就是&还有我&,&还有自己&,没错，还有自己。
&p&Hello&/p&&p&Hello Again&/p&&div&&span&And Again&/span&&/div&
var p_nex = $(&p&).nextAll().andSelf();
p_nex.addClass('p_next_all');
注意看第一个&&p&&标签啊，这句话的意思是选择p标签后面的所有同级标签，以及自己。。。
firebug_jq_andself
以下这两个不举具体的例子了，实际上就是next()和nextAll()的相反喽
4、prev()：获取指定元素的上一个同级元素（是上一个哦）。
5、prevAll()：获取指定元素的前边所有的同级元素。
三、获取子元素
1、查找子元素方式1：&
例如：var aNods = $(&ul & a&);查找ul下的所有a标签
2、查找子元素方式2：children()
3、查找子元素方式3：find()
这里再简单介绍以下children()和find()的异同：
1& children及find方法都用是用来获得element的子elements的，两者都不会返回 text node，就像大多数的jQuery方法一样。
2& children方法获得的仅仅是元素一下级的子元素，即：immediate children。
3& find方法获得所有下级元素，即：descendants of these elements in the DOM tree
4& children方法的参数or 是可选的（optionally），用来过滤子元素，
但find方法的参数selector方法是必选的。
5& find方法事实上可以通过使用 jQuery( selector, context )来实现。即$('li.item-ii').find('li')等同于$('li', 'li.item-ii').
&ul class=&level-1&&
& &li class=&item-i&&I&/li&
& &li class=&item-ii&&II
&&& &ul class=&level-2&&
&&&&& &li class=&item-a&&A&/li&
&&&&& &li class=&item-b&&B
&&&&&&& &ul class=&level-3&&
&&&&&&&&& &li class=&item-1&&1&/li&
&&&&&&&&& &li class=&item-2&&2&/li&
&&&&&&&&& &li class=&item-3&&3&/li&
&&&&&&& &/ul&
&&&&& &/li&
&&&&& &li class=&item-c&&C&/li&
& &li class=&item-iii&&III&/li&
使用：$('ul.level-2').children().css('border', '1px solid green'); 的效果是：
jquery选择器 之& 获取父级元素、同级元素、子元素 - yes - 赵彦平的网络家园
使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是：
上面是我从网络所摘的解决js和jquery得到父子元素等的方法，但在解决的时候还是会产生问题：
&script type=&text/javascript&&
//JS解决 var dom=document.getElementById(&dom&); //为了避免ff出现的问题，因此对子元素进行过滤处理 del_space(dom); //1.获取dom下的所有子节点 var a = dom.childN//全部子节点；
var b = dom.parentN//父节点；
var e = dom.firstC//第一个子节点
var f = dom.lastC//最后一个子节点&& //不知何原因，待日后研究 下一个兄弟节点和上一个兄弟节点都无法获取的到...--! var c = dom.nextSbiling.nodeT//下一个兄弟节点
var d = dom.previousS//上一个兄弟节点&&
//jQuery解决
var a1 = $(&#dom&).children();//全部子节点；
var b2 = $(&#dom&).parent();//父节点；
var c3 = $(&#dom&).next();//下一个兄弟节点
var d4 = $(&#dom&).prev();//上一个兄弟节点
var e5 = $(&#dom&).children(&:first&);//第一个子节点
var f6 = $(&#dom&).children(&:last&);//最后一个子节点&&
/*&&&&&&&& alert(a.length);&&&&&&&&
for(var i=0;i&a.i++){&&&&&&&&&&&&
alert(a[i].nodeName+&:&+a[i].nodeValue+&:&+/\s/.test(a[i].nodeValue));&&&&&&&& }&&&&&&&& */
//ff下面会默认将你的换行当作dom元素，因此必须进行过滤处理，IE下不会产生类似问题
function del_space(elem){ var elem_child = elem.childN//得到参数元素的所有子元素
for ( var i = 0; i & elem_child. i++) { //遍历子元素
if (elem_child[i].nodeName == &#text&) { elem.removeChild(elem_child[i]); } } }
js获取节点 dom操作
nodeType常量
nodeType值
Node.ELEMENT_NODE
Node.TEXT_NODE
Node.DOCUMENT_NODE
注释的文本
DocumentFragment
Node.DOCUMENT_FRAGMENT_NODE
document片断
Node.ATTRIBUTE_NODE
createAttribute()
用指定的名字创建新的Attr节点。
createComment()
用指定的字符串创建新的Comment节点。
createElement()
用指定的标记名创建新的Element节点。
createTextNode()
用指定的文本创建新的TextNode节点。
getElementById()
返回文档中具有指定id属性的Element节点。
getElementsByTagName()
返回文档中具有指定标记名的所有Element节点。
attributes
如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。
childNodes
以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组。
firstChild
以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。
以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。
nextSibling
以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。下一个兄弟节点
节点的名字，Element节点则代表Element的标记名称。
代表节点的类型。
parentNode
以Node的形式返回当前节点的父节点。如果没有父节点，则为null。
previousSibling
以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。上一个兄弟节点
上一页： &&&&&下一页：相关内容}
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&您可能感兴趣的文章：温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
$(document).ready(function(){$("a").parent().addClass('a_par');});
二、获取同级元素：
1、next([expr])：
获取指定元素的下一个同级元素（注意是下一个同级元素哦）
&!DOCTYPE html&&html&&head&& &script type="text/javascript" src="/jquery/jquery.js"&&/script&&/head&
&body&&ul&&& &li&list item 1&/li&&& &li&list item 2&/li&&& &li class="third-item"&list item 3&/li&&& &li&list item 4&/li&&& &li&list item 5&/li&&/ul&
&script&$('li.third-item').next().css('background-color', 'red');&/script&
&/body&&/html&
这个例子的结果是，只有list item 4背景色变为红色
2、nextAll([expr]):
获取指定元素后边的所有同级元素
HelloHello Again&div&&span&And Again&/span&&/div&
var p_nex = $("p").nextAll();p_nex.addClass('p_next_all');
注意看最后一个”&p>”标签哦，也被加上了’p_next_all’这个类名哦~~
3、andSelf():
获取指定元素后边的所有同级元素，之后加上指定的元素
我感觉这个函数是最有意思的一个函数了，什么意思？直译过来就是”还有我“,”还有自己”,没错，还有自己。
&p&Hello&/p&&p&Hello Again&/p&&div&&span&And Again&/span&&/div&
var p_nex = $("p").nextAll().andSelf();p_nex.addClass('p_next_all');
注意看第一个“&p&”标签啊，这句话的意思是选择p标签后面的所有同级标签，以及自己。。。
以下这两个不举具体的例子了，实际上就是next()和nextAll()的相反喽
4、prev()：获取指定元素的上一个同级元素（是上一个哦）。
5、prevAll()：获取指定元素的前边所有的同级元素。
三、获取子元素
1、查找子元素方式1：&
例如：var aNods = $("ul & a");查找ul下的所有a标签
2、查找子元素方式2：children()
3、查找子元素方式3：find()
这里再简单介绍以下children()和find()的异同：
1& children及find方法都用是用来获得element的子elements的，两者都不会返回 text node，就像大多数的jQuery方法一样。 2& children方法获得的仅仅是元素一下级的子元素，即：immediate children。 3& find方法获得所有下级元素，即：descendants of these elements in the DOM tree 4& children方法的参数selector 是可选的（optionally），用来过滤子元素，
但find方法的参数selector方法是必选的。 5& find方法事实上可以通过使用 jQuery( selector, context )来实现。即$('li.item-ii').find('li')等同于$('li', 'li.item-ii').
&ul class="level-1"&& &li class="item-i"&I&/li&& &li class="item-ii"&II&&& &ul class="level-2"&&&&&& &li class="item-a"&A&/li&&&&&& &li class="item-b"&B&&&&&&& &ul class="level-3"&&&&&&&&&& &li class="item-1"&1&/li&&&&&&&&&& &li class="item-2"&2&/li&&&&&&&&&& &li class="item-3"&3&/li&&&&&&&& &/ul&&&&&& &/li&&&&&& &li class="item-c"&C&/li&&&& &/ul&& &/li&& &li class="item-iii"&III&/li&&/ul&使用：$('ul.level-2').children().css('border', '1px solid green'); 的效果是：
使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是： &
阅读(213644)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'jquery选择器 之
获取父级元素、同级元素、子元素',
blogAbstract:'一、获取父级元素
1、&parent([expr]):
获取指定元素的所有父级元素
&div id=\"par_div\"&&a id=\"href_fir\" href=\"#\"&href_fir&/a&&a id=\"href_sec\" href=\"#\"&href_sec&/a&&a id=',
blogTag:'',
blogUrl:'blog/static/1',
isPublished:1,
istop:false,
modifyTime:9,
publishTime:3,
permalink:'blog/static/1',
commentCount:2,
mainCommentCount:2,
recommendCount:9,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}Javascript获取父级元素、子级元素、兄弟元素的例子-jquery-网页制作-壹聚教程网Javascript获取父级元素、子级元素、兄弟元素的例子
本文章来为各位介绍一篇Javascript获取父级元素、子级元素、兄弟元素的例子，这里包括了原生的js与jquery的实现方法，具体的操作如下所示。
先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比
js的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素
原生的JS获取ID为test的元素下的子元素。可以用：
&div id=&dom&&
&& &div&&/div&
&& &div&&/div&
&& &div&&/div&
var a = docuemnt.getElementById(&dom&).getElementsByTagName_r(&div&); 这样是没有问题的
此时a.length=3；
但是我们现在换一种方法获取就是我上章提到的var b = document.getElementByIdx_x(&dom&).childN如果& 这样alert(b.length)IE浏览器上没问题还是3，但是在FF浏览器上会提示是4，这就是因为FF把换行也当做一个元素了。
所以我们必须处理一下才能用JS的那些属性。处理思想很简单就是遍历一下这些元素。把元素类型为空格而且是文本都删除。处理函数是这样的
function del_space(elem){
&var elem_child = elem.childN//得到参数元素的所有子元素
&for(var i=0;i&elem_child.i++){ //遍历子元素
&&&&&&& if(elem_child.nodeName == &#text& && !/\S/.test(elem_child.nodeValue)) {
&&&&&&&&& elem.removeChild(elem_child)}
&&&&&&&& }
上述函数遍历子元素，当元素里面有节点类型是文本并且该节点的节点值是空的。就把他删除。
nodeNames可以得到一个节点的节点类型，/\s/是非空字符在JS里的。前面加！,则表示是空字符
test() 方法用于检测一个字符串是否匹配某个模式.语法是： RegExpObject.test(string)
如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
nodeValue表示得到这个节点里的值。
removeChild则是删除元素的子元素。
下面就是重点了啊！
&div id = &dom&&
&&&&&&&& &div&&/div&
&&&&&&&& &div&&/div&
&&& &div&&/div&
& function dom(){
&&&& var a = document.getElementByIdx_x_x(&dom&);
&&&& del_space(a);调用清理空格的函数
&&&& var b = a.childN获取a的全部子节点；
&&&& var c = a.parentN获取a的父节点；
&&&& var d = a.nextS获取a的下一个兄弟节点
&&&& var e = a.previousS获取a的上一个兄弟节点
&&&& var f = a.firstC获取a的第一个子节点
&&&& var g = a.lastC获取a的最后一个子节点
下面介绍JQUERY的父，子，兄弟节点查找方法
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$(&span&).parent()或者$(&span&).parent(&.class&)
jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个
jQuery对象返回，children()则只会返回节点
jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll()，返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点，不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()
的返回结果，不会有初始集合中的内容，比如$(&p&),find(&span&),是从
p元素开始找,等同于$(&p span&)
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&一、获取父级元素
1、 parent([expr]):
获取指定元素的所有父级元素
&div id=&par_div&&&a id=&href_fir& href=&#&&href_fir&/a&
&a id=&href_sec& href=&#&&href_sec&/a&
&a id=&href_thr& href=&#&&href_thr&/a&&/div&
&span id=&par_span&&
&a id=&href_fiv& href=&#&&href_fiv&/a&
$(document).ready(function(){
$(&a&).parent().addClass('a_par');
firebug查看jquery parent效果
二、获取同级元素：
1、next([expr])：
获取指定元素的下一个同级元素（注意是下一个同级元素哦）
&!DOCTYPE html&
& &script type=&text/& src=&/jquery/jquery.js&&&/script&
&& &li&list item 1&/li&
&& &li&list item 2&/li&
&& &li class=&third-item&&list item 3&/li&
&& &li&list item 4&/li&
&& &li&list item 5&/li&
$('li.third-item').next().css('background-color', 'red');
这个例子的结果是，只有list item 4背景色变为红色
2、nextAll([expr]):
获取指定元素后边的所有同级元素
Hello Again
&div&&span&And Again&/span&&/div&
var p_nex = $(&p&).nextAll();
p_nex.addClass('p_next_all');
firebug_jq_nextall
注意看最后一个&&p>&标签哦，也被加上了&p_next_all&这个类名哦~~
3、andSelf():
获取指定元素后边的所有同级元素，之后加上指定的元素
我感觉这个函数是最有意思的一个函数了，什么意思？直译过来就是&还有我&,&还有自己&,没错，还有自己。
&p&Hello&/p&&p&Hello Again&/p&&div&&span&And Again&/span&&/div&
var p_nex = $(&p&).nextAll().andSelf();
p_nex.addClass('p_next_all');
注意看第一个&&p&&标签啊，这句话的意思是选择p标签后面的所有同级标签，以及自己。。。
firebug_jq_andself
以下这两个不举具体的例子了，实际上就是next()和nextAll()的相反喽
4、prev()：获取指定元素的上一个同级元素（是上一个哦）。
5、prevAll()：获取指定元素的前边所有的同级元素。
三、获取子元素
1、查找子元素方式1：&
例如：var aNods = $(&ul & a&);查找ul下的所有a标签
2、查找子元素方式2：children()
3、查找子元素方式3：find()
这里再简单介绍以下children()和find()的异同：
1& children及find方法都用是用来获得element的子elements的，两者都不会返回 text node，就像大多数的jQuery方法一样。
2& children方法获得的仅仅是元素一下级的子元素，即：immediate children。
3& find方法获得所有下级元素，即：descendants of these elements in the DOM tree
4& children方法的参数or 是可选的（optionally），用来过滤子元素，
但find方法的参数selector方法是必选的。
5& find方法事实上可以通过使用 jQuery( selector, context )来实现。即$('li.item-ii').find('li')等同于$('li', 'li.item-ii').
&ul class=&level-1&&
& &li class=&item-i&&I&/li&
& &li class=&item-ii&&II
&&& &ul class=&level-2&&
&&&&& &li class=&item-a&&A&/li&
&&&&& &li class=&item-b&&B
&&&&&&& &ul class=&level-3&&
&&&&&&&&& &li class=&item-1&&1&/li&
&&&&&&&&& &li class=&item-2&&2&/li&
&&&&&&&&& &li class=&item-3&&3&/li&
&&&&&&& &/ul&
&&&&& &/li&
&&&&& &li class=&item-c&&C&/li&
& &li class=&item-iii&&III&/li&
使用：$('ul.level-2').children().css('border', '1px solid green'); 的效果是：
jquery选择器 之& 获取父级元素、同级元素、子元素 - yes - 赵彦平的网络家园
使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是：
上面是我从网络所摘的解决js和jquery得到父子元素等的方法，但在解决的时候还是会产生问题：
&script type=&text/javascript&&
//JS解决 var dom=document.getElementById(&dom&); //为了避免ff出现的问题，因此对子元素进行过滤处理 del_space(dom); //1.获取dom下的所有子节点 var a = dom.childN//全部子节点；
var b = dom.parentN//父节点；
var e = dom.firstC//第一个子节点
var f = dom.lastC//最后一个子节点&& //不知何原因，待日后研究 下一个兄弟节点和上一个兄弟节点都无法获取的到...--! var c = dom.nextSbiling.nodeT//下一个兄弟节点
var d = dom.previousS//上一个兄弟节点&&
//jQuery解决
var a1 = $(&#dom&).children();//全部子节点；
var b2 = $(&#dom&).parent();//父节点；
var c3 = $(&#dom&).next();//下一个兄弟节点
var d4 = $(&#dom&).prev();//上一个兄弟节点
var e5 = $(&#dom&).children(&:first&);//第一个子节点
var f6 = $(&#dom&).children(&:last&);//最后一个子节点&&
/*&&&&&&&& alert(a.length);&&&&&&&&
for(var i=0;i&a.i++){&&&&&&&&&&&&
alert(a[i].nodeName+&:&+a[i].nodeValue+&:&+/\s/.test(a[i].nodeValue));&&&&&&&& }&&&&&&&& */
//ff下面会默认将你的换行当作dom元素，因此必须进行过滤处理，IE下不会产生类似问题
function del_space(elem){ var elem_child = elem.childN//得到参数元素的所有子元素
for ( var i = 0; i & elem_child. i++) { //遍历子元素
if (elem_child[i].nodeName == &#text&) { elem.removeChild(elem_child[i]); } } }
js获取节点 dom操作
nodeType常量
nodeType值
Node.ELEMENT_NODE
Node.TEXT_NODE
Node.DOCUMENT_NODE
注释的文本
DocumentFragment
Node.DOCUMENT_FRAGMENT_NODE
document片断
Node.ATTRIBUTE_NODE
createAttribute()
用指定的名字创建新的Attr节点。
createComment()
用指定的字符串创建新的Comment节点。
createElement()
用指定的标记名创建新的Element节点。
createTextNode()
用指定的文本创建新的TextNode节点。
getElementById()
返回文档中具有指定id属性的Element节点。
getElementsByTagName()
返回文档中具有指定标记名的所有Element节点。
attributes
如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。
childNodes
以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组。
firstChild
以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。
以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。
nextSibling
以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。下一个兄弟节点
节点的名字，Element节点则代表Element的标记名称。
代表节点的类型。
parentNode
以Node的形式返回当前节点的父节点。如果没有父节点，则为null。
previousSibling
以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。上一个兄弟节点
上一页： &&&&&下一页：相关内容}
我要回帖
更多推荐
- ·爱奇艺会员开通续费怎么退款？
- ·爱奇艺会员开通续费能退款吗？
- ·全世界都在玩抖音快手和抖音哪个人多吗！相互了解！
- ·怎么创建paypal账户用户信息里名字与姓名拼音不匹配，如何修改姓名拼音？
- ·山东技师学院电商专业可以从事什么工作就业怎么样？
- ·我的手机主板用什么清洗清洗的时候突然掉了两条线，有两条线不知道怎么插。请问插在
- ·恢复六个月删掉的qq好友删掉了怎么恢复
- ·联通号码过户怎么办理刚办的卡多久可以过户
- ·听说MX5魅族mx5换屏幕多少钱容易坏，要怎么ぐ
- ·为什么我的键盘打不出数字和ipad键盘显示大写字母母
- ·师傅，我今天把南方全站仪仪摔在了地上，读书的那个显示屏摔掉了一边，还能
- ·吃完QQ糖能感冒喝小柴胡胡吗？
- ·我的新买的华为g9青春版发热严重手机为什么插上卡不能联网
- ·我的惠普cq43笔记本电脑脑惠普的什么型号不我不懂有图麻烦大家了
- ·东西流量和流速之间的关系SDN之间是怎样的关系
- ·为什么荣耀7不能通过usb线共享电脑的玩转荣耀立方宽带上网网
- ·厂子需要购买数显锚杆拉力计厂家控制仪呢，有什么好点的厂家推荐吗？
- ·投影幕布牌子什么牌子好？
- ·华为p8青春版标准版和青春版对比 哪个好
- ·联想y410p触摸板驱动下方突然噪音超大，请问是什么问题？
- ·求助jquery 获取同级元素获取父子元素的问题
- ·好玩，好看有意思好玩的app软件的p图软件，说说呗
- ·himall 源码2.2怎么安装，偌大的怎么没人知道呢
- ·求一份基于stm32f407zet6原理图的驱动lcd1602液晶的程序
- ·什么软件可以 让照片一张一张的呈现出来 轮行天下还能登上去吗自己选音乐配上去
- ·现在好像有人溅到偷热点流量领了免费流量 在哪领的啊
- ·云南云南省楚雄市鹿城镇子午镇电信宽带多少元
- ·电脑自动六爻起卦准确率率高吗
- ·求进击的巨人重制版资源百度云资源 谢谢~
- ·南门太守：我为什么用起了会用微信了我好高兴
- ·升级win10后，原来的win10 删除恢复分区区可以删除吗
- ·网上被骗了2000元怎么办公司名字是北京富通东方科技东方富通
- ·微信怎么微信更改实名认证证的资料
- ·有没有类似钱咖的软件ihour的电脑用软件
- ·怎么关闭关闭ios系统更新提示的提升，好烦
- ·广电宽带用什么路由器没路由器设置
