jquery怎麼為元素增加類別名

青灯夜游
發布: 2022-09-09 19:24:27
原創
5756 人瀏覽過

兩種增加方法:1、使用addClass()將被選元素新增一個或多個類別名,語法“$(selector).addClass("類別名稱列表")”,如需新增多個個類別名,需要用空格分隔類別名。 2.使用toggleClass()為被選元素增加類別名,語法「$(selector).toggleClass("類別名稱",true);」。

jquery怎麼為元素增加類別名

本教學操作環境:windows7系統、jquery3.6.1版本、Dell G3電腦。

jquery為元素增加類別名稱的兩種方法

  • #使用addClass()增加類別名稱

  • 使用toggleClass()增加類別名稱

#1、使用addClass()增加類別名稱

addClass () 方法將被選元素新增一個或多個類別。

此方法不會移除已存在的 class 屬性,只新增一個或多個 class 屬性。

提示:如需新增多個類,請使用空格分隔類別名稱。

$(selector).addClass(class)
登入後複製
##必要。規定一個或多個 class 名稱。
參數描述
class
範例:為p元素增加類別名稱「p2」

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p").addClass("p2");
				});
			});
		</script>
		<style>
			h1{
				color: coral;
			}
			.p1{
				background-color: yellow;
			}
			.p2{
				font-size: 120%;
				color: red;
			}
	</head>

	<body>
		
		</style>
		<h1>这是一个大标题</h1>
		<p class="p1">这是一个段落。</p>
		<p class="p1">这是另一个段落。</p>
		<button>给p元素增加类名p2</button>
	</body>

</html>
登入後複製

jquery怎麼為元素增加類別名

2、使用toggleClass( )增加類別名稱

toggleClass() 方法對新增和移除被選元素的一個或多個類別進行切換。

該方法檢查每個元素中指定的類別。如果不存在則新增類,如果已設定則刪除之。這就是所謂的切換效果。

$(selector).toggleClass(class,switch)
登入後複製

不過,透過使用 "switch" 參數,您能夠規定只刪除或只新增類別。

  • switch :可選參數,布林值,規定是否僅新增(true)或移除(false)類別。

  • <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-3.6.1.min.js"></script>
    		<script type="text/javascript">
    			$(document).ready(function() {
    				$("button").click(function() {
    					$("p").toggleClass("p2",true);
    				});
    			});
    		</script>
    		<style>
    			h1{
    				color: coral;
    			}
    			.p1{
    				font-size: 120%;
    				color: red;
    			}
    			.p2{
    				background-color: yellow;
    			}
    	</head>
    
    	<body>
    		
    		</style>
    		<h1>这是一个大标题</h1>
    		<p class="p1">这是一个段落。</p>
    		<p class="p1">这是另一个段落。</p>
    		<button>给p元素增加类名p2</button>
    	</body>
    
    </html>
    登入後複製

    jquery怎麼為元素增加類別名

    【推薦學習:

    jQuery影片教學web前端影片

    以上是jquery怎麼為元素增加類別名的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板