• javaScript，给页面添加动态效果和内容的
• 历史：1995年由网景公司发布 LiveScript同年更名为JavaScript简称JS，和java没啥关系 为了蹭热度。

一、JS特点

• js属于脚本语言，不需要编译，由浏览器解析执行。
• js可以嵌入到html代码中
• js基于面向对象，属于弱类型语言

二、JS优点

• 交互性：可以直接和用户进行交互
• 安全性：js语言智能访问浏览器内部的数据不能访问浏览器之外内容（电脑磁盘中的各种数据）

三、如何引入JS代码

3.1 在元素的事件中书写js代码

• 样例
  image.png
  
  
  image.png

• 代码
  <input type="button" value="点我试试！" onclick="alert('试试就试试')">

3.2 通过<script>标签添加js代码

<script type="text/javascript">
    alert("第二种引入方式"); 
</script>

3.3 把js代码写在单独的js文件中，通过<script>标签的src属性 引入js文件。

<script type="text/javascript" src="first.js"></script>

四、JS数据类型

4.1 所有数据类型

• 数值类型 number
• 字符串类型 string
• 布尔值类型 boolean
• undefined
• 对象类型

4.2 变量的声明和赋值

• var age = 18;
• var name = "小明";
• var isBoy = true/false;
• age="18";
• var x;

4.3 数值类型

• js中底层都是浮点型，在使用过程中会自动转换整数或小数

    int x = 5/2; //2 
    var x = 5/2; //2.5   
    var x = 4/2; //2
  

• NaN: not a number 不是一个数， 通过isNaN()函数进行判断

4.4 字符串类型

• 通过单引号或双引号修饰字符串

    var s1 = "abc";
    var s2 = 'abc';
  

4.5 布尔值类型

var b1 = true;
var b2 = false;

五、数据类型转换

var z = "abc"+18;

• 任何数字和NaN进行运算结果都为NaN

5.1 数值类型转换

1. 转字符串： 直接转 18-->"18"，"abc"+18 = "abc18"
2. 转布尔值： 0和NaN-->false，其它都转true
3. 在if括号里面的类型如果不是布尔类型会自动转成布尔类型

5.2 字符串类型转换

1. 转数值： 能转直接转,不能转转成NaN。比如："100"->100，"abc"->NaN
2. 转布尔值： 空字符串转成false 其它true,""->false，"abc"->true

5.3 布尔值转换

1. 转数值： true->1，false->0；20+true=21，20+false=20;
2. 转字符串: true->"true"，false->"false"，"abc"+true="abctrue"

5.4 undefined转换

1. 转数值： undefined->NaN，20+undefined=NaN
2. 转字符串： undefined->"undefined"，"abc"+undefined="abcundefined"
3. 转布尔值： undefined->false

5.5 对象类型为null时的转换

1. 转数值： null->0
2. 转字符串： null->"null"
3. 转布尔值: null->false

六、JS的运算符 + - * / typeof

1、和Java中的运算符大体相同

2、==和===区别（重点）

• ==会先将等号两边的变量类型统一，统一完后再比较内容
  • "66"==66 true
• ===会先比较类型是否相同，类型相同后再比较内容
  • "66"===66 false

3、两数相除会自动转换小数和整数

• 5/2=2.5
• 4/2=2

4、typeof: 获取变量的类型

typeof 18  //number
typeof 66 + 6   //"number6"

七、JS语句 （请参考其他语言，比如 java，下面是注意点）

1、包括： if / else / if else / while / do while / for / switch case

• 具体语法与其他计算机语言基本一致，略有差别，参考java

2、需要布尔值的地方如果不是布尔值会自动转成布尔值

• for循环中 把 int改成var ,不支持增强for循环(for each)

八、函数

8.1 函数定义

• 第一种

    function 函数名(参数列表){
        return 返回值;
    }
  

• 第二种

    var 函数名 = function(参数列表){
        return 18;
    }
  

8.2 一些和页面元素相关的常用函数

1. 获取页面中的元素对象

    var input = document.getElementById("id");
   

2. 给文本框赋值和取值

    input.value="abc";//赋值
    var s = input.value;//取值
   

3. 给元素添加文本内容

    元素对象.innerText = "文本内容";
   

4. 给元素添加html代码

    元素对象.innerHTML="<h1>abc</h1>";
   

九、相关、重要的api和操作

9.1 String相关api

1、 创建String的两种方式：

• 第一种

    var s1 = "abc";
  

• 第二种

    var s2 = new String("abc");
  

2、 转大小写

"abC".toUpperCase();//转大写
"NBA".toLowerCase();//转小写

3、 获取某个字符串在另外一个字符串中出现的位置 从0开始

"java hello".indexOf("a"); //第一次出现的位置
"java hello".lastIndexOf("a");//最后一次出现的位置

4、 截取字符串

• 字符串.substring(开始索引，结束索引)

    例如："java hello".substring(start,[end]);
  

• end可省略，只写start截取到最后

• 注意：前闭后开，若写end 截取到end的位置且不包含end位置的字符

5、 替换字符串 【！并没有把原字符串修改掉！】

• 字符串.replace(要被替换的内容,替换为内容)

    例如："java hello".replace("hello","helloworld"); //得到"java helloword"
  

• 替换后得到的字符串是原字符串复制一份并替换后得到的结果，所以【！并没有把原字符串修改掉！】如果想完全替换原字符串变量：

    var s = "<h1>[c]</h1>"
    s = s.replace("[c]","lala"); 
  

6、 拆分字符串

• 字符串.split(拆分参照字符、字符串、正则)，得到的是字符串数组。

    var names = "刘德华,张学友,赵四儿,黎明".split(",");
    for(var i=0;i<names.length;i++){
        var name = names[i];
        alert(name);
    }
  

9.2 number相关常用函数

1、 四舍五入 toFixed(n)保留n位小数

var x = 3.1415926;
x.toFixed(3);//得到3.14

9.3 数组

1、 创建数组的两种方式

• 第一种
  var arr1 = ["刘德华",18,true];
• 第二种
  var arr2 = new Array("刘德华",18,true);

2、 数组中添加数据

arr2.push("周杰伦");

3、 修改数组的长度

arr2.length=2;

4、 数组中获取数据 [数组下标] 没有角标越界

for(var i=0;i<arr2.length;i++){
     var x = arr2[i];
    alert(x);
}

5、 数组反转

var arr3 = [1,2,3];
arr3.reverse();

6、 数组排序

var arr4 = [5,7,2,9,6];
arr4.sort();
var arr5 = [23,15,2,100,30,8];
arr5.sort();

• 默认排序规则：以字符串的形式进行排序通过unicode编码比较第一个字符比较完比较第二个以此类推

• 自定义排序：

  //声明自定义的排序函数
  function mysort(a,b){
      //升序
      return a-b;
      //降序
      //return b-a;
  }
  arr.sort(mysort);
  

• 如果数组中保存的是对象，通过以下方式进行排序

  var persons = [p1,p2,p3,p4];
  function mysort(a,b){
      //升序
      return a.sal-b.sal;
      //降序
      //return b.age-a.age;
  } 
  

9.4 日期相关

1、 了解

• 服务器时间：服务器电脑的时间
• 客户端时间：用户电脑的时间

2、 获取客户端时间

var d1 = new Date();

3、 指定时间创建时间对象

• 通常时间来自服务器后手动将该时间以指定时间的形式创建时间对象

    var d2 = new Date("2018/08/01 18:36:50");
  

4、 获取和设置时间戳（距离1970年1月1日 08:00:00的毫秒数）

    d2.getTime();
    d2.setTime(1000);

5、 从date对象中获取单独的年月日时分秒 星期几

    d1.getFullYear();//年
    d1.getMonth(); //月份需要+1 从0开始
    d1.getDate();//号/日
    d1.getDay();//星期几
    d1.getHours(); //时
    d1.getMinutes();//分
    d1.getSeconds();//秒

6、 从date获取【年月日】和【时分秒】

    d1.toLocaleDateString();//年月日
    d1.toLocaleTimeString();//时分秒

9.5 正则表达式

1、 常用的一些匹配

• . ——匹配任意字符
• \w ——匹配任意字母、数字、下划线
• \s ——匹配任意空白
• \d 等价[0,9] ——匹配任意数字
• ^ 开始
• $ 结束
• [a,z]——匹配小写字母，中括号匹配内容的范围
• {n} ——匹配n次
• {n,} ——匹配至少n次
• {n,m} ——匹配n到m次

2、 创建正则的两种方式

• 方式一：

    var reg1 = /规则/模式;
  

• 方式二：

    var reg2 = new RegExp(规则,模式); //没有模式的话可以省略，反斜杠需要转义
  

3、 正则相关的函数

• 查找内容 如果模式为g全局查找 执行一次查询一个

    reg.exec(str); //在str字符串中查找符合reg正则表达式规则的内容
  

• 校验文本

    reg.test(str); //校验文本str是否符合规则
  

4、 字符串和正则相关的函数

• 查找

    str.match(reg); //查找 找出str中所有符合规则的字符串，组成一个数组返回
  

• 替换

    str.replace(reg,替换的内容); //查找str中符合规则的字符串并替换
  

十、 JS面向对象

10.1 创建JS对象

方式一：声明函数的形式创建对象

//定义
function Person(name,age){
    this.name=name;
    this.age=age;
    this.run = function(){
        alert("name:"+this.name+" age:"+this.age);
    }
}

//创建对象
var p = new Person("张三",18);
//调用对象的方法
p.run();  

方式二：声明变量的形式创建对象

//定义并创建
var student = {
    "name":"曹操",
    "age":28,
    "run":function(){
        alert("name:"+this.name+" age:"+this.age);
    }
}
//调用
student.run();

十一、 DHTML

• 简介： Dynamic(动态)超文本标记语言，这个不是新的技术，只是把所学的html,css,js结合到一起实现出来的内容
• DHTML包括：BOM和DOM
• BOM： Browser(浏览器) Object(对象) Model(模型), 包含了一部分和浏览器相关的对象 可以获取浏览器的请求地址，历史记录，浏览器窗口尺寸，浏览器版本。
• DOM： Document(文档) Object(对象) Model(模型),包含了和页面相关的内容

11.1 BOM浏览器对象模型

11.1.1 window

• window里面的对象称为全局对象 里面的方法称为全局方法 。全局对象和方法可以省略掉window。

• window中 常用的全局方法：

    alert();//提示框
    confirm();//确认框
    prompt();//弹出文本框
    parseInt()、parseFloat();//转为整形、浮点型
    isNaN();//是否为非数字
  

11.1.2 window中 常用的对象

• location

    location //地址
    location.href //用于获取和设置浏览器请求的地址  
    location.reload();  //刷新
  

• history 历史

  • 当前窗口的历史记录 窗口关闭后就没有了

      history.length //得到历史请求页面的数量
      history.back()  //返回上一个页面
      history.forward() //前往下一个页面
      history.go(num) //前往某个页面 0当前页面 1下一个页面 2下两个页面-1上一个页面
    

• screen 屏幕

    screen.width/height  //得到屏幕的宽高(像素)
    screen.availWidth/availHeight  //得到屏幕可用的宽高
  

• navigator 导航/帮助

    navigator.userAgent  //得到浏览器相关的版本信息
  

11.1.3 和window相关的事件

• window的点击事件 onclick
• 页面加载完成事件 onload
• 获取焦点事件 onfocus
• 失去焦点事件 onblur

11.2 DOM文档对象模型

• 学习DOM主要学习的就是对页面当中的元素进行增删改查操作

11.2.1 查找元素

• 通过id查找

    var input = document.getElementById("id");
  

• 通过标签名查找

    var divs = document.getElementsByTagName("div");
  

• 通过标签的name属性值查找

    var arr = document.getElementsByName("gender");
  

• 通过标签的class属性值查找

    var arr = document.getElementsByClassName("");
  

11.2.2 通过上下级关系获得元素

• 获取元素的上级元素

    元素对象.parentElement  //得到的是一个上级元素
  

• 获取元素的下级元素们

    元素对象.childNodes //得到的是一个数组里面装着多个元素和文本
  

11.2.3 创建元素

var div = document.createElement("div");

11.2.4 添加元素

• 添加到某个元素里面

    上级元素.appendChild(div);
  

• 添加到某个弟弟元素的上面

    上级元素.insertBefore(div,弟弟元素);
  

11.2.5 删除元素

上级元素.removeChild(被删除的元素);

11.2.6 修改元素的文本内容

元素对象.innerText(改成什么内容)

11.2.7 修改元素内部的html内容

元素对象.innerHTML(修改成什么内容)

11.2.8 修改元素的样式

元素对象.style.样式名称="样式的值";

11.2.9 获取文档窗口的宽高

document.body.parentElement.clientWidth
document.body.parentElement.clientHeight

十二、 定时器和eval()

12.1 eval()函数

• 可以将字符串以js代码的形式执行

12.2 定时器

12.2.1 setInterval 每隔一定时间执行（不停，直到手动停止）

• setInterval(函数名/回调函数,时间间隔);

    //用法1，执行内容直接写在内部
    setInterval(function () {
        alert(111);
    },1000)
    
    //用法2，使用执行函数
    setInterval(aaa,1000)
    
    function aaa(){
        alert(111);
    }
        
    //错误用法！！！可能导致不执行，或只执行一次
    setInterval(aaa(),1000)
    
    function aaa(){
        alert(111);
    }
  

  • 开启定时器 var timeId = setInterval(函数,时间)
  • 停止定时器，手动停止该定时器 clearInterval(timeId)

12.2.2 setTimeout 一定时间以后，执行对应函数（一次）

• setTimeout(函数,时间)

    //用法1，执行内容直接写在内部
    setTimeout(function () {
        alert(111);
    },1000)
        
    //用法2，使用执行函数
    setTimeout(aaa,1000)
        
    function aaa(){
        alert(111);
    }
        
    //错误用法！！！可能导致不执行，或只执行一次
    setTimeout(aaa(),1000)
        
    function aaa(){
        alert(111);
    }
  

十三、 事件

13.1 事么是事件

• 事件代表了某些特定的时间点，包括状态改变事件，鼠标事件，键盘事件
• 通俗理解：当页面元素发生交互、操作时候的事情，比如鼠标点击事件

13.2 常用事件

13.2.1 鼠标相关事件：

• onclick鼠标点击事件
• onmouseover鼠标移入事件
• onmouseout 鼠标移出事件
• onmousedown鼠标按下事件
• onmouseup鼠标抬起事件
• onmousemove鼠标移动事件

13.2.2 键盘相关事件：

• onkeydown(键盘按下)
• onkeyup(键盘抬起)

13.2.3 状态改变事件：

• onload（页面加载完）
• onchange(值发生改变)
• onblur(失去焦点)
• onfocus(获取焦点)
• onsubmit(提交)
• onresize(窗口尺寸发生改变事件)

13.3 事件绑定

方法一：在元素中添加事件属性

• 例子：点击的时候执行fn1()函数

  • html部分

      <input type="button" value="元素绑定事件" onclick="fn1(this)">
      <!--这里的this是事件元对象也就是input按钮-->
    

  • js部分

      function(ele){
          alert(ele);
          alert(this);  //this代表的是window对象
      }
    

方法二：通过js代码动态绑定事件。js代码和html代码分离 便于升级和维护

• 例子：mybtn点击的时候执行自定义的函数

  • js代码

      mybtn.onclick = function(){
          alert(this);  //this代表事件元，也就是mybtn按钮元素对象
      }
    

13.4 事件取消

• 通过给事件函数返回false，即可取消事件

    btn.onclick = function(){
        alert();
        return false;
    }
  

13.5 event对象

1. event对象中保存着和事件相关的信息

2. 通过event可以获得鼠标事件的坐标 event.clientX/Y

3. 通过event可以获得键盘事件的字符编码 event.keyCode

4. 通过event可以获得事件源 不同浏览器存在兼容性问题，支持两种写法：

    var obj = event.target; 
    var obj = event.srcElement
   

5. 以下代码可以解决兼容性问题

    var obj = event.target||event.srcElement;
   

13.6 事件传递（事件冒泡）

• 如果在同一个区域内有多个事件响应,比如，一个自带点击事件的div内部还有一个带点击事件的div，响应的顺序是类似气泡，从下往上，也就是从底层元素往上级元素执行，这个过程称为事件冒泡
• 如果某个元素里面有多个元素需要添加事件，则这个事件可以直接添加给此元素，通过事件源判断到底做什么事儿

十四、 jQuery

jQuery是一个js语言的框架，作用是简化js代码，本质任然是js

14.1 jQuery优势

• 简化js代码
• 可以像css一样通过选择器查找元素
• 可以直接修改元素的样式
• 解决兼容性问题

14.2 如何引入jQuery

• 因为此框架就是一个js文件 引入方式和一般js文件一样

    <script type="text/javascript" src="jquery源码或者min版本源码文件路径"></script>
  

  • 注意，可以将源码下载到项目中引入，也可以直接填写可用的jquery的CDN链接地址，若采用CDN，写代码测试的电脑需要联网，因为是实时引用网上的jquery资源。

14.3 $符号和jQuery

• $等价于jQuery

    ($("#id") == jQuery("#id")) = ture;//以后全部采用简单一点的$符号
  

14.4 jquery对象与js对象转换

• 由于jquery对js进行了简化和改进，所以两者中的对象类型并不相同，比如同一个按钮对应的js中对象和jquery中的对象的方法也不同，所以实际使用时需要将两者相互转化。

    $("#id") //jq获取id为id的对象
    var btn = document.getElementById("id");//js获取id为id的对象
  

• 把js对象转成jq对象，套上$()

    var jq = $(js);
  

• 把jq对象转成js对象

    var js = jq[0] 或者 jq.get(0);
  

14.5选择器（重点，用来获取对象，得到的都是jquery对象）

14.5.1 基本选择器 和css一样

• 标签名选择 $("div")
• id选择器 $("#id")
• 类选择器 $(".class"）
• 分组选择器 $("#id,.class,div")
• 任意元素选择器 $("*")

14.5.2 层级选择器

• $("div span") 匹配div下所有的span子孙元素
• $("div>span") 匹配div下的span子元素
• $("div+span") 匹配div后面相邻的span兄弟元素
• $("div~span") 匹配div后面所有的span兄弟元素

14.5.3 过滤选择器

• $("div:first") 匹配所有div中的第一个
• $("div:last") 匹配所有div中的最后一个
• $("div:even") 匹配所有div中的偶数位的元素 从0开始
• $("div:odd") 匹配所有div中的奇数位的元素 从0开始
• $("div:eq(n)") 匹配所有div中的第n个 从0开始
• $("div:lt(n)") 匹配所有div中小于n的所有元素 从0开始
• $("div:gt(n)") 匹配所有div中大于n的所有元素 从0开始
• $("div:not(.one)") 匹配所有div中 class不等于one的所有div元素

14.5.4 内容选择器

• $("div:has(p)") 匹配所有包含p标签的div
• $("div:empty") 匹配所有空的div
• $("div:parent") 匹配所有非空的div
• $("div:contains('abc')") 匹配所有包含文本abc的div

14.5.5 可见选择器

• $("div:hidden") 匹配所有隐藏的div

• $("div:visible") 匹配所有可见的div

• 显示隐藏相关的函数

    $("#abc").hide();//隐藏
    $("#abc").show();//显示
    $("#abc").toggle();// 如果当前隐藏则显示，如果显示则隐藏
  

14.5.6 属性选择器

• $("div[id]") 匹配有id属性的div
• $("div[id='d1']") 匹配有id=d1属性的div
• $("div[id!='d1']") 匹配有id不等于d1属性的div

14.5.7 子元素选择器

• $("div:nth-child(n)") n从1开始 匹配div中第n个子元素
• $("div:first-child") 匹配div中第一个子元素
• $("div:last-child") 匹配div中最后一个子元素

14.5.8 表单选择器

• $(":input") 匹配所有 文本框 密码框 单选 复选 。。。
• $(":password") 匹配所有密码框
• $(":radio") 匹配所有单选
• $(":checkbox")匹配所有复选框
• $(":checked") 匹配所有被选中的 单选、复选、下拉选
• $("input:checked") 匹配所有被选中的 单选、复选
• $(":selected") 匹配所有被选中的 下拉选

14.6 层级函数

• 获取某个元素的所有兄弟元素（同级别元素）

   $("d1").siblings("div"); //参数可以不写，不写代表所有兄弟，写了指特定元素类型
  

• 获取某个元素的哥哥元素（同级别在其上方最近的一个元素）

    $("d1").prev("div")；
  

• 获取某个元素的哥哥们元素（同级别在其上方的所有元素）

    $("d1").prevAll("div")；
  

• 获取某个元素的弟弟元素（同级别在其下方最近的一个元素）

    $("d1").next("div");
  

• 获取某个元素的弟弟们元素（同级别在其下方的所有元素）

    $("d1").nextAll("div");
  

14.7 文档操作

14.7.1 创建元素

var div = $("<div>abc</div>");

14.7.2 添加元素

父元素.append(div); //添加到最后面
父元素.prepend(div);//添加到最前面

14.7.3 插入元素

兄弟元素.after(div); //插入到兄弟元素的后面
兄弟元素.before(div); //插入到兄弟元素的前面

14.7.4 删除元素

元素对象.remove(); 

14.7.5 样式操作

• 更改元素的css样式

  • 元素对象.css(样式名，样式值) 或 元素对象.css({样式名1:样式值,样式名2:样式值});

      如：
      元素对象.css("color","red");
      元素对象.css({"color":"red","width":"100px"});
    

• 获取元素的css样式

  • 对象.css(样式名);

      如：
      元素对象.css("color");
    

14.7.6 属性操作

对象.attr("id","a");//改、赋id值为a
对象.attr("id");//取id值

14.7.7 文本操作

对象.text("lala")；//对象内加上lala文本
对象.text();//取得对象内文本

14.7.8 html操作

对象.html("<h1>aaa</h1>");//在对象内加上<h1>aaa</h1>内容
对象.html();//取得对象内html内容

14.7.8 表单控件操作

input对象.val(3);//手动给input赋值3
input对象.val();//取得input内的值

14.8 jQuery事件

jq中事件名称和js事件名称相比较 就是去掉on

• 页面加载完成事件：

    //方法一：
    $(function(){
        //页面加载完要做的事情
    })
    //方法二：
    $(document).ready(function(){
        //页面加载完要做的事情
    })
  

• 事件中获取事件源的方式（参考上面js部分，一样，这里只做简单概括）：

  • 如果是动态绑定事件 this为事件源

  • 非动态绑定 var obj = event.target||evet.srcElement;

  • 非动态绑定时 在元素属性中通过this

      <input type="button" onclick="myfn(this)">
    

• 事件模拟

  • 对象.trigger("事件名")

      setTimeout(function(){
          //模拟点击事件
          $("input").trigger("click");
      },3000);
    

• 事件合并

  • hover事件相当于 onmouseover+onmouseout

14.9 动画相关

jquery自带几种常用简单的动画

• 样例代码

    <script>
        function fn1() {
           $("img").hide(500);
        }//在500毫秒内隐藏
        
        function fn2() {
           $("img").show(500);
        }//在500毫秒内显示
        
        function fn3() {
           $("img").slideUp(500);
        }//在500毫秒内上滑消失
        
        function fn4() {
           $("img").slideDown(500);
        }//在500毫秒内下滑出现
        
        function fn5() {
           $("img").fadeIn(500);
        }//在500毫秒内淡入显示
        
        function fn6() {
           $("img").fadeOut(500);
        }//在500毫秒内淡出消失
        
        function fn7() {
            $("img").animate({"left": "250px"}, 500).animate({"left": "0px"}, 500);
        }//在500毫秒内吧css 的left属性变成250px，再在下一个500毫秒内变为0px
    </script>
  
    <input type="button" value="隐藏" onclick="fn1()">
    <input type="button" value="显示" onclick="fn2()">
    <input type="button" value="上滑" onclick="fn3()">
    <input type="button" value="下滑" onclick="fn4()">
    <input type="button" value="淡入" onclick="fn5()">
    <input type="button" value="淡出" onclick="fn6()">
    <input type="button" value="自定义" onclick="fn7()">
    <hr>
    <img src="images/ajq.png" style="width: 150px;height: 100px;position:absolute;">
  

• 注意：animate()自定义动画支持多重，比如上面就多重定义了两个动画

音视频播放

• 音频

    <audio src="music.mp3" preload="auto" autoplay="autoplay" loop="loop" controls="controls">  
    
    </audio>
    <!-- loop循环播放  autoplay自动播放  preload预加载(提前加载) controls是否显示控制面板 -->
  

• 视频

    <video poster="../imgs/a.jpg" controls="controls">
        <source src="hero.mp4">
    </video>
    <!-- poster 视频的封面-->