JavaScript简介
JavaScript 是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成：
- ECMAScript，由 ECMA-262 定义，提供核心语言功能；
- 文档对象模型（DOM），提供访问和操作网页内容的方法和接口；
- 浏览器对象模型（BOM），提供与浏览器交互的方法和接口。
JavaScript 的这三个组成部分，在当前五个主要浏览器（IE、Firefox、Chrome、Safari 和 Opera）中
都得到了不同程度的支持。其中，所有浏览器对 ECMAScript 第 3 版的支持大体上都还不错，而对
ECMAScript 5 的支持程度越来越高，但对 DOM 的支持则彼此相差比较多。对已经正式纳入 HTML5 标
准的 BOM来说，尽管各浏览器都实现了某些众所周知的共同特性，但其他特性还是会因浏览器而异。
在HTML中使用JavaScript
把 JavaScript 插入到 HTML 页面中要使用 <script> 元素。使用这个元素可以把 JavaScript 嵌入到
HTML页面中，让脚本与标记混合在一起；也可以包含外部的 JavaScript文件。而我们需要注意的地方有：
- 在包含外部 JavaScript 文件时，必须将 src 属性设置为指向相应文件的 URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件。
- 所有 <script> 元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用 defer 和async 属性的情况下，只有在解析完前面 <script> 元素中的代码之后，才会开始解析后面<script> 元素中的代码。
- 由于浏览器会先解析完不使用 defer 属性的 <script> 元素中的代码，然后再解析后面的内容，所以一般应该把 <script> 元素放在页面最后，即主要内容后面， </body> 标签前面。
- 使用 defer 属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
- 使用 async 属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
- 使用 <noscript> 元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下，浏览器不会显示 <noscript> 元素中的任何内容。
注释
- 单行注释 //
- 多行注释 /**/
引入脚本
- 在HTML文件中既可以通过外部引入js脚本，也可以在内部直接添加脚本
- 外部引入（文件路径和类型，可以放在head中，也可以放在body中（最好在body最后））：<script src="js/jsDemo01.js" type="text/javascript"></script>
内部定义：
<script type="text/javascript"> window.onload = function(){ document.write("<h1>HelloWorld</h1>"); //alert("HelloWorld"); } </script>
变量：
- 数据类型
/** * JavaScript属于弱数据类型的语言,声明变量的时候不需要声明数据类型，也可以不用赋初始值 * ;可以省略 * 严格区分大小写 * 数据类型 * 数值型：number * 字符型：string * 布尔型：boolean * 未定义：undefined * 对象型：object */
- 通过var或let声明变量，与Java不同，
- 可以通过typeof(var v)函数获得变量的类型
流程控制及循环：
- for循环、do--while、while--do、for--in
- switch--case、if--else
- 都和Java差不多
函数：
- 常用系统函数：
//parseInt();用于将字符串转换为整型数字,会自动去掉小数点之后的值 var par = parseInt(str); //parseFloat();用于将字符型转为浮点型 var par1 = parseFloat(str); //isNaN();用于检查参数是否是一个非数字,如果是数字就返回false //alert(isNaN(111)); //setInterval();每隔一段时间执行一次 setInterval(function() { document.write("hello" + "<br />"); }, 1000); //setTimeout();隔一段时间之后再开始执行一次,执行完就结束 setTimeout(function() { document.write("hello000000" + "<br />"); }, 2000);
- 自定义函数（有参、无参、返回但是不需要声明返回值）：
//求0--num之间的和,在定义参数时不需要声明数据类型， function fun02(num1,num2){} //调用函数时实际出入的参数与函数本身的参数个数、类型没关系，控制台不会报错
- window对象：
---window对象--- //获取浏览器的宽高，并赋值 var width = window.screen.width; var height = window.screen.height; //打开窗口 var win; function openW(){ win = window.open(); } //获取键盘码事件 e.keyCode
- 日期时间相关的函数
---时钟特效--- //获取系统的时间 var time = new Date(); //获取年份。。。。。。。 var year = time.getFullYear(); var month = time.getMonth()+1; var day = time.getDate(); var week = time.getDay(); var hour = time.getHours(); var minute = time.getMinutes(); var second = time.getSeconds(); //在HTML中添加内容 innerHTML
- history函数
| 方法 | 描述 |
| back() | 加载 history 列表中的前一个 URL。 |
|
forward() |
加载 history 列表中的下一个 URL。 |
| go() | 加载 history 列表中的某个具体页面。 |
<!-- 历史中的后一个 --> <a href="#" onclick="javascript:history.back()">后退</a> <!-- 历史中的前一个 --> <a href="#" onclick="javascript:history.forward()">前进</a>
获取对象
- 获取对象的四种方式
- 通过id获取
- 通过标签名获取（数组）
- 通过类名获取（数组）
- 通过name属性获取（数组）
//通过ID获取DOM对象 document.getElementById(id值) var obj = document.getElementById("test"); //给获得的对象obj绑定一个单击事件 obj.onclick = function(){ //innerHTML获取到对象中的所有内容 alert(obj.innerHTML); //innerText只获得文本 } //通过标签名获取DOM对象数组 var objlis = document.getElementsByTagName("li"); //alert(objlis.length); //通过class属性获取 var objli_class = document.getElementsByClassName("test"); //通过name属性获取 getElementsByName("name值"); var obj_name = document.getElementsByName("name")
//通过标签名获取h1 var h1s = document.getElementsByTagName("h1"); h1s[0].innerText = "第一个h1标签中的内容";
//向对象中添加内容
obj.innerText = obj.textContent + "我从来也不骑";
实例1：树形菜单点开、收回
- 效果：点击后会打开菜单，点击别的之前的菜单会自动收回
- HTML文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>树形菜单</title> <script src="../js/树形菜单.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="../css/树形菜单.css"/> </head> <body> <ul> <li id="lm01" class="lm"> <h3>栏目1</h3> <div class="nr"> <p>内容1</p> <p>内容1</p> <p>内容1</p> </div> </li> <li id="lm02" class="lm"> <h3>栏目2</h3> <div class="nr"> <p>内容2</p> <p>内容2</p> <p>内容2</p> </div> </li> <li id="lm03" class="lm"> <h3>栏目3</h3> <div class="nr"> <p>内容3</p> <p>内容3</p> <p>内容3</p> </div> </li> <li id="lm01" class="lm"> <h3>栏目4</h3> <div class="nr"> <p>内容1</p> <p>内容1</p> <p>内容1</p> </div> </li> <li id="lm02" class="lm"> <h3>栏目5</h3> <div class="nr"> <p>内容2</p> <p>内容2</p> <p>内容2</p> </div> </li> <li id="lm03" class="lm"> <h3>栏目6</h3> <div class="nr"> <p>内容3</p> <p>内容3</p> <p>内容3</p> </div> </li> <li id="lm01" class="lm"> <h3>栏目7</h3> <div class="nr"> <p>内容1</p> <p>内容1</p> <p>内容1</p> </div> </li> <li id="lm02" class="lm"> <h3>栏目8</h3> <div class="nr"> <p>内容2</p> <p>内容2</p> <p>内容2</p> </div> </li> <li id="lm03" class="lm"> <h3>栏目9</h3> <div class="nr"> <p>内容3</p> <p>内容3</p> <p>内容3</p> </div> </li> </ul> </body> </html>
- css文件
* {
padding: 0px;
margin: 0px;
}
li {
list-style: none;
300px;
text-align: center;
color: red;
/* 背景渐变色 */
background-image: linear-gradient(90deg, pink, aqua);
}
p {
color: #FFFFFF;
}
h3 {
//鼠标手势变为手型
cursor: pointer;
}
.nr {
display: none;
}
- JavaScript文件
window.onload = test02; /*第二种方式*/ function test02() { //1、获取所有栏目 var lms = document.getElementsByClassName("lm"); //2、给所有的栏目绑定单击事件 for (var i = 0; i < lms.length; i++) { //bind(i); bindfor(i); } } /*其他收回*/ function bindfor(index) { //获取所有栏目 var lms = document.getElementsByClassName("lm"); var nrs = document.getElementsByClassName("nr"); //给栏目绑定单击事件 lms[index].onclick = function(){ for (var j = 0;j < nrs.length;j ++) { if (index == j) { if (nrs[index].style.display != "block") { nrs[index].style.display = "block"; } else{ nrs[j].style.display = "none"; } } else{ nrs[j].style.display = "none"; } } } } function bind(index) { //获取所有栏目 var lms = document.getElementsByClassName("lm"); lms[index].onclick = function() { //alert(index); var nrs = document.getElementsByClassName("nr"); if (nrs[index].style.display != "block") { nrs[index].style.display = "block"; } else { nrs[index].style.display = "none"; } } }
案例2：tab切换
- 效果图：点击后会切换到别的内容，按钮也会变颜色，当点击其他按钮，之前的按钮会恢复到之前的状态
- HTML、css、js代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/tab切换.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="../css/tab切换.css" /> </head> <body> <div id="con"> <div id="top"> <div class="btn"> 按钮1 </div> <div class="btn"> 按钮2 </div> <div class="btn"> 按钮3 </div> </div> <div id="bottom"> <div class="content">内容1</div> <div class="content">内容2</div> <div class="content">内容3</div> </div> </div> </body> </html>
*{
margin: 0px;
padding: 0px;
}
#con{
600px;
height: 400px;
margin: auto;
border: 1px solid red;
}
#top div{
height: 100px;
198px;
border: 1px solid yellow;
text-align: center;
line-height: 100px;
background-color: pink;
float: left;
cursor:pointer;
}
#bottom{
clear: both;
}
#bottom div{
height: 298px;
background: aquamarine;
color: red;
font-size: 66px;
text-align: center;
line-height: 298px;
}
#bottom div:nth-child(2){
display: none;
}
#bottom div:nth-child(3){
display: none;
}
//当窗口加载完成时执行函数 window.onload = test02; function test02() { //1、获取按钮 var btns = document.getElementsByClassName("btn"); //2、遍历按钮 for (var i = 0; i < btns.length; i++) { //调用方法并将i传递给方法 change(i); } } function change(index) { //1、获取按钮 var btns = document.getElementsByClassName("btn"); //2、 获取内容 var cons = document.getElementsByClassName("content"); //为每个按钮添加点击事件 btns[index].onclick = function() { //遍历按钮的个数 for (var j = 0; j < btns.length; j++) { //如果点击的按钮相等 if (index == j) { //内容显示出来，按钮颜色变红色 cons[index].style.display = "block"; this.style.backgroundColor = "red"; } else { //如果不想等，内容不显示，按钮颜色不变化 cons[j].style.display = "none"; btns[j].style.backgroundColor = "pink"; } } } }
案例3：check全选、反选
- 效果图：当点击全选时，下面的按钮全选中，当点击反选时，下面的多选按钮状态和之前的相反
- 三种代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/全选反选.js" type="text/javascript" charset="utf-8"></script> </head> <body> <input type="checkbox" id="all" />全选 <input type="checkbox" id="fan" />反选 <br/><br/> <input type="checkbox" name="hob" />吃 <input type="checkbox" name="hob" />喝 <input type="checkbox" name="hob" />玩 <input type="checkbox" name="hob" />了 <input type="checkbox" name="hob" />学习 <input type="checkbox" name="hob" />电影 <input type="checkbox" name="hob" />音乐 <input type="checkbox" name="hob" />运动 <input type="checkbox" name="hob" />阅读 <input type="checkbox" name="hob" />睡觉 </body> </html>
window.onload = function(){ //获取全选按钮 var all = document.getElementById("all"); //获取反选按钮 var fan = document.getElementById("fan"); //获取爱好 var hobs = document.getElementsByName("hob"); //给全选按钮绑定单机时间 all.onclick = function(){ var f = this.checked; for (var i = 0;i <hobs.length;i ++) { //让爱好的选中状态和全选按钮一致 hobs[i].checked = this.checked; } } //给全选按钮绑定单机时间 fan.onclick = function(){ for (var i = 0;i <hobs.length;i ++) { //让爱好的选中状态和反选按钮一致 //！取反，与选中的对象相反 hobs[i].checked = !hobs[i].checked; } } }