webAPI9

最新推荐文章于 2024-03-26 16:26:53 发布

web html

最新推荐文章于 2024-03-26 16:26:53 发布

阅读量130

点赞数

本文链接：https://blog.csdn.net/weixin_44748332/article/details/90610059

版权

1.点击创建表格
<style>
div{
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="点我" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
var arr = [
{name: "百度", href: "http://www.baidu.com"},
{name: "谷歌", href: "http://www.google.com"},
{name: "淘宝", href: "http://www.taobao.com"},
{name: "京东", href: "http://www.jd.com"}
]
//console.log(arr[3].href);
my$("btn").onclick = function () {
//判断div里面是否有元素, 为空的话则添加
if(my$("dv").innerHTML == ""){
var table = document.createElement("table");
table.border = "1";
table.cellSpacing = "0";
my$("dv").appendChild(table);
for(var i = 0 ; i < arr.length; i++){
//创建表行
var tr = document.createElement("tr");
//追加到父元素
table.appendChild(tr);
//创建第一个td
var td = document.createElement("td");
tr.appendChild(td);
//添加内容
td.innerHTML = arr[i].name;
//创建第二个td
var td2 = document.createElement("td");
tr.appendChild(td2);
td2.innerHTML = "<a href="+arr[i].href+">"+arr[i].name+"</a>";
}
}
}

</script>
2.元素相关的方法
<style>
div{
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body id="bd">
<h5 id="aa">segtretger</h5>
<input type="button" value="显示效果" id="btn1">
<input type="button" value="干掉第一个子元素" id="btn2">
<input type="button" value="干掉所有的子元素" id="btn3">
<input type="button" value="替换子元素" id="btn4">
<input type="button" value="克隆" id="btn5">
<div id="dv"></div>
<script src="common.js"></script>

//移除父元素的第一个子元素
my$("btn2").onclick = function () {
// removeChild(移除的元素)
my$("dv").removeChild(my$("dv").firstElementChild);
}

//干掉所有的子元素
my$("btn3").onclick = function () {
// 循环的删掉第一个子元素
while (my$("dv").firstElementChild){
my$("dv").removeChild(my$("dv").firstElementChild)
}
}

//替换子元素
my$("btn4").onclick = function () {
var newTxt = document.createElement("a");
newTxt.innerHTML = "好困";
// 替换 replaceChild(新元素, 要替换的元素)
my$("dv").replaceChild(newTxt, my$("dv").firstElementChild);
}

// 克隆复制要克隆的元素.cloneNode(布尔值)
//
// 点击克隆显示效果的按钮
my$("btn5").onclick = function () {
var inp = my$("aa").cloneNode(true);
console.log(inp)
my$("bd").appendChild(inp);

}

</script>
3.关于事件
<input type="button" value="点击" id="btn">
<script src="common.js"></script>
<script>
// my$("btn").onclick = function () {
// console.log("呵呵")
// }
// my$("btn").onclick = function () {
// console.log("哈哈")
// }
// 为元素绑定事件
// 对象.addEventlistener("事件的类型", 事件的处理函数, false) ie8不支持
// 参数1 : 事件的类型--->事件的名字, 没有on
// 参数2: 事件的处理函数 --->匿名函数/ 命名函数
// 参数3: 布尔值 . 目前写false . 默认值就是false,可写可不写

// 对象.attachEvent("有on的事件类型", 事件的处理函数) ie8特有的方式, 其他浏览器不支持

//需求: 为同一个元素元素绑定先相同的事件
// my$("btn").addEventListener("click", function () {
// console.log("hehe")
// }, false);
// my$("btn").addEventListener("click", function () {
// console.log("haha")
// }, false);

my$("btn").attachEvent("onclick",function () {
console.log("哼哼哈嘿")
})
my$("btn").attachEvent("onclick",function () {
console.log("哼哼哈嘿")
})
</script>

web html

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webAPI9

1.点击创建表格<style> div{ width: 300px; height: 300px; border: 1px solid red; } </style></head><body><input type="butt...
复制链接

扫一扫