web前端基础之JS（四）
节点操作
创建节点：
createElement(标签名) ：创建一个指定名称的元素。
例：var tag=document.createElement(“input")
tag.setAttribute('type','text');
添加节点：
追加一个子节点（作为最后的子节点）
父节点.appendChild(子节点);
somenode.appendChild(newnode) 把增加的节点放到某个节点的前边 somenode.insertBefore(newnode,某个节点);
删除节点：
removeChild()：获得要删除的元素，通过父元素调用删除
父节点.removeChild(子节点);
替换节点：
somenode.replaceChild(newnode, 某个节点);
父节点.replaceChild(新节点，替换节点)
拷贝节点：
element.cloneNode(true)
DOM Event(事件)
事件类型
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
ondblclick,onfocus,onblur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin:0;padding:0;
}
</style>
</head>
<body>
<p>QQQQ</p>
<input type="text" id="i1" value="aaa" >
<script>
var ele_p=document.getElementsByTagName('p')[0];
ele_p.ondblclick=function () {
console.log(this.innerHTML)
};
var ele_i=document.getElementById('i1');
ele_i.onfocus=function () {
this.value="";
};
ele_i.onblur=function () {
this.value="aaa";
}
</script>
</body>
</html>
onchange
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin:0;padding:0;
}
</style>
</head>
<body>
<select id="s1">
<option value="x">请选择</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<select id="s2">
<option value="x">请选择</option>
</select>
<script>
var data={'1':['A','AA','AAA'],'2':['B','BB','BBB'],'3':['C','CC','CCC'],'4':['D','DD','DDD']};
var ele_s1=document.getElementById('s1');
var ele_s2=document.getElementById('s2');
ele_s1.onchange=function () {
ele_s2.options.length=1;
if(data[this.value]){
var ele_v_list=data[this.value];
for(var i=0;i<ele_v_list.length;i++){
var ele_op=document.createElement('option');
ele_op.innerHTML=ele_v_list[i];
ele_s2.appendChild(ele_op);
}
}
}
</script>
</body>
</html>
onkeydown
Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin:0;padding:0;
}
</style>
</head>
<body>
<input id="i1" placeholder="用户名">
<script>
var ele_i=document.getElementById('i1');
ele_i.onkeydown=function (e) {
var a=e.keyCode;
if(a!==13){
return true
}
alert('123');
}
</script>
</body>
</html>
onload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun() {
var ele=document.getElementById("ppp");
alert(ele.innerText);
}
</script>
</head>
<body onload="fun()">
<p id="ppp">hello p</p>
</body>
</html>
onmouseout, onmouseover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="d1"></div>
<script>
var ele_div=document.getElementsByClassName('d1')[0];
//div标签触发的事件
ele_div.onmouseout=function () {
this.style.backgroundColor='blue';
};
ele_div.onmouseover=function () {
this.style.backgroundColor='red';
};
</script>
</body>
</html>
onmousemove,onmousedown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="d1"></div>
<script>
var ele_div=document.getElementsByClassName('d1')[0];
//在div标签中触发 移动鼠标事件
ele_div.onmousemove=function (e) {
var x=e.clientX;
var y=e.clientY;
console.log(x,y);
};
//在div标签中触发 点击鼠标事件
ele_div.onmousedown=function () {
alert(123);
}
</script>
</body>
</html>
onmouseout与onmouseleave
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
width: 300px;
}
#title{
background-color: darkblue;
color: white;
line-height: 30px;
text-align: center;
}
#list .item1{
background-color: gray;
line-height: 20px;
}
#list .item2{
background-color: #f0ad4e;
line-height: 20px;
}
#list .item3{
background-color: green;
line-height: 20px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<p>先看下使用mouseout的效果:</p>
<div id="container">
<div id="title">使用了mouseout事件↓</div>
<div id="list" class="hide">
<div class="item1">第一行</div>
<div class="item2">第二行</div>
<div class="item3">第三行</div>
</div>
</div>
<script>
var ele_title=document.getElementById("title");
var ele_list=document.getElementById("list");
var ele_container=document.getElementById("container");
ele_title.onmouseover=function () {
ele_list.classList.remove("hide");
};
// 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
// ele_container.onmouseout=function () {
// ele_list.classList.add("hide");
// };
// 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
ele_container.onmouseleave=function () {
ele_list.classList.add("hide");
}
</script>
</body>
</html>
onselect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1">
<script>
var ele=document.getElementById("i1");
ele.onselect=function () {
alert(1234);
}
</script>
</body>
</html>
onsubmit
注：onsubmit是form标签的事件，form标签下必须有个input标签且type为submit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="form1">
<input type="text" id="i1"><span class="s1"></span>
<br/>
<input type="submit">
</form>
<script>
function foo() {
ele_s1.innerText=''
}
var ele_i1=document.getElementById("i1");
var ele_form1=document.getElementById("form1");
var ele_s1=document.getElementsByClassName('s1')[0];
ele_form1.onsubmit=function () {
console.log(123);
var a=ele_i1.value;
if(a.length>5 && a.length<10){
alert(123);
}
else {
ele_s1.innerText='123';
setTimeout(foo,3000);
return false
}
}
</script>
</body>
</html>
事件传播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
<div id="abc_2" style="border:1px solid red;width:200px;height:200px;">
</div>
</div>
<script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert('111');
};
document.getElementById("abc_2").onclick=function(event){
alert('222');
event.stopPropagation(); //阻止事件向外层div传播.
}
</script>
</body>
</html>
浙公网安备 33010602011771号