js的存在形式：
1.存在于head中<script type="text/javascript"></script>
2.存在于js文件中，但需要引入
js文件：
创建JS文件后，在需要的网页设计的代码中引入：<script src="commons.js"></script>
3.放在body标签内部的最下方，即先加载内容再加载js文件
4.采用页面加载完之后执行的方式（防止找不到标签）
window.onload=function(){}
js的注释：单行：//
：多行：/**/
声明变量：#全局变量：name=""
#局部变量：var name=""
定义函数：
function func(){}
基本数据类型：
字符串转为整型：age="18";
i=parseInt(age);
字符串操作：
DOM:
1.找到标签
a.直接寻找
获取单个元素 document.getElementById('i1')
获取多个元素（列表）doucment.getElementsByTagName('div')
doucment.getElementsByClassName('c1')
b.间接寻找
tag=doucment.getElementById('i1')
parentElement #父节点标签元素
children #所有子标签
firstElementChild #第一个子标签元素
lastElementChild #最后一个子标签元素
nextElementtSibling #下一个兄弟标签元素
previousElementSibling#上一个兄弟标签元素
2.操作标签
a.innerText
获取标签中的文本内容
标签.innerText
对标签中的文本重新赋值（多个标签需要通过循环修改）
标签.innerText=""
b.className
tag.className #整体操作
tag.classList.add('样式名') #添加指定样式
tag.classList.remove('样式名') #删除指定样式
c.checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked=true（对选择框的操作）
简单的模态对话框以及全选功能的实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.c1{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: black;
opacity: 0.5;
z-index: 9;
}
.c2{
width:500px;
height:400px;
background-color: white;
position:fixed;
left:30%;
top:50%;
z-index: 10;
}
</style>
</head>
<body style="margin:0">
<div>
<input type="button" value="添加" onclick="func();">
<input type="button" value="全选" onclick="chooseall();">
<input type="button" value="取消" onclick="cancleall();">
<table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox" id="test"/>
</td>
<td>电脑1</td>
<td>111</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>电脑2</td>
<td>222</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>电脑3</td>
<td>333</td>
</tr>
</tbody>
</table>
</div>
<!--遮罩层-->
<div id='i1' class="c1 hide">
</div>
<!--遮罩层结束-->
<!--对话框弹出-->
<div id='i2' class="c2 hide">
<p><input type="text" /></p>
<p><input type="text" /></p>
<p>
<input type="button" value="取消" onclick="Cancle();" />
<input type="button" value="确定" />
</p>
<script>
function func() {
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
}
function Cancle() {
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide');
}
function chooseall() {
var tbody = document.getElementById('tb');
//获取所有tr
var tr_list = tbody.children;
//循环获取tr中的input标签，且Input这个子标签位于每个tr中的第一个孩子标签，即索引为0
for (var i = 0; i < tr_list.length; i++) {
var current_tr = tr_list[i];
var checkbox = tr_list[i].children[0].children[0];
checkbox.checked = true;
}
}
function cancleall() {
var tbody = document.getElementById('tb');
//获取所有tr
var tr_list = tbody.children;
//循环获取tr中的input标签，且Input这个子标签位于每个tr中的第一个孩子标签，即索引为0
for (var i = 0; i < tr_list.length; i++) {
var current_tr = tr_list[i];
var checkbox = tr_list[i].children[0].children[0];
checkbox.checked = false;
}
}
</script>
</body>
</html>
菜单栏的内容显示与隐藏（结合hover）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height:48px;
background-color: blue;
color:red;
line-height:48px;
}
.pg-menu{
height:35px;
background-color: aqua;
line-height: 35px;
}
.item .pg-menu:hover{
background-color: blue;
}
.content{
background-color: white;
}
.hide{
display:none;
}
</style>
</head>
<body style="margin:0;">
<div class="pg-header" />
<div style="width:50%;margin:0 auto;">
<div>欢迎光临</div>
</div>
</div>
<div style="width:480px;">
<div class="item">
<div id='i1' class="pg-menu" onclick="show('i1')">菜单1</div>
<div class="content hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div id='i2' class="pg-menu" onclick="show('i2')">菜单2</div>
<div class="content hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div id='i3' class="pg-menu" onclick="show('i3')">菜单3</div>
<div class="content hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
</div>
<script>
function show(num) {
var current_id=document.getElementById(num);
var item_list=current_id.parentElement.parentElement.children;
//修改其他兄弟标签
for(var i=0;i<item_list.length;i++){
var current_item=item_list[i];
current_item.children[1].classList.add('hide')
}
//修改传进来的id的标签
//因为hide属性位于id属性的下一个标签，也就是兄弟标签
current_id.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html>
定时器：
setInterval('执行的代码',间隔时间)
---定时器实例（跑马灯实验）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">这是一个实验</div>
<script>
function func(){
// 根据ID获取指定标签的内容,定于局部变量接受
var tag = document.getElementById('i1');
// 获取标签内部的内容
var content = tag.innerText;
//获取字符串的索引为0的元素
var f = content.charAt(0);
//从索引为1到字符串最后切割字符串
var l = content.substring(1,content.length);
//拼接字符串
var new_content = l + f;
//更新到浏览器窗口
tag.innerText = new_content;
}
//用定时器循环这个函数
setInterval('func()', 500);
</script>
</body>
</html>
---
知识兔