JavaScript

一.概述

1.JavaScript是什么?

JavaScript是一种运行在客户端的脚本语言.

2.JavaScript在html中的使用方法?

1.行内式:

<div onclick="alert('it666')">我是div</div>

2.内嵌式:

<script>
    function surprise() {
        alert('恭喜你中了一百万')
        console.log("1");
    }
</script>
<div onclick="surprise()">我是div</div>

3.外部引入js
引用本地资源：

<script src="../../js/js4.js" type="text/javascript" charset="utf-8"/>

引入网上资源：可以引入官方的一些库，如下引入jQuery，完全可以省略吊复制粘贴到本地这一步(注意不要写成闭合标签的形式)。

<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>

二.javascript的基本语法

1.输入输出语句

1.promt(“请输入”):浏览器弹出弹窗，并给出提示"请输入"，然后返回一个字符串类型的变量
2.alert（“xxx”）：浏览器弹出警告框
3.console.log(“xxx”);浏览器控制台打印出信息

<script>
    str= prompt("请输入你要输入的");
    alert(str);
    console.log(str);
</script>

2.javascript中的变量

  1.变量类型可随意转换
js是动态语言，某一个变量可以任意变化而不用强制类型转换。我们声明变量可以直接用，而不用变量类型说明。
  2.变量的数据类型
Number：1.默认为0 2.Infinity是无穷大，-Infinity是无穷小
Bealean
String
Null：初始化的变量（变量存在但是没有赋值）
Undefined：未初始化的变量（不存在的变量）
  3.变量数据类型的判断
typeof判断基本数据类型
instanceof判断引用类型
  4.数字变量与字符串变量之间的转变
数字转变成字符串：
方法1.num.toString()
方法2.String（num）
方法3.“我是字符串”+num；隐式转换，与字符串+
字符串转变成数字
方法1.parseInt（str），parserFloat(str)
方法2.Number（“2”）
方法3.‘12‘-0；隐式转换,与数字-* /.

3.javascript中的函数定义

  1.函数声明法

<script>
    function fun1(){
        console.log("1");
    }
</script>

  2.变量赋值法

<script>
    var fun1=function(){
        console.log("1");
    }
</script>

【注意】使用变量赋值法，函数调用时要在函数声明之后，不然会报错：fun1 is not a function
原因：1.js从上往下执行会先将变量和函数声提升到作用域的顶点，但是赋值语句是会被留在原地而不会立即执行的，因此此时fun1是Undefined。

3.javascript中的对象

  1.js利用变量创建对象

<script>
    var obj={//1.创建对象
        name:'dsaf',
        age:18,
        helloWorld:function (){
            console.log("hello World");
        }
    }
    obj.sex="男";//2.添加属性
    obj.helloJs=function (){//3.添加方法
        console.log("hello JavaScript");
    }
    obj.sex;//4.调用属性
    obj.helloJs();//5.调用方法
</script>

  2.js利用构造方法创建对象

<script>
    function Star(name,age,sex){
        this.name=name, 
        this.age=age,
        this.sex=sex
    }
    var star1=Star("张三",18,"男");
    var start2=Star("李四",38,"男");
</script>

  3.js利用new Object()创建对象
先生成对象，再往里面加属性和方法

<script>
    var star1=new Object();
    star1.name="张三";
    start1.age=16;
    star1.sex="男";
</script>

4.javascript中的数组

1.创建数组：

<script>
    var arr1=[1,2,3];//1.固定长度的数组
    var arr2=new Array();//2.创建空数组
    var arr3=new Array(3);//3.长度为3的数组
    var arr4=new Array(1,2,"3","sadfas",3);//4.已经存在4个数的数组
</script>

2.增删元素和强制扩张数组

<script>  
    arr1.unshift("1","sdfsaf",3);//数组的头部添加元素
    arr2.push("1",2,"3");//数组的末尾添加元素
    arr1.shift();//数组的头部删除一个元素
    arr2.push();//数组的末尾删除一个元素
    arr1[100]=1;//强制扩张，中间补上空元素
</script>

3.数组查找和排序

<script>
    var arr1=[1,2,3,4,5,6,7,8,'a','b','c',12];//1.固定长度的数组
    console.log(arr1.toString());//得到数组值的字符串
    alert(arr1.indexOf('c'));//从左往右数第一个‘c'的数组下标
    alert(arr1.lastIndexOf(8))//从右往左数第一个8的数组下标
    arr1.sort();//从小到大排序
    arr1.reverse();//完全颠倒数组中元素的顺序 
</script>

4.数组额外功能

<script>
    var arr1=[1,2,3,4,5,6,7,8,'a','b','c',12];//1.固定长度的数组
    var arr3=arr1.concat(arr2);//得到一个连接arr1和arr2的新数组
    arr1.slice(0,3);//返回下标为0,1,2的元素
    arr1.splice(0,3);//删除并返回下标为0,1,2的元素
</script>

5.javascript修改CSS格式

注意：由于javascript不能识别"-"，因此原来CSS中所有-都去掉，并且后一个字母大写

<script>
   div.style.backgroundColor='purple';
</script>

三.javacript的DOM（Document Object Model）文档对象模型

基本概念

  1.节点与元素节点的区别
元素节点是包含标签的，而元素节点包含文本（任何字符串包括1.换行符号2.空格行3.文本等）和标签。如下所示获取第一个子节点和子元素,获取子节点只得到了#Text文本（这里就是一个换行符号）

<div class="father">
    <div id="001" class="example"> class="example" 的段落。</div>
    <div id="002" class="example"> class="example" 的段落。</div>
</div>
<script>
    father=document.querySelector(".father");
   console.log(father.firstChild);//第一个子节点
    console.log(father.firstElementChild);//第一个子元素
</script>

---

1.Dom获取元素的方式

  1.获取元素

<p id="001" class="example"> class="example" 的段落。</p>
<script>
    div1=document.getElementById("001");//1.通过ID获取元素（ID具有唯一性）
    list=document.getElementsByTagName("p");//2.通过标签名获取元素的集合。list1是一个伪数组(或空数组)
    list2=document.getElementsByClassName("example");//3.通过类名获取元素的集合。list2是一个伪数组(或空数组)
    firstBox=document.querySelector(".example");//4.通过CSS选择器查找第一个符合条件的元素
    allBox=document.querySelectorAll(".example");//5.通过CSS选择器查找所有符合条件的元素
    console.log(allBox)
</script>

1.使用CSS选择器来查找元素需要把script放在标签的代码后面，否则查找不到。
2.什么是伪数组？
在上面获取元素时我们会看到伪数组这个概念，它们具有共同的性质：1.具有数组的length属性，也可以用arguments[3]来查找2.但是没有真正数组的一些增加删除修改数组的方法，我把它叫做伪数组。

  2.获取元素中的内容
1.value(单标签):input常用属性
2.innerText(双标签)1.获取或修改节点中的内容（不可识别其中的html标签）
3.innerHtml(双标签)2.获取或修改节点中的内容（可以识别html标签，且会保留空格和换行）

<script>
   var str=div.innerHTML;
   div.innerHTML='<div>您好</div>'//1.必须使用单引号2.不可在句末加分号
</script>

注意：innerHtml的使用：1.必须使用单引号2.不可在句末加分号

  3.通过父子兄弟关系获取元素和节点

<div class="father"> <div id="001" class="example"> class="example" 的段落。</div>
    <div id="002" class="example"> class="example" 的段落。</div>
    <div id="003" class="example"> class="example" 的段落。</div>
</div>
<script>
    father=document.querySelector(".father");
    example=document.querySelector(".example");
    example.parentNode;//得到父亲节点
    example.parentElement;//得到父亲节点
    nodeList=father.childNodes;//会返回一个NodeList集合，里面包含了所有子节点
    father.children;//会返回一个NodeList集合，里面仅包含了子元素
   father.firstChild;//第一个子节点
    father.firstElementChild;//第一个子元素
    father.lastChild;//最后一个子节点
    father.lastElementChild;//最后一个子元素
    example.nextSibling;//下一个兄弟节点
    example.previousSibling;//下一个兄弟元素
    example.nextElementSibling;//前一个兄弟节点
    example.previousElementSibling;//前一个兄弟元素
</script>

---

2.使用javascript创建节点

<div class="father">
   <div id="001" class="example"> class="example" 的段落。</div>
   <div id="002" class="example"> class="example" 的段落。</div>
   <div id="003" class="example"> class="example" 的段落。</div>
</div>
<script>
   father=document.querySelector(".father");
   var div=document.createElement('div');//创建一个div标签的节点
   div.innerHTML="你好啊";//给节点添加内容
   father.appendChild(div);//给father后面添加一个节点
   father.removeChild(father.firstElementChild);
</script>

3.Dom获取和修改属性的方式

   1.获取属性：

方法1：通过element.属性。仅可获得元素自带属性
方法2：element.getAttribute(‘属性’)。也可以获得程序员自己创建的自定义属性，且无论原来属性是什么类型，得到的都是一个字符串类型（要注意）。

   2.修改属性

方法1:element.属性=“值”；
方法2:element.setAttribute(‘属性’，值);主要针对于自定义属性

   3.移除属性

div.removeAttribute(‘index’);

   常见问题1:当我们要修改的属性过多时，我们往往会修改元素的类名来更换样式而不是将属性一个一个修改

---

4.事件基础-绑定和解绑事务

  1.什么是事件
事件是触发…的响应机制。事件三要素是：
1.事件源：被触发的对象
2.事件类型：如鼠标点击时，鼠标经过时
3.时间处理程序：就是一个function（）{}函数
  2.绑定和解绑事件的两个方法
1.传统绑定和解绑事件的方法

<p id="001" class="example"> class="example" 的段落。</p>
<script>
    document.querySelector(".example").onclick=function (){//注册事件
        alert("点击1下");
    }
    document.querySelector(".example").onclick=null;//解绑事件
</script>

2.使用监听器来注册和解绑事件

<p id="001" class="example"> class="example" 的段落。</p>
<script>
    var fun1=function (e){
        alert("1");
    };
    document.querySelector(".example").addEventListener('click', fun1);
    document.querySelector(".example").removeEventListener('click',fun1);
</script>

注意当使用匿名函数来注册监听器时由于不知道函数名因此是不能解绑的。
  3.Dom事件流理论
把事件的触发分为两个阶段，先是捕获阶段，然后是冒泡阶段，有些事件是捕获阶段触发，而有些事件是冒泡阶段触发。

常见冒泡阶段事件：onclick
无冒泡事件：onblus，onfocus，onmouseenter，onmouseleave。

---

5.事件进阶-事务对象的使用

当事务被定义之后，事务对象也就自然而然的存在了。实际上，每一个事件类型都指明了事务对象是谁。如鼠标点击类型，鼠标经过类型的事务对象是鼠标。
e.target:（标准）触发事务的对象
e.srcElement:(非标准) 触发事务的对象
e.type：事务类型
e.stopPropagation:(标准)阻止冒泡
e.cancelBubble():(非标准)阻止冒泡
e.preventDefault():(标准)阻止默认事件
e.returnValue：(非标准)阻止默认事件

注意：区分this和target：this是绑定事务的对象，而e.target是触发事务的对象。触发事务的对象和绑定事务的对象不一定要一致。可以是点击a时b变大，那this就是b，e.target就是a。

<p id="001" class="example"> class="example" 的段落。</p>
<script>
    var fun1=function (e){
        e.stopPropagation();
    };
    document.querySelector(".example").addEventListener('click', fun1);
</script>

  常见问题1.若一个元素内每个子元素都有相同的事件要绑定，要怎么写？
方法1.

<div class="father">
    <div id="001" class="example"> class="example" 的段落。</div>
    <div id="002" class="example"> class="example" 的段落。</div>
    <div id="003" class="example"> class="example" 的段落。</div>
</div>
<script>
    src="white.jpg";
    var list=document.querySelectorAll(".example");
    for(var i=0;i<list.length;++i){
        list[i].onclick=function (e){
            this.style.backgroundImage="url("+src+")";//src是url地址
        }
    }
</script>

方法二：
使用冒泡原理，不给子元素装监听器，给父亲元素装上监听器（父元素内的e.target就是触发事件的子节点）。

---

6.常见的鼠标事件

  1.常用鼠标事件

<p id="001" class="example"> class="example" 的段落。</p>
<script>
   document.querySelector(".example").onclick=function (e){
       alert("点击1下");
   }
</script>

1.onclick 是鼠标左键点击
2.onmouseover是鼠标经过
3.onmouseout鼠标离开
4.onfocus获得鼠标焦点
5.onblur失去鼠标焦点
6.onmousemove鼠标移动1px就会触发
7.onmouseup鼠标弹起就会触发
8.onmousedown鼠标按下就会触发

7.常见的键盘事件

<script>
   document.onkeydown=function (e){
       alert(e.key);
   }
</script>

1.onkeyup是按键弹起时
2.onkeydown是按下按键时
3.onkeypress按下时，但是不识别功能键如ctrl，shift。

四.BOM浏览器对象模型

1.窗口加载事件

当网页内容全部加载完之后才会触发该事件。且一个网页中只有一个onload会生效（最后一个）

<script>
    window.onload=function (){//方法1
        ...
    }
    window.addEventListener("load",function (e){//方法2
        ...
    })
</script>

2.调整窗口大小和滚动窗口触发事件

<script>
    window.onresize=function (e){//方法1
        ...
    }
    window.addEventListener("resize",function (e){//方法2
        ...
    })
</script>

滚动窗口触发

<script>
    window.onScroll=function (e){//方法1
        ...
    }
    window.addEventListener("scroll",function (e){//方法2
        ...
    })
</script>

3.定时器

setTimeout：触发一次就不再触发
setInterval：每隔x秒都触发一次
clearTimeout
clearInterval

<script>
	//1.开启定时器t1
    var t1=window.setTimeout(function (){
        alert(2)
    },5000);//5秒后触发一次就不再触发
    //2.开启定时器t2
    var t2=window.setInterval(function (){
        alert(1);
    },1000);//1秒后触发一次，并每隔1秒都触发一次
    //3.三秒后关闭这两个定时器
    window.setTimeout(function (){
        window.clearTimeout(t1);
        window.clearInterval(t2);
    },3000);
</script>

4.立刻页面跳转location

<script>
    window.location="test2.html?name=xu&age=19";//跳转界面
    window.location.assign("");//重定向跳转界面
    window.location.replace();//跳转界面，但不记录浏览历史
    window.location.reload();//刷新界面
    window.location.search;//是本页面的url地址
</script>

5.js获取元素的位置和大小:offset

<div class="father">
    <div id="001" class="example"> class="example" 的段落。</div>
    <div id="002" class="example"> class="example" 的段落。</div>
</div>
<script>
    father=document.querySelector('.father');
    father.offsetParent();//返回带定位的父元素，没有则返回body
    father.offsetTop;//相对于定位父元素(无则body)的上方距离(外边框为准,不含margin)
    father.offsetLeft;//相对于定位父元素(无则body)的左边距离(外边框为准，不含margin)
    father.offsetWidth;//左外边框距离右外边框的距离(不含margin，仅含border，padding，content)
    father.offsetHeight;//上外边框距离下外边框的距离(不含margin，仅含border，padding，content)
</script>

注意：1.以上返回都是不带单位的，如果要修改位置记得自己添加单位
2.offsetTop+offsetHeight等同于盒子底部到定位的最高处的距离哦！
3.offsetWidth和style中Width的区别？
offsetWidth值1.无单位2.padding+border+content3.只可读不可修改
Width值：1.有单位的字符串2.只有content的宽度3.只可读可写

6.js获取元素的位置和大小:client

<div class="father">
    <div id="001" class="example"> class="example" 的段落。</div>
    <div id="002" class="example"> class="example" 的段落。</div>
</div>
<script>
    father=document.querySelector('.father');
    father.clientTop;//本元素上边框的宽度
    father.clientLeft;//本元素左边框的宽度
    father.clientWidth;//本元素左边框到右边框的距离(内边框，即pardding+content)
    father.clientHeight;//本元素上边框到下边框的距离(内边框，即pardding+content)
</script>

7.js获取元素的位置和大小:scoll

<div class="father">
    <div id="001" class="example"> class="example" 的段落。</div>
    <div id="002" class="example"> class="example" 的段落。</div>
</div>
<script>
    father=document.querySelector('.father');
    father.scrollTop;//被卷去的头部（溢出部分）
    father.scrollLeft;//被卷去的左边（溢出部分）
    father.scrollWidth;//返回自身实际宽度（未溢出则等同于clientWidth，溢出则返回实际宽度）
    father.scrollHeight;//返回自身实际高度（未溢出则等同于clientWidth，溢出则返回实际高度）
</script>

页面被卷去的头部：window.pageYoffset
页面被卷去的左部：window.pageXoffset

五.javascript进阶：jQuery的使用（略讲）

 1.下载并使用jQuery

  1.下载jQuery

  进入jQuery官网https://jquery.com/download/下载得到一个jQuery.js的文件，或者进入里面然后自己复制里面的代码粘贴到一个xxx.js的文件中去。

  2.配置静态资源过滤器，防止被静态资源解析（springMvc项目需要）

在applicationContext.xml配置<mvc:annotation-driven/>静态资源过滤(防止视图解析器把这个静态资源请求给解析了)

  3.在html或jsp中引入jQuery

<script src="${pageContext.request.contextPath}/static/j.js">(src里面填入自己的地址就行)

 2.jQuery基本语法

1.jQurey的$

$就是jQuery的别称(完全可以用jQuery代替 $ )，它是jQuery中的顶级对象。

2.jQurey的选择器

3.jQuery高级语法

(1).jQuery的each方法

$(function () { 
    $.each([52, 97], function(index, value) {//index是数组下标0,1,2,3...  value对应each[]中的52,97
        alert(index + ': ' + value);//得到 0:52 1:97
    });
})