js属性及操作
1、DOM操作
children 子节点 儿子节点
parentNode 父节点
谷歌和火狐的方式
firstElementChild 一胎
lastElementChild 最后一胎
previousElementSibling 上一个兄弟节点
nextElementSibling 下一个兄弟节点
这是ie的方式
firstChild
lastChild
previousSibling
nextSibling
<!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>dom</title>
</head>
<body>
<div class="hero">
<ul id="girl">
<li>王昭君</li>
<li>杨玉环</li>
<li>妲己</li>
<li id="can">貂蝉</li>
<li id="qiao">大乔</li>
</ul>
<ol>
<li>李白</li>
<li>赵云</li>
<li>狄仁杰</li>
<li>诸葛亮</li>
</ol>
</div>
<div class="san">
<ul>
<li>关羽</li>
<li>张飞</li>
<li>赵云</li>
<li>马超</li>
<li>黄忠</li>
</ul>
<ol>
<li>典韦</li>
<li>许褚</li>
<li>徐晃</li>
<li>张辽</li>
<li>夏侯惇</li>
</ol>
</div>
</body>
</html>
<script>
// var odiv = document.getElementsByClassName('hero')[0]
// console.log(odiv.children)
// var oqiao = document.getElementById('qiao')
// console.log(oqiao.parentNode)
var ocan = document.getElementById('can')
console.log(ocan.parentNode.parentNode.nextElementSibling.firstElementChild.lastElementChild.tagName)
</script>
image.png
通过document可以动态的创建和删除节点
tagName 获取对象标签的名字 大写
createElement 创建节点
removeChild 父节点.removeChild(子节点)
appendChild 添加节点
添加存在的节点，本质是移动节点
insertBefore 添加节点 insertBefore(new, old)
setAttribute : 既可以设置官方属性，又可以设置自定义属性
getAttribute : 既可以获取官方属性，也可以获取自定义属性
<!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>操作</title>
</head>
<body>
<ul id="girlstar">
<li>柳岩</li>
<li>高圆圆</li>
<li id="rong">马蓉蓉</li>
</ul>
<ul id="women">
<li>韩红</li>
<li id="feng">凤姐</li>
<li>芙蓉姐</li>
</ul>
<button id="btn" like="篮球">点我</button>
</body>
</html>
<script>
var obtn = document.getElementById('btn')
var oul = document.getElementById('girlstar')
var owu = document.getElementById('women')
obtn.onclick = function () {
// obtn.look = 'goudan'
obtn.setAttribute('look', 'goudan')
// console.log(obtn.like)
// console.log(obtn.getAttribute('like'))
// var oli = document.createElement('li')
// oli.innerHTML = '柳岩'
// oli.className = 'yan'
// 动态添加节点
// oul.appendChild(oli)
// var ofeng = document.getElementById('feng')
// var orong = document.getElementById('rong')
// oul.appendChild(ofeng)
// owu.removeChild(ofeng)
// oul.insertBefore(ofeng, orong)
}
</script>
注释部分为创建和删除节点的具体用法
留言板
利用动态添加节点的功能来实现留言板的功能，代码中还添加了删除留言的功能
<!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>留言板</title>
</head>
<body>
<input id="ip" type="text">
<input id="btn" type="button" value="留言">
<ul id="content"></ul>
</body>
</html>
<script>
var oinput = document.getElementById('ip')
var obtn = document.getElementById('btn')
var oul = document.getElementById('content')
// console.log(oul.children)
obtn.onclick = function () {
// 获取input框的值
content = oinput.value
// 创建一个li标签
var oli = document.createElement('li')
// 不仅添加内容，还添加删除功能
oli.innerHTML = content + ' <a href="javascript:;">删除</a>'
// 实现点击删除，删除li的功能
var oa = oli.getElementsByTagName('a')[0]
oa.onclick = function () {
oul.removeChild(oli)
}
// 添加的时候，放到最前面
// 获取ul的第一个子标签,通过判断ul的子标签是否为空
if (oul.children) {
// 非空
oul.insertBefore(oli, oul.children[0])
} else {
// 空
oul.appendChild(oli)
}
// 将input框清空
oinput.value = ''
// 让input框获得焦点
oinput.focus()
}
// 普通留言板
/*
obtn.onclick = function () {
// 获取input框的值
content = oinput.value
// 创建一个li标签
var oli = document.createElement('li')
oli.innerHTML = content
// 将li标签添加到ul里面
// oul.appendChild(oli)
} */
</script>
image.png
2、事件绑定和事件冒泡
addEventListener 谷歌和火狐方式
removeEventListener
attachEvent ie方式
detachEvent
<!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>事件绑定</title>
</head>
<body>
<div id="lala" style="width:300px; height:300px; background-color:#c90"></div>
</body>
</html>
<script>
var odiv = document.getElementById('lala')
odiv.addEventListener('click', function () {
alert('羌笛何须怨杨柳,春风不度玉门关')
})
// odiv.addEventListener('click', function () {
// alert('劝君更尽一杯酒,西出阳关无故人')
// })
// odiv.attachEvent('onclick', function () {
// alert('君不见黄河之水天上来')
// })
// odiv.attachEvent('onclick', function () {
// alert('奔流到海不复回')
// })
// odiv.onclick = function () {
// alert('羌笛何须怨杨柳,春风不度玉门关')
// }
// odiv.onclick = function () {
// alert('劝君更尽一杯酒,西出阳关无故人')
// }
</script>
(注释部分为各种操作的具体用法)
获取事件对象
事件ev 火狐、谷歌
window.event ie、谷歌
兼容性写法： var oevent = ev || event
获取事件的x和y坐标
oevent.clientX oevent.clientY
相对窗口左上角的坐标
<!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>获取事件对象</title>
</head>
<body>
<div id="dudu" style="width:400px; height:400px; background-color:firebrick"></div>
</body>
</html>
<script>
var odiv = document.getElementById('dudu')
odiv.onclick = function (ev) {
// console.log(ev)
// alert(ev)
var oevent = ev || event
// alert(oevent)
console.log(oevent.clientX, oevent.clientY)
}
// function test(ev) {
// alert(ev)
// }
// odiv.onclick = test
// a = 10
// b = 200
// var c = a && b
// console.log(c)
</script>
取消事件冒泡
事件的属性和方法
cancelBubble ie方式、谷歌、火狐都支持
stopPropagation() 谷歌、火狐方式
事件源对象
srcElement ie、谷歌
target 火狐、谷歌
<!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>事件冒泡</title>
</head>
<body>
<div id="wai" style="width:400px; height:400px; background-color:pink;">
<div id="nei" style="width:200px; height:200px; background-color:black;"></div>
</div>
</body>
</html>
<script>
var owai = document.getElementById('wai')
var onei = document.getElementById('nei')
owai.onclick = function () {
alert('寻寻觅觅,冷冷清清,凄凄惨惨戚戚')
}
onei.onclick = function (ev) {
alert('乍暖还寒时候,最难将息,三杯两盏淡酒')
var oevent = ev || event
// oevent.cancelBubble = true
oevent.stopPropagation()
console.log(oevent.target)
}
</script>
3、小知识
禁止鼠标右键
document.oncontextmenu = function () {
return false
}
超链接和事件同时触发
事件的属性和方法
returnValue ie、谷歌
preventDefault() 火狐、谷歌
return false ie、谷歌、火狐
键盘事件
document.onkeydown : 捕获用户点击的按钮
获取按钮的编号
oevent.keyCode
<!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>小知识</title>
</head>
<body>
<a id="du" href="http://www.baidu.com/">百度一下</a>
</body>
</html>
<script>
// document.onkeydown = function (ev) {
// var oevent = ev || event
// console.log(oevent.keyCode)
// }
document.onkeypress = function (ev) {
var oevent = ev || event
console.log(oevent.keyCode)
}
// var oa = document.getElementById('du')
// oa.onclick = function (ev) {
// alert('这次第,怎一个愁字了得')
// var oevent = ev || event
// // oevent.returnValue = false
// // oevent.preventDefault()
// return false
// }
// document.oncontextmenu = function () {
// return false
// }
</script>
3、正则对象
规则是一样的。
单字符：. \w \d \W \s \S \D [aoe]
数量： {m} {m,} {m,n} {0,}==* {1,}==+ {0,1}==?
match : 正则匹配
replace : 正则替换
<script>
string = '我想我会一直孤单,就这么孤单一辈子'
ret = /孤单/g
console.log(string.match(ret))
// console.log(string.replace(ret, '幸福'))
</script>
4、表单对象
三种查找方法
（1）根据id获取
（2）document.forms 得到文档中所有的form
（3）根据name获取
document.formname
获取该表单里面input框的值，假如该input框name=user
document.formname.user.value
submit()方法
document.formname.submit() 谁都能提交
js验证表单内容
<!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>表单</title>
</head>
<body>
<form action="xxx" method="get" name="goudan">
<input type="text" name="user" value="王狗蛋">
<!-- <input type="submit" value="提交"> -->
<a href="javascript:;" id="aa">登录</a>
</form>
<form action="" method="post"></form>
</body>
</html>
<script>
var oa = document.getElementById('aa')
oa.onclick = function () {
document.goudan.submit()
}
// 第二种方式
// console.log(document.forms[1].method)
// console.log(document.goudan)
// console.log(document.goudan.user.value)
</script>
常见的创建用户时遇到的正则以及长度判定
<!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验证</title>
</head>
<body>
<form action="" name="form">
<input type="text" name="user" placeholder="请输入用户名">
<span class="user"></span>
<br><br>
<input type="text" name="password" placeholder="请输入密码">
<span class="pwd"></span>
<br><br>
<input type="text" name="email" placeholder="请输入邮箱">
<span class="email"></span>
<br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
<script>
// 找到3个input
oname = document.form.user
opwd = document.form.password
oemail = document.form.email
oname.onblur = function () {
var spanname = document.getElementsByClassName('user')[0]
// 得到自己的值
content = this.value
// 用户名长度必须大于等于3位
if (content.length < 3) {
spanname.innerHTML = '用户名不合法'
spanname.style.color = 'red'
} else {
spanname.innerHTML = '√'
spanname.style.color = 'green'
}
}
opwd.onblur = function () {
var spanpwd = document.getElementsByClassName('pwd')[0]
// 得到自己的值
content = this.value
// 用户名长度必须大于等于3位
if (content.length < 6) {
spanpwd.innerHTML = '密码长度不够'
spanpwd.style.color = 'red'
} else {
spanpwd.innerHTML = '√'
spanpwd.style.color = 'green'
}
}
oemail.onblur = function () {
var spanemail = document.getElementsByClassName('email')[0]
content = this.value
// test@163.com lala@sina.cn 1090@qq.com
re = /^\w+@\w+\.(com|cn)$/
if (!content.match(re)) {
spanemail.innerHTML = '邮箱格式不正确'
spanemail.style.color = 'red'
} else {
spanemail.innerHTML = '√'
spanemail.style.color = 'green'
}
}
</script>
image.png
