收藏
批改状态：合格
老师批语：
代码演示：http://111.231.88.20/front/html/0404/1.html
本段作业代码使用了 attr(),css(),width(),height(),offset()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0404作业attr()和css()方法的使用</title>
</head>
<style type="text/css">
.ul{
list-style-type: none;
background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
background-image: -webkit-linear-gradient(left,#ff9000 0,#ff5000 100%);
}
</style>
<body>
<ul>
<li><a href="" id="tmall">天猫</a></li>
<li><a href="">聚划算</a></li>
<li><a href="">天猫超市</a></li>
<li><a href="">淘抢购</a></li>
<li><a href="">电器城</a></li>
<li><a href="">中国质造</a></li>
<li><a href="">兴农扶贫</a></li>
<li><a href="">飞猪旅行</a></li>
<li><a href="">苏宁易购</a></li>
</ul>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
//给ul添加一个class属性
$('ul').addClass('ul')
//设置ul的宽度
$('ul').width('700px')
//设置ul的高度
$('ul').height('35px')
//使用css()方法添加style内联样式
$('li').css({
'float': 'left',
'margin-right':'20px',
'padding-top':'10px',
})
$('a').css({
'text-decoration':'none',
'color': 'inherit',//使a标签的字体颜色继承父元素
})
$('#tmall').css('color','#ff0036')
//使用attr()更改属性值
$('#tmall').attr('href','https://www.tmall.com/')
//使用attr()添加新属性
$('#tmall').attr('title','理想生活上天猫')
//使用offset()设置元素距离文档的偏移
$('#tmall').offset({top:25,left:50})
</script>
</html>点击 "运行实例" 按钮查看在线实例
运行截图
手抄代码
总结：
通过对于attr()和css()方法的实际联系以后，对于jquery的使用方法更加熟练了一点，对于工厂函数$和选择过滤器的使用也更加深刻了！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
