javascript 杂类收集
contentDocument || contentWindow
对于contentDocument
定义和用法
contentDocument 属性以 HTML 对象返回框架容纳的文档。
可以通过所有标准的 DOM 方法来处理被返回的对象。
语法
frameObject.contentDocument
contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。
对于contentWindow
contentWindow 兼容各个浏览器，可取得子窗口的 window 对象。
contentWindow.document
一般用法
elem.contentDocument || elem.contentWindow.document
杂类
element.style.cssText element.style.zoom
document.body || document.documentElement
body 是一个子节点 <body></body>
documentElement 是 根节点 <html> </html >
如果没有声明文档<!DOCTYPE>的话，就会导致兼容性的问题
解决方案
document.body.xxx || document.documentElement.xxx
activeElement
activeElement 返回文档中获取当前焦点的元素。
// 获取到焦点的元素
var ele = document.activeElement;
// 但是jquery 发现 有些情况这样调用的话会抛出异常的
// 所有建议解决方案
try{
document.activeEelemt;
}catch(err){}
originalEvent
defaultPrevented
returnValue
isDefaultPrevented
isPropagationStopped
isImmediatePropagationSopped
preventDefault
stopPropagation
stopImmediatePropagation
relatedTarget
currentStyle 和 getComputedStyle
//
var div = document.createElement('div);
//
function getStyle(name){
if(div.currentStyle){
return div.currentStyle[name];
}
else[
return div.ownerDocument.defaultView.getComputedStyle(div,null)[name];
}
}
link 链接 提供的属性
baseURI attributes //你所设置的属性 sheet // cssRules // css 样式规则。 styleSheet rules
var link = document.createElement('link');
var sheet, cssRules ;
if('sheet' in link){
sheet = 'sheet';
cssRules = 'cssRules';
}
else{
sheet = 'styleSheet';
cssRules = 'rules';
}
link[sheet] && link[sheet][cssRules] // 查看css 文件里面的内容。。。。。。。
styleSheet.cssText 和 appendChild(document.createTextNode())
function createCss(cssText,id){
var elem = document.getElementById(id);
if(elem) return;
elem = document.createElement('style');
elem.id = id;
document.getElementByTagName('head')[0].appendChild(elem);
if(elem.styleSheet){ // ie
elem.styleSheet.cssText = cssText;
}
else{ // w3c
elem.appendChild(document.createTextNode(cssText));
}
}
element.dataset 和 element.attributes
对于 element.dataset 是html5 的接口，用于提取 data-* 里面的内容
element.attributes 是获取 元素对象的所有 属性。
兼容写法
function parseElement(element,raw){
element = $(element)[0];
var dataset = {};
if(element.dataset){
//
dataset = $.extend({},element.dataset);
}
else {
var attrs = element.attributes;
for(var i = 0,len = attrs.length;i<len;i++){
var attr = attrs[i];
var name = attr.name; // 获取他的name的值。
if(name.indexOf('data-') === 0){
// 解析name 的内容
name = camelCase(name.substring(5));
// value 的值才是正真的最后结果。
dataset[name] = attr.value;
}
}
}
}
//
function camelCase(str){
return str.toLowerCase().replace(/-([a--z])/g,function(all,letter){
return (latter + '').toUpperCase();
})
}
toString 的两种实现
var toString1 = Object.prototype.toString; // 调用 Object 实现
var toString2 = {}.toString; // 依赖 {} 实现
// test
var object = {};
toString1.call(object); // [object Object]
toString2.call(object); // [object Object]
对于参数初始化处理两种方式
// 方式一
function test(options){
options = options || {};
}
// 方式二
function test2(options){
options || (options = {});
}
+false 和+true的值
+false // 0 +true // 1
+(Date类型数据)
var date = new Date(); // date : Tue Nov 10 2015 13:44:53 GMT+0800 (中国标准时间) +date // 1447134293586
RegExp 类型成 String 类型
var reg = /[a-z]/; '' + reg // '/[a-z]/' 变成了string 类型了 + reg // NaN 变成了int 类型了
null 是否 和 undefined 相等 ？
var n = null; var u; n === u // false n == u // true
判断RegExp类型是否相等
例如两个值 a ，b 都是 RegExp 类型 判断两个是否相等 只需要判断 a.global a.ignoreCase a.lastIndex a.multiline a.source 是否于b的相等就可以了。
删除自身的属性和方法
function Test(){
}
//
Test.prototype = {
destroy:function(){
for(var p in this){
if(this.hasOwnPrototype(p)){
delete this[p];
}
}
// 防止后面被继续触发。
this.destroy = function(){}
}
}
compareDocumentPostion 和 contains
对于 compareDocumentPosition
判断一个段落相当于另外一个段落的位置 可能的返回值： 1,2,4,8,16,32 各自的含义见： ps: 返回的值可能是值得组合。 用法： node.compareDocumentPosition(node) pps ： ie8- 不支持这个方法。
对于contains
if(document.documentElement.contains){
// 然后使用 contains 判断是否包含进去。
}
cookie 操纵
基本的操纵有，set get remove getAll 核心数据 document.cookie 返回对象格式：'f=xxx;p=fff;s=fdsa;' 核心方法（将 字符串转义成 对象格式 然后返回出来） 对于 set 方法的实现 需要知道一些参数 expires domain path secure 然后调用 document.cookie = 'text'; 实现。。。 对于 remove 方法的实现 不是移除掉 这个对象 而是 将这个对象的expires = new Date(0) 就可以了。。。。。。 对于 get 方法的实现 就是通过解析 document.cookie 转换成对象，然后获取这个key 的value 值就可以了。。。。。
对于实现拖拽的思路
主要监听 mousedown mousemove mouseup 三个时间。然后对应不同事件处理 具体些一个博客实现把。