javascript学习(二)

吐槽君 分类:javascript

JS正则

alert(str.match(re));
match 把所有匹配的东西全部提取出来

var re = /\d+/g;

+:若干(多少都可以)
g global 找到全部

转译

\d 数字 [0-9]
\w 英文 数字 下划线
\s 空白字符

获取元素方式

  • getElementsByClassName('box') 根据类名获得某些元素集合
  • querySelector('.box') 返回指定选择器的第一个元素对象 里面的选择器需要加符号 .box #nav
  • querySelectorAll('.box') 返回指定选择器的所有元素对象集合

事件

步骤

触发相应的一种机制。

  • 获取事件源:事件被处罚的对象
  • 绑定事件
  • 添加事件处理程序

innerText&innerHTML

均 可读写,可以获取元素里面的内容

innerText

  • 不识别html标签
  • 去除空格和换行

innerHTML

  • 识别html标签
  • 保留空格和换行
  • W3C标准

获取元素属性值

1.element.属性

2.element.getAttribute('属性')

我们自己添加的属性——自定义属性
eg.
div.getAttribute('index')

设置元素属性值

1.element.属性 = '值'

2.element.setAttribute("属性","值"); (主要针对自定义属性

H5自定义属性

设置H5自定义属性

H5规定自定义属性以data-开头做属性名。

element.setAttribute("data-index",2)
div.getAttribute("data-index")
div.dataset
div.dataset.index
div.dataset["index"]
div.dataset.listName
 
  1. element.setAttribute(name, value);

设置指定元素上的某个属性值。如果属性已经存在,则更新该值;否则,使用指定的名称和值添加一个新的属性。

  1. let attribute = element.getAttribute(attributeName);

getAttribute()返回元素上一个指定的属性值。如果指定的属性不存在,则返回null或 ""(空字符串)

  1. element.removeAttribute(attrName);

元素方法removeAttribute()从指定的元素中删除一个属性

<div getTime="10" data-index="2" data-list-name="gloucester"></div>
 

#节点操作

1.节点概述

一般的,节点至少拥有nodeType(节点类型),nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

  • 元素节点nodeType为1
  • 属性节点nodeType为2
  • 文本节点nodeType为3(文本节点不包括文字/空格/换行等)

2.节点层级

子节点

(标准)parentNode.childNodes返回值里包含所有子节点,如果需要获得某一特定节点,如元素节点,则需要专门处理。

(非标准)parentNode.children只返回子元素节点,其余节点不返回。

虽为非标准,但得到了各个浏览器支持,可以放心使用。

firstChild 第一个子节点

firstElementChild 第一个元素节点

(IE9以上才支持

parentNode.children[0]

parentNode.children[parentNode.children.length - 1]

兄弟节点

  • node.nextSibling返回当前元素的下一个兄弟节点。
  • node.nextElementSibling返回当前元素的下一个兄弟元素节点,找不到则返回null。
  • node.previousElementSibling

添加节点

node.appendChild(child)
node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里的after伪元素。

node.insertBefore(child,指定元素)

复制节点

node.cloneNode()

  • 如果括号参数为空/false,则是浅拷贝,即只克隆节点本身,不克隆里面的子节点。
  • 如果括号参数为true,则是深拷贝,克隆节点本身,并且克隆里面的子节点。

三种动态创建元素区别

  • document.write()
  • element.innerHTML
  • document.createElement()

区别:

  1. document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘。
  2. innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘。
  3. innerHTML创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂。

createElement()创建多个元素效率稍低一点,但是结构更清晰。

注册事件

注册事件概述:给元素添加事件

1.传统注册方式

  • 利用on开头的事件
  • 特点:注册事件的唯一性
  • 同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数。

2.方法监听注册方式

  • addEventListener()
  • IE9以前:attachEvent()
  • 特点:同一个元素同一个事件可以注册多个监听器,按注册顺序依次执行。

删除事件

删除事件的方式

1.传统注册方式

eventTarget.onclick = null;

2.方法监听注册方式

eventTarget.removeEventListener(type, listener[, useCapture]);

DOM事件流:事件传播过程

DOM事件流分为三个阶段:

1.捕获阶段

2.当前目标阶段

3.冒泡阶段

注意:

  1. JS代码中只能执行捕获/冒泡其中的一个阶段
  2. onclick,attachEvent只能得到冒泡阶段
  3. addEventListener(type, listener[, useCapture])第三个参数如果是ture,表示在事件捕获阶段调用事件处理程序;如果是false/不写,表示在事件冒泡阶段调用事件处理程序。
  4. 实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
  5. 有些事件是没有冒泡的,比如onblur,onfocus,onmouseover,onmouseleave
  6. 事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙地做某些事情。

事件对象

  1. event就是一个事件对象,写到侦听函数的小括号里面,当形参来看。
  2. 事件对象只有有了事件才会存在,它是系统给自动创建的,不需要我们传递参数。
  3. 事件对象是事件的一系列相关数据的集合。如鼠标点击里面就包含了鼠标的相关信息:鼠标坐标等。
  4. 事件对象可以自己命名,如event,evt,e
  5. 事件对象也有兼容性问题,ie678通过 window.event兼容性的写法e = e || window.event;

事件对象常见属性和方法

  • e.target:返回触发事件的对象(即我们点击的那个对象

区别:this返回的是绑定事件的对象(元素)

  • e.srcElement:返回触发事件的对象,非标准,ie6-8使用。

  • e.type: 返回事件的类型,比如click,mouseover,不带on。

  • e.returnValue:阻止默认行为(事件),非标准,ie678,如让链接不跳转。

  • e.preventDefault():阻止默认行为(事件),标准。

  • e.stopPropagation

事件对象阻止默认行为

阻止默认行为(事件),比如不让链接跳转,或者让提交按钮不提交。

1. 方法监听注册方式

dom标准写法:
event.preventDefault();

var a = document.querySelector("a");
a.addEventListener("click", function(e) {
e.preventDefault();
});
 

2. 传统注册方式

  • 普通浏览器:e.preventDefault();
  • 低版本浏览器(ie678):return false;

没有兼容性问题,但return 后面的代码不执行了,而且只限于传统的注册方式。

事件委托

原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用事件冒泡影响每一个子节点。

常用的鼠标事件

鼠标事件对象

  • e.clientX/e.clientY:返回鼠标相对于可视区的x和y坐标。
  • e.pageX/e.pageY:返回鼠标相对于文档页面的x和y坐标。

常用的键盘事件

  • onkeyup:按键弹起的时候触发。
  • onkeypress:按键按下的时候触发,不能识别功能键,如ctrl,shift,左右箭头。
  • keydown:按键按下的时候触发,能识别功能键,如ctrl,shift,左右箭头。

三个事件的执行顺序:keydown -- keypress -- keyup

注意:
keydown``keypress在文本框里的特点:他们两个事件触发的时候,文字还没落入文本框。
keyup事件触发的时候,文字已经落入文本框中。

JS执行机制

  1. 先执行执行栈中的同步任务。
  2. 异步任务(回调函数)放入任务队列中。
  3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。

location对象

location.href:获取或设置整个URL。
location.search:返回参数。
location.hash:返回片段#后面的内容,常见于链接/锚点

offset系列

offset与style区别

offset

  • 可以得到任意样式表中的样式值
  • 获得的数值无单位
  • offsetWidth包含padding+border+width
  • offsetWidth只读属性,不能赋值。

style

  • 只能得到行内样式表中的样式值
  • style.width获得的是带有单位的字符串
  • style.width获得不包含padding, border的值
  • style.width是可读写属性,既可以获取也可以赋值

三大系列总结

  • element.offsetWidth
  • element.clientWidth:返回padding,内容区宽度,不含border,返回数值不带单位。
  • element.scrollWidth:返回自身实际宽度,不含border,返回数值不带单位。
  • 页面滚动的距离通过window.pageXOffset获得

立即执行函数

1.立即执行函数:不需要调用,立马能够自己执行的函数

2.写法

(function(){})()
(function(){}())
也可以传递参数进来,第二个小括号可以看作是调用函数。

3.立即执行函数的作用

独立创建了一个作用域,不存在命名冲突。

回复

我来回复
  • 暂无回复内容