1.addClass()添加类名
语法:元素集合.addClass(需要添加的类名)
执行这个方法会给元素集合里的所有元素添加指定的类名
如果元素已经有相同的类名 就不再添加 没有才会加
html:
<button class="add">添加类名</button>
<div class="box"></div>
<div></div>
<div></div>
<div></div>
<div></div>
css:
div{
width: 100px;
height: 100px;
background-color: #0a3aab;
margin: 10px;
}
.box{
border: 1px solid red;
}
js:
console.log($('.add')) //打印出来的是jquery元素 类数组
console.log($('.add')[0]) //拿到的是dom元素
$('.add')[0].onclick = function(){
$('div').addClass('box')
}
等同于
//$('.add').click(function(){
$('div').addClass('box')
})
2.removeClass()移除类名
语法:元素集合.removeClass(你要删除的类名)
执行这个方法会给元素集合里的所有元素移除指定的类名
html:
<button class="del">移除类名</button>
<div class="box"></div>
<div></div>
<div></div>
<div></div>
<div></div>
css:
div{
width: 100px;
height: 100px;
background-color: #0a3aab;
margin: 10px;
}
.box{
border: 1px solid red;
}
js:
$('.del')[0].onclick=function(){
$('div').removeClass('box')
}
3.toggle()切换类名
语法:元素集合.toggleClass(你要切换的类名)
html:
<button class="toggle">切换类名</button>
<div class="box"></div>
<div></div>
<div></div>
<div></div>
<div></div>
css:
div{
width: 100px;
height: 100px;
background-color: #0a3aab;
margin: 10px;
}
.box{
border: 1px solid red;
}
js:
$('.toggle')[0].onclick=function(){ //一般做日间夜间模式
$('div').toggleClass('box')
}
4.hasClass() 判断是否有类名
执行这个方法会返回一个布尔类型
如果元素几个里面有一个元素有这个类名就返回return 都没有就返回false
html:
<button class="has">判断有没有类名</button>
<div class="box"></div>
<div></div>
<div></div>
<div></div>
<div></div>
div{
width: 100px;
height: 100px;
background-color: #0a3aab;
margin: 10px;
}
.box{
border: 1px solid red;
}
js:
$('.has').click(function(){
alert( $('div').hasClass('box'))
})
综合代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: #0a3aab;
margin: 10px;
}
.box{
border: 1px solid red;
}
</style>
</head>
<body>
<button class="add">添加类名</button>
<button class="del">移除类名</button>
<button class="toggle">切换类名</button>
<button class="has">判断有没有类名</button>
<div class="box"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
// console.log($('add')[0])
//jquery操作元素的类名
//1 addClass() 添加类名
//执行这个方法会給元素集合里的所有元素添加指定的类名
//如果元素已经有相同的类名 就不再添加 没有才会加
$('.add')[0].onclick = function(){
$('div').addClass('box')
}
console.log($('.add')) //打印出来的是jquery元素 类数组
console.log($('.add')[0]) //拿到的是dom元素
// $('.add').click(function(){
// $('div').addClass('box')
// })
//2 removeClass()移除类名
//执行这个方法会给元素集合里的所有元素移除指定的类名
$('.del')[0].onclick=function(){
$('div').removeClass('box')
}
//3 toggle()切换类名
$('.toggle')[0].onclick=function(){ //一般做日间夜间模式
$('div').toggleClass('box')
}
//4 hasClass() 判断是否有类名
//执行这个方法会返回一个布尔类型
//如果元素几个里面有一个元素有这个类名就返回return 都没有就返回false
// $('.has')[0].onclick=function(){
// alert( $('div').hasClass('box'))
// }
$('.has').click(function(){
alert( $('div').hasClass('box'))
})
</script>
</body>
</html>
jquery操作元素的类名