Title

### JavaScript #### 1.DOM 操作 ##### 1.1 DOM 简介 + DOM (document object model 文档对象模型): 是 HTML 整个页面的文本内容的对象 + Document 中每一个元素都可以认为是一个 Element 对象 + `document.all` : 当前页面所有标签 + `document.images` : 当前页面所有 img 标签对象 + `document.forms` : 当前页面所有 form 表单标签对象 + `document.links` : 当前页面所有链接 ##### 1.2 元素获取(document内置方法) 1. `.getElementById()` : 获取页面上设置 id 属性的元素,获取到的是一个 HTML 对象,然后将其赋值给一个变量 ```html

你好哥们

*/ ``` 2. `.getElementByClassName()` : 通过类名获取元素,返回数组对象 ```html

/* HTMLCollection(3) 0: p.x 1: p.x 2: p.x length: 3 */ ``` 3. `.getElementsByTagName()` : 通过标签名获取元素对象,返回类数组对象 ```html

/* HTMLCollection(3) 0: p.x1 1: p.x2 2: p.x3 length: 3 */ ``` 4. `.getElementsByName()` : 获取当前页面所有指定 name 值的标签 ```html

/* NodeList(2) 0: div.x1 1: div.x2 length: 2 */ ``` ##### 1.3 样式操作 + `document.getElementByID` : 获取的是单个对象时 + 通过 style 修改样式,style 后面可以加当前标签可以用的所有 CSS 属性 ```html

``` + `document.getElementsById` 或 ``document.getElementsByName`` 或 `getElementsByTagName()`: 获取对象列表 + 通过索引或循环后加 style ```html

Python
Linux
Shell
MySql
HTML
CSS
JavaScript

``` + 通过索引获取元素对象 ```html

``` + 设置样式属性步骤 1. 获取元素 : 确定获取到的是元素对象还是包含元素对象的数组 2. 设置元素样式 ##### 1.4 属性操作 1. `.hasAttribute("判断属性")` : 判断指定元素是否有指定属性 ```html

``` 2. `.hasAttributes()` : 判断指定元素是否具有属性 ```html

``` 3. `.setAttribute(“属性名”, "属性值1 属性值2")` : 设置属性,属性名,值 ```html Title ``` 4. `.getAttribute("属性名")` : 获取元素指定属性的值 ```html Title ``` 5. `.removeAttribute("属性名")` : 删除元素的指定属性 ```html ``` ##### 1.5 文本操作 + innerHTML : 设置和查看标签内容,包含 HTML 样式 + innerText : 设置和查看标签内的纯文本内容 ```html

``` ##### 1.6 操作元素 1. 获取和添加元素 | 方法 | 说明 | | --------------------- | ------------------------------ | | `.createElement("")` | 创建对象,类型自己设置 | | `.createTextNode("")` | 创建文本节点,文本内容 | | `.cloneNode()` | 克隆节点 | | `.removeChild()` | 删除节点 | | `.appendchild()` | 在指定标签的子元素尾部添加元素 | 2. 添加文本框 ```html

``` 3. 添加 input 输入框 ```html

``` 4. 克隆 ```html

``` 5. 删除节点 ```html

``` #### 2. 事件 + Js 事件 | Js 事件 | 事件说明 | | ----------- | ------------------------------ | | onabort | 图像加载被中断 | | onblur | 元素失去焦点 | | onchange | 域的内容被改变 | | onclick | 当用户单击某个对象是调用的事件 | | ondblclick | 当用户双击某个对象是调用的事件 | | onerror | 在加载文档或图像时发生错误 | | onfocus | 元素获得焦点 | | onkeydowm | 某个键盘按键被按下 | | onkeypress | 摸个键盘按键被按下并松开 | | onkeyup | 某个键盘按键被松开 | | onload | 一张页面或一幅图片完成加载 | | onmousedown | 鼠标按钮被按下 | | onmousemove | 鼠标被移动 | | onmouseout | 鼠标从某元素移开 | | onmouseover | 鼠标移到某元素上 | | onmouseup | 鼠标按键被松开 | | onresize | 重置按钮被点击 | | onselect | 文本被选中 | | onsubmit | 确认按钮被点击 | | onunload | 用户退出页面 | + 调用事件时考虑该标签对象是否有此事件 + 键盘对应数字编码 (常用) | 数字编码 | 代表按键 | | ----------------- | --------- | | `keycode 48-57` | 0 - 9 | | `keycode 58-90` | A - Z | | `keycode 112-123` | F1 - F12 | | `keycode 8` | Backspace | | `keycode 9` | Tab | | `keycode 13` | Enter | | `keycode 16` | Shift | | `keycode 18` | Alt | | `keycode 32` | Space | | `keycode 35` | End | | `keycode 36` | Home | | `keycode 37-40` | ←↑→↓ | | `keycode 20` | CapsLock | #### 3. 内置对象 ##### 3.1 计时器 1. 定时器
1. `setlnterval()` : 间隔指定的毫秒数不停的执行指定的代码 2. `clearInterval` : 关闭反复执行的定时器 ```html 计时器

``` 2. 倒计时器 (倒数指定时间执行) 执行一次 1. `setTimeout()` : 设置计数器 2. `clearTimeout()` : 关闭计时器 ```html 计时器

``` ##### 3.2 时间 + 时间对象在使用时需要使用 new 创建 ```html ``` ##### 3.3 JS 数组 1. 创建数组 ```html ``` 2. 数组的特点 : 可以存储其他类型元素 , 包括函数 ```html ``` 3. 数组方法 1. 添加数据 1. `.push("")` : 在数组尾部添加元素 2. `.unshift("")` : 在数组头部添加元素 ```html ``` 2. 获取数据 1. `数组名[下标]` : 索引获取 2. `数组名.length` : 数组元素长度 3. 删除和修改数据 1. pop 删除并返回最后一个元素 ```html ``` 2. shift 删除并返回第一个元素 ```html ``` 3. `splice(index, howmany, item1, ..., itemX)` : 删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素 1. index : 规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 2. howmany : 要删除的项目数量。如果设置为 0，则不会删除项目 3. item1, ..., itemX : 向数组添加的新项目 ```html ``` ##### 3.4 JS 数学对象 Math 1. `Math.round()` : 四舍五入 2. `Math.max(arr)` 或 `Math.min(arr)` : 最大值和最小值 3. `Math.floor()` 或 `Math.ceil()` : 向下取整、向上取整 4. `Math.random()` : 0-1 之间随机小数(16位小数) `Math.floor(Math.random()*10)` : 0-9 随机小数 ```html ``` #### 4. JS 正则 + 声明方式 1. new RegExp() : 如果有转义字符必需两次转义 2. /hehe/ : 直接定义 (推荐使用) + 转义字符 | 转义字符 | 使用 | 含义 | | -------- | --------------- | ---------------------- | | \w | var reg = /\w/; | 单个的字母数字下划线 | | \W | var reg = /\W/; | 单个的非字母数字下划线 | | \d | var reg = /\d/; | 单个数字字符 | | \D | var reg = /\D/; | 单个非数字字符 | | \s | var reg = /\s/; | 单个空白字符,例如空格 | | \S | var reg = /\S/; | 单个的非空白字符 | + 元字符 | 转义字符 | 使用 | 含义 | | -------- | ---------------------------------------- | ----------------------------------- | | . | var reg = /./; | 除了换行以外其他任意字符 | | * | var reg = /z*/; | 匹配 0 次或多次 | | + | var reg = /z+/; | 匹配至少 1 次或多次 | | ？ | var reg = /\w+?/; | 禁止贪婪 | | {} | var reg = /{5}/;
var reg = /{5, 12}/; | 限制匹配的次数
限制匹配5 - 12 次 | | [] | var reg = /[a-zA-Z0-9]+/; | 字符范围 | | () | var reg = /\d(\w+)\w+/; | 子组,可以有可以没有 | | \| | var reg = /abc\|def\|123/; | 或 | | ^ | var reg = /^\d/; | 限制开始 | | $ | var reg = /a$/; | 限制结尾 | ```html ```