jQuery选择器及部分 api 的用法

您所在的位置:网站首页 jquery获取元素类名 jQuery选择器及部分 api 的用法

jQuery选择器及部分 api 的用法

2023-03-30 19:14| 来源: 网络整理| 查看: 265

使用jQuery获取元素 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头:$()。 jQuery为了方便使用者刻意和CSS选择器使用相同的语法,几乎支持所有类型的CSS3选择器,当然也有一些其特定的选择器 jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取

元素。 $("p.intro") 选取所有 class="intro" 的

元素。 $("p#demo") 选取所有 id="demo" 的

元素。 jQuery 属性选择器

jQuery 使用 XPath(XPath 是一门在 XML 文档中查找信息的语言,XPath 用于在 XML 文档中通过元素和属性进行导航。) 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。 jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

$("p").css("background-color","red"); 选择器 基本,组合/层次选择器.png 基本过滤选择器.png 内容,可视化,属性过滤选择器.png 子元素,表单元素选择器.png

可以看出来基本上和css选择器差不多,就感觉是在复习css选择器一样,简直不要太爽.

部分 api 的用法

除了使用选择器jQuery还提供了一些方法帮助我们查找当前元素相关元素

.eq(index), .get([index])

对于一个特定结果集,我们想获取到指定index的jQuery对象,可以使用eq方法

$('div').eq(3); 获取结果集中的第四个jQuery对象

我们可以通过类数组下标的获取方式或者get方法获取指定index的DOM对象,也就是我们说的jQuery对象转DOM对象

$('div')[2]; $('div').eq(2);

get()不写参数把所有对象转为DOM对象返回

兄弟元素获取

.next([selector]), .prev([selector])

next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素。prev正好相反,获取元素之前的同辈元素

$("h2").next(); 返回 的下一个同胞元素

.nextAll([selector]), .prevAll([selector])

nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素,选择性筛选的选择器,prevAll与之相反,获取元素前面的同辈元素

$("h2").nextAll(); 返回 的所有跟随的同胞元素

.siblings([selectors]) 获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器

$("h2").siblings(); 返回 的所有同胞元素

也可以使用可选参数来过滤对同胞元素的搜索。

$("h2").siblings("p"); 返回属于 的同胞元素的所有

元素

nextUntil() , prevUntil() 方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。prevAll与之相反,获取元素前面的同胞元素

$("h2").nextUntil("h6"); 返回 的所有跟随的同胞元素 父子元素获取

children() 方法 返回被选元素的所有直接子元素,选择器选择性筛选 该方法只会向下一级对 DOM 树进行遍历。

$("div").children(); 返回每个 元素的所有直接子元素

也可以使用可选参数来过滤对子元素的搜索。

$("div").children("p.1"); 返回类名为 "1" 的所有

元素,并且它们是 的直接子元素

find() 方法 返回被选元素的后代元素,一路向下直到最后一个后代。

$("div").find("span"); 返回属于 后代的所有 元素 $("div").find("*"); 返回 的所有后代

parent() 方法

$("span").parent(); 返回每个 元素的的直接父元素

返回被选元素的直接父元素。

parents() 方法 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。

$("span").parents(); 返回所有 元素的所有祖先

也可以使用可选参数来过滤对祖先元素的搜索。

$("span").parents("ul"); 返回所有 元素的所有祖先,并且它是 元素

parentsUntil() 方法 返回介于两个给定元素之间的所有祖先元素。

$("span").parentsUntil("div"); 返回介于 与 元素之间的所有祖先元素 筛选当前结果集

first() 方法 返回被选元素的首个元素。

$("div p").first(); 选取首个 元素内部的第一个

元素

last() 方法 返回被选元素的最后一个元素.

$("div p").last(); 选择最后一个 元素中的最后一个

元素

filter() 方法 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。参数可以是一个选择器或者一个函数

$("p").filter(".url"); 返回带有类名 "url" 的所有

元素 $('li').filter(function(index) { return index % 3 == 2; }) 返回下标除以3余数为2的所有li元素

not() 方法 返回不匹配标准的所有元素。

$("p").not(".url"); 返回不带有类名 "url" 的所有

元素

has() 方法 返回拥有匹配指定选择器的一个或多个元素在其内的所有元素,如需选取拥有多个元素在其内的元素,请使用逗号分隔。

$("p").has("span"); 返回拥有一个 元素在其内的所有

元素

is() 方法 用于查看选择的元素是否匹配选择器。

if ($("p").parent().is("div")) { alert("p 的父元素是 div"); } 如果

的父元素是 元素,弹出提示信息 总结

以上就是关于jQuery选择器及部分 api 的用法,并给出具体实例,希望对有需要的人所有帮助。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3