python-day54--前端之js-DOM对象

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、DOM对象

1.什么是HTML DOM

HTML Document Object Model（文档对象模型---标签）

2.功能：定义了访问（查找）和操作HTML文档的标准方法

3.HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)

DOM树的目的：导航标签

4.DOM节点

1.DOM树的每一个节点对象（Node）就是每一个标签2.节点主要有两个： 1. document （整个结构html标签） 2. element （里面的每一个标签）3.节点关系：节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点
4.节点查找
1.直接查找

document.getElementById(“idname”)    #得到标签对象

document.getElementsByTagName(“tagname”)#得到数组对象

document.getElementsByName(“name”)#得到数组对象

document.getElementsByClassName(“name”)#得到数组对象

局部查找

注意：设计到寻找元素，注意<script>标签的位置！

注意：每一个标签都是一个对象，对象就可以调用属性和方法

2.导航查找：通过某个标签定位到某些标签

导航节点属性：

'''parentElement // 父节点标签元素children // 所有子标签firstElementChild // 第一个子标签元素lastElementChild // 最后一个子标签元素nextElementtSibling // 下一个兄弟标签元素previousElementSibling // 上一个兄弟标签元素'''

注意，js中没有办法找到所有的兄弟标签！

5.节点属性操作

1、属性操作
   var ele=document.getElementsByClassName("c1")[0];

       （1）文本操作：

             ele.innerText    取值
             ele.innerText="Egon";   赋值

       ele.innerHTML；    取值
       ele.innerHTML="<a href=''>click</a>";     赋值

区别在 innerHTML可以取值和赋值标签，而innerText不行

（2）属性操作
// 取属性值（对所有的属性都可以，除了class类）

console.log(ele.getAttribute("id"));
console.log(ele.id); --简便

// 属性赋值：（对所有的属性都可以，除了class类）

ele.setAttribute("id","d2")
ele.id="d2"; --简便

// class属性

console.log(ele.className); 查看
ele.classList.add("hide"); 增加
ele.classList.remove("hide"); 删除

2 、节点操作（增删改）

      1 创建节点： document.createElement("标签名")
      2 添加节点： ele_parent.appentChild(ele_child)
      3 删除节点： ele_parent.removeChild(ele_child)
      4 替换节点： ele_parent.repalceChild(newnode, 某个节点)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 500px;
height: 300px;
border: 1px solid red;
}
</style> <script>
window.onload = function () { //监听加载完成之后执行
var ele = document.getElementsByClassName("addBtn")[0];
var ele_del = document.getElementsByClassName("delBtn")[0];
var eleBtn = document.getElementsByClassName("repalceBtn")[0]; // 绑定的添加节点事件
ele.onclick = function () {
// 创建一个a标签
var ele_a = document.createElement("a");
console.log(ele_a); // <a></a>
ele_a.innerHTML = "点击"; // <a>点击</a>
ele_a.setAttribute("href", "http://www.baidu.com");
ele_a.id = "d1"; // 创建img标签 var ele_img = document.createElement("img"); // <img>
ele_img.src = "Bootstrap_i2.png"; // <img src="">
ele_img.height = 50;
ele_img.width = 50; // 添加标签 // 找到父标签
ele_p = document.getElementsByClassName("c1")[0];
ele_p.appendChild(ele_a)
// ele_p.appendChild(ele_img) };
// 绑定删除节点事件
ele_del.onclick = function () {
var ele_p = document.getElementById("p1");
var ele_parent = document.getElementsByClassName("c1")[0]; ele_parent.removeChild(ele_p); };
// 绑定替换节点事件
eleBtn.onclick = function () {
//创建的新节点
var ele_img = document.createElement("img"); // <img>
ele_img.src = "Bootstrap_i2.png"; // <img src="">
ele_img.height = 50;
ele_img.width = 50; // 被替换的节点
var ele_p = document.getElementById("p1"); // 父节点 var ele_parent = document.getElementsByClassName("c1")[0] // 做替换 ele_parent.replaceChild(ele_img, ele_p)
}
}; </script> </head>
<body> <div class="c1">
<p id="p1">p1</p>
</div>
<button class="addBtn">ADD</button>
<button class="delBtn">del</button>
<button class="repalceBtn">repalceBtn</button> </body>
</html>

节点操作实例练习1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () { // 表格操作 var eles = document.getElementsByClassName("del");
for (var i = 0; i < eles.length; i++) {
eles[i].onclick = function () {
// console.log(this.parentElement.parentElement);
var ele_tr = this.parentElement.parentElement; var ele_tbody = document.getElementById("t1"); ele_tbody.removeChild(ele_tr); }
} }; </script> </head>
<body> <table border=""> <tbody id="t1">
<tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td>
<button class="del">del1</button>
</td>
</tr> <tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td>
<button class="del">del2</button>
</td>
</tr> <tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td>
<button class="del">del3</button>
</td>
</tr> <tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td>
<button class="del">del3</button>
</td>
</tr> </tbody> </table> </body>
</html>

节点操作实例练习2

5.事件

<body>
<div onclick="foo(this)">DIV</div><div class="c1">DIV2</div><ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul><script>
// 
function foo(self) { console.log(self);
// var ele=document.getElementsByTagName("div")[0];
self.style.color="red";
} // 事件绑定方式2: 标签对象.on事件=function(){} var ele=document.getElementsByClassName("c1")[0]; ele.onclick=function () {
console.log(this); // this 代指：当前触发事件的标签对象；
this.style.fontSize="30px"
}; // ul li 事件 var eles_li=document.getElementsByTagName("li"); for (var i=0;i<eles_li.length;i++){ eles_li[i].onclick=function () { console.log(this.innerText);
//console.log(i); // i 为什么是4？
//console.log(eles_li[i].innerText);
}
}</script>
</body>

练习：左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单实例</title>
<style>
.left{
width:30%;
height: 600px;
background-color: sandybrown;
float: left;
}
.right{
width: 70%;
height: 600px;
background-color: deepskyblue;
float: left;
}
.item { /*下面的div不上来，因为给item设置了边框
width: 100%;
height: 200px;
/*border: 1px solid red;*/
}
.title{
width: 100%;
height: 25px;
background-color: steelblue;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="item">
<div class="title">菜单一</div>
<div class="con hide">
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ul>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hide">
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ul>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="con hide">
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ul>
</div>
</div>
</div>
<div class="right"></div>
<script>
// 先找到要增加鼠标点击事件的标签
var ele_title= document.getElementsByClassName('title');
for(var i =0;i<ele_title.length;i++){
ele_title[i].onclick = function () {
// 显示点击标签下的兄弟标签
// 先找到当前的标签title
// console.log(this); //this就代表当前点击的标签
// console.log(this.nextElementSibling) ;//下一个兄弟标签 <div class="con hide">，然后把hide去了
// 再找到title下的兄弟标签
this.nextElementSibling.classList.remove('hide'); //隐藏另外两个con标签
for (j = 0;j<ele_title.length;j++){
console.log(j);
if(ele_title[j]!=this){
ele_title[j].nextElementSibling.classList.add('hide');
}
}
}
}</script>
</body>
</html>

1、onload 事件：
onload 属性开发中只给 body元素加.这个属性的触发标志着页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.2、onsubmit 事件：
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body><form action="" id="submit">
<p>姓名<input type="text" name="user" id="user"></p>
<p>年龄<input type="text" name="age" id="age"></p>
<input type="submit" > 默认自带一个提交事件
</form><script>
var ele_form=document.getElementById("submit");
var ele_user=document.getElementById("user");
var ele_age=document.getElementById("age"); ele_form.onsubmit=function (event) { //给form表单添加onsubmit事件就相当于给input-submit标签添加
var username=ele_user.value;
var age=ele_age.value; alert(username);
alert(age); // 两种阻止默认事件发生的方式 // 方式1
return false // 方式2
// event.preventDefault() }
</script></body>
</html>

onsubmit练习

3、onkeydown 事件:

Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就是KeyCode.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <input type="text" id="test"> <script>
var ele=document.getElementById("test")
ele.onkeydown=function (e) {
console.log(e.keyCode); if (e.keyCode==13){
alert(666)
}
}
</script>
</body>
</html>

onkeydown练习

4、事件传播

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c1{
width: 200px;
height: 200px;
background-color: wheat;
} .c2{
width: 100px;
height: 100px;
background-color: royalblue;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div> <script>
var ele1=document.getElementsByClassName("c1")[0];
var ele2=document.getElementsByClassName("c2")[0]; ele1.onclick=function () {
alert(123)
}; ele2.onclick=function (event) {
alert(456);
event.stopPropagation() // 阻止事件传播
}
</script>
</body>
</html>

事件传播练习

5、onblur与onfocus事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body><input type="text" value="username" id="search"><script>
var ele=document.getElementById("search") ele.onfocus=function () {
this.value=""
}; ele.onblur=function () {
if(this.value.trim()==""){
this.value="username"
}
}
</script>
</body>
</html>

onblur与onfocus练习

6、模态对话框练习

<!DOCTYPE html>
<html>

<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
<style>
.container {
margin-top: 80px;
} .row {
margin-top: 10px;
} .c1 {
margin-left: 12px;
margin-right: 15px;
margin-top: -10px;
} .c2 {
margin-left: 15px;
margin-right: 15px;
} /*.c3 {*/
/*margin-left: 100px;*/
/*}*/ .c4 {
margin-left: 50px;
} .c5 {
margin-top: -30px;
} .c3 {
width: 280px;
height: 30px; } .c8 {
margin-right: 50px;
} .add {
display: block;
float: right;
height: 36px;
width: 72px;
background-color: dodgerblue;
color: white;
border-radius: 5px;
} .back {
width: 100%;
height: 2000px;
border: 1px solid red;
} .shade {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: darkgray;
opacity: 0.5;
} .model {
position: fixed;
top: 100px;
left: 40%;
width: 300px;
height: 200px;
background-color: white; } .hide {
display: none;
} #i8 {
margin-left: 61px;
} .i9 {
margin-left: 20px;
} #i6 {
margin-top: 10px;
} #btn {
background-color: dodgerblue;
color: white;
margin-left: 170px;
border-radius: 3px;
height: 28px;
width: 65px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container"> <div class="row">
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
</div>
<div class="row c1">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2"></label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="搜索">
</div>
<button type="submit" class="btn btn-primary">搜索</button>
<input type="button" value="添加" class="add" id="ss"/>
 </form>
</div>
<div class="row c2">
<table class="table table-striped table-bordered table-hover table-condensed">
<tbody id="i1">
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
<tr>
<th>1</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 编辑</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 删除</span>
</button>
</td> </tr>
<tr>
<th>2</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 编辑</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 删除</span>
</button>
</td>
</tr>
<tr>
<th>3</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 编辑</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 删除</span>
</button>
</td>
</tr>
<tr>
<th>4</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 编辑</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 删除</span>
</button>
</td>
</tr>
<tr>
<th>5</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 编辑</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 删除</span>
</button>
</td>
</tr>
<tr>
<th>6</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 编辑</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 删除</span>
</button>
</td>
</tr>
<tr>
<th>7</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 编辑</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 删除</span>
</button>
</td>
</tr>
<tr>
<th>8</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 编辑</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 删除</span>
</button>
</td>
</tr>
<tr>
<th>9</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 编辑</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 删除</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row c2">
<nav aria-label="Page navigation " class="pull-right c5">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div></div>
<div class="shade hide"></div>
<div class="model hide">
<form action="" id="i6">
<p id="i8">id   <input type="text" id="i60"></p> <p class="i9">Column    <input type="text" id="i61"></p> <p class="i9">Column    <input type="text" id="i62"></p> <p class="i9">Column    <input type="text" id="i63"></p> <input type="button" id="btn" value="提交">
</form>
</div><script>
var eles = document.getElementsByClassName("c8");
for (var i = 0; i < eles.length; i++) {
eles[i].onclick = function () {
var ele_tr = this.parentElement.parentElement;
var ele_tbody = this.parentElement.parentElement.parentElement;
ele_tbody.removeChild(ele_tr);
}
}</script>
<script>
var ele_adda = document.getElementById("ss");
var ele_mdoel = document.getElementsByClassName("model")[0];
var ele_shade = document.getElementsByClassName("shade")[0];
ele_adda.onclick = function () {
ele_mdoel.classList.remove("hide");
ele_shade.classList.remove("hide") } var ele_sub = document.getElementById('btn');
ele_sub.onclick = function () {
ele_mdoel.classList.add("hide");
ele_shade.classList.add("hide")
var ele_a = document.createElement("tr");
var ele_1 = document.getElementById('i60');
var ele_2 = document.getElementById('i61');
var ele_3 = document.getElementById('i62');
var ele_4 = document.getElementById('i63'); var elee_1 = document.createElement("th"); elee_1.innerText = ele_1.value ele_a.appendChild(elee_1) var elee_2 = document.createElement("td");
elee_2.innerText = ele_2.value ele_a.appendChild(elee_2) var elee_3 = document.createElement("td");
elee_3.innerText = ele_3.value ele_a.appendChild(elee_3)
var elee_4 = document.createElement("td");
elee_4.innerText = ele_4.value ele_a.appendChild(elee_4) var elee_5 = document.createElement("td");
elee_5.classList.add('c3'); var elee_6 = document.createElement("button");
elee_6.type = 'submit';
elee_6.classList.add('btn');
elee_6.classList.add('btn-success');
elee_6.classList.add('c4'); var elee_8 = document.createElement("span");
elee_8.classList.add('glyphicon');
elee_8.classList.add('glyphicon-pencil');
elee_8.innerHTML = ' 编辑'
elee_6.appendChild(elee_8);
elee_5.appendChild(elee_6); var elee_7 = document.createElement("button");
elee_7.type = 'submit';
elee_7.classList.add('btn')
elee_7.classList.add('btn-danger')
elee_7.classList.add('pull-right')
elee_7.classList.add('c8')
var elee_9 = document.createElement("span");
elee_9.classList.add('glyphicon');
elee_9.classList.add('glyphicon-remove');
elee_9.innerHTML = ' 删除';
elee_7.appendChild(elee_9);
elee_5.appendChild(elee_7);
ele_a.appendChild(elee_5) var ele_tr = document.getElementById('i1');
ele_tr.appendChild(ele_a); }</script></body>
</html>

练习

7、正反选实例练习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body><button class="selectAll">全选</button>
<button class="reverse">反选</button>
<button class="cancel">取消</button>
<hr>
<table border="">
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>111</td>
</tr>
</table><script>// 方式1
var ele_selectAll=document.getElementsByClassName("selectAll")[0];
var ele_reverse=document.getElementsByClassName("reverse")[0];
var ele_cancel=document.getElementsByClassName("cancel")[0];
var ele_input=document.getElementsByClassName("check"); ele_selectAll.onclick=function () {
for(var i=0;i<ele_input.length;i++){
ele_input[i].checked="checked"
}
}; ele_cancel.onclick=function () {
for(var i=0;i<ele_input.length;i++){
ele_input[i].checked=""
}
}; ele_reverse.onclick=function () {
for(var i=0;i<ele_input.length;i++){
var ele=ele_input[i];
if(ele.checked){
ele.checked=""
}
else {
ele.checked="checked"
}
}
};// 方式2 var eles_button=document.getElementsByTagName("button");
var ele_input=document.getElementsByClassName("check");
for (var i=0;i<eles_button.length;i++){
eles_button[i].onclick=function () {
if(this.innerHTML=="全选"){
for(var i=0;i<ele_input.length;i++){
ele_input[i].checked="checked"
}
} else if (this.innerHTML=="取消"){
....
} else {
....
} }
}</script>
</body>
</html>

8、onchange 事件

域的内容被改变。应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body><form action=""> <select name="pro" id="s1">
<option value="">请输入省份</option>
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="beijing">北京省</option>
</select> <select name="city" id="c1">
<option value="">请输入城市</option>
</select></form><script> var data={"hebei":["保定","石家庄"],"henan":["郑州","开封"],"beijing":["朝阳","昌平"]}; var select_province=document.getElementById("s1");
var select_city=document.getElementById("c1"); select_province.onchange=function () {
// console.log(this.value);
var province=this.value;
var citys=data[province];
// console.log(citys); // 清空操作
// console.log(select_city.options);
select_city.children.length=1; //保留一个// select_city.children.length=0; //全部清空
// select_city.options.length=0; //等同上一个，全部清空 for(var i=0;i<citys.length;i++){
var ele_option=document.createElement("option"); // <option></option>
ele_option.innerHTML=citys[i]; // <option>郑州</option>
ele_option.value=i+1; // <option value=1>郑州</option>
select_city.appendChild(ele_option)
}
}
</script></body>
</html>

二级联动实例

9、onmouseleave 与onmouseout

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style> .title{
background-color: goldenrod;
line-height: 30px;
}
.item{
line-height: 20px;
background-color: #cccccc; } .hide{
display: none;
} </style>
</head>
<body><div class="box">
<div class="title">onmouseover</div>
<div class="con hide">
<div class="item"><a href="">111</a></div>
<div class="item"><a href="">222</a></div>
<div class="item"><a href="">333</a></div> </div>
</div>
<script> var ele_title=document.getElementsByClassName("title")[0];
var ele_box=document.getElementsByClassName("box")[0]; ele_title.onmouseover=function () {
this.nextElementSibling.classList.remove("hide")
};
ele_box.onmouseleave=function () {
ele_title.nextElementSibling.classList.add("hide")
}// onmouseout 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。// onmouseleave 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</script>
</body>
</html>

onmouseleave与onmouseout

10、onselect 事件，文本被选中。

11、事件委派

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body><ul>
<li>111</li>
<li>222</li>
<li>333</li></ul><button>Add</button><script> var eles_li=document.getElementsByTagName("li");
var ele_btn=document.getElementsByTagName("button")[0];
var ele_ul=document.getElementsByTagName("ul")[0];
// 添加li
ele_btn.onclick=function () {
var ele_li=document.createElement("li");
ele_li.innerHTML=444;
ele_ul.appendChild(ele_li)
};// 这种方式做出来的效果-- 新添加的标签不会alert文本
// 绑定事件
// for(var i=0;i<eles_li.length;i++){
// eles_li[i].onclick=function () {
// alert(this.innerHTML)
// }
// } //解决方法
// 事件委派 --从变化的标签开始往上找，直到找到不变化的标签，当作绑定事件（addEventListener）的标签（ele_ul） ele_ul.addEventListener("click",function (e) {
console.log(e.target); // 标签
console.log(e.target.tagName); // 标签名称 if(e.target.tagName=="LI"){ //筛选想操作的标签
console.log("OK")
}
})</script>
</body>
</html>

12、ondblclick 事件当用户双击某个对象时调用的事件句柄。

13、

onkeydown 某个键盘按键被按下。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

onkeypress 某个键盘按键被按下并松开。

onkeyup 某个键盘按键被松开。

14、

onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开

二、实例练习

1 左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 20%;
height: 500px;
float: left;
background-color: wheat;
} .right{
float: left;
width: 80%;
height: 500px;
background-color: lightgray; } .title{
text-align: center;
line-height: 40px;
background-color: #0e90d2;
color: white;
}
.item{
padding: 10px;
} .hide{
display: none;
}
</style>
</head>
<body><div class="outer">
<div class="left">
<div class="item">
<div class="title">菜单一</div>
<ul class="con">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div class="item">
<div class="title">菜单二</div>
<ul class="con hide">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div>
<div class="item">
<div class="title">菜单三</div>
<ul class="con hide">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</div>
<div class="right"></div>
</div><script> var eles_title=document.getElementsByClassName("title"); for (var i=0;i<eles_title.length;i++){
eles_title[i].onclick=function(){ this.nextElementSibling.classList.remove("hide"); for(var j=0;j<eles_title.length;j++){ if (eles_title[j]!=this){
eles_title[j].nextElementSibling.classList.add("hide")
} } } }</script>
</body>
</html>

2 搜索框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title><script>function Focus(){ var input=document.getElementById("ID1");
if (input.value=="请输入用户名"){
input.value="";
}}function Blurs(){ var ele=document.getElementById("ID1");
var val=ele.value;
if(!val.trim()){ ele.value="请输入用户名";
}
}</script>
</head>
<body>
<input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()">
</body>
</html>

3 模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: white;
height: 2000px;
} .shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: grey;
opacity: 0.4;
} .hide{
display: none;
} .models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: wheat; }
</style>
</head>
<body>
<div class="back">
<input class="c" type="button" value="click">
</div><div class="shade hide handles"></div><div class="models hide handles">
<input class="c" type="button" value="cancel">
</div><script> var eles=document.getElementsByClassName("c");
var handles=document.getElementsByClassName("handles");
for(var i=0;i<eles.length;i++){
eles[i].onclick=function(){ if(this.value=="click"){ for(var j=0;j<handles.length;j++){ handles[j].classList.remove("hide"); } }
else {
for(var j=0;j<handles.length;j++){ handles[j].classList.add("hide");
} }
}
}</script></body>
</html>

4 表格案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body><button class="select_all">全选</button>
<button class="select_reverse">反选</button>
<button class="cancel">取消</button><hr><table class="server_table" border="2px" cellspacing="2px">
<tr>
<td><input type="checkbox" class="item"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
</table><script>
/*
var ele_all=document.getElementsByClassName("select_all")[0];
var ele_reverse=document.getElementsByClassName("select_reverse")[0];
var ele_cancel=document.getElementsByClassName("cancel")[0];
var input_arr=document.getElementsByClassName("item"); ele_all.onclick=function(){
for(var i=0;i<input_arr.length;i++){
console.log(input_arr[i]);
var input=input_arr[i];
input.checked=true;
}
}; ele_cancel.onclick=function(){
for(var i=0;i<input_arr.length;i++){
console.log(input_arr[i]);
var input=input_arr[i];
input.checked=false;
}
}; ele_reverse.onclick=function(){
for(var i=0;i<input_arr.length;i++){
console.log(input_arr[i]);
var input=input_arr[i];
if(input.checked){
input.checked=false;
}
else{
input.checked=true;
}
}
};*/ var input_arr=document.getElementsByClassName("item");
var button_arr=document.getElementsByTagName("button"); for(var i=0;i<button_arr.length;i++){ button_arr[i].onclick=function(){ for (var j=0;j<input_arr.length;j++){
var inp=input_arr[j]
if(this.innerText=="全选"){
console.log("ok");
inp.checked=true;
}
else if(this.innerText=="取消"){
inp.checked=false;
}
else {
if(inp.checked){
inp.checked=false;
}else {
inp.checked=true;
}
} }
} }
</script>
</body>
</html>

5 select移动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.outer{
margin: 0 auto;
background-color: darkgray;
width: 80%;
height: 600px;margin-top: 30px;
word-spacing: -5px; } #left{
display: inline-block;
width: 100px ;
height: 140px;
background-color: wheat;
text-align: center; } #choice{
display: inline-block;
height: 140px;
background-color: darkolivegreen; vertical-align: top;
padding:0 5px; } #choice button{
margin-top: 20px;
} #right{
display: inline-block;
width: 100px ;
height: 140px;
background-color: wheat;
text-align: center;
line-height: 140px; } </style>
</head>
<body><div class="outer"> <select multiple="multiple" size="" id="left">
<option>红楼梦</option>
<option>西游记</option>
<option>水浒传</option>
<option>JinPingMei</option>
<option>三国演义</option>
</select><span id="choice">
<button id="choose_move"> > </button><br>
<button id="all_move"> >> </button>
</span><select multiple="multiple" size="" id="right">
<option>放风筝的人</option>
</select></div><script> var choose_move=document.getElementById("choose_move");
var all_move=document.getElementById("all_move"); var right=document.getElementById("right");
var left=document.getElementById("left");
var options=left.options; choose_move.onclick=function(){ for (var i=0; i<options.length;i++){ var option=options[i];
if(option.selected==true){ // var news=option.cloneNode(true);
// console.log(news); right.appendChild(option);
i--;
}
}
}; all_move.onclick=function(){ for (var i=0; i<options.length;i++){ var option=options[i]; right.appendChild(option);
i--; };
}; /*
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++) {
buttons[i].onclick = function () { for (var i = 0; i < options.length; i++) { var option = options[i]; if (this.innerText == ">") {
if (option.selected == true) { // var news=option.cloneNode(true);
// console.log(news); right.appendChild(option);
i--;
}
} else {
right.appendChild(option);
i--;
}
}
};
} */</script></body>
</html>

6 二级联动

<select id="province">
<option>请选择省:</option>
</select><select id="city">
<option>请选择市:</option>
</select><script>
data={"河北省":["廊坊","邯郸"],"北京":["朝阳区","海淀区"]}; var p=document.getElementById("province");
var c=document.getElementById("city"); for(var i in data){
var option_pro=document.createElement("option"); option_pro.innerHTML=i; p.appendChild(option_pro);
}
p.onchange=function(){ pro=(this.options[this.selectedIndex]).innerHTML;
citys=data[pro]; c.options.length=0; for (var i in citys){
var option_city=document.createElement("option");
option_city.innerHTML=citys[i];
c.appendChild(option_city);
} }
</script>

7 跑马灯与tab切换

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{margin:0; padding:0; list-style:none;}
body{
font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;
}
h3{
text-align: center;
color:darkcyan;
margin-top: 30px;
letter-spacing: 5px;
}
.box{
width: 1000px;
margin:50px auto 0px;
}
#title{
line-height: 40px;
background-color: rgb(247,247,247);
font-size: 16px;
font-weight: bold;
color: rgb(102,102,102);
}
#title span{
float: left;
width: 166px;
text-align: center;
}
#title span:hover{
/*color: black;*/
cursor: pointer;
}
#content{
margin-top: 20px;
}
#content li{
width: 1050px;
display: none;
background-color: rgb(247,247,247);
}
#content li div{
width: 156px;
margin-right: 14px;
float: left;
text-align: center;
}
#content li div a{
font-size: 14px;
color: black;
line-height: 14px;
/* float: left;*/
display: inline-block;
margin-top: 10px;
}
#content li a:hover{
color: #B70606;
}
#content li div span{
font-size: 16px;
line-height: 16px;
/*float: left;*/
display: block;
color: rgb(102,102,102);
margin-top: 10px;
}
#content img{
float: left;
width: 155px;
height: 250px;
}
#title .select{
background-color: #2459a2;
color: white;
border-radius: 10%;
}
#content .show{
display: block;
} .show span{
color: red!important;
font-size: 30px;
}
</style>
</head><body>
<h3 id="wel">京东商城欢迎您</h3>



<marquee behavior="scroll" direction="right">欢迎您苑昊先生</marquee>
<script> function test(){ var mywel = document.getElementById("wel");
var content = mywel.innerText; var f_content = content.charAt(0);
var l_content = content.substring(1,content.length); var new_content = l_content + f_content;
mywel.innerText = new_content; } // setInterval("test();", 500);
</script>
<div class="box">
<p id="title">
<span class="select">家用电器</span>
<span>家具</span>
<span>汽车</span>
<span>食品</span>
<span>女鞋</span>
<span>医疗保健</span>
</p> <ul id="content">
<li class="show"> <div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容声(Ronshen)冰箱</a><span>价格:5600</span></div>
<div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣机"><a href="#">海尔洗衣机</a><span>价格:5400</span></div>
<div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="电饭煲"><a href="#">福库(CUCKOO)电饭煲</a><span>价格:3999</span></div>
<div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能电视"><a href="#">三星智能电视</a><span>价格:8999</span></div>
<div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="净水器"><a href="#">净水器</a><span>价格:1300</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空气净化器"><a href="#">空气净化器</a><span>价格:5300</span></div>
</li> <li> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div> </li>
<li>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
</li>
<li> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div> </li>
<li> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div> </li>
<li> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁肾宝片"><a href="#">汇仁肾宝片</a><span>价格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁肾宝片"><a href="#">汇仁肾宝片</a><span>价格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁肾宝片"><a href="#">汇仁肾宝片</a><span>价格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁肾宝片"><a href="#">汇仁肾宝片</a><span>价格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁肾宝片"><a href="#">汇仁肾宝片</a><span>价格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁肾宝片"><a href="#">汇仁肾宝片</a><span>价格:322</span></div> </li> </ul>
</div> <script>
var title=document.getElementById('title');
var content=document.getElementById('content');
var category=title.getElementsByTagName('span');
var item=content.getElementsByTagName('li'); for (var i = 0; i < category.length; i++) { category[i].index=i; category[i].onclick=function(){ for (var j = 0; j < category.length; j++) {
category[j].className='';
item[j].className='';
}
this.className='select';
item[this.index].className='show';
} } </script>
</body>
</html>

三、js的作用域

作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。

任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

1. 全局作用域(Global Scope)

在代码中任何地方都能访问到的对象拥有全局作用域，一般来说一下几种情形拥有全局作用域：

(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域

var name="yuan"; function foo(){
var age=23;
function inner(){
console.log(age);
} inner();
} console.log(name); // yuan
//console.log(age); // Uncaught ReferenceError: age is not defined
foo(); // 23
inner(); // Uncaught ReferenceError: inner is not defined

(2)所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：

var name="yuan"; function foo(){
age=23; var sex="male"
}
foo();
console.log(age); // 23
console.log(sex); // sex is not defined

变量blog拥有全局作用域，而sex在函数外部无法访问到。

2. 局部作用域(Local Scope)

和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域.

如示例1中的age与inner都只有局部作用域。（js中if、for没有自己的作用域）

3.作用域链(Scope Chain)

在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

1.示例演示

//-----**********************例1*********************************var s=12;
function f(){
console.log(s);
var s=12; // if s=12
console.log(s)
}
f();//-----**********************例2*********************************var s=10;
function foo(){
console.log(s);
var s=5;
console.log(s);
function s(){console.log("ok")}// 函数的定于或声明是在词法分析时完成的,执行时已不再有任何操作 console.log(s);
}foo();//-----***********************例3********************************function bar(age) { console.log(age);
var age = 99;
var sex= 'male';
console.log(age);
function age() {
alert(123)
};
console.log(age);
return 100;
}result=bar(5);//-----********************************************************