Javascript-2

javascript

一、输出

document.write('hello');
document.writeln('hello');
console.log('hello');
console.info('hello');

二、弹框

alert('hello');
confirm('hello');
prompt('titile', 'default value');

三、事件

3.1 事件

onclick
onfocus
onblur
onchange
ondblclick
onkeydown
onkeyup
onkeypress
onmouseover
onmouseout
onmousemove
onmousedown
onmouseup
onsubmit
onload
onresize
onscroll

// 给DOM添加事件
dom.onclick = function() {
    // TODO...
};
// 添加事件监听
// 标准浏览器
dom.addEventListener('click', function() {
    // TODO ...
}, false);
// IE
dom.attachEvent('onclick', function() {
    // TODO ....
});

3.2 事件对象

dom.onclick = function(event) {
    // 标准浏览器：把event作为参数传入
    // IE: window.event
    // 通常兼容性写法：
    var event = event || window.event;
};

// 获取事件源
if(event) {
    var d = event.target; // 标准浏览器
} else {
    var d = window.event.srcElement; // IE对浏览器
}

// 获取鼠标位置
// 浏览器
event.clientX
event.clientY
// 页面
event.pageX
event.pageY
// 屏幕
event.screenX
event.screenY

// 获取
event.keyCode // 键盘按键
event.button  // 鼠标按键
// 阻止事件冒泡
event.stopPropagation(); // 标准浏览器
window.event.cancelBubble = true; // IE浏览器
// 阻止默认行为
event.preventDefault(); // 标准浏览器
window.event.returnValue = false; // IE浏览器

四、DOM

4.1 节点

元素节点 [Element]
属性节点 [Attribute]
文本节点 [Text]
nodeName
nodeValue
nodeType

4.2 属性

.firstChild
.lastChild
.parentNode
.childNodes

4.3 方法

// 获取
.getElementById()
.getElementsByTagName()
.getElementsByName()
.getElementsByClassName()
.querySelector()
.querySelectorAll()
// 创建
.createElement()
.createAttribute()
.createTextNode()
// 操作
.appendChild()
.removeChild()
.replaceChild()
.cloneNode()
.insertBefore()
// 属性
.setAttribute('name', 'value');
.getAttribute('name')
// 获取元素中的内容
.innerHTML
.innerText
// 修改图片路径
img.src = 'newsrc';
img.setAttribute('src', 'newsrc');
// 获取常用节点
document.documentElement;  // html
document.body; // body
document.images; // 所有图片
document.forms; // 所有表单
document.anchors; // 所有超链接

// 获取样式
box.style.xxx  // 操作的是内联样式
box.style[xxx]
box.className = 'xx';  // 改变类名
// 获取box在css中的xxx样式值
getComputedStyle(box).xxx  // 标准
box.currentStyle.xxx  // IE

// 尺寸
.offsetLeft
.offsetTop
.offsetWidth
.offsetHeight
.clientLeft
.clientTop
.clientWidth
.clientHeight
.scrollLeft
.scrollTop
.scrollWidth
.scrollHeight

五、BOM

window

5.1 history

history.back();  // 后退
history.forward(); // 前进
history.go()

5.2 location

location.href  // 可以获取或设置路径
location.searh  // ?后的参数
location.reload()  // 刷新

5.3 screen

5.4 navigator

navigator.userAgent

5.5 document

document.title  // 设置或获取网页标题

六、对象

6.1 定义对象

var obj = new Object()
var obj = {};
Function Person() {}
var obj = new Person();
// 工厂模式
function factory(name, age) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    return obj;
}
var p1 = factory('tom',23);

6.2 原型、原型链

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.eat = function() {};
var obj = new Person('tom', 23);
obj.__proto__

6.3 继承

function Student(){}
// 让学生继承Person
Student.prototype = new Person();
Student.prototype.constructor = Student;

七、AJAX

7.1 使用

// get
var xhr = new XMLHttpRequest();
xhr.open('GET', 'url?name=xxx&pwd=xxx', true);
xhr.send();
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        var data = xhr.responseText;
    }
};

// post
var xhr = new XMLHttpRequest();
xhr.open('POST', 'url', true);
// post请求一定要加这个，否则服务器拿不到数据
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send('name=xxx&pwd=xxx');
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        var data = xhr.responseText;
    }
};

7.3 跨域

1. document.domain
2. jsonp
3. cors