1 DOM增删改1:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script>
/*
参数：
id 要绑定单击事件的按钮的id
callback 事件的响应函数
*/
function myClick(id, callback){
var btn = document.getElementById(id);
btn.onclick = callback;
}
window.onload = function () {
//创建广州节点
var gz = document.createElement('li');
var txt = document.createTextNode('广州');
gz.appendChild(txt);
// 创建一个"广州"节点,添加到#city下
myClick('btn01',function () {
// <li>广州</li>
// 创建一个li元素节点对象
// document.createElement() 用来根据标签名创建一个元素节点对象
// var gz = document.createElement('li');
// 创建一个"广州"文本节点对象
// document.createTextNode() 用来根据一个文本内容创建一个文本节点对象
// var txt = document.createTextNode('广州');
// 将txt设置为gz的子节点
// 父节点.appendChild(子节点) 将一个节点设置为另一个节点的子节点
// gz.appendChild(txt);
// 获取id为city的元素
var city = document.getElementById('city');
// 将gz添加到city中
city.appendChild(gz);
});
// 将"广州"节点插入到#bj前面
myClick('btn02',function () {
//获取bj节点
var bj = document.getElementById('bj');
var gz = document.createElement('li');
var txt = document.createTextNode('广州');
gz.appendChild(txt);
/*
父节点.insertBefore(前边的节点, 后边的节点)
- 用来将一个节点插入到指定节点前边
*/
// 获取id为city的元素
var city = document.getElementById('city');
city.insertBefore(gz, bj);
});
// 使用"广州"节点替换#bj节点
myClick('btn03',function () {
//获取bj节点
var bj = document.getElementById('bj');
//创建广州节点
var gz = document.createElement('li');
var txt = document.createTextNode('广州');
gz.appendChild(txt);
//获取id为city的元素
var city = document.getElementById('city');
/*
父节点.replaceChild(新节点, 旧节点)
- 使用一个新的节点替换旧节点
*/
city.replaceChild(gz, bj);
});
// 删除#bj节点
myClick('btn04',function () {
// 获取id为bj的元素
var bj = document.getElementById('bj');
// 获取id为city的元素
var city = document.getElementById('city')
// 父节点.removeChild(子节点)
// city.removeChild(bj);
// 子节点.parentNode.removeChild(子节点)
bj.parentNode.removeChild(bj);
});
// 读取#city内的HTML代码
myClick('btn05',function () {
var city = document.getElementById('city');
alert(city.innerHTML);
});
// 设置#bj内的HTML代码
myClick('btn06',function () {
var bj = document.getElementById('bj');
bj.innerHTML = '深圳';
});
// 创建一个"广州"节点,添加到#city下
myClick('btn07',function () {
// 获取city
var city = document.getElementById('city');
// 修改city的innerHTML
// city.innerHTML += '<li>广州</li>';
// 创建一个li元素
var gz = document.createElement('li');
// 设置gz中的文本内容
gz.innerHTML = '广州';
// 将li设置city的子节点
city.appendChild(gz);
});
//为bj绑定一个单击响应函数
var bj = document.getElementById('bj');
bj.onclick = function () {
alert(123);
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#bj内的HTML代码</button></div>
<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
</div>
</body>
</html>2DOM增删改表格练习复杂1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
window.onload = function () {
// 将删除tr的函数单独提取
function delA() {
// 删除员工 点击哪个超链接，就要删除哪个超链接所在的tr
// 在这个响应函数中，点击哪个超链接，this就是哪个超链接
// alert(this);
// 获取当前超链接所在的tr
var tr = this.parentNode.parentNode;
// 获取被删除员工的name
// var name = tr.firstElementChild.innerHTML;
// var name = tr.children[0].innerHTML;
var name = tr.getElementsByTagName('td')[0].innerHTML;
//弹出一个提示框
// confirm() 用来弹出一个带有确认和取消的对话框
// confirm() 会根据用户的不同选择返回不同的值
// 点击确认，返回true，点击取消返回false
if(confirm('确认删除【'+name+'】吗？')){
// 删除tr
tr.parentNode.removeChild(tr);
}
// 点击超链接后，会发生页面的跳转，这个是超链接的默认行为
// 如果不希望发生默认行为，可以在响应函数的最后return 一个 false
// 取消默认行为
return false;
}
/*
点击超链接以后，删除员工
*/
// 获取所有的超链接
var links = document.getElementsByTagName('a');
// 遍历links
for(var i=0; i<links.length; i++){
// 为超链接绑定单击响应函数
links[i].onclick = delA;
}
/*
点击提交按钮后，添加员工
*/
var addEmpButton = document.getElementById('addEmpButton');
addEmpButton.onclick = function () {
// 获取用户填写 姓名 邮件 薪资
var name = document.getElementById('empName').value;
var email = document.getElementById('email').value;
var salary = document.getElementById('salary').value;
/*
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
*/
// 创建一个tr
var tr = document.createElement('tr');
// 创建四个td
var nameTd = document.createElement('td');
var emailTd = document.createElement('td');
var salaryTd = document.createElement('td');
var aTd = document.createElement('td');
// 创建一个超链接
var link = document.createElement('a');
// 为超链接添加属性
link.href = 'javascript:;';
// 为超链接绑定删除的事件
link.onclick = delA;
// 创建四个文本节点
var nameTxt = document.createTextNode(name);
var emailTxt = document.createTextNode(email);
var salaryTxt = document.createTextNode(salary);
var delTxt = document.createTextNode('Delete');
// 将文本节点添加到元素中
nameTd.appendChild(nameTxt);
emailTd.appendChild(emailTxt);
salaryTd.appendChild(salaryTxt);
link.appendChild(delTxt);
aTd.appendChild(link);
// 将四个td添加到tr中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
// 获取id为employeeTable的table
var tbody = document.querySelector('#employeeTable tbody');
tbody.appendChild(tr);
};
};
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>3DOM增删改表格练习简化式2:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
window.onload = function () {
// 将删除tr的函数单独提取
function delA() {
// 删除员工 点击哪个超链接，就要删除哪个超链接所在的tr
// 在这个响应函数中，点击哪个超链接，this就是哪个超链接
// alert(this);
// 获取当前超链接所在的tr
var tr = this.parentNode.parentNode;
// 获取被删除员工的name
// var name = tr.firstElementChild.innerHTML;
// var name = tr.children[0].innerHTML;
var name = tr.getElementsByTagName('td')[0].innerHTML;
//弹出一个提示框
// confirm() 用来弹出一个带有确认和取消的对话框
// confirm() 会根据用户的不同选择返回不同的值
// 点击确认，返回true，点击取消返回false
if(confirm('确认删除【'+name+'】吗？')){
// 删除tr
tr.parentNode.removeChild(tr);
}
// 点击超链接后，会发生页面的跳转，这个是超链接的默认行为
// 如果不希望发生默认行为，可以在响应函数的最后return 一个 false
// 取消默认行为
return false;
}
/*
点击超链接以后，删除员工
*/
// 获取所有的超链接
var links = document.getElementsByTagName('a');
// 遍历links
for(var i=0; i<links.length; i++){
// 为超链接绑定单击响应函数
links[i].onclick = delA;
}
/*
点击提交按钮后，添加员工
*/
var addEmpButton = document.getElementById('addEmpButton');
addEmpButton.onclick = function () {
// 获取用户填写 姓名 邮件 薪资
var name = document.getElementById('empName').value;
var email = document.getElementById('email').value;
var salary = document.getElementById('salary').value;
/*
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
*/
// 创建一个tr
var tr = document.createElement('tr');
// 通过innerHTML向tr中添加内容
tr.innerHTML = '<td>'+name+'</td>' +
'<td>'+email+'</td>' +
'<td>'+salary+'</td>' +
'<td><a href="javascript:;">Delete</a></td>';
//为超链接绑定一个单击响应函数
tr.getElementsByTagName('a')[0].onclick = delA;
// 获取id为employeeTable的table
var tbody = document.querySelector('#employeeTable tbody');
tbody.appendChild(tr);
};
};
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>4DOM表格练习的this和作用域相关问题:
1-- let块作用域包含function后:
<script type="text/javascript">
window.onload = function () {
/*
点击超链接以后，删除员工
*/
// 获取所有的超链接
// var links = document.getElementsByTagName('a');
var links = document.querySelectorAll('a');
// 遍历links
for(let i=0; i<links.length; i++){
// 将当前元素的索引，作为对象的属性存储
// links[i].index = i;
// 为超链接绑定单击响应函数
// (function (i) {
// links[i].onclick = function () {
// alert(i);
// // 希望当点击哪个超链接，i就是哪个超链接的索引
// // 点击第一个超链接i为0. 点击第二个超链接i为1，以此类推
// // alert(this.index);
//
// return false;
// };
// })(i);
links[i].onclick = function () {
/*
即使可以正常获取到i的值，下边的写法也是不正确的
getElementsByTagName() 获取到的是一个实时更新的数组
当删除或增加一个元素后，数组会实时更新，也就是元素的索引会发生变化
*/
var tr = links[i].parentNode.parentNode;
var name = tr.getElementsByTagName('td')[0].innerHTML;
if(confirm('确认删除【'+name+'】吗？')){
tr.parentNode.removeChild(tr);
}
return false;
};
}
};
</script>2:直接访问:i=3 实际索引只有0,1,2—因为循环先执行完了,函数内的i只能获取到3----只能利用闭包,或块作用域包含它 才可--
<script type="text/javascript">
window.onload = function () {
/*
点击超链接以后，删除员工
*/
// 获取所有的超链接
var links = document.getElementsByTagName('a');
// 遍历links
for(var i=0; i<links.length; i++){
alert('for 执行了 '+i);
// 为超链接绑定单击响应函数
links[i].onclick = function () {
alert('onclick 执行了 '+i); // i的值是3
// var tr = links[i].parentNode.parentNode;
// var name = tr.getElementsByTagName('td')[0].innerHTML;
// if(confirm('确认删除【'+name+'】吗？')){
// // 这么写行不行？
// // 创建一个表格时，如果在table中不指定thead tbody tfoot这些标签时
// // 浏览器会自动添加tbody标签，并将所有的tr都放入到tbody标签中
// // tr的父元素是tbody而不是table
// // var employeeTable = document.getElementById('employeeTable');
// // 删除tr
// tr.parentNode.removeChild(tr);
// }
return false;
};
}
};
</script>5DOM操作css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作样式</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: #f00;
margin-top: 50px;
transition: all 1s;
}
</style>
<script>
window.onload = function () {
//点击按钮后，改变box1的样式
// 为按钮绑定一个单击响应函数
var btn = document.getElementById('btn');
// 获取box1
var box1 = document.getElementById('box1');
var w = 100;
btn.onclick = function () {
w += 100;
// 修改box1的样式
// 可以直接通过box1.style属性来修改其样式
// 语法：元素.style.样式名 = 样式值
box1.style.width = w+'px';
box1.style.height = w+'px';
// 注意 类似于 xxx-yyy 这种属性，必须将其修改为驼峰命名法
// 将-号去掉，-后的字母改大写 xxxYyy borderLeftWidth
box1.style.backgroundColor = 'yellow';
};
};
</script>
</head>
<body>
<button id="btn">点我一下</button>
<div id="box1"></div>
</body>
</html>6DOM读取css样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作样式</title>
<style>
#box1{
height: 100px;
background-color: orange;
margin-top: 50px;
transition: all 1s;
}
</style>
<script>
window.onload = function () {
//点击按钮后，改变box1的样式
// 为按钮绑定一个单击响应函数
var btn = document.getElementById('btn');
// 获取box1
var box1 = document.getElementById('box1');
var w = 100;
btn.onclick = function () {
// 通过style属性所设置的样式都是内联样式，所以一般设置完成后会立即生效
// 读取元素的样式 通过style属性所读取的样式，也是内联样式
// 读取语法：对象.style.样式名 (一般不会使用这种方式来读取属性)
// alert(box1.style.width);
/*
getComputedStyle() 用来读取元素当前的样式
需要两个参数：
第一个，要获取样式的元素
第二个，要获取的伪元素，如果不需要获取伪元素的可以省略或传null
返回值：
返回一个对象作为返回值，
对象中存储了当前元素所有的生效的样式
这个对象也是一个实时更新对象
通过getComputedStyle()读取的样式都是只读的，无法修改
该函数支持IE9及以上浏览器
*/
var cs = getComputedStyle(box1);
// alert(cs.width);
// alert(cs.backgroundColor);
// cs.width = '300px'; 不能修改的
alert(cs.width);
// box1.style.width = parseInt(cs.width) * 2 + 'px';
};
};
</script>
</head>
<body>
<button id="btn">点我一下</button>
<div id="box1"></div>
</body>
</html>7:DOM操作css样式2:
<style>
#box1{
width: 100px;
height: 100px;
margin: 50px;
background-color: orange;
padding: 20px;
border: 10px red solid;
overflow: auto;
}
#box2{
width: 350px;
height: 500px;
background-color: yellow;
}
</style>
<script>
window.onload = function () {
var box1 = document.getElementById('box1');
var btn01 = document.getElementById('btn01');
btn01.onclick = function () {
// 盒子的内部大小
// clientWidth 元素宽度（内容区+内边距）
// clientHeight 元素高度（内容区+内边距）
// 这两个属性返回的值就是数字可以直接用来计算
// 盒子的整个大小
// offsetWidth 获取元素的宽度（内容区+内边距+边框）
// offsetHeight 获取元素的高度（内容区+内边距+边框）
// alert(box1.clientWidth);
/*
offsetParent 获取元素的定位父元素
- 获取离当前元素最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位则返回body
offsetLeft 获取当前元素距离定位元素的左侧偏移量
offsetTop 当前元素距离定位元素上侧的距离
*/
// alert(box1.offsetParent);
// alert(box1.offsetLeft);
// alert(box1.offsetTop);
// scrollHeight 用来获取元素滚动区域的高度
// scrollWidth 用来获取滚动区域的宽度
// alert(box1.scrollWidth);
// 这两个值可以修改，以改变滚动条的位置
// scrollTop 垂直滚动条的位移
// scrollLeft 水平滚动条的位移
// 当元素的scrollHeight减去scrollTop等于元素clientHeight时，说明垂直滚动条已经滚动到底了
alert(box1.scrollHeight - box1.scrollTop === box1.clientHeight);
// alert(box1.clientHeight);
// box1.scrollLeft = 25;
};
};
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<div id="box3" style="position:relative; border: 5px black dotted;">
<div id="box1">
<div id="box2"></div>
</div>
</div>
</body>8关于用户协议阅读到底的操作练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#info{
width: 300px;
height: 400px;
background-color: #bfa;
overflow: auto;
}
</style>
<script>
window.onload = function () {
//当协议的滚动条拖动到底时，使多选框可用，当多选框选中时，使提交按钮可用
// 获取info
var info = document.getElementById('info');
// 获取ck input
var ck = document.getElementById('ck');
// 获取注册按钮
var re = document.getElementById('re');
// scroll事件会在元素的滚动条滚动时触发
info.onscroll = function () {
// console.log(Math.round(info.scrollHeight - info.scrollTop), info.clientHeight);
//因为谷歌浏览器缩放,会导致数字不精确, 所以用Math.round四舍五入取整!
// 检查垂直滚动条是否滚动到底
if(Math.round(info.scrollHeight - info.scrollTop) === info.clientHeight){
// 等式满足证明滚动条滚动到底，滚动到底说明用户已经阅读完协议
// 使多选框可用，表单项的disabled属性用来设置元素是否禁用
// 如果设置true，则表示禁用元素，设置为false则表示启用元素
ck.disabled = false;
}
};
// 接收协议后，使注册按钮可用
ck.onclick = function () {
// 使注册按钮可用
re.disabled = !ck.checked;
};
};
</script>
</head>
<body>
<h2>欢迎用户注册，请仔细阅读以下协议：</h2>
<p id="info">
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册
</p>
<input id="ck" type="checkbox" disabled> 我已仔细阅读，并遵守以上协议
<input id="re" type="button" value="注册" disabled>
</body>
</html>
欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。
学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。
在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。
此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。
我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。
如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！
扫一扫
662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
