在字符串中使用转义字符输入Unicode编码：\u四位十六进制数字
在网页中使用Unicode编码&#十进制编码
prompt()函数的返回值是String类型，可以使用+转换为数字类型；
使用字面量来创建一个对象：
————语法：var 对象名称={};
字符串的相关的方法 length - 获取字符串的长度 charAt() - 根据索引获取指定的字符 charCodeAt() - 根据索引获取指定的字符编码 String.fromCharCode() - 根据字符编码获取字符 indexOf() lastIndexOf() - 从一个字符串中检索指定内容 - 需要一个字符串作为参数，这个字符串就是要检索的内容， 如果找到该内容，则会返回其第一次出现的索引，如果没有找到则返回-1。 - 可以指定一个第二个参数，来表示开始查找的位置 - indexOf()是从前向后找 - lastIndexOf()是从后向前找 slice() - 可以从一个字符串中截取指定的内容，并将截取到内容返回，不会影响原变量 - 参数： 第一个：截取开始的位置（包括开始） 第二个：截取结束的位置（不包括结束） - 可以省略第二个参数，如果省略则一直截取到最后 - 可以传负数，如果是负数则从后往前数 substr() - 和slice()基本一致，不同的是它第二个参数不是索引，而是截取的数量 substring() - 和slice()基本一致，不同的是它不能接受负值作为参数，如果设置一个负值，则会自动修正为0， substring()中如果第二个参数小于第一个，自动调整位置 toLowerCase() - 将字符串转换为小写并返回 toUpperCase() - 将字符串转换为大写并返回 split() - 可以根据指定内容将一个字符串拆分为一个数组 - 参数： - 需要一个字符串作为参数，将会根据字符串去拆分数组 可以接收一个正则表达式，此时会根据正则表达式去拆分数组 match() - 可以将字符串中和正则表达式匹配的内容提取出来 - 参数： - 正则表达式，可以根据该正则表达式将字符串中符合要求的内容提取出来 并且封装到一个数组中返回 replace() - 可以将字符串中指定内容替换为新的内容 - 参数： - 第一个：被替换的内容，可以是一个正则表达式 - 第二个：替换的新内容 search() - 可以根据正则表达式去字符串中查找指定的内容 - 参数： 正则表达式，将会根据该表达式查询内容， 并且将第一个匹配到的内容的索引返回，如果没有匹配到任何内容，则返回-1。
1.正则表达式 - 语法： - 量词 {n} 正好n次 {m,n} m--n次 {m,} 至少m次 + 至少1次 {1,} ? 0次或1次 {0,1} * 0次或多次 {0,} - 转义字符 \ 在正则表达式中使用\作为转义字符 \. 表示. \\ 表示\ . 表示任意字符 \w - 相当于[A-z0-9_] \W - 相当于[^A-z0-9_] \d - 任意数字 \D - 除了数字 \s - 空格 \S - 除了空格 \b - 单词边界 \B - 除了单词边界 ^ 表示开始 $ 表示结束
DOM - Document Object Model - 文档对象模型，通过DOM可以来任意来修改网页中各个内容 - 文档 - 文档指的是网页，一个网页就是一个文档 - 对象 - 对象指将网页中的每一个节点都转换为对象 转换完对象以后，就可以以一种纯面向对象的形式来操作网页了 - 模型 - 模型用来表示节点和节点之间的关系，方便操作页面 - 节点（Node） - 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点 - 虽然都是节点，但是节点的类型却是不同的 - 常用的节点 - 文档节点 （Document），代表整个网页 - 元素节点（Element），代表网页中的标签 - 属性节点（Attribute），代表标签中的属性 - 文本节点（Text），代表网页中的文本内容
- DOM操作 - DOM查询 - 在网页中浏览器已经为我们提供了document对象， 它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。 - document查询方法： - 根据元素的id属性查询一个元素节点对象： - document.getElementById("id属性值"); - 根据元素的name属性值查询一组元素节点对象: - document.getElementsByName("name属性值"); - 根据标签名来查询一组元素节点对象： - document.getElementsByTagName("标签名"); - 元素的属性： - 读取元素的属性： 语法：元素.属性名 例子：ele.name ele.id ele.value ele.className - 修改元素的属性： 语法：元素.属性名 = 属性值 - innerHTML - 使用该属性可以获取或设置元素内部的HTML代码 - 事件（Event） - 事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动。。。 - 我们可以为事件来绑定回调函数来响应事件。 - 绑定事件的方式： 1.可以在标签的事件属性中设置相应的JS代码 例子： <button οnclick="js代码。。。">按钮</button> 2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件 例子： <button id="btn">按钮</button> <script> var btn = document.getElementById("btn"); btn.onclick = function(){ }; </script> - 文档的加载 - 浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。 - 如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载， 此时将会无法正常获取到DOM对象，导致DOM操作失败。 - 解决方式一： - 可以将js代码编写到body的下边 <body> <button id="btn">按钮</button> <script> var btn = document.getElementById("btn"); btn.onclick = function(){ }; </script> </body> - 解决方式二： - 将js代码编写到window.onload = function(){}中 - window.onload 对应的回调函数会在整个页面加载完毕以后才执行， 所以可以确保代码执行时，DOM对象已经加载完毕了 <script> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ }; };
DOM查询 - 通过具体的元素节点来查询 - 元素.getElementsByTagName() - 通过标签名查询当前元素的指定后代元素 - 元素.childNodes - 获取当前元素的所有子节点 - 会获取到空白的文本子节点 - 元素.children - 获取当前元素的所有子元素 - 元素.firstChild - 获取当前元素的第一个子节点 - 元素.lastChild - 获取当前元素的最后一个子节点 - 元素.parentNode - 获取当前元素的父元素 - 元素.previousSibling - 获取当前元素的前一个兄弟节点 - 元素.nextSibling - 获取当前元素的后一个兄弟节点 innerHTML和innerText - 这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性 - 两个属性作用类似，都可以获取到标签内部的内容， 不同是innerHTML会获取到html标签，而innerText会自动去除标签 - 如果使用这两个属性来设置标签内部的内容时，没有任何区别的 读取标签内部的文本内容 <h1>h1中的文本内容</h1> 元素.firstChild.nodeValue - document对象的其他的属性和方法 document.all - 获取页面中的所有元素，相当于document.getElementsByTagName("*"); document.documentElement - 获取页面中html根元素 document.body - 获取页面中的body元素 document.getElementsByClassName() - 根据元素的class属性值查询一组元素节点对象 - 这个方法不支持IE8及以下的浏览器 document.querySelector() - 根据CSS选择器去页面中查询一个元素 - 如果匹配到的元素有多个，则它会返回查询到的第一个元素 document.querySelectorAll() - 根据CSS选择器去页面中查询一组元素 - 会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个 DOM修改 document.createElement() - 可以根据标签名创建一个元素节点对象 document.createTextNode() - 可以根据文本内容创建一个文本节点对象 父节点.appendChild(子节点) - 向父节点中添加指定的子节点 父节点.insertBefore(新节点,旧节点) - 将一个新的节点插入到旧节点的前边 父节点.replaceChild(新节点,旧节点) - 使用一个新的节点去替换旧节点 父节点.removeChild(子节点) - 删除指定的子节点 - 推荐方式：子节点.parentNode.removeChild(子节点)
DOM对CSS的操作 - 读取和修改内联样式 - 使用style属性来操作元素的内联样式 - 读取内联样式： 语法：元素.style.样式名 - 例子： 元素.style.width 元素.style.height - 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法 将-去掉，然后-后的字母改大写 - 比如：background-color --> backgroundColor border-width ---> borderWidth - 修改内联样式： 语法：元素.style.样式名 = 样式值 - 通过style修改的样式都是内联样式，由于内联样式的优先级比较高， 所以我们通过JS来修改的样式，往往会立即生效， 但是如果样式中设置了!important，则内联样式将不会生效。 - 读取元素的当前样式 - 正常浏览器 - 使用getComputedStyle() - 这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式 - 参数： 1.要获取样式的元素 2.可以传递一个伪元素，一般传null - 例子： 获取元素的宽度 getComputedStyle(box , null)["width"]; - 通过该方法读取到样式都是只读的不能修改
- IE8 - 使用currentStyle - 语法： 元素.currentStyle.样式名 - 例子： box.currentStyle["width"] - 通过这个属性读取到的样式是只读的不能修改
- 其他的样式相关的属性 注意：以下样式都是只读的 clientHeight - 元素的可见高度，指元素的内容区和内边距的高度，返回的是数字，可以直接计算 clientWidth - 元素的可见宽度，指元素的内容区和内边距的宽度，返回的是数字，可以直接计算 offsetHeight - 整个元素的高度，包括内容区、内边距、边框 offfsetWidth - 整个元素的宽度，包括内容区、内边距、边框 offsetParent - 当前元素的定位父元素 - 离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body offsetLeft offsetTop - 当前元素和定位父元素之间的偏移量 - offsetLeft水平偏移量 offsetTop垂直偏移量 scrollHeight scrollWidth - 获取元素滚动区域的高度和宽度 scrollTop scrollLeft - 获取元素垂直和水平滚动条滚动的距离 判断滚动条是否滚动到底 - 垂直滚动条 scrollHeight - scrollTop == clientHeight - 水平滚动 scrollWidth - scrollLeft == clientWidth 2.事件（Event） - 事件对象 - 当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中， 这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。 - 可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存 - 例子： 元素.事件 = function(event){ event = event || window.event; }; 元素.事件 = function(e){ e = e || event; }; - 事件的冒泡（Bubble） - 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。 - 事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消 - 可以将事件对象的cancelBubble设置为true，即可取消冒泡 - 例子： 元素.事件 = function(event){ event = event || window.event; event.cancelBubble = true; };
