眼前的口舌

  DOM可以用其它HTML描绘成一个出于多层节点构成的布局。节点内的涉及结合了层次,而拥有页面标记则显现也一个以特定节点吧根节点的树形结构。下图表示了DOM间的节点关系,而jQuery也设有类似的道来叙述节点关系

图片 1

后人元素

【children()】

  jQuery是一个汇对象,如果想快搜索合集里面的率先级子元素,此时足就此children()方法

  children()方法允许通过当DOM树被针对这些元素的直子元素进行查找,并且组织一个初的匹配元素的jQuery对象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <b>2</b>
    <i>3</i>
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('div').children().css('border','1px solid red');    
})
</script>

children([selector])

  children()方法可领一个用以匹配元素的精选器字符串作为参数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <b>2</b>
    <i>3</i>
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('div').children('i').css('border','1px solid red');    
})
</script>

  [注意]children()方法才会检索来第一级子元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">
    <div>
        <i>1</i>
        <b>2</b>
        <i>3</i>
    </div>    
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('#box').children().css('border','1px solid red');    
})
</script>

【find()】

  find()方法通过一个选择器,jQuery对象,或因素过滤,得到时相当的素集合中每个元素的后生,匹配的要素用组织一个初的jQuery对象

  find()和children()方法是形似的,只是children()方法查找子元素,而find()方法寻找后元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">
    <div>
        <i>1</i>
        <b>2</b>
        <div>3</div>
    </div>    
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('#box').find('div').css('border','1px solid red');    
})
</script>

  [注意]find()方法要发参数才有效。如果想如果寻找所有后代元素,需要传递参数为’*’

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">
    <div>
        <i>1</i>
        <b>2</b>
        <i>3</i>
    </div>    
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('#box').find('*').css('border','1px solid red');    
})
</script>

【contents()】

  contents()方法赢得匹配元素集合中每个元素的子元素,包括文字和注释节点,这个主意无收受外参数

  contents()和children()方法类似,只不过前者包括文件节点和jQuery对象被来的HTML元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  <br /><br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat.
</div>
<script>

  console.log($(‘div’).children())//[br, br,
prevObject: init[1], context: document]
  console.log($(‘div’).contents())//[text, br, br,
text, prevObject: init[1], context: document]

</script>

【contains()】

  contains(container,
contained)是一个工具方法,用来检查一个DOM元素是否是任何一个DOM元素的子孙

  如果第二独参数所提供的DOM元素是第一个参数DOM元素的后生,那么$.contains()方法返回true,无论是直接的子元素或者是后元素。否则,返回false

  [注意]该方法才支持元素节点,如果第二只参数是一个文件或注释节点,$.contains()将回 false

console.log($.contains( document.documentElement, document.body ));//true
console.log($.contains( document.body, document.documentElement ));//false

 

祖先元素

【parent()】

  parent()方法会以DOM树被查找到这些因素的父级元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <b>2</b>
    <i>3</i>
</div>    
<p>
    <i>1</i>
    <b>2</b>
    <i>3</i>    
</p>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('i').parent().css('border','1px solid red');    
})
</script>

parent([selector])

  parent()方法可领一个用以匹配元素的选择器表达式字符串作为参数进行筛

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <b>2</b>
    <i>3</i>
</div>    
<p>
    <i>1</i>
    <b>2</b>
    <i>3</i>    
</p>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('i').parent('div').css('border','1px solid red');    
})
</script>

【parents()】

  与parent()方法不同,parents()方法赢得之是祖先元素,而parent()方法取得的是父级元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <i><b>2</b></i>
    <i>3</i>
</div>    
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('b').parents().css('border','1px solid red');    
})
</script>

parents([selector])

  parents()方法可以接受一个用来匹配元素的选择器表达式字符串作为参数进行筛

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <i><b>2</b></i>
    <i>3</i>
</div>    
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('b').parents('div').css('border','1px solid red');    
})
</script>

【parentsUntil()】

  parent()方法匹配父元素,parents()方法匹配祖先元素,而parentsUntil()方法则以parents()方法的底子及,确定匹配到哪个祖先元素时已匹配

parentsUntil([selector][,filter])

  parentsUntil()方法接受两只参数。第一只参数是一个挑器字符串、DOM节点还是jQuery对象,用于确定及哪个祖先元素时停匹配,不包括参数中之要素。第二只参数是一个罗字符串,用于匹配元素的挑选器字符串

  当parentsUntil()方法没有参数时,和parents()方法作用一样

【1】没有参数时

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <i><b>2</b></i>
    <i>3</i>
</div>    
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('b').parentsUntil().css('border','1px solid red');    
})
</script>

【2】存在一个参数时

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <i><b>2</b></i>
    <i>3</i>
</div>    
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('b').parentsUntil('div').css('border','1px solid red');    
})
</script>

【3】存在个别只参数时

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <i><b>2</b></i>
    <i>3</i>
</div>    
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('b').parentsUntil('body','div').css('border','1px solid red');    
})
</script>

【closest(selector)】

  closest()方法从自身因素开始(包括自己因素),在DOM树被升华遍历,直到找到了同提供的挑选器相匹配的元素,返回包含零个或一个素的jQuery对象

  closest()方法的参数是一个用以匹配元素的取舍器字符串、jQuery对象要DOM元素。若匹配,则回该因素的jQuery对象,否则,返回包含0只因素的jQuery对象 

  [注意]closest()方法要承受参数,否则无效

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <i><b>2</b></i>
    <i>3</i>
</div>    
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="btn3">按钮三</button>
<script>
$('#btn1').click(function(){
    $('b').closest('p').css('border','1px solid red');
})
$('#btn2').click(function(){
    $('b').closest('b').css('border','1px solid red');
})
$('#btn3').click(function(){
    $('b').closest('body').css('border','1px solid red');
})
</script>

手足元素

【siblings([selector])】

  siblings()方法可以获匹配元素集合中每个元素的哥们儿元素  

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<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>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('.third-item').siblings().css('border','1px solid red');    
})
</script>

  siblings()方法可以接受一个用于匹配元素的选取器字符串作为参数来罗元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<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>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('.third-item').siblings(':contains("1")').css('border','1px solid red');    
})
</script>

【next([selector])】

  next()方法返回匹配的素集合中各个一个因素紧邻的背后兄弟元素的要素集合

  next()方法接受一个选器字符串作为参数,只有从的哥们儿元素满足选择器时,才会返回此因素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <b><i>2</i></b>
    <i>3</i>
</div>    
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="btn3">按钮三</button>
<script>
$('#btn1').click(function(){
    $('b').next().css('border','1px solid red');    
})
$('#btn2').click(function(){
    $('i:contains("2")').next().css('border','1px solid red');    
})
$('#btn3').click(function(){
    $('b').next('b').css('border','1px solid red');    
})
</script>

【nextAll()】

  next()方法表示目前因素的继一个兄弟元素,而nextAll()方法表示即因素后面的装有兄弟元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<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>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('.third-item').nextAll().css('border','1px solid red');    
})
</script>

  nextAll()方法好承受一个摘取器字符串用于筛选元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<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>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('.third-item').nextAll(':contains("4")').css('border','1px solid red');    
})
</script>

【nextUntil()】

  nextUntil()方法接受两单参数。第一单参数是一个摘器字符串、DOM节点还是jQuery对象,用于确定及谁兄弟元素时停下匹配,不包参数中的因素。第二单参数是一个筛选字符串,用于匹配元素的选择器表达式字符串

  当nextUntil()方法无参数时,和nextAll()方法作用一样

【1】没有参数时

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<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>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('.third-item').nextUntil().css('border','1px solid red');    
})
</script>

【2】有一个参数时

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<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>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('.third-item').nextUntil('li:last').css('border','1px solid red');    
})
</script>

【3】有少数个参数时

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<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>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('.third-item').nextUntil('li:last',':contains("4")').css('border','1px solid red');    
})
</script>

【prev([selector])】

  prev()方法返回匹配的要素集合中列一个元素紧邻的眼前兄弟元素的素集合

  prev()方法接受一个选择器字符串作为参数,只有前紧跟着的兄弟元素满足选择器时,才见面回来此因素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <b><i>2</i></b>
    <i>3</i>
</div>    
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="btn3">按钮三</button>
<script>
$('#btn1').click(function(){
    $('b').prev().css('border','1px solid red');    
})
$('#btn2').click(function(){
    $('i:contains("2")').prev().css('border','1px solid red');    
})
$('#btn3').click(function(){
    $('b').prev('b').css('border','1px solid red');    
})
</script>

【prevAll()】

  prev()方法表示目前因素的眼前一个哥们元素,而prevAll()方法表示即因素前面的有兄弟元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<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>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('.third-item').prevAll().css('border','1px solid red');    
})
</script>

  prevAll()方法好承受一个增选器字符串用于筛选元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<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>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('.third-item').prevAll(':contains("2")').css('border','1px solid red');    
})
</script>

【prevUntil()】

  prevUntil()方法接受两只参数。第一独参数是一个抉择器字符串、DOM节点还是jQuery对象,用于确定及谁兄弟元素时停匹配,不包参数中之要素。第二独参数是一个罗字符串,用于匹配元素的选择器表达式字符串

  当prevUntil()方法无参数时,和prevAll()方法作用一样

【1】没有参数时

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<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>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('.third-item').prevUntil().css('border','1px solid red');    
})
</script>

【2】有一个参数时

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<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>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('.third-item').prevUntil('li:first').css('border','1px solid red');    
})
</script>

【3】有星星点点只参数时

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<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>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('.third-item').prevUntil('li:first',':contains("2")').css('border','1px solid red');    
})
</script>

相关文章

网站地图xml地图