jq ‘’操作‘’伪元素

1. 伪元素非 dom 元素，jq无法操作，但可以间接影响。

2. 操作方式

2.1 修改类

<!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>Document</title>
  <style type="text/css">
    .techbrood:before {
      content: 'no';
      color: red;
    }

    .techbrood.change:before {
      content: 'yes';
    }
  </style>
</head>

<body>

  <div class="techbrood" id="td_pseudo">techbrood introduction</div>

  <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  <script>
    // $('#td_pseudo').addClass("change");
  </script>


</body>

</html>

 

2.2 改变增值属性

<!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>Document</title>
  <style type="text/css">
    p {
      color: deepskyblue;
    }

    p:before {
      content: attr(data-beforeContent);
      color: darkred;
    }
  </style>
</head>

<body>

  <p data-beforeContent="测试">1111</p>
  <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  <script>
    
    $(function () {
      var times = 0;
      $('p').on('click', function () {
        switch (times) {
          case 0:
            $(this).attr('data-beforeContent', '你说啥都是对的');
            times++;
            break;
          case 1:
            $(this).attr('data-beforeContent', '你这么叼咋不上天呢');
            times++;
            break;
          case 2:
            $(this).attr('data-beforeContent', '那就上天吧');
            times++;
            break;
          default:
            times = 0;
            $(this).attr('data-beforeContent', '你说啥都是对的');
            times++;
            break;
        }
      });
    });

  </script>


</body>

</html>

 

posted @ 2019-02-28 17:19  justSmile2  阅读(2434)  评论(0)  编辑  收藏  举报
喵