关于原生 JS

2018-02-12 10:46:41来源:oschina作者:创维_yang人点击

分享

阻止冒泡和默认事件


冒泡简单来说就是 HTML 子元素与父容器之间都存在一些相同的事件,当触发子元素事件后,其父容器的事件也相应的触发。举例来说比如 click 事件,当触发了子元素事件后, 包括这个控件的父控件也有 click 事件,则会继续执行 。


阻止冒泡需要在子控件事件加入相关代码:


btn.onclick = function(e) {
var _event = e || event;
// 高版本浏览器
_event.cancelBubble = true;
// IE
window.event.cancelBubble = true;
// 非 IE
_event.stopPropagation();
}

阻止默认事件


function preventDefa(e){
if(window.event){
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
else{
//阻止默认浏览器动作(W3C)
e.preventDefault();
}
}

常见 DOM 操作


查找 HTML 元素


var x = document.getElementById("main"); // 通过 id 查找
var y = x.getElementsByTagName("p");// 查找 元素中的所有

元素
var x = document.getElementsByClassName("intro"); // 通过类名查找

改变 HTML


document.write();// 可用于直接向 HTML 输出流写内容。
document.getElementById(id).innerHTML=新的 HTML // 改变 HTML 元素的内容
document.getElementById(id).attribute=新属性值 // 改变 HTML 元素的属性
document.getElementById(id).style.property=新样式 // 改变 HTML 元素的样式

创建新的 HTML 元素


var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);

删除 HTML 元素


var parent=document.getElementById("div1");
// 找到 的

元素:
var child=document.getElementById("p1");
// 从父元素中删除子元素:
parent.removeChild(child);

注意:DOM 需要知道要删除的元素及其父元素才可删除,可使用以下简便写法


var child=document.getElementById("p1");
child.parentNode.removeChild(child);

面向对象


JavaScript 对象是拥有属性和方法的数据。


对象定义:


var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

对象键值对的写法类似于:PHP 中的关联数组


两种方式访问对象属性


person.lastName;
person["lastName"];

对象方法通过添加 () 调用 (作为一个函数)。


name = person.fullName();

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台