奥门巴黎人手机网址【app】

利用jquery选取器怎样收获父级成分、同级成分、子元素

2019-09-18 09:51·巴黎人开户

1、查找全部符合条件的因素 find()
     举例: $('ul').find('li').addClass('tmpExample');
               查找页面中ul成分下的持有li成分,并为查找到的li元素增添tmpExample样式。

一、获取父级成分

1、$()能够是$(expresion),即css选用器、Xpath或html成分,约等于透过上述表达式来合营目的成分。
举个例子:$("a")构造的那一个目的,是用CSS采取器营造了多少个jQuery对象——它选拔了具备的<a/>那么些标签。如:
$("a").click(function(){...})
固然在点击页面上的别样三个链接时的接触事件。确切地说,就是jQuery用<a/>那一个标签创设了五个指标$("a"),函数 click()是那几个jQuery对象的多个(事件)方法。

.addBack()
  增加仓库瓜时素会集到当前群集中,多个选取性的过滤选用器。
  .addBack([selector])
    selector
    八个字符串,当中囊括贰个选拔器表达式,相配当前成分会集,不包含在内的要素。
    <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").nextAll().addBack().css("background-color",'red')
        3 , 4 ,5 项的背景形成粉红。
.children()
  获得相配成分集合中每三个成分的子成分,采用器选用性筛选。
  .children([selector])
    selector 二个用以相称成分的选用器字符串。
      $("ul .le-2").children().css("background-color","red")
        //找到ul 下 类名称叫 .le-2 类名下的具有的子成分,将其背景颜色改成石黄。
.closest()
  从要素本人最初,在DOM 树上逐级向上边元素相配。
  .closest(selector)
    selector 二个用来相配成分的取舍器字符串。
  .closest( selector [, context ] )
    selector 三个用来相称成分的选项器字符串。
    context 查找的相配成分能够在这一个DOM 成分内。
  .closest(jquery object)
    object 二个用来相称成分的指标。
  .closest(element)
    element 一个用于相称成分的DOM成分。
    $('li.item-a').closest('li').css('background-color', 'red');
      //从 li.item-a 开头向上级查找li 将其背景产生白灰。
    $(document).bind("click",function(e){
      $(e.target).closest("li").toggleClass("hilight");
        //显示怎么着 的风云委托用 closeest 达成。
    });
.find()
  通过二个采用器,jquery对象,或因素过滤,得到当前极其的因素会集中各样成分的后裔。
  .find(selector)
    selector 二个用于相称成分的抉择器字符串。
      ('li.item-ii').find('li').css('background-color','red');
      // 含有 item-ii选拔器的 li 里面过滤 li 将其背景形成深蓝。
  .find(element)
    element 二个因素或叁个jQury对象用来相配元素
    var item1 = $('li.item-1')[0];
      $('li.item-ii').find( item1 ).css('background-color', 'red');
    // 含有 item-ii选取器的 li 里面过滤 item1 将其背景形成深藕红。
.next()
  得到相称元素集结中种种成分紧邻的末尾的同辈成分的会见。
  .next([selector])
    selector 二个字符串,个中囊括多少个选拔器表达式相称成分。
      $('li.third-item').next().css('background-color','red');
      // 获得li 中包含 .third-item 选取器的成分的,下二个因素背景产生深褐。
    $("p").next(".selected").css("background-color","yellow");
        //获取p 成分中 下二个带有.selected 选拔器的因素,背景产生深湖蓝。
.nextAll()
  获取每一个相配成分集结中保有下边包车型大巴同辈成分,选取性筛选的选取器。
  .nextAll([selector])
    selector 贰个字符串,个中囊括二个选择器表明式相称成分。
  $('li.third-item').nextAll().css('background-color','red');
      // 获得li 中包蕴 .third-item 选用器的成分的,下具有因素背景形成金棕。
.nextUntil()
  通过采用器,或DOM 节点,或对象 获得每一种成分之后有所的弟兄成分,但不包罗相配的成分。
  .nextUntil([selector][,filter])
    selector 三个字符串,在那之中囊括一个相称成分选拔器表明式。
     filter 二个字符串,个中包涵一个选用器表明式用来合营的因素。
  .nextUntil([element][,filter])
    element 一个用于相配元素的DOM成分。
    filter 贰个字符串,当中累积三个选择器表明式用来合作的因素。
    $("#term-2").nextUntil("dt").css("background-color","red")
      // 获取#term-2 上边所的 成分 为dt 的因素,将背景产生木色。
.parent()
  获得匹配成分集合中,每二个要素的父成分,能够提供三个可选的采用器。
  .parent([selector])
    selector 三个字符串,当中蕴藏二个接纳器表达式用来合营的成分。
  $("li.item-a").parent().css('background-color', 'red');
    // 得到li 中蕴涵 .item-a 采取器的因素的父成分,将背景造成莲红。
  $("p").parent(".selected").css("background", "yellow");
   //获取p 成分中 下贰个带有.selected 选拔器的因素 父成分,背景形成黑古铜色。
.parents()
  获取集合中每叁个相配成分的祖先成分,能够提供贰个可选的选用器作为参数。
  .parents([selector])
    selector 八个字符串,当中带有一个采用器表明式用来同盟的因素。
    $('li.item-a').parents().css('background-color', 'red');
      // 获得li 中满含 .item-a 选用器的因素的享有祖先成分。
    $("span.selected").parents("div").css("border", "2px red solid")
      //获取到span 成分含有 .selected 的要素的持有祖先成分的div
.parentsUntil()
   查找当前因素的装有的先辈元素,直到遇见采取器,DOM 对象 相称的因素结束。
  .parentsUntil([selector][,filter])
    selector 选用器字符串,用于匹配到哪些祖先成分时停下相配。
    filter 多个字符串,用于相配成分的选用器表明式字符串。
  .parentsUntil([element][,filter])
    element DOM节点 或对象 用于分明到哪些前辈成分时候结束相称。
    filter 一个字符串,用于相称成分的选拔器表明式字符串。
      $("li.item-a").parentsUntil(".level-1").css("background-color", "red");
.prev()
  获得一个包罗相称的要素会集中每三个要素紧邻的前一个同辈成分的集纳。选取性筛选的采纳器。
  .prev([selector])
    selector 二个用以相称成分的选料器字符串。
      $('li.third-item').prev().css('background-color', 'red');
        // 获得li 中包含 .third-item 选择器的因素的,上八个因素背景形成米色。
.prevAll()
   获取集合中每三个相称成分的享有后面包车型大巴小家伙成分。
    .prevAll([selector])
    八个字符串,在那之中蕴藏一个选择器表达式匹配成分。
      $('li.third-item').prevAll().css('background-color', 'red');
.prevUntil()
  .prevUntil( [selector ] [, filter ] )
   selector
  选用器字符串,用于鲜明到哪个排在前边的同辈成分时停下相配
  filter
    二个字符串,个中含有多个选用器表明式用来合作的因素。
    $("#term-2").prevUntil("dt").css("background-color", "red");
.siblings()
  得到相称成分会集中每一个因素的弟兄成分,可以提供二个可选的选拔器。
  .siblings([selector])
    selector 一个用于般配成分的挑三拣四器字符串。
      $('#term-2').siblings().css("background-color", "red");
      $("p").siblings(".selected").css("background", "yellow");

2、查找钦点成分的小伙子节点 siblings()
     举例:$('li#tmpCarrot').slblings().addClass('tmpExample');
              查找ID为tmpCarrot的li成分全数的弟兄节点,并为查找到的弟兄节点扩充tmpExample样式。
              能够在slblings()的括号中增添选拔器来寻找钦点条件的弟兄节点。如:slblings('.tmpClass'),正是查找类

1、 parent([expr]):

举个例子有那样一段HTML代码:

为tmpClass的小伙子节点。

收获钦赐元素的富有父级成分

复制代码 代码如下:

3、查找钦赐节点的下叁个小朋友节点 next()
     举例:$('li#tmpBroccoli').next().addClass('tmpExample');
              查找ID为tmpBroccoli的li节点的下一小家伙节点。并为查找到的男子儿节点扩张tmpExample样式。

复制代码 代码如下:

<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>

4、查找钦点节点的末尾的有所兄弟节点 next()
     举例:$('li#tmpBroccoli').nextAll().addClass('tmpExample');
              查找ID为tmpBroccoli的li节点前面包车型大巴具有兄弟节点。并为查找到的男生儿节点增添tmpExample样式。

<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>
</span>
$(document).ready(function(){
$("a").parent().addClass('a_par');
});

而操作这段HTML的是之类一条语句:
alert($("div>p").html());

5、查找钦定节点的前八个男人节点 prev()
     举例:$('li#tmpBroccoli').prev().addClass('tmpExample');
              查找ID为tmpBroccoli的li节点的前二个男人节点。并为查找到的兄弟节点扩展tmpExample样式。   

firebug查看jquery parent效果

$()中的是二个询问表达式,也正是用“div>p”那样二个查询表明式营造了四个jQuery对象,然后的“html()”意思是显得其html内容,也正是上边HTML代码段的[two]。再如:
$("<div><p>Hello</p></div>").appendTo("body");
$()中的是贰个字符串,用那样一段字串创设了jQuery对象,然后向<body/>中增加这一字串。

6、查找钦赐节点的前面全部的小伙子节点 prevAll()
     举例:$('li#tmpBroccoli').prevAll().addClass('tmpExample');
              查找ID为tmpBroccoli的li节点的先头全数的小朋友节点。并为查找到的小伙子节点扩张tmpExample样式。
               可以在prevAll()的括号中增加选拔器来搜寻钦点条件的小朋友节点。如:prevAll('li.tmpClass'),就是找出当

二、获取同级成分:

2、$()能够是$(element),即三个一定的DOM成分。如常用的DOM对象有document、location、form等。如那样一行代码:
$(document).find("div>p").html());
$()中的document是一个DOM成分,即在全文字笔迹核查索带<p>的<div>成分,并显示<p>中的内容。
3、$()能够是$(function),即三个函数,它是$(document).ready()的三个笔记格局。如周围的款型是这么的:
$(document).ready(function(){
alert("Hello world!");
});
可变形作:
$(function(){
alert("Hello world!");
});

前节点前面全部类为tmClass的汉子儿节点。

1、next([expr]):
得到钦赐成分的下八个同级成分(注意是下多少个同级成分哦)

对于选用HTML文书档案中的elements,jQuery有三种办法:
1)如$("div>ul a"),它的意思是div标签中的ul标签中的a标签
但是,$('div>ul')和$('div ul')是有分别的,

7、查找全部符合条件的上边节点 parents()
     举例:$('li#tmpCarrot').parents('div#tmpSelection').addClass('tmpExample');
              查找ID为tmpCarrot的li节点全体id为tmpSelection的div上级节点。并为查找到的节点扩大tmpExample样

复制代码 代码如下:

$('div>ul')是<div>的直接后代里找<ul>;
而$('div ul')是在<div>的享有后代里找<ul>。

式。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

2)用jQuery对象的多少个主意(如方法find()、each()等)
$("#orderedlist).find("li") 就像 $("#orderedlist li"). each()同样迭代了颇具的li,而表明式中的“#”表示HTML中的ID,如上例中的“#orderedlist”就象征“ID为orderedlist所在的竹签”。

8、查找上级节点 parent()
     举例:$('li#tmpCarrot').parent().addClass('tmpExample');
              查找ID为tmpCarrot的li节点的顶头上司节点。并为查找到的节点扩展tmpExample样式。

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

****************************************************************