Learning Notes

# jQuery选择器

# 引用jQuery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

使用BootCDN引用

bootcdn

# jQuery 的两种 API

  1. $.方法

    $.noConflict()
$.each()

  2. $(元素).方法

     $('ul').addClass()
 $('p').text('hi')

# jQuery 常见的选择器

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div class="mod-tab">
    <div class="header">
      <div class="tab ">1</div>
      <div class="tab active">2</div>
      <div class="tab">3</div>
      <div class="tab">4</div>
    </div>
    <div class="content">
      <div class="panel ">panel1</div>
      <div class="panel active">panel2</div>
      <div class="panel">panel3</div>
      <div class="panel">panel4</div>
    </div>
  </div>
</body>
</html>
  • .eq(index)

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

$('.mod-tab .header div').eq(1); // 获取结果集中的第二个jQuery对象

eq

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

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

$('.mod-tab .header .tab.active').next()
$('.mod-tab .header .tab.active').prev()

next

prev

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

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

$('.mod-tab .header .tab.active').nextAll()
$('.mod-tab .header .tab.active').prevAll()

nextAll

  • .siblings([selectors])

获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器

$('.mod-tab .header .tab.active').siblings()

siblings

  • .parent([selector])

取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器

$('.panel').parent()

parent

  • .parents([selector])

获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数

$('.panel').parents()

parents

  • .children([selector])

获得匹配元素集合中每个元素的子元素，选择器选择性筛选

$('.mod-tab .header').children()

children

  • .find([selector])

查找符合选择器的后代元素

$('.mod-tab .header').find('.tab.active')

find

  • .first()

获取当前结果集中的第一个对象

$('.mod-tab .header div').first()

first

  • .last()

获取当前结果集的最后一个对象



$('.mod-tab .header div').last()

last

  • .filter(selector), .filter(function(index)) 筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数
$('.mod-tab .header div').filter(':even')

even

  • .is(selector), is(function(index)), is(dom/jqObj)

判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true

    if ( $target.is("li") ) {
      $target.css("background-color", "red");
    }
  • .has(selector), .has(dom)

筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

$('li').has('span')

← jQuery常用方法 →