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. show processlist命令与kill 线程

    show [full] processlist show processlist显示正在运行的线程.如果有process权限,则可以查看所有正在运行的线程.否则,只能看到自己的线程.如果不使用full ...

  2. Docker学习笔记之运行和管理容器

    0x00 概述 容器是基于容器技术所建立和运行的轻量级应用运行环境,它是 Docker 封装和管理应用程序或微服务的“集装箱”.在 Docker 中,容器算是最核心的部分了,掌握容器的操作也是 Doc ...

  3. 用Java实现MVPtree——MVPtree点集内去重以及衍生出来的多维向量Hash问题

    上次完成了MVPtree之后,客户又提出了MVPtree点集元素重复的问题,希望我将元素去重. 集合去重哪家强?java.util找HashSet!如果不计较元素顺序,放进去基本就没有重复元素了. 只 ...

  4. 模拟window系统的“回收站”

    若要模拟window系统的“回收站”功能,具体的要求如下: 对于列表中的图片,可以通过拖动或单击“删除”的链接,以动画的方式移至“回收站”. 对于“回收站的图片”,可以通过拖动和单击“还原”的链接,以 ...

  5. Getting started with Kaggle -- Kaggle Competitions

    1: The Competition We'll be learning how to generate a submission for a Kaggle competition. Kaggle i ...

  6. Oracle错误——ORA-01691: Lob 段SFZXP.SYS_LOB0000030381C00004$$无法通过8192（在表空间USERS中）扩展

    问题 Oracle报错:ORA-01691: Lob 段SFZXP.SYS_LOB0000030381C00004$$无法通过8192(在表空间USERS中)扩展 问题原因 Oracle数据表空间不足 ...

  7. linux 子shell subshell和函数

    关于子shell, subshell 参考:http://blog.csdn.net/sosodream/article/details/5683515 系统引导时的进程为 "原始进程&qu ...

  8. Newcoder 华华给月月出题（线筛）题解

    题目描述: 华华刚刚帮月月完成了作业.为了展示自己的学习水平之高超,华华还给月月出了一道类似的题: Ans=⊕Ni=1(iNmod(109+7))Ans=⊕i=1N(iNmod(109+7)) ⊕⊕符 ...

  9. OpenWRT路由器使用ipv6拨号上网教程

    文章来源于群友,如有侵权,请联系我(aha971030@gmail.com)删除 原理介绍分析: 湖北E信地区可以使用ipv6拨号,好处是网络是上下对等不限速网络,也就是说,你的端口上限是多少,网上就 ...

  10. hihoCoder week227 Longest Subsequence

    题目链接 https://hihocoder.com/contest/hiho227/problem/1 题目详解 https://hihocoder.com/discuss/question/558 ...