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. Golang接口简单了解

    在Golang中,一个类只需要实现了接口要求的所有函数,我们就说这个类实现了该接口. package main import "fmt" type Animal interface ...

  2. java jdbc->mycat->oracle SqlException异常中文信息乱码解决

    mycat字符集gbk oracle字符集gbk 原jdbc连接串: base.jdbc.url=jdbc:mysql://127.0.0.1:3306/XXX?useUnicode=true& ...

  3. Ubuntu 部署 nginx

    Ubuntu 部署 nginx  apt-get install nginx

  4. python 之 函数的参数

    函数的参数好几种类型:包括位置参数.默认参数.可变参数.关键字参数.命名关键字参数. 廖大神python学习笔记,大神网站:百度搜索“廖雪峰的官网” 1.位置参数:调用函数时根据函数定义的参数位置来传 ...

  5. 【4opencv】CLR基本原理和如何运用于GOCW

    GOCW的重点和难点就在于Csharp调用OpenCV,其中的桥梁就是CLR,当然我们也有其他方法,但是CLR是一个比较新的.比较可靠的.关键是能用的桥梁.这里关于CLR的基本原理知识.如何用于GOC ...

  6. 51Nod 1667 概率好题 - 容斥原理

    题目传送门 无障碍通道 有障碍通道 题目大意 若$L_{i}\leqslant x_{i} \leqslant R_{i}$,求$\sum x_{i} = 0$以及$\sum x_{i} < 0 ...

  7. 【python001-IDLE】

    一.python的下载地址:http://www.python.org 二. python的注释:# 三.>>> print("i love python")i ...

  8. Install Virtualbox on ubuntu

    1.Use the command: sudo apt-get install virtualbox

  9. 从Git上导入Ｍaven 项目到Eclipse

    Note: 经验之谈,操作过程中有不懂的地方可以留言问. Step: Open the Eclipse: --1.File>>Import>>Git:Project from ...

  10. TFS 报错解决方案:tf400324

    同事的解决方案没报这个问题将他的C:\Windows\System32\drivers\etc\hosts文件覆盖自己的文件,主要备份自己的文件不行了替换掉