JS积累

IT日常积累

目录

a标签的伪协议

javascript:是一个伪协议，其他的伪协议还有mail: tel: file: 等等。

<a id="aid" class="set-item" href="javascript:;">修改密码</a>

javascript:是表示在触发默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击时就没有任何反应（用来代替#，内容多会跳到页顶部）。一般在这种情况下，会给绑定一个事件回调，来执行业务，如：

document.getElementById('jsPswEdit').addEventListener('click', function(e) {
  e.preventDefault();
  // 当<a>触发click时，处理业务
}, false);

总结: href="javascript:;"就是去掉a标签的默认行为，效果同href="javascript:void(0)"

childNodes用children代替

• children中会选择元素节点
  childNodes包括元素节点和文本节点,所以换行时会产生兼容性问题

子节点的共性问题:

子节点包括:
1. firstChild
2. lastChild
3. previousSibling
4. nextSibling

共同的问题: 会选择文本节点(换行时候)

解决:
用下面的标签替换
firstElementChild、lastElementChild、previousElementSibling、nextElementSibling

for循环删除数组的小问题

for循环中一次删除多个的时候会导致下标有问题
1) for循环删除1个元素
找到后break
2) for循环同时删除多个元素
数组的长度需要i--,否则会下标和元素对应不上

select标签的属性

select的属性

• html的行内属性,selected,选中后,selected = true

以下是HTML DOM Select对象的属性,对select元素使用

• multiple , 多选, multiple = true||false
  true : 可以多选; false : 禁止多选
• selectedIndex
  设置或返回下拉列表中被选项目的索引号

open()实现页面间传值

　window.open()的用法
打开一个窗体用open()方法，关闭一个窗体用close()方法。
open()方法的语法：
window.open(url, name, features, replace);
open函数参数说明：
url：要载入窗体的URL；
name:新建窗体的名称(也可以是HTML target属性的取值，目标)；
features:代表窗体特性的字符串，字符串中每个特性使用逗号分隔；
replace:一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定。

在打开的窗口中,用window.opener来读取父窗口的元素
例如: 父窗口中有document.getElementById("input1").value
在子窗口可以opener.document.getElementById("input1").value来实现值的传入.

JS中调用行内样式的问题

JS可以通过style属性访问行内CSS的样式的属性, 进行赋值和获取

JS中对非行内样式进行访问时候, 如果用的是style属性,则可以赋值, 但不能获取. 也就是说, 必须得先赋值.

传统方式:

element.sytle.width

解决办法:

IE: element.currentStyle.width:
非IE: getComputedStyle(element , true/false/null);
这是一个函数,第一个参数是元素, 第二个参数是伪类信息.

event.target.getBoundingClientRect()

aa