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. [重要] Django 多条件多表查询实例问题

    当时想做一个多条件查询,但是对于要查询的信息,是分布在不同的表里,这就涉及到了多表查询问题. DjangoBook里提到了一些查询的方式,但是不够全面,就去百度搜了下. 当去网上百度搜多表查询,或多条 ...

  2. xtrabackup 对pxc节点进行备份恢复

    xtrabackup 对pxc节点进行备份恢复 全量备份一个节点的数据,当节点挂掉时,使用备份恢复到最近状态,再启动节点加入集群. 备份 xtrabackup 命令小解释: --defaults-fi ...

  3. Spring Boot(十八)：使用Spring Boot集成FastDFS

    Spring Boot(十八):使用Spring Boot集成FastDFS 环境:Spring Boot最新版本1.5.9.jdk使用1.8.tomcat8.0 功能:使用Spring Boot将文 ...

  4. 创建docker镜像的私有仓库

    CentOS Linux release 7.2.1511 Docker version 17.03.1-ce 安装registry镜像 同时安装一个比较小的镜像alpine待会作测试用: # doc ...

  5. 11.2.0.4 sql*loader/oci direct load导致kpodplck wait before retrying ORA-54

    昨天晚上9点多,有个环境开发说特别慢,早上上去看下了,如下: 导致性能的是一个统计的sql执行计划走错了,主要不是因为kpodplck wait before retrying ORA-54,不过这个 ...

  6. Vue 中的动画特效

    Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. nginx的stream反向代理mysql配置

    这里主要记录一下nginx的负载代理stream模块,首先编译的时候需要加上--with-stream, 就像这样 然后nginx.conf里面的配置是在http选项上面加上 #Mysql Rever ...

  8. centos6.5安装部署zabbix监控服务端和客户端

    部署zabbix服务端需要LNMP环境(nginx,mysql,php),其它数据库也可以,我这里使用mysql,关于LNMP环境部署,可以参考我的另一遍文章:http://www.cnblogs.c ...

  9. Delphi程序的主题（Theme）设置

    本文参考了 http://superlevin.ifengyuan.tw/delphi-change-vcl-style/ 在项目的工程文件中勾选主题,设置缺省主题为Windows 部分代码如下: u ...

  10. 给sublime设置格式化代码的快捷键

    sublime中自建的有格式化按钮: Edit  ->  Line  ->  Reindent 只是sublime并没有给他赋予快捷键,所以只需加上快捷键即可 Preference  -& ...