Query修改CSS伪元素属性的方法

CSS伪元素(pseudo elements)不是DOM元素, 因此你无法直接选择到它们。

假设有如下HTML代码：

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

和CSS代码：

.techbrood:before {
  width: 0;
}

现在你想在某个元素的click事件中动态的把techbrood:before的width属性设置为100%,

有两个方法, 一个是添加新的样式：

$('head').append("<style>.techbrood::before{ width:100% }</style>");

(注意该方法将影响所有的class为techbrood的元素)

另外一个方法是为该元素添加新类, 并通过设置新类的属性来达到改变伪元素属性的效果：

.techbrood.change:before{
  width: 100%;
}

jQuery代码：

$('#td_pseudo').addClass("change");

.JQuery

JQuery 是将 JS 的一些代码块进行封装，方便使用。

1.JQ的引入

（1）link 导入

先进入 https://www.bootcdn.cn/ 网站进行查找，找到后复制到一个 js 中，进行引用。

（2）直接复制标签

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

二.JQ JS 相互转换

1. JQ 获取元素

$('.p1').eq(1).text('今天天气真好')
    $('.p1').html('<h>天气真热</h>')

2.JS 转 JQ

$(ap1).text('天好冷')

3. JQ 转 JS

	var ap3 = $('.p1')
    ap3[0].innerText = '金地是'
    ap3.get(1).innerText = '多少金币' //get() 传下标

4. JQ JS 都可用

$('ul li').each(function (){
        console.log($(this).text());
        // console.log(this.innerText);
        console.log($(this).index()); //jq 获取下标

    })

三.JQ 操作 HTML 属性

<button>添加</button>
<button>删除</button>

1. 添加 class

//添加class
    $("button").eq(0).click(function (){
        $("div").addClass("div1")
    })

2. 删除 class

（1）removeClass

//删除class
    $("button").eq(1).click(function (){
        $("div").removeClass("div1")
    })

（2）removeAttr

//删除属性和属性值
    $("button").eq(1).click(function (){
$("div").removeAttr("class")

3. 修改 class

（1）toggleclass

//无则增 有则增
 $("button").eq(0).click(function (){
 	$("div").toggleClass("div1")

（2）attr

//无则增 有则改
$("button").eq(0).click(function (){
        $("div").attr("class","div1")
        $("div").attr("class","div2")
    })

4.获取 value

$("input").eq(0).val('666');

四.JQ 操作 CSS 样式

1. 获取盒子宽高

（1）获取宽

console.log($("div").width());

（2）获取内边框加宽

$("div").innerWidth()

（3）获取内边框，边框外边距和宽的宽度

$("div").outerWidth()

2. JQ 修改 CSS

// jq修改css
   $("div").css("background","blue")
   $("div").css({
       "background":"pink",
       "width":"150px"
   })

3.定位元素（父级元素一定要有定位）

$(".div2").position()

4.定位浏览器窗口

$(".div2").offset()

五. JQ 事件

1.单击事件

$("div").click(function (){
        console.log(1);
    })

2.双击事件

$("div").dblclick(function (){
        console.log(2);
    })

3.划入事件

$("div").mouseenter(function (){
        console.log(3);
    })

4.划出事件

$("div").mouseout(function (){
        console.log(4);
    })

5.划入划出事件

$("div").hover(
        function (){
            console.log(3);
        },function (){
            console.log(5);
        }
    )

6.绑定事件

$("button").click(function (){
        $("p").on("click",function (){
            $("p").css('background','red')
        })
    })

7.绑定多个事件

$("p").on({
         "mouseenter":function (){
             $(this).css('background','yellow')
         },
         "mouseout":function (){
             $(this).css('background','blue')
         }
     })

8.清除事件

$("button").click(function (){
        $("p").off()
    })

六. JQ 动画

1. 隐藏

$("button").eq(0).click(function (){
        // $("div").hide(1000)
        $("div").slideUp(1000)

    })

2.显示

$("button").eq(1).click(function (){
        $("div").show(1000)
        // $("div").slideDown(1000)
    })

3.取反

$("button").eq(2).click(function (){
        $("div").slideToggle(1000)
        // $("div").slideDown(1000)
    })

4.淡出事件

$("button").eq(3).click(function (){
        $("div").fadeOut(1000)
    })

5.淡入事件

$("button").eq(4).click(function (){
        $("div").fadeIn(1000)
    })

6.淡入淡出取反事件

$("button").eq(5).click(function (){
        $("div").fadeToggle(1000)
    })

7.动画效果

$("button").eq(6).click(function (){
        $("div").delay(100).animate({
            "width":"130px",
            "height":"130px",
            "top":"50px",
            "left":"20px",
        })
    })

8.停止

$("button").eq(7).click(function (){
        $("div").stop(1000)
    })

附（今日份学习）：

Query 中包含更改和操作 HTML 元素和属性的强大方法。我们可以通过这些方法来获取 HTML 元素中的文本内容、元素内容（例如HTML标签）、属性值等。

text()方法

text() 方法可以用于设置或获取所选元素的文本内容。

示例：

例如我们获取下列 <p> 标签中的文本内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').text();
    alert(content);
  });
</script>
</head>
<body>
  <p class="hello">你好，欢迎来到侠课岛!</p>
  <div>
    <p>希望侠课岛中有适合你的编程课程。</p>
  </div>
</body>
</html>

在浏览器中演示效果：

除了获取文本内容，text() 还可以用于设置文本内容，我们可以来看一下。

示例：

例如通过 text() 将 .content 的文本内容设置为 hello, xkd!：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('.content').text("hello, xkd!");
    });
  });
</script>
</head>
<body>
  <p class="content">你好，欢迎来到侠课岛!</p>
  <p><button>点击按钮</button></p>
</body>
</html>

在浏览器中演示效果：

html()方法

html() 方法用于设置或返回所选元素的内容（包括HTML标记）。

示例：

通过 html() 方法获取 p 元素的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').html();
    alert(content);
  });
</script>
</head>
<body>
  <p class="hello">你好，欢迎来到侠课岛!</p>
</body>
</html>

在浏览器中演示效果：

除此之外，我们还可以使用 html() 方法来设置指定元素的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('.hello').html('你好，欢迎来到侠课岛!');
  });
</script>
</head>
<body>
  <p>向下面的p标签中添加文本内容：</p>
  <p class="hello"></p>
</body>
</html>

在浏览器中演示效果：

val()方法

val() 用于设置或返回表单字段的值。该方法大多时候用于 input 元素。

示例：

例如获取输入框 input 中的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      alert($('input').val());
    });
  });
</script>
</head>
<body>
  文本输入框：<input type="text" name="name" value="summer" />
  <p>
    <button>获取输入框的值</button>
  </p>
</body>
</html>

在浏览器中演示效果：

如果要使用 val() 方法设置 value 的值，我们可以像下面这样做：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('input').val('summer')
    });
  });
</script>
</head>
<body>
  文本输入框：<input type="text" name="name" value="" />
  <p>
    <button>获取输入框的值</button>
  </p>
</body>
</html>

在浏览器中演示效果：

attr()方法

attr() 方法用于设置或返回被选元素的属性值。

示例：

例如下面这个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    alert($('div').attr("class"));
  });
</script>
</head>
<body>
  <div class="xkd">获取class属性的值</div>
</body>
</html>

在浏览器中演示效果：

attr() 方法除了获取元素的属性值，还可以设置元素的属性值，我们来看一下。

示例：

将下面 <div> 标签中的 class 属性的值设置为 summer：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('div').attr("class", "summer")
  });
</script>
</head>
<body>
  <div>设置class属性的值</div>
</body>
</html>

在浏览器中演示效果：

链接：https://www.9xkd.com/