jquery选择包含当前元素的父节点的 后面所有兄弟节点...

jquery选择包含当前元素的父节点的 后面所有兄弟节点...,第1张

首先绑定事件

$("selectdirectory")bind("click",function(){

$(this)parent("divdiv_directory")nextAll("divdiv_directory")remove();

});

用nextAll这个api应该可以的,经本地测试 此法可行

自己数就行,

HTREEITEM hItem = m_TreeGetSelectedItem();

in nCount = 0;

while(hItem)

{

nCount ++;

hItem = m_TreeGetParentItem(hItem);

}

你的这个函数的算法思路是:对指定节点开始,寻找其兄弟节点和所有字节是否被选中。

第一步:判断当前节点hItem是否被选中

第二步:循环获取hItem的兄弟节点,也就是你的这个循环

HTREEITEM hSibling = m_OrgInfoGetNextItem(hItem, TVGN_NEXT);

while (hSibling)

{

hSibling = m_OrgInfoGetNextItem(hSibling, TVGN_NEXT);

}

m_OrgInfoGetNextItem(hSibling, TVGN_NEXT)是查找hSibling的下一个兄弟节点

如此循环,直到hSibing的下一个节点不是兄弟节点,那么hSibing就返回NULL,即0

跳出while循环。

第三步:查找当前节点的所有子节点。

nextSibling 是获取元素的同级下个节点。

objnextSibling 高级浏览器下回识别出文本节点 适应ie8以下

objnextElementSibling

兼容写法:var ulEl = objnextElementSibling||objnextSibling

节点至少拥有nodeType(节点类型),nodeName(节点名称),nodeValue(节点值)三个基础属性

(1)元素节点---nodeType为1

(2)属性节点---nodeName为2

(3)文本节点---nodeValue为3 (文本节点包含文字、空格、换行等)

2、节点的层级

DOM根据HTML中各节点的不同作用,可将其分别划分为标签节点(元素节点)、文本节点和属性节点

(1)根节点:<html>就是根节点,有且只有一个

(2)父节点:一个节点的上级节点

(3)子节点:一个节点的下级节点

(4)兄弟节点:具有相同父节点的节点

二、节点 *** 作

1、获取父节点

elementparentNode

2、获取子节点

(1)elementchildNodes:获得的是当前元素的所有子节点的集合(所有类型的子节点)

(2)elementchildren:是一个可读的属性,返回所有子元素节点

(3)firstChild:获取第一个子节点

(4)lastChild:获取最后一个子节点

(5)firstElementChild:获取第一个元素子节点

(6)lastElementChild:获取最后一个子元素节点

3、获取兄弟节点

(1)nextSibling:获取下一个兄弟节点

(2)previousSibling:获取上一个兄弟节点

(3)nextElementSibling:获取下一个兄弟元素(标签)节点

(4)previousElementSibling:获取前一个兄弟元素节点

<body>

<div class="demo">

<div class="box">

<h2>一二三四五</h2>

<span class="child">上山打老虎</span>

<p>注意!(保护国家保护动物)</p>

</div>

</div>

<div>

<ul>

<li id="l1">红楼梦</li>

<li>水浒传</li>

<li>三国演义</li>

<li>西游记</li>

</ul>

</div>

<script>

var child = documentquerySelector('child')

consolelog(childparentNode);

var ul = documentquerySelector('ul');

var lis = ulquerySelectorAll('li');

consolelog(lis);

consolelog("通过childNodes获得的子节点",ulchildNodes);

consolelog("children",ulchildren);

consolelog("ul的子节点",ulchildNodes);

consolelog("ul第一个子节点的类型:",ulchildNodes[0]nodeType);

consolelog("ul的第二个字节点类型:",ulchildNodes[1]nodeType);//1是元素,也叫标签

consolelog("ul的第一个子节点",ulfirstChild);

consolelog("ul的最后一个子节点:",ullastChild);

consolelog("ul的第一个子元素节点",ulfirstElementChild)

consolelog("ul的最后一个子元素节点",ullastElementChild)

var span = documentquerySelector('child');

consolelog("span的兄弟节点",spannextSiblingnextSibling)

consolelog("span的前一个兄弟节点",spanpreviousElementSibling)

</script>

</body>

登录后复制

4、创建节点

(1)doumentwrite():若页面加载完毕,再次调用该方法导致页面重绘

(2)elementinnerHTML:将节点加入到元素中,导致页面部分重绘

(3)documentcreateElement():创建节点结构清晰、效率不高

5、添加和删除节点

(1)appendChild():将节点添加到指定父节点的已有子节点的末尾

(2)insertBefore():将节点添加到指定父节点的已有子节点的前面

(3)removeChild(child):删除一个指定的节点。返回值为删除的节点

6、克隆节点

cloneNode(true/false):复制节点

(1)true:深拷贝,复制节点本身和所有子节点

(2)false(或空):浅拷贝,只复制节点本身

CSS ,全称叫作Cascading Style Sheets,即 层叠样式表 。“层叠”是指当在HTML中引用了数个样式文件,并且样式发生冲突时,浏览器能依据层叠顺序处理。“样式”指网页中文字大小、颜色、元素间距、排列等格式。HTML定义了网页的结构,但是只有HTML页面的布局并不美观,可能只是简单的节点元素的排列,为了 让网页看起来更好看一些 ,这里借助了CSS。CSS是 目前唯一的网页页面排版样式标准 ,有了它的帮助,页面才会变得更为美观。如下图的右侧,即为CSS。

就局部放大来看,下图所示就是一个CSS样式。 大括号前面 是一个CSS 选择器 ,此选择器的意思是 首先选中 id为head_wrapper且class为s-ps-islite的 节点 ,然后 再选中 其内部的class为s-p-top的 节点 。大括号内部写的就是一条条 样式规则 ,例如 position 指定了这个元素的布局方式为 绝对布局 ,bottom指定元素的 下边距 为40像素,width指定了 宽度 为100%占满父元素,height则指定了元素的 高度 。也就是说,我们将位置、宽度、高度等样式配置统一写成这样的形式,然后用大括号括起来,接着在开头再加上CSS选择器,这就代表 这个样式对CSS选择器选中的元素生效 ,元素就会根据此样式来展示了。在网页中,一般会统一定义整个网页的样式规则,并写入CSS文件中(其后缀为css)。在HTML中,只需要用link标签即可引入写好的CSS文件,这样整个页面就会变得美观、优雅。

在爬虫过程中都需要爬取目标的 节点 ,我们知道网页由一个个 节点 组成, CSS选择器会根据不同的节点 设置不同的样式规则, 那什么是节点 ?又 怎样来定位节点 呢?下面围绕这两个问题进行介绍。

在HTML中,所有 标签定义的内容都是节点 ,它们构成了一个HTML DOM树。我们先看下什么是DOM,DOM是W3C(万维网联盟)的标准,其英文全称Document Object Model,即 文档对象模型 。它定义了访问HTML和XML文档的标准:W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。W3C DOM标准被分为如下3个不同的部分:

核心DOM :针对任何结构化文档的标准模型。

XML DOM :针对XML文档的标准模型。

HTML DOM :针对HTML文档的标准模型。

根据W3C的HTML DOM标准,HTML文档中的所有内容都是节点。 整个文档 是一个文档节点; 每个HTML元素 是元素节点;HTML 元素内的文本 是文本节点;每个HTML 属性 是属性节点; 注释 是注释节点。HTML DOM将HTML文档视作树结构,这种结构被称为节点树,如下图所示。

节点树中的节点 彼此拥有层级关系 。我们常用父(parent)、子(child)和兄弟(sibling)等术语描述这些关系。父节点拥有子节点,同级的子节点被称为兄弟节点。在节点树中, 顶端节点称为根 (root)。除了根节点之外,每个 节点都有父节点 ,同时可拥有任意数量的子节点或兄弟节点。下图展示了节点树以及节点之间的关系。

在CSS中,我们使用 CSS选择器来定位节点 。例如,下图中div节点的id为container,那么就可以表示为#container,其中#开头代表选择id,其后紧跟id的名称。另外,如果我们想选择class为wrapper的节点,便可以使用wrapper,这里以点()开头代表选择class,其后紧跟class的名称。另外,还有一种选择方式,那就是 根据标签名筛选 ,例如想选择二级标题,直接用h2即可。这是最常用的3种表示,分别是 根据id、class、标签名筛选 ,请牢记它们的写法。

另外,CSS选择器还支持 嵌套选择 ,各个选择器之间加上空格分隔开便可以代表嵌套关系,如#container wrapper p则代表先选择id为container的节点,然后选中其内部的class为wrapper的节点,然后再进一步选中其内部的p节点。另外,如果不加空格,则代表并列关系,如div#container wrapper ptext代表先选择id为container的div节点,然后选中其内部的class为wrapper的节点,再进一步选中其内部的class为text的p节点。这就是CSS选择器,其筛选功能还是非常强大的。另外,CSS选择器还有一些其他语法规则,具体如下表所示。

但是,这样每次都要浪费部分时间去寻找定位点,这样既不很方便,也不高效,那么如何提高爬虫中这部分工作的效率呢?今天我给大家分享一个爬虫的利器,它就是:SelectorGadget 插件。

point and click CSS selectors,强大的谷歌插件 CSS生成器 ,有助于我们快速找到html的节点信息,它也支持Xpath表达式。Selector Gadget是一个开源的Chrome扩展程序,可以轻松地在复杂的网站上生成和选择CSS选择器。安装扩展程序后,转到任意页面并启动它。网站右下方会打开一个方框。 单击您希望选择器匹配的页面元素(它将变为绿色)。然后SelectorGadget将为该元素生成一个最小的CSS选择器,并突出显示(**)选择器匹配的所有内容。现在单击突出显示的元素将其从选择器中删除(红色),或单击未突出显示的元素将其添加到选择器。 通过这个选择和拒绝过程,SelectorGadget可以帮助您找到满足您需求的完美CSS选择器。

首先需要安装一下这个神器。在谷歌浏览器中的应用商店里,搜索到SelectorGadget插件,点击“添加至Chrome”即可。如果不能打开Chrome应用商店,可以通过网上的其他途径获取该插件,之后再手动添加至谷歌浏览器即可。手动添加方法是:打开谷歌浏览器扩展程序,并开启开发者模式,将该插件拖拽到浏览器里,如果不成功,可以选择“加载已解压的扩展程序”,将该文件夹先压缩再解压添加进去。

同时在页面栏上能看到红框处的SelectorGadget标志。

咱们以 >

xpath查找兄弟节点,最后边的 必须带上。

其实这个教程上写了xpath语法属性前面要么是 表示任意标签,要么必须指明具体标签名

// [contains(@title,"当前")]/following-sibling:: [contains(@title,"成功")][1]

// 取得当前节点的父节点的所有直接子节点,查看当前节点在所有子节点中的位置,index从0开始。

var index = $(this)index($(this)parent()children());

以上就是关于jquery选择包含当前元素的父节点的 后面所有兄弟节点...全部的内容,包括:jquery选择包含当前元素的父节点的 后面所有兄弟节点...、请问tree上面,点击到了一个节点,怎么获取这个节点是第几个节点啊、MFC 树控件等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/10128365.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-05
下一篇 2023-05-05

发表评论

登录后才能评论

评论列表(0条)

保存