浅析jQuery中常用的元素查找方法总结

本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍 需要的朋友参考下  

$("#myELement") 选择id值等于myElement的元素 id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素 返回div元素数组 $(" myClass")   选择使用myClass类的css的所有元素 $("") 选择文档中的所有的元素 可以运用多种的选择方式进行联合选择 例如$("#myELement div myclass")

层叠选择器 $("form input") 选择所有的form元素中的input元素 $("#main > ")  选择id值为main的所有的子元素 $("label + input") 选择所有的label元素的下一个input元素节点 经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $("#prev ~ div") 同胞选择器 该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器 $("tr:first") 选择所有tr元素的第一个 $("tr:last")  选择所有tr元素的最后一个 $("input:not(:checked) + span")

过滤掉 checked的选择器的所有的input元素 $("tr:even")   选择所有的tr元素的第 个元素（注意 因为所选择的多个元素时为数组 所以序号是从 开始） $("tr:odd")    选择所有的tr元素的第 个元素 $("td:eq( )")  选择所有的td元素中序号为 的那个td元素 $("td:gt( )")  选择td元素中序号大于 的所有td元素 $("td:ll( )")  选择td元素中序号小于 的所有的td元素 $(":header") $("div:animated")

内容过滤选择器 $("div:contains( John )") 选择所有div中含有John文本的元素 $("td:empty")             选择所有的为空（也不包括文本节点）的td元素的数组 $("div:has(p)")           选择所有含有p标签的div元素 $("td:parent")            选择所有的以td为父节点的元素数组

可视化过滤选择器 $("div:hidden")           选择所有的被hidden的div元素 $("div:visible")          选择所有的可视化的div元素

属性过滤选择器 $("div[id]")              选择所有含有id属性的div元素 $("input[name= newsletter ]")    选择所有的name属性等于 newsletter 的input元素 $("input[name!= newsletter ]")   选择所有的name属性不等于 newsletter 的input元素 $("input[name^= news ]")         选择所有的name属性以 news 开头的input元素 $("input[name$= news ]")         选择所有的name属性以 news 结尾的input元素 $("input[name= man ]")          选择所有的name属性包含 news 的input元素 $("input[id][name$= man ]")    可以使用多个属性进行联合选择 该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器 $("ul li:nth child( )") $("ul li:nth child(odd)") $("ul li:nth child( n + )") $("div span:first child")   返回所有的div元素的第一个子节点的数组 $("div span:last child")    返回所有的div元素的最后一个节点的数组 $("div button:only child")  返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器 $(":input")       选择所有的表单输入元素 包括input textarea select 和 button $(":text")        选择所有的text input元素 $(":password")    选择所有的password input元素 $(":radio")       选择所有的radio input元素 $(":checkbox")    选择所有的checkbox input元素 $(":submit")      选择所有的submit input元素 $(":image")       选择所有的image input元素 $(":reset")       选择所有的reset input元素 $(":button")      选择所有的button input元素 $(":file")        选择所有的file input元素 $(":hidden")      选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器 $(":enabled")   选择所有的可 *** 作的表单元素 $(":disabled")  选择所有的不可 *** 作的表单元素 $(":checked")   选择所有的被checked的表单元素 $("select option:selected") 选择所有的select 的子元素中被selected的元素 选取一个name 为”S_ _ ″的input text框的上一个td的text值 $(”input[@name =S_ _ ]“) parent() prev() text() 名字以”S_”开始 并且不是以”_R”结尾的 $(”input[@name ^= S_ ]“) not(”[@name $= _R ]“) 一个名为radio_ 的radio所选的值 $(”input[@name =radio_ ][@checked]“) val(); $("A B") 查找A元素下面的所有子节点 包括非直接子节点 $("A>B") 查找A元素下面的直接子节点 $("A+B") 查找A元素后面的兄弟节点 包括非直接子节点 $("A~B") 查找A元素后面的兄弟节点 不包括非直接子节点

$("A B") 查找A元素下面的所有子节点 包括非直接子节点 例子 找到表单中所有的 input 元素 HTML 代码: <form> <label>Name:</label> <input name=name /> <fieldset>       <label>Newsletter:</label>       <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代码: $("form input") 结果: [ <input name=name /> <input name=newsletter /> ]

$("A>B") 查找A元素下面的直接子节点 例子 匹配表单中所有的子级input元素 HTML 代码: <form> <label>Name:</label> <input name=name /> <fieldset>       <label>Newsletter:</label>       <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代码: $("form > input") 结果: [ <input name=name /> ]

$("A+B") 查找A元素后面的兄弟节点 包括非直接子节点 例子 匹配所有跟在 label 后面的 input 元素 HTML 代码: <form> <label>Name:</label> <input name=name /> <fieldset>       <label>Newsletter:</label>       <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代码: $("label + input") 结果: [ <input name=name /> <input name=newsletter /> ]

lishixinzhi/Article/program/Java/JSP/201311/20132

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

$(document)ready(function(){

$("div p")first();//获取第一个<div>中的第一个<p>

$("div p")last();//获取最后一个<div>中的最后一个<p>

$("p")eq(1);//获取所有<p>中的第二个<p>

$("p")filter("demo");//返回带有demo类名的所有<p>

$("p")not("demo");//返回不带有demo类名的所有<p>

$("p")parent();//返回<p>的直接父元素；

$("p")parents();//返回<p>的所有祖先

$("p")parentsUntil("div");//返回<p>与<div>间的所有祖先

$("div")children();//返回<div>的直接子元素

$("div")find();//返回<div>的所有后代

$("h1")siblings();//返回<h1>的所有兄弟元素

$("h1")next();//返回<h1>的下一个同胞元素

$("h1")nextAll();//返回<h1>后面的所有同胞元素

$("h1")nextUntil("h6");//返回<h1>与<h6>间的所有同胞元素

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素

});

首先绑定事件

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

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

});

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

后面的例子中用到的HTML模板如下：

首先你需要先加载你的HTML。 jQuery 会自动完成这一步，因为jQuery *** 作的DOM是固定的。但是在使用 cheerio 时我们要手动加载我们的HTML文档

首选的方式如下：

其次，直接把HTML字符串作为上下文也是可以的：

或者把HTML字符串作为root

如果你需要自定义一些解析选项，你可以多传递一个对象给load方法：

更多的解析选项可以参考 domhandler 和 parser-options

cheerio 的选择器几乎和 jQuery 一模一样，所以语法上十分相像

selector 在 context 的范围内搜索， context 的范围又包含在 root 的范围内。 selector 和 context 可以是一个字符串，DOM元素，DOM数组或者cheerio实例。 root 一般是一个HTML文档字符串

选择器是文档遍历和 *** 作的起点。如同在 jQuery 中一样，它是选择元素节点最重要的方法，但是在 jQuery 中选择器建立在CSS选择器标准库上。 cheerio 的选择器实现了大部分的方法

用来获取和更改属性的方法：

attr(name, value)

这个方法用来获取和设置属性。获取第一个符合匹配的元素的属性值。如果某个属性值被设置成null，那么该属性会被移除。你也可以把 map 和 function 作为参数传递进去，就像在jQuery中一样

removeAtrr(name)

移除名为name的属性

hasClass(className)

检查元素是否含有此类名

addClass(className)

添加类名到所有的匹配元素，可以用函数作为参数

remoteClass([className])

移除一个或者多个（空格分隔）的类名，如果className为空，则所有的类名都会被移除，可以传递函数作为参数

find(selector)

在当前元素集合中选择符合选择器规则的元素集合

parent()

获取元素集合第一个元素的父元素

next()

选择当前元素的下一个兄弟元素

prev()

同 next() 相反

siblings()

获取元素集合中第一个元素的所有兄弟元素，不包含它自己

children( selector )

each( function(index, element) )

遍历函数返回false即可终止遍历

map( function(index, element) )

filter( selector )

filter( function(index) )

first()

last()

eq( i )

缩小元素集合，可以用负数表示倒数第 i 个元素被保留

*** 作DOM结构的方法

append( content, [content, ] )

prepend( content, [content, ] )

after( content, [content, ] )

before( content, [content, ] )

remove( [selector] )

replaceWith( content )

empty()

html( [htmlString] )

text( [textString] )

输出包含自己在内的HTML（outer HTML）

toArray()

clone()

$root()

$contains( container, contained )

日期：2021/11/16

学习参考视频 ： >

以上就是关于浅析jQuery中常用的元素查找方法总结全部的内容，包括:浅析jQuery中常用的元素查找方法总结、如何获取jQuery集合的某一项、jquery选择包含当前元素的父节点的 后面所有兄弟节点...等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！