jQuery 修改CSS偽元素屬性的方法

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/

在線咨詢

上一篇：所有SEO牛人必修課 html代碼做好優化不會被時代所淘汰！
下一篇：一篇文章帶你了解css z-index(重疊順序)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

jQuery 修改CSS偽元素屬性的方法

.JQuery

二.JQ JS 相互轉換

三.JQ 操作 HTML 屬性

四.JQ 操作 CSS 樣式

五. JQ 事件

六. JQ 動畫

text()方法

示例：

示例：

html()方法

示例：

val()方法

示例：

attr()方法

示例：

示例：

您的項目需求