添加替换删除

来源：互联网发布：淘宝上买dota2饰品条件编辑：程序博客网时间：2024/06/14 22:17

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery</title>

<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
<input type="button" id="id0" value="警示框" />
<input type="text" id="name" value="" />
<br>
<input type="text" id="password" value="" />
<table border="1px" cellspacing="0px" cellpadding="0px" id="t">
<tr><th>姓名</th><th>年龄</th></tr>

</table>
<input type="button" id="add" value="添加" />
<hr />
<img src="img/boy.gif" class="img0"/>
<input type="button" id="dele" value="删除" />
<input type="button" id="tihuan" value="替换" />
<script type="text/javascript">
//获取标签
var b = $("#id0");//var b = document.getElementById("id0");
console.log(b);//[object Object]
var b1 = document.getElementById("id0");
console.log(b1)//[object HTMLInputElement]

//原生对象，和jQuery对象的转换
var b2 = $(b1);//原生的转成jQuery的对象
console.log("b2----"+b2);
var b3 = b[0];
console.log("b3---"+b3)

//对象节点的操作
//
$("#add").click(function(){

var name = $("#name").val();//value
var age = $("#password").val();

$("#t").append("<tr><td>"+name+"</td><td>"+age+"</td></tr>");

});
//删除
$("#dele").click(function(){

$(".img0").remove();

//delete() 没有此方法
//empty() 清空，但是标签还在，内容没了

})
//修改
$("#tihuan").click(function(){
//标签除了可以直接写
//还可以是使用document创建出来的
//还可以是document.getElementById()/$(选择器)
$(".img0").replaceWith("<a href='#'>超链接</a>")

})
</script>

</body>
</html>

阅读全文

0 0