|
?Html代码段，供下面正文代码段参考。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JS For Beginners</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>JS For Beginners</h1>
</header>
<section class="container">
<form id="my-form">
<h1>Add User</h1>
<div class="msg"></div>
<div>
<label for="name">Name:</label>
<input type="text" id="name">
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email">
</div>
<input class="btn" type="submit" value="Submit">
</form>
<ul id="users"></ul>
<!-- <ul class="items">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul> -->
</section>
<script src="main.js"></script>
</body>
</html>
CSS代码段?，供下面正文代码段参考。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
}
ul {
list-style: none;
}
ul li {
padding: 5px;
background: #f4f4f4;
margin: 5px 0;
}
header {
background: #f4f4f4;
padding: 1rem;
text-align: center;
}
.container {
margin: auto;
width: 500px;
overflow: auto;
padding: 3rem 2rem;
}
#my-form {
padding: 2rem;
background: #f4f4f4;
}
#my-form label {
display: block;
}
#my-form input[type='text'] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.btn {
display: block;
width: 100%;
padding: 10px 15px;
border: 0;
background: #333;
color: #fff;
border-radius: 5px;
margin: 5px 0;
}
.btn:hover {
background: #444;
}
.bg-dark {
background: #333;
color: #fff;
}
.error {
background: orangered;
color: #fff;
padding: 5px;
margin: 5px;
}
了解全局window?
console.log(window); //浏览器的父亲元素
window.alert(1);
如何从DOM中选取元素
Single?element?selectors?单元素选择器（推荐使用querySelector抓取单元素）
console.log(document.getElementById('my-form')); //通过getElementById直接打印
console.log(document.querySelector('h1')); //通过querySelector选中，像选中类和标签，几乎是任何东西。querySelector运行很像JQuery。推荐使用！
如何保存选取元素
const form = document.getElementById('my-form'); //也可以通过赋值将其储存在变量中
console.log(form); //和直接打印一样的作用
multiple?element?selectors?多元素选择器（推荐使用querySelectorAll抓取多元素）
console.log(document.querySelectorAll('.item')); //得到数组一样的nodelist，可以直接对其使用数组一样的方式，egg. forEach，推荐使用！
console.log(document.getElementsByClassName('item')); //，按照类抓取，得到的Html Collection 不是一个数组，必须手动转化成数组。不推荐使用
console.log(document.getElementsByTagName('li')); //按照标签抓取，得到的Html Collection 不是一个数组，必须手动转化成数组。不推荐使用
循环遍历
?querySelectorAll抓取的可以直接按照数组处理，使用forEach遍历。这里仅仅为演示querySelectorAll的功能。
const items = document.querySelectorAll('.item');
items.forEach((item) => console.log(item));
操控和修改DOM
const ul = document.querySelector('.items');
console.log(ul);
// ul.remove();
// ul.lastElementChild.remove();
ul.firstElementChild.textContent = 'Hello';
ul.children[1].innerText = 'Brad'; //索引【1】选中第二个元素，注意索引顺序
ul.lastElementChild.innerHTML = '<h1>Hello</h1>'; //动态添加html内容使用innerHTML.
const btn = document.querySelector('.btn'); // 通过类btn用querySelector抓取按钮，
btn.style.background = 'red'; // 为什么有CSS还要写，可以写成时间和函数，使其动态处理。例如单机时改变颜色，大小，可以在页面中实时操控大小。
监听器?
const btn = document.querySelector('.btn'); //通过类btn用querySelector抓取按钮，
btn.addEventListener('mouseover', (e) => { //给btn这个元素增加一个click动作 的监听器，内容为箭头函数内的内容。MDN学习。
e.preventDefault(); //直接打印click会出现闪烁，submit button提交按钮使用click事件，需阻止默认行为。
// console.log('click');
// console.log(e.target); //打印事件作用的元素
document.querySelector('#my-form').style.background = '#ccc'; //抓取ID改变背景色
document.querySelector('body').classList.add('bg-dark'); //抓取body增加CSS预先准备好的样式、
document.querySelector('.items').lastElementChild.innerHTML = '<h1>Hello</h1>';
});
?输入值和获取值的小应用
?
const myForm = document.querySelector('#my-form');
const nameInput = document.querySelector('#name');
const emailInput = document.querySelector('#email');
const msg = document.querySelector('.msg');
const userList = document.querySelector('#users');
myForm.addEventListener('submit', onSubmit); //整个表单增加submit监听，创建onSubmit函数
function onSubmit(e){
e.preventDefault(); //一旦提交，组织默认行为
console.log(nameInput.value); //打印name表格的值
if(nameInput.value === '' || emailInput.value === ''){
msg.classList.add('error'); //抓取msg增加CSS预先准备好的样式、
msg.innerHTML = 'Pls enter all fields';
setTimeout(() => msg.remove(),3000); //settimeFunction 三秒后消失
}else{
const li = document.createElement('li'); //凭空创造一个新节点li
li.appendChild(document.createTextNode(`${nameInput.value} : ${emailInput.value}`)); //插入带有输入框文本值的节点
userList.appendChild(li); //在用户列表插入节点li
nameInput.value = ''; //Clear Fields清空输入框
emailInput.value = '';
}
}
|