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>

jq ‘’操作‘’伪元素的更多相关文章

  1. 使用JS控制伪元素的几种方法

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...

  2. 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式

    最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...

  3. js,mui,jq 操作基本的DOM

    一.HTML <ul> <li>1111111</li> <li>22222222</li> </ul> 二.CSS li{ h ...

  4. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  5. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  6. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

  7. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  8. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  9. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

随机推荐

  1. Solr在Linux中的安装

    在Linux下进行安装: 我已经将压缩包放在了虚拟机下面了,然后开始进行解压缩. tar -zxvf solr-4.10.3.tar 解压完会多一个文件夹.在bin目录下会有这样的一个目录, 其中的这 ...

  2. Pytorch-学习记录 卷积操作 cnn output_channel, etc.

    参考资料: pytorch中文文档 http://pytorch-cn.readthedocs.io/zh/latest/

  3. asyncio queue

    from asyncio import Queue,sleep import asyncio from threading import Thread import time qu=Queue() # ...

  4. MySQL半同步安装以及参数

    MySQL半同步安装以及参数 基于MySQL5.5 官档地址: Semisynchronous Replication Administrative Interface https://dev.mys ...

  5. fjwc2019 D1T2 原样输出（后缀自动机+dp）

    #179. 「2019冬令营提高组」原样输出 暴力对每个串建后缀自动机,然后暴力枚举每个自动机的子串.可以拿到部分分. 然鹅我们可以把每个后缀自动机连起来. 我们知道,后缀自动机是用最少的点(空间)表 ...

  6. 比beanutil更加灵活的dto转换工具dozer

    准确的说,是因为pojo无法一招走天下或者说内外部隔离的原因,所以有些时候,不得不在两个bean之间做copy或者转换映射.对于直接性的属性拷贝beanutil以及能够满足大部分要求,但是如果遇到字段 ...

  7. 2、pandas的value_counts()和describe()

    一.value_counts pandas 的value_counts()函数可以对Series里面的每个值进行计数并且排序. value_counts是计数,统计所有非零元素的个数,默认以降序的方式 ...

  8. 问题：oracle 12c rac数据库服务器的home目录丢失问题解决2018-06-25 18:30

    问题原因:是由于运维粗心,在缩容/home(此目录下挂载了逻辑卷lv_home)时没有先缩小文件系统(resize2fs)也没有备份,导致home数据损坏,重启时系统无法正常启动 解决方案:跳过此ho ...

  9. IIC学习

    1 概述: IIC是用两条双向的线,一条SDA(serial data line),一条SCL(serial clock). SCL:上升沿将数据输入到每个EEPROM器件中,下降沿驱动EEPROM器 ...

  10. topcoder srm 693 div1 -3

    1.给出一个$n$个顶点的无向带权图.其中顶点$i,i+1$之间存在边,$i,i+2$之间存在边.而且仅有这些边.现在删掉其中的一些边,剩下的边满足图仍然是2联通的情况下使得权值和最小? 思路:其实就 ...