收藏
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<link rel="icon" type="image/x-icon" href="images/2.png">
<script 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%;}
.text{text-shadow: 1px 3px #ff6500;}
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>
</head>
<body>
<div class="box">
~ All the luck is for you. ~
</div>
<p>
~ Study hard and make<span> progress every day.</span> ~
</p>
<form>
<input type="text" value="你好">
</form>
<script>
// 2、jQuery获取并设置 CSS 类;
// css()设置或返回样式属性;
// 设置CSS属性：css("样式名","value");
$(function() {
console.log($('.box').css('height'))
$('.box').css('background','pink')
// 设置多个CSS属性：css({"样式名":"value","样式名":"value",...});
$('.box').css({'font-weight':'bold','font-size':'25px','color':'#fff'})
// addClass()向被选元素添加一个或多个类;
// $('.box').addClass('text')
// removeClass()从被选元素删除一个或多个类;
// $('.box').click(function(){
// $(this).removeClass('text')
// })
// hasClass()检查被选元素是否包含指定的class;
console.log($('.box').hasClass('text'))
$('.box').click(function(){
if($(this).hasClass('text')){
$(this).removeClass('text')
}else{
$('.box').addClass('text')
}
})
// 操作css
// height() 方法返回或设置匹配元素的高度;
console.log($('.box').height()+'px')
// width() 方法返回或设置匹配元素的宽度;
console.log($('.box').width())
// 3、jQuery获得内容和属性
// 获取\设置内容:
// text()设置或返回所选元素的文本内容;
console.log($('p').text())
$('p').mouseover(function(){
$(this).text('~ 好好学习 , 天天向上！ ~')
})
// html()设置或返回所选元素的内容
console.log($('p').html())
// val()设置或返回表单字段的值;
console.log($('input').val())
$('input').click(function(){
$(this).val('# 请输入关键字 #')
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
