一、JavaScript写在哪里 head:用于声明变量、函数、类型、为事件绑定处理函数 body：调用脚本执行 外部脚本：用于定义函数、类型（将代码封装到一个扩展名为js的文件中，然后再需要的地方引用，完成一次定义，多处引用的效果，简化了代码的维护。） 网页弹窗：alert(...) 开发者模式：Source---page可以打断点 二、基本语法 大小写敏感的语言 强类型语言intstring集合{}数组[] js是弱类型语言---var类型可以接收任何赋予它的类型 分号结尾 注释： 单行注释：// 多行注释：/*....*/ 方法注释：//** *方法一 *@param {string} param1这是参数1 */ 在调用方法注释的时候就会提示参数是string类型的 字符串：字符串可以用单引号也可以用双引号 单引号只能接收char类型 数据类型： boolean：布尔类型 number：数字类型 string：字符串类型 Undefined：未定义 Null：空对象 Object：对象类型 Undefined类型和Null类型都是只有一个值的数据类型，值分别是Undefined和Null 查看数据类型使用typeof(param)显示param的数据类型 集合 数组：var array=[1,2,3,4,5]; 键值对：var keyValues = {"key1":"value1","key2":"value2","key3":"value3"} var kv = {} kv["a"] = "A" kv["b"] = "B" kv.c="C" kv.d="D" var kv = {a:"A",b:"B"} var kv1 = {a:"A",b:"B"} //js对象 var kv2 = {"a":"A","b":"B"} //json格式对象 对象数组：就是把键值对当作数组的里面的一个元素 for循环 for(const kv of array){...}这个类似于foreach(var a in array) //下面是针对键值对的循环 for(const key in kv2){ console.log(kv2[key]) } //针对数组时 key就是数组的标，默认从0开始的0，1，2，3的索引下标 可通过for...of来循环大的键值对，然后通过for...in来获取键值对的值 递归的感念：方法调用自己的方法 Array对象的方法 concat()链接两个或多个数组，并返回结果 var ar3 = arr1.concat(arr2) join()数组放入一个字符串，通过分隔符分隔 var ar2Str = ar3.join(",")---将数组用“,”逗号隔开，也可以用竖线 push()向数组末尾添加一个或多个元素，并返回新的长度 var length = ar2.push(10)（返回的length是新数组的长度） reverse()颠倒数组的顺序 var ar3 = ar1.reverse();ar3就是ar1颠倒的数组顺序 sort()对数组进行排序 var ar3 = ar1.sort(); splice()删除元素，并向数组添加新元素 splice(参数1，参数2，参数3) 参数1：要删除的元素下标 参数2：要删之后的几个元素（包括它自己） 参数3：要插入的新内容 var ar1 = [2,1,4,3,6,5] var ar3 = ar1.splice(2,2,7) splice(2,2,7)---就是删除4和3，并且插入7到删除的地方得到新数组就是ar3 = [2,1,7,6,5] 从某个位置后面全删掉---aplice(2)就是第二位后面的元素都删掉 类型转换 var str = "9867" var a= parseInt(str)---字符串转换成int类型 var b = parseFloat(str)---字符串转成float 方法使用 function myFunction(param1.param2){ return param1+param2; } 匿名方法类似C#的委托 var fun = function (param){alert(param)} fun("HELLO")---使用就会弹窗，类似委托 var sortfun = function(a,b){ return b-a; } var ar1 = [2,1,3,4,6,8,7,9,5]; ar1.sort(sortfun); ar1就会是从大到小的排列 匿名方法定义的同时进行调用 （function(p1,p2){ return p1+p2 }）(1,2)-----就直接输出3了，也可以不传参数 闭包 简单理解就是子方法可以使用父方法的变量 三、DOM DOM用于操作html文档，准确的说是操作html标签内的内容 操作DOM对象，一般使用document关键字调用 js获取元素的方法 document.getElementById(id)：根据id获取元素节点 document.getElementsByClassName(className)：根据class的值获取一组元素节点 document.getElementsByName(name)：根据name获取一组元素节点 document.getElementsByTagName(tag)：根据标签名称获取一组元素节点 event.target.value点击自己获取自己的value 注册事件 元素注册法：onclick="clickMe()"---点击的时候触发 onchange="changeMe()"---文本发生变化的时候触发 对象注册法：document.getElementById(id).onchange = function(){...} var changeMe = function () {...} document.getElementById(id).onchange = changeMe 动态添加标签 var newTag = document.createElement("input"); document.body.appendChild(newTag); 在某个元素之前添加标签 document.body.insertBefore(标签id) document.firstChild；获取第一个子元素 document.childNodes；获取所有子节点元素 document.removeChild();移除所有子节点元素 获取元素内容 var content = document.getElementById("标签id").innerHTML 给标签赋内容 document.getElementById("标签id").innerHTML = "<b>Hello China</b>" 一旦用了innerHTML,标签原本的内容就没有了 innerHTML会把标签和内容都获取 innerText只获取到内容 操作标签样式----style后面的属性使用驼峰命名法 document.getElementById("标签id").style.color = "blue" document.getElementById("标签id").style.fontFamily= "Arial" document.getElementById("标签id").style.fontSize= "20px" document.querySelectorAll("#p/.p")---#p代表id/.p代表class,P是标签 四、BOM(Browser Object Model) Bom用于操作浏览器行为 操作BOM对象，一般使用window关键字 alert()：弹出提示对话框 confirm()：弹出确定对话框，返回bool值类型 prompt()：弹出用户输入对话框，返回输入的内容，如果取消返回null setInterval(code,milliseconds)：计时器方法可按照指定周期（以毫秒）来调用函数、计算表达式 code：需要执行的代码 milliseconds：执行代码的周期 方法会不停的调用函数，直到 clearInterval() 被调用或窗口被关闭。由setInterval() 返回计时器ID值可用作 clearInterval()方法的参数 var setIntervalId = setInterval(function(){ console.log(++i) },1000) function clearTime(){ clearInterval(setIntervalId ) } setTimeout(code,milliseconds)：一次性计时器方法用在指定的毫秒数后调用函数、计算表达式，使用clearTimeout来清除setTimeout location：浏览器地址对象 hash：返回一个URL的锚部分 host：返回一个URL的主机名和端口 hostname：返回URL的主机名 href：返回完整的URL pathname：返回URL路径名 port：返回一个URL服务器使用的端口号 protocol：返回一个URL协议 search：返回一个URL的查询部分 onload 页面加载完成后调用 window.onload = function(){.....}