实例
<!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">
* {
margin: 0;
padding: 0;
}
div {
margin: 20px auto;
text-align: center;
width: 700px;
box-shadow: 0 0 5px #ccc;
height: 500px;
}
p {
width: 600px;
height: 100px;
line-height: 100px;
margin: 0 auto;
}
.box {
background: #F5F50F;
border-radius: 30px;
}
#text {
text-shadow: 3px 3px 3px #ff6500;
color: #fff;
font-size: 25px;
}
</style>
</head>
<body>
<div>
<img src="images/1.gif" width="300px">
<p>~ Study hard and makeprogress every day. ~</p>
</div>
<script>
$(function() {
//操作属性
// attr()方法设置或返回被选元素的属性值
// console.log($('img').attr('width'))
// $('img').attr('width', '500px')
// $('p').attr('class','box')
//同时设置多个属性
// $('选择器').attr({属性名:值, 属性名:值 ...})
$('img').attr({
width: '300px',
height: '300px'
})
$('p').attr({
'class': 'box',
id: 'text'
})
// removeAttr()从被选元素中移除属性;
$('p').removeAttr('id', 'text')
// 添加元素
// 元素内部添加
// append()在被选元素的结尾插入内容
$('div').append("结束啦")
var a = '<p>see you</p>'
$('div').append(a)
//prepend()在被选元素的开头插入内容
$('div').prepend('开始啦')
// 元素外部添加：
// after()在被选元素之后插入内容
$('div').after('啊哈，我是after效果')
// before()在被选元素之后插入内容
$('div').before('啊哈，我是before效果')
// 删除元素
// remove()方法删被选元素及其子元素
// $('div').remove()
// empty()方法删除被选元素的子元素
$('div').empty()
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
