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面向对象_继承

    package main import "fmt" type Person struct { name string //名字 sex byte //性别 age int //年龄 ...

  2. bzoj 2091 The Minima Game - 动态规划 - 博弈论

    题目传送门 需要验证权限的传送门 题目大意 Alice和Bob轮流取$n$个正整数,Alice先进行操作.每次每人可以取任意多的数,得分是这一次取的所有数中的最小值.Alice和Bob都足够聪明,他们 ...

  3. mysqladmin 使用

    1.第一次没有密码 mysqladmin -u root -p password aook 2.已经有密码的情况下 mysqladmin -u root -paook password aook**0 ...

  4. PT，PX，DPI

    [iOS]查找数组NSArray中是否包含指定的元素 http://blog.csdn.net/zyq527758142/article/details/51278172 Dpi(每平方英寸像素数目) ...

  5. BottomNavigationBar 底部导航控件

    BottomNavigationBar 底部导航控件 属性 说明BottomNavigationBarItem 多个 item,iconSize icon大小currentIndex 默认选中第几个o ...

  6. JXOI2018守卫 区间DP

    链接 https://loj.ac/problem/2545 思路 f[i][j]表示i到j区间的最小监视人数 可以预处理出来g[i][j],表示i能否监视到j (其实预处理的关系不大,完全可以直接判 ...

  7. CodeTyphon跨平台交叉编译的配置

    CodeTyphon和Lazarus的关系相当于就是ubuntu和linux的关系 不过CodeTyphon提供了很多一键配置即可使用的交叉编译配置,而Lazarus就比较麻烦了,我也没用Lazaru ...

  8. LuoguP3948 数据结构

    题目地址 题目链接 题解 以为这题虽然是数据随机也不至于那么水吧... 于是秉着先打部分分和暴力的原则先写了暴力和min,max为-inf和inf的特殊点,对于暴力搞了个小优化,延后的操作直接前缀和答 ...

  9. promise对象的使用

    ES6中的promise的出现给我们很好的解决了回调地狱的问题,在使用ES5的时候,在多层嵌套回调时,写完的代码层次过多,很难进行维护和二次开发,ES6认识到了这点问题, 现在promise的使用,完 ...

  10. 函数嵌套函数传递this值

    <button onclick="demo()(this)">test</button> function demo(){ return function ...