## **①****文本对象****document****：** **例如：****document.****getElementById()   ****只获取一个对象** **         document.****getElementsByTagName() ****获取对象伪数组** **document.****getElementsByClassName()****获取对象伪数组，存在兼容问题** **         document.****createElement()  ****创建元素** **只有****document****具备****write****属性** **页面对象：****document.****body   ****获取****body****标签对象** **document.****head  ****获取head****标签对象** **document.****title  ****获取****title****标签的内容** **document.****documentElement  ****获取****html****标签对象** ## **②****对象属性的查询** **console.dir**( obj ) ## **③****阻止********标签的默认行为** 阻止a标签跳转 ## **④****伪数组** **例如：****var divs = document.getElementsByTagName("div")** 不具备数组的类似join、pop等操作数组的方法，但是具备索引和length  **真数组的展开形式如下：** **** ## **⑤****函数基本介绍** ### **（****1****）函数的声明、预解析、赋值、调用** **function****fn1****(****a , b****) { }**函数声明提升**，**直接完成声明、预解析和变量赋值 **var****fn2****\= function (****a , b****) { }**变量声明提升，预解析过程只识别变量fn2，但没有赋值 **函数的调用：****fn1 ( );**调用后，即可执行函数内部的代码 ### **（****2****）函数的作用域** ### **a)****块级作用域、函数作用域** 在**代码块**（即类似js中函数 {  }**花括号**）中所定义的所有变量在**代码块外**是不可见的。  由于js中没有块级作用域的概念，只有函数作用域的概念，所以函数作用域的方法和功能与块级作用域基本相同。 ### **b)****作用域链** **全局作用域：**在函数外进行的变量声明，即为全局声明，可在全局作用域范围内使用 **函数作用域：**在函数内进行的变量声明，或变量的赋值，只在函数调用时进行，赋值时如果内部没有该声明，则沿着作用域链在函数外部找该变量 ### **c)****函数的数据类型** **函数调用的返回值：****function****fn****(){****return****123; }**调用函数fn()后，console.log(**fn()**)输出结果数值：123 所以函数调用后的数据类型与其返回值相关，如果没有返回值，则为undefined **函数的直接数据类型：**函数的真实数据类型是对象，console.log(**typeof fn**)，直接**typeof****函数名****fn**打印结果为**function****，**但function不是基本数据类型，是typeof方法额外归类的数据类型 ### **d)****函数的参数** **function****fn****(****a , b****) { } ****a , b**为**形参**，在调用过程中**fn( 1 , 2 )**;传入的参数1,2是**实参**。 function**fn**(a , b) { console.log(**fn.arguments**) console.log(**fn.length**) } **fn(1 , 2);**  第一个打印结果为**\[ 1 , 2 \]**是伪数组，所以函数的arguments是实参的容器，第二个打印结果为2，函数的**length**是形参的个数 ### **e)****回调函数：****在一个函数传入另一个函数，并且可以调用执行** **function****fn****(****callback****){****callback()****}** **function****caller****(){****console.log(“****执行****caller”) }** **fn( caller );**执行结果打印“执行caller” ### **（****3****）函数节流** 由于类似**onmouseover****、****window.onresize**这些事件，只要执行条件稍微改变，便会执行绑定事件中的代码，消耗性能，所以可以添加一个节流阀如下： document.**onmouseover**\= function ( ) {  } 使用上述方法，可以保证在500毫秒以内onmouseover事件中绑定的代码只执行一次 ## **⑥****DOM****对象的常用事件、方法** **onfocus**文本框获取焦点时执行事件    **onblur**文本框失去焦点时执行事件      **focus**文本框获取焦点事件     **onclick**点击事件 **onkeyup**键盘弹起事件     **onkeydown**键盘按下事件     **ondblclick**鼠标双击事件      **onscroll**滚动事件 **onmouseover**鼠标经过事件      **onmouseout**鼠标离开事件        **onmousemove**鼠标移动事件 **onmousedown**鼠标按下事件（多用于拖拽）      **onmouseup**鼠标弹起事件 **cloneNode(true)**克隆节点，传入true表示深层克隆，false只克隆当前节点        **appendChild()**追加子节点，追加到父元素的最后面     **removeChild()**移除子节点 **father.insertBefore(clone,son)**追加子节点，追加节点clone到子节点son前面         **getAttribute()**获取标签属性        **setAttribute( “class”, “cal” )**设置标签属性 **removeAttribute(“id”)**移除标签属性      **getAttributeNode()**获取属性节点 ## **⑦****DOM****对象的常用属性** **innerHTML**获取或设置对象标签中的内容，设置的内容会被当做节点对象解析到DOM树上 **innerText****（存在兼容问题，部分浏览器低版本只支持****textContent****）**获取或设置对象标签的纯文本，HTML标签会被忽略 **className**获取或设置对象的类名 **value**获取或设置input标签在button类型下的显示内容 **disable **input 标签的**disable**\= true表示禁用该标签 **placeholder **input 标签添加这个属性，可以“占位”显示内容 **selected **option标签添加这个属性（selected=”selected”），表示被选中 **checked **input 标签type = checkbox时，**checked**\= true表示被选中 **childNodes **子节点（包括li标签等元素节点和换行等文本节点） **nodeType   **nodeType == 1 表示元素节点，nodeType == 3表示文本节点 **children **子元素（只包括元素不包括文本节点） **nextSibling**下一个兄弟节点，包含文本节点 **nextElementSibling**下一个兄弟元素，不包含文本节点，但存在兼容问题 **previousSibling**上一个兄弟节点 **previousElementSibling**上一个兄弟元素 **parentNode **父节点 **style**  设置或者获取样式 **firstChild**  第一个子节点 **firstElementChild**  第一个子元素 **lastChild**  最后一个子节点 **lastElementChild**  最后一个子元素 ****可以将select标签变为多选框 ## **⑧****内置对象（****Array****、****String****）方法的简单介绍** ### **（****1****）****数组****Array****对象的基本方法****length**数组的长度 ### **·添加元素** **push()**：向数组末尾添加新元素，返回值是数组新的长度 **unshift()**：向数组开头增加一项 返回值是数组的新长度 ### **·删除元素** **pop()**：删除数组最后一个元素 并返回该元素 **shift()**：删除数组第一个元素，并返回该元素 **splice()**：有**删除、插入、替换**三个功能 **删除**：需要两个参数，要删除的第一项的索引、要删除的项数。     var colors = \["red", "green", "blue"\];     var removed = colors.splice(0,1);     console.log(colors); ----- \["greeen", "blue"\]     console.log(removed); ----- \["red"\] **插入**：需要三个参数：起始位置、0（要删除的项数）、要插入的项     var colors = \["red", "green", "blue"\];     var removed = colors.splice(1,0,"yellow", "orange");     console.log(colors); ----- \["red", "yellow", "orange", "green", "blue"\] **替换**：需要三个参数：起始位置、要删除的项数、要插入的项     var colors = \["red", "green", "blue"\];     var removed = colors.splice(1,1,"yellow", "orange");     console.log(colors); ----- \["red", "yellow", "orange", "blue"\]     console.log(removed); ----- \["green"\] ### **·提取元素** **slice(****start , end****)**：返回start和end之间的项，但不包括end项，如果只有一个start参数，则返回start开始到数组结束的所有项     var colors = \["red", "green", "blue", "yellow", "purple"\];     console.log(colors.slice(1)); ----- \["green","blue","yellow","purple"\]     console.log(colors.slice(1,4)); ----- \["green","blue","yellow"\] ### **·拼接** **concat()****：**方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。     var values = \[1, 2, 3\];     console.log(values.concat(4,5)); ----- \[1,2,3,4,5\]     console.log(values.concat(\[4,5\],\[6,7\])); ----- \[1,2,3,4,5,6,7\]     console.log(values); ----- \[1,2,3\] **join()**：把数组中的每一项 按照指定的分隔符拼接成字符串     var values = \["a", "b", "c"\];     console.log(values.join("a")); ----- "aabac" ### **·排序** **reverse()**:倒序数组 返回倒序后的数组 原有数组改变 **sort(function(a,b){return****b-a****})**:根据传入的函数进行排序，**b-a**从大到小；**a-b**从小到大 ### **·****ES5****中引入的部分数组方法****存在一定兼容性问题** #### **a ) forEach( )  ****类似****for****循环便利**     var arr=\["Tom",20,"Hello",function(){}\];     arr.**forEach**(function(**value,i**){         console.log(**i+**"==="+**value**); })                                                    #### **b ) map( ) ****映射****返回一个数组，数组中每个元素是****map****函数中****fn****的返回值**     var arr=\[1,2,3,4,5\];     var temp = arr.**map**(function(**v,i**){        **return****v**;     }) console.log(temp);  -------\[1,2,3,4,5\] #### **c ) filter( ) ****筛选****按照返回条件获得筛选后的数组**     var arr = \[1 , 2 , 3 , 4 , 5 \];     var temp = arr.**filter**(function (**v, i**) {        **return****v**% 2 === 1;      **提供筛选条件，返回奇数项**     }) console.log(temp); -------\[1 , 3 , 5\] #### **d ) some( ) ****判断数组中至少有一个数据符合要求，否则返回****false**     var arr = \["Tom", function () {}, "123"\];     var temp = arr.**some**(function (**v**) {        **return**typeof**v**\=== "number";   **判断是否有数值类型元素****,****没有返回****false**     }) console.log(temp); #### **e ) every( ) ****判断数组中所有数据符合要求，否则返回****false**     var arr = \[1,2,3,4,5,"6"\];     var temp = arr.**every**(function (**v**) {        **return**typeof**v**\=== "number";**不是所有都是数值类型元素****,****所以返回****false**     }) console.log(temp); #### **f ) indexOf( ) ****在数组中查找元素，如果有该元素，返回元素的（索引），否则返回****\-1**     var arr = \[1,2,3,4,5,3,5,6,7,5\]; var temp = arr.**indexOf**(**7,0**); **7,0 ****两个参数表示：从第****0****号索引开始找****7****的索引值** **console.log(temp);     ------ 8** #### **g ) lastIndexOf( )****在数组中查找元素****,****从后往前找，****如果有该元素，返回元素的（索引），否则返回****\-1**     var arr = \[1,2,3,4,5,3,5,6,7,5\];     var temp1 = arr.**lastIndexOf**(3);    **返回值****5****，从右往左第一个****3****的索引值** var temp2 = arr.**lastIndexOf**(3,3);   **返回值****2****，从索引为****3****的元素开始，从右往左找第一个****3****的索引是****2** console.log(temp1); console.log(temp2); ### **（****2****）****字符串****String的基本方法****（基本包装类型****String/Number/Boolean****：****js****为了操作方便，给不是对象的数据类型，添加了包装类型，让其也能像对象一样具备属性和方法）****length：**字符串的长度 ### **·字符操作方法** **charAt()**    获取指定索引处字符 **charCodeAt()**  获取指定索引处字符的ASCII码 **fromCharCode()**把ASCII码转换成字符串 ### **·字符串截取、拼接方法**  **concat(****"a" , "b"****)**    拼接字符串，等效于+方法，+方法更常用 **slice****与****substring**在存在负数情况下会有差异 **slice(****start,end****)**   从start索引开始，截取到end索引位置，end不截取 **substring(****start,end****)**从start索引开始，截取到end索引位置，end不截取 **substr(****start,length****)**    从start索引开始，截取length个字符 ### **·位置方法** **indexOf(****str****)**   返回指定内容在原字符串中的索引，不存在返回-1 **lastIndexOf(****str****)**从后往前找，如果有该字符，返回字符（索引），否则返回-1 ### **·字符串分割方法** **trim()**  去除字符串首尾的空字符 **split(****str****)**  以传入的参数str为分割，把字符串切割成字符数组 ### **·大小写转换方法** **toLocaleUpperCase()****、****toUpperCase()** 转换大写 **toLocaleLowerCase()****、****toLowerCase()** 转换小写 ### **·字符串匹配方法** **match(****str/Regex****)**   传入一个参数，匹配传入的字符串，返回数组 **search(****str/Regex****)**  传入一个参数，匹配传入的字符串，返回该字符串的第一个匹配项索引 **replace(****str/Regex , str/Regex****)**字符串替换，第一个参数是需要替换的字符串，第二个参数是想要替换成的字符串     var code = "future";     console.log(code.match(/u/)) ----- \["u", index: 1, input: "future "\]     console.log(code.match(/u/g))----- \["u", "u"\]     console.log(code.search(/u/g)) ----- 1     console.log(code.replace(/u/,"a")) ----- "fature"     console.log(code.replace(/u/g,"a")) ----- "fatare" ### **·字符串比较** **localeCompare()** 两个字符串比较的是ASCII码 Str1.localeCompare(Str2)   Str1 > Str2 返回正数，一般是1 Str1 == Str2 返回0 Str1 < Str2  返回负数，一般是-1