编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jqueryjquery.js"></script>
</head>
<body>
<h1>选择你的爱好</h1>
<input type="checkbox" value="唱歌">唱歌
<input type="checkbox" value="跳舞">跳舞
<input type="checkbox" value="听歌">听歌
<input type="checkbox" value="看电影">看电影
<hr>
<input type="button" value="显示图片路径"><br>
<input type="button" value="显示爱好"><br>
<input type="button" value="改变图片"><br>
<input type="button" value="增加图片"><br>
<input type="button" value="删除图片"><br>
<div>
<img id="x" src="img/img1.jpg" alt="" srcset="">
</div>
<script>
$(function(){
$("[value*='路径']").click(function(){
// alert($("#x").prop("src")); //完整路径
alert($("#x").attr("src"));//写入img路径
})
$("[value*='改变']").click(function(){
$("#x").attr("src","img/img2.jpg"); //改变图片
alert($("#x").attr("src"));//写入img路径（改变图片后的路径）
//改变多个值
// $("#x").attr({
// "src":"img/img2.jpg",
// "title":"DOM练习"
// })
})
$("[value*='显示']").click(function(){
var str=""//初始化
$("[type='checkbox']:checked").each(function(){
str=str+$(this).val()+"
";
})
alert(str);
})
$("[value*='增加']").click(function(){
$("#x").before($("<img src='img1.jpg'>"));
$("#x").before($("<img src='img/img2.jpg' class='y'>"));
// var $newNode=$("<span>img/img3.jpg</span>")
// // $("#x").attr("src","img/img3.jpg"); //改变图片
// $("#x").before($newNode);//前
// $("#x").after($newNode);//后
})
$("[value*='删除']").click(function(){
// $("#x").remove();//删除
// $(".y:eq(0)").remove();//删除
// $("hr:last").before("#x");
var $new = $(".y:last").detach();//删除
$("input:eq(0)").before($new);
})
})
</script>
</body>
</html>
运行结果
