实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="jquery-3.3.1.js">
</script>
<style type="text/css">
.box,
p,
form {
margin: 0 auto;
margin-top: 20px;
text-align: center;
/*border:1px solid #ccc;*/
}
.box {
width: 400px;
height: 400px;
line-height: 400px;
border-radius: 50%;
font-size: 40px;
}
.text {
text-shadow: 1px 3px #ff6500;
color: blue;
}
input {
width: 450px;
height: 35px;
}
p {
width: 600px;
height: 150px;
line-height: 150px;
text-shadow: 3px 3px 3px #F75A1F;
color: #fff;
font-size: 25px;
font-weight: bold;
}
</style>
<script type="text/javascript">
// 2、jQuery获取并设置CSS类
// CSS设置或返回样式属性
// 设置CSS属性:CSS("样式名","value")
$(function() {
// console.log($('.box').css('height'));
$('.box').css('background', 'pink');
// 设置多个CSS属性：CSS({"样式名":"value","样式名":"value","样式名":"value",...})
// $('.box').css({
// 'font-weight': 'bold',
// 'font-size': '25px',
// 'color': '#fff'
// });
// addClass()向被选元素添加一个或多个类
// $('.box').addClass('text');
// removeClass()向被选元素删除一个或多个类
// hasClass()检查被选元素是否包含指定的class;
console.log($('.box').hasClass('text'))
$('.box').click(function() {
if ($(this).hasClass('text')) {
$(this).removeClass('text')
} else {
$('.box').addClass('text')
}
})
console.log($('.box').hasClass('text'));
})
</script>
<title>你好</title>
</head>
<body>
<div class="box">
~all luck is for you~
</div>
<p>
~好好学习，天天向上~
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
