实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.jQ设置属性,元素添加与删除</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
*{margin: 0; padding: 0;}
div{
margin: 20px auto;
text-align: center;
width: 700px; height: 500px;
box-shadow: 0 0 5px #ccc;
}
.box{
width: 300px; height: 200px;
background: lightgreen;
}
b{
background: #ff9688;
border-radius: 10px;
text-shadow: 2px 3px 3px #ccc;
}
#text{
font-size: 24px;
font-weight: bold;
text-shadow: 2px 3px 3px #ccc;
}
span{
background: lightcoral;
box-shadow: 2px 3px 3px #ccc ;
}
</style>
</head>
<body>
<div>
<div class="box"></div>
<b>I have an apple</b>
<p id="text">I have a pen</p>
<span>apple pen</span>
<img src="img1.jpg" alt="">
<a>百度</a>
</div>
<article>
<b>飞流直下<p>三千尺</p></b>
<b>AAAA<p>BBBBB</p></b>
</article>
</body>
</html>
<script>
$(document).ready(function(){
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
// [[超重要功能]].find() 方法获得当前元素集合中每个元素的后代
// 解决hover不单独的效果
$('article').find('p').css('color','red');
$('article').find('b').css('color','green');
// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
// 一.atrr() 设置元素的属性值,
// {'属性名':'属性值','属性名':'属性值'}形式设置多个
// 注意:attr() 是用来设置属性的,不能设置css样式
$('a').attr({'href':'https://www.baidu.com','target':'_blank'});
$('img').attr('src','img2.jpg');
$('img').attr({'src':'img1.jpg','width':'100px','height':'100px'});
// 从标签中移除属性
$('p').removeAttr('id','text');
// 二.添加元素
// (1)元素内部添加
// append() 在被选元素的末尾插入内容
$('div').append('see you');
$('div').append('<a href="https://www.taobao.com">淘宝</a>');
var p = '<p>测试添加的p标签</p>';
$('div').append(p);
// prepend() 在被选元素的开头插入内容
$('div').prepend('~123~');
$('div').prepend(p);
// (2)元素外部添加
// before() 在被选元素外部的前面添加
$('div').before('~我是before()的效果~');
// after()在被选元素外部的末尾添加
$('div').after('~我是after()的效果~');
// 三.删除元素
// remove() 删除被选元素及其子元素
// $('div').remove();
// empty() 删除被选元素的子元素
// $('div').empty();
});
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
