jQuery中addClass()方法用法實例
更新時間：2015年01月05日 11:24:37 投稿：shichen2014
這篇文章主要介紹了jQuery中addClass()方法用法,實例分析了addClass()方法的功能、定義及向匹配元素添加一個或多個類的使用技巧,需要的朋友可以參考下
本文實例講述了jQuery中addClass()方法用法。分享給大家供大家參考。具體分析如下：
此方法向匹配元素添加一個或多個類。
此方法有多個語法形式。
語法結(jié)構(gòu)一:
為匹配元素添加指定的類名。如果要一次性添加多個類名，它們之間要用空格分隔。
復(fù)制代碼 代碼如下:
$(selector).addClass(class)
參數(shù)列表:
實例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>addClass函數(shù)-腳本之家</title>
<style type="text/css">
div{
height:200px;
width:200px;
}
.border{
border:1px solid red;
}
.reset{
font-size:20px;
color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("div").addClass("border reset");
})
})
</script>
</head>
<body>
<div>腳本之家歡迎您</div>
<button id="btn">點擊查看效果</button>
</body>
</html>
以上代碼可以為div添加兩個類，能夠設(shè)置div的邊框和字體的樣式。
語法結(jié)構(gòu)二:
以函數(shù)的返回值作為要添加的類名。
復(fù)制代碼 代碼如下:
$(selector).addClass(function(index,oldclass))
參數(shù)列表:
實例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>addClass()函數(shù)-腳本之家</title>
<style type="text/css">
div{
height:200px;
width:200px;
}
.border{
border:1px solid red;
}
.reset{
font-size:20px;
color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("div").addClass(function(){
return "border reset";
})
})
})
</script>
</head>
<body>
<div>腳本之家歡迎您</div>
<button id="btn">點擊查看效果</button>
</body>
</html>
上面代碼和第一個實例的功能是一樣的，只不過要添加的類是通過函數(shù)返回值得到的。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
- 使用JS實現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能
- jQuery使用addClass()方法給元素添加多個class樣式
- Jquery.addClass始終無效原因分析
- jQuery源碼解讀之a(chǎn)ddClass()方法分析
- jQuery中removeClass()方法用法實例
- jQuery使用removeClass方法刪除元素指定Class的方法
- jQuery源碼解讀之removeClass()方法分析
- jQuery中toggleClass()方法用法實例
- jQuery使用toggleClass方法動態(tài)添加刪除Class樣式的方法
- 用jQuery toggleClass 實現(xiàn)鼠標(biāo)移上變色
- JQuery使用屬性addClass、removeClass和toggleClass實現(xiàn)增加和刪除類操作示例
相關(guān)文章
這篇文章主要介紹了JQuery操作元素的css樣式的相關(guān)資料,需要的朋友可以參考下2015-03-03
本篇文章主要是對jquery的js圖表組件highcharts進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
如何避免JQuery Dialog的內(nèi)存泄露，需要的朋友可以參考下。2010-06-06
這篇文章主要介紹了jQuery簡單創(chuàng)建節(jié)點的方法,涉及jQuery獲取節(jié)點及append添加元素創(chuàng)建節(jié)點的相關(guān)技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了jQuery實現(xiàn)購物車的總價計算和總價傳值功能 ,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細(xì)介紹了jQuery事件對象的屬性和方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了移動端jQuery修正Web頁面滑動時div問題的兩則實例,分別針對頂部固定fixed不為0時滑動出現(xiàn)的閃動以及touchmove的受阻止的相關(guān)問題,需要的朋友可以參考下2016-05-05
jquery從1.3開始，使用了新的選擇器–sizzle。效率超過了以前的jquery版本的其他選擇器。下面這篇文章主要介紹了jQuery源中sizzle選擇器的相關(guān)資料，文中介紹的很詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
用jquery實現(xiàn)的橫向顯示輪換效果。2010-05-05
JavaScript中利用jQuery綁定事件的幾種方式小結(jié)
這篇文章主要介紹了JavaScript中利用jQuery綁定事件的幾種方式小結(jié),包括不調(diào)用jQuery的"原生js"實現(xiàn)方式,需要的朋友可以參考下2016-03-03