js的存在形式
和css类似，js代码要放在<script>标签中。
同样和css类似，还可以写在一个js文件中，比如文件名就叫 commons.js ，然后在head中引入
<script src="commons.js"> </script>
<script type="text/javascript"> 和 <script> 是一样的，或者说script默认就是js。这里如果添加了type，类似是说明他的代码是script
<script>标签存放的位置
这个标签可以放在head中，也可以放在body中。解释器是从上到下顺序执行的，所以放在越上面就越早执行。如果script先执行，那么执行完成script代码后才会导入网页内容。这样用户体验会比较差。而且用户只有先看到网页的内容才有可能会需要用到script的代码。
所以建议把<script>标签放到最后，也就是body的内部的最下面。这样就是先显示网页的内容，然后再导入js的动态内容。
语法：alert(message) 会显示一个带有消息和确定按钮的警告框。
举例如下，顺便看一下代码的执行顺序：
<head> <meta charset="UTF-8"> <title>Title</title> <script> alert("Hello 1") </script> </head> <body> <h1>什么时候出现这里的内容</h1> <script> alert("Hello 2") </script> </body>
打开网页后，会先弹出上面的消息，然后显示网页的内容，最后再弹出最下面的消息。
注释
js代码的注释的语法如下：
单行注释：// 你的代码
多行注释：/* 你的代码 */
JavaScript 语句
js可以通过换行或者是分号来区分单独的语句。所以对于单行语句，行尾有没有分号都一样。但是建议加上分号，这样我们的js在编辑完成上线时，可以去掉语句间的缩进和换行（即变成很长的一行代码），节省空间。保证用户端的访问的流畅。
JavaScript
变量
变量直接赋值就可以是使用：
<script> a = "hello" alert(a) </script>
但是在函数中的变量就存在全局变量和局部变量的区别。需要先用var声明变量，这个变量才是局部变量，否则就是全局变量。建议都先加上var声明为局部变量。
<script> function func() { // 局部变量 var a = 'aaaaaaaaaa'; // 全局变量 b = 'bbbbbbbbbbb' } </script>
用控制台调试js代码
用浏览器自带的控制台来调试，用起来就类似一个IDE。F12进入开发调试工具，找到控制台（Console）标签就可以在这里直接写代码了。
也可以使用js命令 console.log() 可以直接向你的控制台输出信息：
<body> <script> console.log("你好！") //括号里面输入在控制台要输入的内容 </script> </body>
定义函数（function）
使用function来定义函数，后面跟函数名，然后是一个"{}"大括号。大括号js的代码块，大括号内部就是这个函数的代码。
<script> // 定义一个函数，函数名 fun function fun() { alert("hello！") } // 调用执行函数 fun(); </script>
数据类型
js中的数据类型分为原始类型和对象类型：
- 原始类型
- 数字
- 字符串
- 布尔值
- 对象类型
- 数组
- 字典
另外还有2个特别的值：
- null，它表示一个特殊值，常用来描述“空值”。
- undefined，是一个特殊值，表示变量未定义。
数字（Number）
字符串转数字的方法：
parseInt() ：转为整形，不成功则NaN。
parseFloat() ：转为浮点数，不成功则NaN。
parseInt(123) 123 parseInt(123.12) 123 parseInt(aaa) VM90:1 Uncaught ReferenceError: aaa is not defined at <anonymous>:1:10 (anonymous) @ VM90:1 parseInt(abc) VM104:1 Uncaught ReferenceError: abc is not defined at <anonymous>:1:10 (anonymous) @ VM104:1 parseFloat(123) 123 parseFloat(123.12) 123.12
字符串（String）
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的
常用方法：str.length ：获取字符串的长度str.trim() ：移除字符串两边的空白，也可以指定只移除左边（trimLeft）或右边（trimRight）。
> str = ' abc ' < " abc " > str.length // 字符串长度 < 6 > str.trim() // 移除空白 < "abc" > str.trimLeft() // 移除左边的空白 < "abc " > str.trimRight() // 移除右边的空白 < " abc"
str.concat() ：字符串拼接
> str = 'aaa' < "aaa" > str.concat('bbb') < "aaabbb" > str.concat(' ','bbb',' ','ccc',' ',111) // 可以拼接多个字符串，数字也能处理，字符串间用逗号 < "aaa bbb ccc 111"
str.charAt() ：返回字符串中的第n个字符str.substring() ：根据索引获取子序列，字符串切割。str.slice() ：字符串切片，其实和上面的subsring差不多。不过如果第一个参数大于第二个参数，这里会返回空字符串，而substring会自动调整两个参数的位置。
> str = 'abcdefg' < "abcdefg" > str.charAt(0) // 下标是0的字符 < "a" > str.charAt(3) // 下标是2的字符 < "d" > str.substring(2) // 返回下标2到末尾的字符串 < "cdefg" > str.substring(2,6) // 返回下标2，到下标5（不包括）之前的字符串 < "cdef" > str.slice(2,5) // 结果和substring一样 < "cde" > str.substring(5,2) // 会自动调整参数位置 < "cde" > str.slice(5,2) // 返回空字符串 < ""
str.indexOf() ：获取子序列的下标str.lastIndexOf() ：获取子序列的下标，从后往前找。
> str = 'sonmething for nothing!' < "sonmething for nothing!" > str.indexOf('thing') < 5 > str.indexOf('thing',6) // 从下标6的位置开始查找 < 17 > str.lastIndexOf('thing',16) // 从下标16的位置开始往前查找 < 5
str.toLowerCase() ：转为小写字母str.toLocaleUpperCase() ：转为大写字母
> str = "Aa Ww" < "Aa Ww" > str.toLowerCase() < "aa ww" > str.toLocaleUpperCase() < "AA WW"
str.split() ：把字符串分割成数组。第一个参数，指定进行分隔的字符串或正则表达式。第二个参数，指定返回数组的最大长度。
> str = 'What are you doing?' < "What are you doing?" > str.split() // 没有参数的话，就没有分隔，但是变成了一个数组 < [object Array]: ["What are you doing?"] > str.split(' ') // 按空格进行分隔 < [object Array]: ["What", "are", "you", "doing?"] > str.split(' ',2) // 指定返回数组的最大长度，多余的就丢弃了 < [object Array]: ["What", "are"] > str.split('') // 如果按字符串进行分隔，就是分隔每个字符 < [object Array]: ["W", "h", "a", "t", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", "?"] >
正则表达式的时候再讲。str.search() ：检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。str.match() ：在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。str.replace() ：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
布尔值（Boolean）
js里的布尔值分别是 'true' 和 'false' ，都是小写的。
比较运算符：
==：等于。值相等，类型可以不一样!=：不等于。只比较值===：全等。值和类型都相等!==：不等于。比较值和类型<、>、<=、>=：小于、大于、小于等于、大于等于
逻辑运算符：
&&：and，与||：or，或!：not，非
数组（Array）
常用方法：arr.length ：数组的大小arr.push() ：向数组的末尾添加一个或多个元素，并返回新的长度arr.pop() ：删除并返回数组的最后一个元素arr.unshift() ：向数组的开头添加一个或更多元素，并返回新的长度arr.shift() ：删除并返回数组的第一个元素
a = ['aa','bb','cc']
(3) ["aa", "bb", "cc"]
a.length //输出长度
3
a.push('dd') // 添加元素到末尾
4
a
(4) ["aa", "bb", "cc", "dd"]
a.pop() //从最后删除
"dd"
a
(2) ["aa", "bb"]
a.push('dd','cc')
4
a
(4) ["aa", "bb", "dd", "cc"]
a.unshift(1,2) //从开始的位置添加元素
6
a
(6) [1, 2, "aa", "bb", "dd", "cc"]
a.shift() //取元素，同时a中元素会删除
1
a
(5) [2, "aa", "bb", "dd", "cc"]
arr.splice(index ,howmany ,item) ：在数组中添加/删除元素，然后返回被删除的元素。
语法： arrayObject.splice(index,howmany,item1,.....,itemX)
index ：必需。整数，规定起始元素的位置，使用负数可从数组结尾处规定位置。
howmany ：必需。要删除的元素数量。如果设置为 0，则不删除元素。
item ：可选。向数组添加的新元素。
> arr = [11,22,33,44] < [object Array]: [11, 22, 33, 44] > arr.splice(1,2,'a','b','c') // 从下标1的位置，删除2个元素，并且在这个位置插入新的元素 < [object Array]: [22, 33] > arr // 操作后的数组 < [object Array]: [11, "a", "b", "c", 44] > arr.splice(4,0,'1,2,3) < [object Array]: [11, "a", "b", "c",1,2,3, 44]
arr.slice() ：切片arr.reverse() ：反转arr.join() ：把数组中的所有元素拼接为一个字符串。参数可选，指定要使用的分隔符。如果省略参数，则使用逗号作为分隔符。arr.concat() ：连接两个或多个数组。参数可以是具体的值，也可以是数组对象。可以是任意多个。arr.sort() ：对数组的元素进行排序
字典
a = {'a':1,'b':2,'c':3,}
{a: 1, b: 2, c: 3}
a['a']
1
定时器
使用setInterval可以创建一个定时器，第一个参数是要执行的代码（一般是一个函数），第二个参数是间隔时间（ms）。
弹框实例：
<script> // 创建一个定时器 // 第一个参数可以是一个函数，第二个参数是间隔时间（ms） setInterval("alert('Hello word!')", 5000) </script>
跑马灯示例
charAt() 方法可返回指定位置的字符
index 必需。表示字符串中某个位置的数字，即字符在字符串中的下标。
substring() 方法用于提取字符串中介于两个指定下标之间的字符
运用定时器和字符串的内容来实现一个字符串滚动显示的效果：
<body> <div id="i1">欢迎来到火星</div> <script> function f() { var tag = document.getElementById("i1"); var a = tag.innerText; var b = a.charAt(0); var c = a.substring(1,a.length); var d = c + b tag.innerText = d } setInterval("f()",1000) </script> </body>
JavaScript 语句
for/in 循环
遍历的是索引，不是值。遍历一个数组，遍历的就是数组的下标：
a = ['a','b','c','d']
(4) ["a", "b", "c", "d"]
for (i in a) {console.log(i)}
VM242:1 0
VM242:1 1
VM242:1 2
VM242:1 3
for (i in a) {console.log(a[i])}
VM254:1 a
VM254:1 b
VM254:1 c
VM254:1 d
遍历一个字典，就是遍历字典的key：
a = {'k1':'v1','k2':'v2','k3':'v3'}
{k1: "v1", k2: "v2", k3: "v3"}
for (i in a){console.log(i,a[i])}
VM333:1 k1 v1
VM333:1 k2 v2
VM333:1 k3 v3
for 循环
这种for循环是用的比较多的。但是这种循环驾驭不了字典的key，所以遍历不了字典
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
> for (var i=0; i<5; i++){ console.log(i) } 0 1 2 3 4
if 语句
if (条件 1)
{
当条件 1 为 true 时执行的代码
}
else if (条件 2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}函数
function 函数名（形参）{
函数体
}
DOM
文档对象模型 DOM（Document Object Model）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
直接查找
document.getElementById() ：根据ID获取一个标签document.getElementsByName() ：根据name属性获取标签集合document.getElementsByClassName() ：根据class属性获取标签集合document.getElementsByTagName() ：根据标签名获取标签集合
根据ID获取到的是唯一的值，返回的是对象。其他的方法获取到的值可能是多个，返回的都是包含每一个对象的数组。
可以通过获取对象的innerText属性，来获取到标签中的文本内容。也可以通过修改这个属性，来修改页面的内容。
<div id="i1" class="c1">我是id是i1，class是c1</div> <span>a</span> <span>b</span> <span>c</span> <span>d</span> <script> i=document.getElementById('i1') alert(i.innerText) c = document.getElementsByTagName("span") for (var j = 0;j< c.length;j++){ c[j].innerText = j; } </script>
间接查找
parentElement ：父标签children ：所有子标签集合，这个是数组firstElementChild ：第一个子标签lastElementChild ：最后一个子标签nextElementtSibling ：下一个兄弟标签previousElementSibling ：上一个兄弟标签
<div>第一个标签</div> <div>我是父标签 <div id="i1">我是i1 <div>我是子标签1</div> <div>我是子标签2</div> </div> </div> <div>（空）</div>
console下执行
i1 = document.getElementById('i1'); // 先获取到i1标签的对象
// 子标签集合第一个元素的，下一个兄弟标签的，文本内容
alert(i1.children[0].nextElementSibling.innerText);
// 修改父标签的下一个兄弟标签的内容
i1.parentElement.nextElementSibling.innerText = "我是父标签的兄弟";
//获取父标签的上一个菜单
i1.parentElement.previousSibling.innerText
文本内容进行操作
innerText
操作内容
innerText ：开始和结束标签之间的文本内容innerHTML ：开始和结束标签之间的 HTML 内容value ：元素的值
操作对象的class属性
className ：获取所有类名
classList ：获取class名字的列表classList.add ：添加一个类名classList.remove ：删除一个类名
<body> <div id="i1">我是i1</div> <script> d1 = document.getElementById('i1'); d1.className = 'i1 i2 i3'; alert(d1.className); d1.classList.remove('i2'); d1.classList.add('i4'); alert(d1.className); </script> </body>
事件
- onclick ：事件会在对象被点击时发生。
- onmouseover ：事件会在鼠标指针移动到指定的对象上时发生。
事件句柄 (Event Handlers)
| 属性 | 此事件发生在何时 |
|---|---|
| onabort | 图像的加载被中断。 |
| onblur | 元素失去焦点。 |
| onchange | 域的内容被改变。 |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 |
| onfocus | 元素获得焦点。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 一张页面或一幅图像完成加载。 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 重置按钮被点击。 |
| onresize | 窗口或框架被重新调整大小。 |
| onselect | 文本被选中。 |
| onsubmit | 确认按钮被点击。 |
| onunload | 用户退出页面。 |
- this ：当前正在操作的标签
- event ：封装了当前事件的内容
- 事件链以及跳出
模态对话框
单独定义一个隐藏的class,那个标签需要应用到这个隐藏的，就使用函数加上这个class名
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; position: fixed; left: 50%; top: 50%; margin-top: -200px; margin-left: -250px; background-color: white; z-index: 10; } .c3{ display: none; } .c4{ padding-top: 200px; padding-left: 250px; } </style> </head> <body style="margin: 0 auto"> <div> <input type="button" value="添加" onclick="show()" /> </div> <div class="c1 c3" id="i1"> </div> <div class="c2 c3 c4" id="i2"> <p> <input type="text" /> </p> <p> <input type="text" /> </p> <p> <input type="button" value="确认" onclick="close_()"/> <input type="button" value="取消" onclick="close_()"/> </p> </div> <script> function show() { document.getElementById('i1').classList.remove('c3') document.getElementById('i2').classList.remove('c3') } function close_() { document.getElementById('i1').classList.add('c3') document.getElementById('i2').classList.add('c3') } </script> </body>
全选、取消、反选
操作选择框：对于单选框（type="radio"）和复选框（type="checkbox"），可以通过checked属性获取它当前的状态，true为选中，false未选中。也可以通过赋值来改变它的状态。
<body> <div> <input type="button" value="全选" onclick="chooseall()" /> <input type="button" value="取消" onclick="cancelall()" /> <input type="button" value="反选" onclick="invertall()" /> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>1.1.1.2</td> <td>191</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>1.1.1.3</td> <td>192</td> </tr> </tbody> </table> </div> <script> function chooseall(){ var tbody = document.getElementById('tb'); var tr_list = tbody.children; for (var i= 0;i<tr_list.length;i++){ var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function cancelall(){ var tbody = document.getElementById('tb'); var tr_list = tbody.children; for (var i= 0;i<tr_list.length;i++){ var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } function invertall(){ var tbody = document.getElementById('tb'); // 获取tbody标签 var tr_list = tbody.children; //获取tr标签 for (var i= 0;i<tr_list.length;i++){ var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; //循环tr标签，获取每个tr标签的第一个字标签，继续获取字标签 if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;} //checkbox.checked既可获取值也可赋值。获取checkbox的值，如果是true修改值为fales,如果为fales,修改值为true } } </script> </body>
子菜单的隐藏与展开
<head> <meta charset="UTF-8"> <title>Title</title> <style> .item .header{ background-color: blue; color: red; height: 36px; line-height: 36px; } .hide{ display: none; } </style> </head> <body> <div style="height: 48px"></div> <div style=" 500px ;"> <div class="item"> <div id="i4" class="header" onclick="change('i4')">菜单1</div> <div class="conrent hide"> <div>内容1</div> <div>内容2</div> <div>内容1</div> </div> </div> <div class="item"> <div id="i1" class="header" onclick="change('i1')">菜单2</div> <div class="conrent hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id="i2" class="header" onclick="change('i2')">菜单3</div> <div class="conrent hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div id="i3" class="header" onclick="change('i3')">菜单4</div> <div class="conrent hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script> function change(nid) { var a = document.getElementById(nid); var b = a.parentElement.parentElement; var c = b.children; for(i=0;i<c.length;i++){ var d =c[i]; d.children[1].classList.add('hide'); } a.nextElementSibling.classList.remove('hide') } </script> </body>