jQ:has()、is()

最新推荐文章于 2023-07-31 16:59:38 发布

&XYZ&

最新推荐文章于 2023-07-31 16:59:38 发布

阅读量508

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/103974882

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

has():

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知新</title>
  <style></style>
</head>

<body>
  <ul>
    <li>1
      <ul>
        <li>11</li>
        <li>12</li>
        <li>13</li>
      </ul>
    </li>
    <li>2</li>
    <li>3
      <ul>
        <li>31</li>
        <li>32</li>
        <li>33</li>
      </ul>
    </li>
  </ul>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- <script src="./myjQuery.js"></script> -->
<script>
  /*
    现在你想选择第一层ul>li下面带有ul的内容(包含li)
  */
  $("ul li")
    .has("ul")
    .css({ backgroundColor: "#ff0000" })
</script>

</html>

is():

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知新</title>
  <style></style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li class="test">7
      <span class="test">span7-1</span>
      <span class="test">span7-2</span>
      <strong class="test">strong7-1</strong>
    </li>
  </ul>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- <script src="./myjQuery.js"></script> -->
<script>
  /*
    判断当前匹配的ul>.test元素集合中的元素是否含有span标签，
    返回值为Boolean值
  */
  const flag = $("ul")
    .find(".test")
    .is("span")

  console.log("flag:" + flag)

</script>

</html>

现在你想点击ul弹出ul里面的文本内容，

点击li弹出li里面对应的内容；

这个时候就可以把is方法使用上了；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知新</title>
  <style></style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li class="test">7</li>
  </ul>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- <script src="./myjQuery.js"></script> -->
<script>
  /*
    现在你想点击ul弹出ul里面的文本内容，
    点击li弹出li里面对应的内容；
    这个时候就可以把is方法使用上了；
  */


  $("ul")
    .click(function (e) {
      if ($(e.target).is("li")) {//e.target代表目标原对象
        alert($(e.target).text())
      } else {
        alert($(this).text())
      }
    })

  //添加背景颜色来更好的点击，来体现上面的效果。
  $("ul")
    .css({ backgroundColor: "#ff0000" })
    .find("li")
    .css({ backgroundColor: "#0000ff" })

</script>

</html>

&XYZ&

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQ:has()、is()

has():<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
复制链接

扫一扫