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{ 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="50%;margin:0 auto;"> <div>欢迎光临</div> </div> </div> <div style="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> ---