Question

如何使用jQuery方法之类的本机JavaScript编写document.querySelector('.class').doSomeThing()代码

exp：$('.class').doSomeThing();

Answer 1

Element.protototype.doSomething = function( passedFunction ){        
    passedFunction.call( this );

    return this;
}

要同时使用querySelectorAll，您还需要将功能分配给NodeList.prototype.doSomething。

Answer 2

实施prototype对象的Element。

Element.prototype.doSomething = function(){
  // do something
}

Answer 3

如果我理解得对：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Bla! </title>
        <script type='text/javascript'>
          function SayB1(data) {
            alert (data);
          }
          function Init() {
              var buttons = document.getElementsByClassName('button1');
              for (var i in buttons) {
                  buttons[i].onclick = function() {
                      SayB1(this.innerHTML);
                  };
              }
          }
        </script>
    </head>
    <body onload='Init();'>
        <button class='button1'> B1 -1 </button>
        <button class='button1'> B1 -2 </button>
        <button class='button2'> B2 -1 </button>
        <button class='button2'> B2 -2 </button>
        <button class='button1'> B1 -3 </button>
    </body>
</html>

Answer 4

有多种方式可以像插件一样执行jQuery。这是我喜欢的一种方式：

(function(scope, name, undefined){
    scope[name] = function(selector){
        return new Plugin(selector);
    }

    function Plugin(selector){
        buildArrayLike(this, selector)
    }
    function buildArrayLike(obj, selector){
        var el = document.querySelectorAll(selector);
        for(var c = 0; c < el.length; c++) obj[c] = el[c];
        obj.length = el.length;
    }

    Plugin.prototype = {
        constructor : Plugin,
        method : function(){
            alert(this.length);
            return this; //For chaining;
        }
    }
})(window, '$')



console.log($('div'));

$('div').method();

小提琴：http://jsfiddle.net/Rw5BJ/

如何使用本机JavaScript编写document.querySelector（'。class'）。doSomeThing（）

4 个答案: