jquery遍历

1,addSelf()

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
  p, div { margin:5px; padding:5px; }
  .border { border: 2px solid red; }
  .background { background:yellow; }
</style>
</head>
<body>
  <div>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>
<script>
    $("div").find("p").andSelf().addClass("border");//找到div下的所有p标签,将p标签和div标签合并,使addClass的样式也可以应用于div
    $("div").find("p").addClass("background");//找到div下的所有p标签,将p标签的样式改为addClass的样式
</script>
</body>
</html>

注:

    <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().andSelf().css("background-color", "red");//.nextAll()获得前面所指定元素的下面的所有元素,将下面的所有元素和前面的元素合并


2,each()
$("button").click(function(){
$("li").each(function(){//每一个li标签都要执行这个功能
alert($(this).text())
});
});

3,end()

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
  <ul class="first">
     <li class="foo">list item 1</li>
     <li>list item 2</li>
     <li class="bar">list item 3</li>
  </ul>
  <ul class="second">
     <li class="foo">list item 1</li>
     <li>list item 2</li>
     <li class="bar">list item 3</li>
  </ul>
  <script>
$('ul.first').find('.foo').css('background-color', 'red')
    .end().find('.bar').css('background-color', 'green');//现查找ul.first下的.foo元素,将这个样式改为背景色是红色,接着个结束这个.foo元素,回到ul.first元素,继续查找.bar的元素,修改.bar的背景色为绿色
</script>
</body>
</html>

 4,eq()

$("body").find("div").eq(2).addClass("blue");//匹配body下面的div的index,这里寻找body下面的第二个div标签,再修改样式

5,filter() 方法
<!DOCTYPE html>
<html>
<head>
  <style>
  div { 60px; height:60px;
        margin:5px; float:left;
        border:2px white solid; }
  </style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
  <div></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div></div>
<script>
  $("div").css("background", "#c8ebcc")
    .filter(".middle")//过滤出所有.middle的元素
    .css("border-color", "red");
</script>
</body>
</html>

注:
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>
 
 $('li').filter(':even').css('background-color', 'red');//默认设置的是奇数行的样式


$('li').filter(':odd').css('background-color', 'red');//默认设置的是偶数行的样式

6,first()
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
$('li').first().css('background-color', 'red');//匹配第一个li下面的元素

7,has()
<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
$('li').has('ul').css('background-color', 'red');//将含有ul标签的li的样式改一下
 






原文地址:https://www.cnblogs.com/xiaoyunyun/p/4907278.html