这几天遇到的 jQuery 问题

过去一直对 jQuery 一知半解的状态,在这段时间的工作中暴露了。事实证明,实践出真知!现在把遇到的不熟练的记下来。见一个,补充一个!
(试试看 SegmentFault 博客的效果如何)

DOM操作

搜索父元素操作

parents([selector])

用于获取当前匹配元素集合每个元素祖先元素,根据需要还可以使用一个选择器进行筛选

$("p").parents(“li”); //搜索p 的父元素中的 li 元素

这个方法要注意的问题:

  1. 从父元素开始匹配查找
  2. 一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤
  3. 可能包含0个、1个或者多个元素

closest(selector[, context])

该方法从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素

$("a").closest("div").css("border", "1px solid blue");

这个方法要注意的问题:

  1. 从当前元素匹配查找
  2. 逐级向上查找,直到发现匹配的元素后就停止了, 其实可以说是找到最近的父元素
  3. 返回0或者1个元素

parent([selector])

用于获取当前匹配元素集合每个元素的父元素,根据需要,还可以使用一个选择器进行筛选

parentsUtil([selector])

用于获取当前匹配元素集合每个元素的祖先元素,直至给定选择器匹配的元素(但不包括该元素)

//从 li#li2 开始向上找它的父元素直到 遇到元素 #ul1_li2,但是不将 #ul1_li2 加入包装集 
$("li#li2").parentsUtil("#ul1_li2").css("background", "#FCF");

offsetParent( )方法

格式如下:offsetParent( ),用于搜索第一个匹配元素的已定位的父元素,仅对可见元素有效。
该方法查找第一个匹配元素的已定位元素,并返回由该元素包装成的jQuery对象。

查找兄弟元素

prev([selector])

Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

假设有一个包含一系列 DOM 元素的 jQuery 对象包装集,利用 .prev() 方法搜索每一元素在 DOM 树中的紧邻的兄弟元素并且返回一个包含匹配元素的 jQuery 对象包装集。

这个方法也接受一个选择器来过滤匹配的结果。比如下面的例子,demo请戳这里

<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>

$( "li.third-item" ).prev().css( "background-color", "red" );

先找到 class 为 third-item 的li,使用 prev( ) 向前找到它的第一个兄弟元素,修改父元素的背景颜色。

prevAll( )

Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

假设有一个包含一系列 DOM 元素的 jQuery 对象包装集,利用 .prevAll() 方法搜索每一元素在 DOM 树中的所有的前面的兄弟元素并且返回一个包含匹配元素的 jQuery 对象包装集。
这个方法也接受一个选择骑来过滤匹配的集合。

<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>

$( "li.third-item" ).prevAll().css( "background-color", "red" );

prevUtil( )

Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

Event对象

to be continued

    原文作者:张伦
    原文地址: https://segmentfault.com/a/1190000000611343
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞