BOM operation
// window 操作
window.innerHeight // 浏览器窗口的内部高度
window.innerWidth // 浏览器窗口的内部宽度
window.open() // 打开新窗口
window.close( ) // 关闭当前窗口
window.navigator.appName // Web浏览器全称
window.navigator.appVersion // Web浏览器厂商和版本的详细字符串
window.navigator.userAgent // 客户端绝大部分信息
window.navigator.platform // 浏览器运行所在的操作系统
window.history.forward() // 前进一页
window.history.back() // 后退一页
window.location.href // 当前页面获取URL
window.location.href="URL" // 跳转到指定页面
window.location.reload() // 重新加载页面
// 弹窗
alert() // 警告框
confirm() // 确认框
prompt() // 提示框
// 定时
setTimeout('需要定时的函数',1000); // 设置单次定时触发
clearTimeout(t) // 清除
setInterval('需要定时的函数',1000); // 设置循环触发
clearInterval(t) // 清除
DOM manipulation
Html pages by JS code operation, to achieve the corresponding effect
To operate html page, to achieve the corresponding dynamic effects, the first step you have to start to solve the label to find things
Find label
Direct Find
document.getElementById('需要查找的id') // 用id查找
document.getElementsByClassName('需要查找的类名') // 用类名查找
document.getElementsByTagName('需要查找的标签名') // 用标签名查找Indirect Find
使用方法：
var dEle = document.getElementById('p1');
dEle.parentElement
parentElement //父节点标签元素
children //所有子标签
firstElementChild //第一个子标签元素
lastElementChild //最后一个子标签元素
nextElementSibling //下一个兄弟标签元素
previousElementSibling //上一个兄弟标签元素Node operation
1. Create a node, 2. add custom attributes 3. Add the inherent properties, 4. added to the DOM tree browser display
// appendChild 直接尾部添加 // 创建标签 var imgEle = document.createElement('img'); // 设置自定义属性 imgEle.setAttribute('id','i1') // 设置固有的属性 imgEle.src = 'longzhu.png' // 添加到DOM树中，让浏览器展示出来 var d1Ele = document.getElementById('d1') // d1为需要插入的位置标签id d1Ele.appendChild(imgEle)1. Create a node, 2. adding text labels and attributes intrinsic value, 3. Add the specified location tag
// insertBefore 固定位置添加 // 创建标签 var aEle = document.createElement("a") aEle.href = 'https:www.baidu.com' aEle.innerText = '点我点我' // 获取参考点标签 var d3Ele = document.getElementById('d3') var s1Ele = document.getElementById('s1') // 在d3标签内部，s1标签上方添加创建的a标签 d3Ele.insertBefore(aEle,s1Ele)InnerHTML and the difference innerText
// 获取一个标签 var d2Ele = document.getElementById('d2'); // 仅仅能获取到d2标签的内部文本 d2Ele.innerText // 不仅获取文本，标签页全部获取到 d2Ele.innerHTML // 获取标签 var d2Ele = document.getElementById('d2'); // 设置内部文本 d2Ele.innerText = '哈哈' d2Ele.innerHTML = '呵呵' // 设置内部文本(文本中包含标签) d2Ele.innerText = '<h1>我是h1</h1>' // 不认识html标签 d2Ele.innerHTML = '<h1>我是h1</h1>' // 能够识别html标签Gets the value of the operation
// 用于获取用户选择或输入的标签 input select textarea // 获取值 demoEle.value // 设置值 demoEle.value = '我改了'class operation
// 注意点：通过class获取到的数据是一个数组，需要通过索引拿到单个对象 // 根据class找到相应的标签对象 var c1Ele = document.getElementsByClassName('c1')[0] // 获取该标签对象的class属性列表并移除背景红色 c1Ele.classList.remove('bg-red') // 添加属性 c1Ele.classList.add('bg-green') // 判断是否存在 c1Ele.classList.contains('bg-green') c1Ele.classList.contains('bg-red') // 有则删除，无则添加 c1Ele.classList.toggle('bg-green')style style operations
// 修改高度样式 d1Ele.style.height = '200px' // 修改宽度样式 d1Ele.style.width = '200px' // 修改背景色样式 d1Ele.style.backgroundColor = 'blue'
Event binding
Common events
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。Two methods of binding events
- Directly call the appropriate function in the event tag
- js code label automatically find and bind event
Examples
<div class="bg-red " id="d1"></div>
<button id='b1' onclick='change();'>开关1</button>
<button id='b2'>开关2</button>
<script>
// 标签直接绑定事件
function change(){
var d1Ele = document.getElementById('d1');
d1Ele.classLict.toggle('bg-green');
}
// 通过JS代码绑定事件
var b2Ele = document.getElementById('b2');
b2Ele.onclick = ()=>{
change();
}Search Box Case
<input type="text" value="苹果手机" id="i1">
var i1Ele = document.getElementById('i1');
i1Ele.onfocus = function (ev) {
i1Ele.value = '';
// 也可以直接用this
this.value = ''
};
i1Ele.onblur = function (ev) {
i1Ele.value = '苹果电脑';
// 也可以直接用this
this.value = '苹果电脑'
}Case timer
// 全局变量
var t;
// 步骤1
// 将当前时间填写到i1中
var now = new Date();
var i1Ele = document.getElementById('i1');
i1Ele.value = now.toLocalString();
// 步骤2(点开始，时间动起来)>>>(每隔一秒执行一次展示时间操作)
// 将添加时间的功能封装成一个函数
function showTime(){
var now = new Date();
var i1Ele = document.getElementById('i1');
i1Ele.value = now.toLocalString();
};
// 页面一刷新先展示当前时间
showTime()
// 找到开始按钮，绑定事件
var b1Ele = document.getElementById('b1');
b1Ele.onclick = function(){
// 判断是否已经开启过定时器了
if (!t){
// t指代定时器
t = setInterval(showTime,1000);
}
}
// 步骤3(给停止按钮绑定事件，点击后清除定时器)
var b2Ele = document.getElementById('b1');
b2Ele.onclik = function(){
// 问题来了，清除谁呢？需要有一个变量指代定时器
clearInterval(t)；
}
// 步骤4(如果点击多次开始按钮，发现无法清除定时器)
// 判断定时器是否已开启Provinces linkage Case
data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
// 先提前将两个标签对象查找到
var pEle = document.getElementById('province');
var cEle = document.getElementById('city');
// 先展示省份信息
for (var province in data){
var proEle = document.createElement('option');
proEle.innerText = province;
pEle.appendChild(proEle)
}
// 绑定变化事件
pEle.onchange = function () {
// 获取对应的省信息
var currentProvince = pEle.value;
// 将之前的省对应的市清除
cEle.innerHTML = '';
// 添加默认的请选择项
var newEle = document.createElement('option');
newEle.innerText = '请选择';
cEle.appendChild(newEle);
// 获取当前省对应的市
relCity = data[currentProvince];
// 循环对应的市，添加到市对应的选择框中
for(var i=0;i<relCity.length;i++){
var cityEle = document.createElement('option');
cityEle.innerText = relCity[i];
cEle.appendChild(cityEle)
}
}