JS和JQuery扩展方法

var  el =  function (dom){      this .dom = dom; }; el.prototype = {      destroy:  function (){ this .dom =  null },      setAttr:  function (a, b){ this .dom[a] = b},      setCss:   function (a, b){ this .dom.style[a] = b} }; var  $ =  function (o){      return  new  el(document.getElementById(o)); }; $( 'xxx' ).setAttr( 'x' ,  'y' );

要扩展的话只要扩展el类就OK。比如
el.prototype.html = function(x){this.dom.innerHTML = x}

这些只提供一个参考，它的缺点：
1.每次$都会生成一个el对象，可能会消耗内存。

2.el的每个方法中没对dom检查，可能会抛出异常。

jQuery.fn.__toggleCheck = function  (idPrefix) {      var  c = false ;      $( this ).click( function  () {          if  (c) c = false ;          else  c = true ;          $( "input[type=checkbox][id^="  + idPrefix + "]" ).each(              function  () {                  this .checked = c;              }          );      }); };   jQuery.fn.__setRepeaterStyle = function  (itemTag, evenStyle, hoverStyle) {      $( "#"  + this .attr( "id" ) + " "  + itemTag + ":odd" ).addClass(evenStyle);      var  cssOriginal = "" ;      $( "#"  + this .attr( "id" ) + " "  + itemTag + "" ).mouseover( function  () {          cssOriginal = $( this ).attr( "class" );          $( this ).addClass(hoverStyle);      });        $( "#"  + this .attr( "id" ) + " "  + itemTag + "" ).mouseout( function  () {          $( this ).removeClass();          if  (cssOriginal.length > 0) {              $( this ).addClass(cssOriginal);          }      }); };

以上函数调用如下：

 

 

        <div id="selBox">
        <input type="checkbox" id="a_1" />1
        <input type="checkbox" id="a_2" />2
        <input type="checkbox" id="a_3" />3
        <input type="checkbox" id="a_4" />4
        <input type="checkbox" id="a_5" />5
        <input type="checkbox" id="a_6" />6
        <input type="checkbox" id="a_All" />All</div>        
            <div id="a_All1">Check</div>
        </div>
    <style type="text/css">
        table tr {}
        table .rowStyle { background:#dedede;}
        table .hoverStyle {font-weight:bold; color:Red; background-color:Gray;}
    </style>
        <table id="tb" style="width:100%; border:solid 1px #dedede;">
            <tr>
                <td>1</td>
            </tr>
                        <tr>
                <td>1</td>
            </tr>
                        <tr>
                <td>1</td>
            </tr>
        </table>

        <script type="text/javascript">
            $("#a_All").__toggleCheck("a_");
            $("#a_All1").__toggleCheck("a_");
            $("#tb").__setRepeaterStyle("tr", "rowStyle", "hoverStyle");
    </script>

 

<script>
//JS扩展String函数test，其它类推
String.prototype.test = function(s){
	alert(this+s);
}
var str = 'hello';
str.test('world');//helloworld

//JQ扩展
(function($){
	$.fn.test = function(op){
		var defaults = {a:'no'}
		var setings = $.extend(defaults,op);
		alert(setings.a);
	}
})(jQuery);

//调用
$(function(){
	$().test();
	$().test({a:'yes'});
})
</script>