雨夜带刀

象 CSS 选择器那样，在 javascript 中用同样的语法来选取一个或一组 DOM 元素，这种简便的语法在目前的 javascript 选择器领域中算是事实上的标准了，jQuery 的成功也与它的选择器(sizzle)的易用是密不可分。

各大 javascript 框架和类库都有一套独自的选择器，我花了点时间自己开发了一套选择器，在性能测试方面也不输给 jQuery 的 sizzle。在 javascript 选择器的开发过程中，学到了不少东西，这些东西如果自己不去开发，估计永远也没机会学到。现在，对于 javascript 选择器的原理以及如何去实现都有了一定的了解，在这里，我觉得有必要将一些心得记录下来，并分享给有需要的人。

jQuery 在 CSS3 的选择器出来以前，就实现了很多自己私有的选择器，虽然这些私有的选择器在日常的应用中使用率都不太高，但是其作为一个类库，要适应和兼容各种场景，面对各种技术水平的web开发者，这些私有选择器还是有不小的用处，甚至可以说，CSS3 的选择器在一定程度上也吸纳了 jQuery 的私有选择器的思想，在它的基础上再做一些改良，使之成为现在的 W3C 标准。

有时会碰上这种需求，需要将数组中重复的元素删除掉，而只保留一个。最先想到的办法很可能就是用2个for循环来做比较然后去除掉重复的元素，代码如下所示：

方法1：

Array.prototype.distinct = function(){
	var arr = [],
	     len = this.length;

	for ( var i = 0; i < len; i++ ){
		for( var j = i+1; j < len; j++ ){
			if( this[i] === this[j] ){
				j = ++i;
			}
		}
		arr.push( this[i] );
	}
	return arr;
};

使用方法1如果碰到数据比较多时性能上会差很多。那么请继续看下面的方法。

方法2：

Array.prototype.distinct = function(){
	
	var self = this,
		arr = self.concat().sort(); // 创建一个新数组并排序
	
	arr.sort(function( a, b ){
		if( a === b ){
			var n = self.indexOf( a ); //获取索引值
			self.splice( n, 1 );
		}
	});
		
	return self;
	
};

事件触发器从字面意思上可以很好的理解，就是用来触发事件的，但是有些没有用过的朋友可能就会迷惑了，事件不是通常都由用户在页面上的实际操作来触发的吗？这个观点不完全正确，因为有些事件必须由程序来实现，如自定义事件，jQuery的ajax框架的一些自定义事件就必须由事件触发器来实现。当然，在一些特殊情况下，用事件触发器来触发事件比用户的实际操作来触发事件更方便。

对于实现事件触发器，浏览器都有原生的方法来支持，但是在兼容性上又有很大的出入，这种兼容性的问题完全在意料之中，IE有自己的方法，其他标准浏览器也有一套方法，不说谁的方法好与不好，对于WEB开发者来说搞出几套方法就是对开发人员的一种折磨。IE支持fireEvent方法来实现事件触发，标准浏览器支持dispatchEvent来实现事件触发，两面派的IE9是两者都支持。下面是出自prototype.js的源码(其实我是从司徒正美的博客复制过来的)：

var fireEvent = function fireEvent(element,event){
	if (document.createEventObject){
		// IE浏览器支持fireEvent方法
		var evt = document.createEventObject();
		return element.fireEvent('on'+event,evt)
	}
	else{
		// 其他标准浏览器使用dispatchEvent方法
		var evt = document.createEvent( 'HTMLEvents' );
		// initEvent接受3个参数：
		// 事件类型，是否冒泡，是否阻止浏览器的默认行为
		evt.initEvent(event, true, true);  
		return !element.dispatchEvent(evt);
	}
};

CSS的颜色值有3种表示方式，为十六进制、RGB、颜色名称，用代码表示分别为：

color : #345456;
color : rgb(255,152,10);
color : red;

平时在编写CSS代码时，在设置颜色值时使用的最多的方式是十六进制。如果要对颜色值进行计算，就必须将十六进制的颜色值转换成RGB模式。那么如何进行转换呢？

别急，先来看看十六进制的颜色值和RGB颜色值之间的对应关系。比如上面的十六进制的颜色值：#345456，其中的前2位“34”对应R，中间2位“54”对应G，最后2位“56”对应B，有了这个对应关系那么剩下的就是进制转换的事了。

<p>之前我写过一篇关于<a href="https://blog.yiguochen.com/getstyle.html">获取元素计算的样式</a>的文章，后来在使用发现中还有一些没想到的兼容问题，今天我对原来的代码进行了优化，并对一些常见的兼容问题进行了处理。</p>
<p>在javascript中“-”(中划线或连字符)代表的是减号，而在CSS中，许多样式属性都有这个符号，如：padding-left、font-size等，所以在javascript中如果出现如下的代码就一个错误：</p>
<pre class="brush: c-sharp">
elem.style.margin-left = '20px';
</pre>
<p>正确的写法应该是：</p>
<pre class="brush: c-sharp">
elem.style.marginLeft = '20px';
</pre>
<p>这里需要把CSS的中划线去掉并把原来紧跟在中划线后的字母大写，俗称“驼峰式”写法，不管是使用javascript设置或是获取元素的CSS样式都应该是驼峰式的写法。但是不少对CSS熟悉而又对javascript不太熟悉的新手朋友总是会犯这种低级错误，使用replace的高级用法可以很简单的将CSS属性中的中划线替换成驼峰式的写法。</p>
<pre class="brush: c-sharp">
var newProp = prop.replace( /\-(\w)/g, function( $, $1 ){
return $1.toUpperCase();
});
</pre>