创建一个函数来获取像jquery这样的选择器和纯javascript

Question

我厌倦了在简单的项目中包含jquery,但我已经习惯了它,我正试图打破自由形式对它的依赖.我正在尝试创建一个函数,它将获得类似于类和标记的选择器的相同感觉.示例:$('selector').innerHTML = ".something";.我一个接一个地循环遍历它们:

var classElements = document.querySelectorAll('.something');
for (var i = classElements.length - 1; i >= 0; i--) {
   classElements[i].innerHTML = "This Is A Div";
} 

但我想创建一个函数,我可以循环选择器而不必为我想要找到的所有内容写出for循环.所以我可以像上面那样写它$('.something').innerHTML = "something";

到目前为止,这是我所拥有的,但它只会获得每个选择器的第一个,并且不会获得所有选择器.毋庸置疑,我非常困难,而且我对这个主题的阅读越多,我就越困惑.我想知道是否有人可以指出我正确的方向,我的想法有缺陷或解释jquery如何做到这一点.这是我的代码:

window.getElements = function(selector) {
    var selectors = document.querySelectorAll(selector);
    for (var i = selectors.length - 1; i >= 0; i--) {
        var elements = selectors[i];
    }
    return elements;
};

getElements(".something").innerHTML = "something";

这是一个小提琴小提琴

Answer 1

这是你怎么做的.我已经完成了你所要求的,它允许你使用所有本机功能而不是硬币包装.jQuery返回自己的api,它作用于选择器.我所做的是创建一个选择器,允许您对它找到的每个元素进行操作

window.getElements = function(selector,cb) {
    var selectors = document.querySelectorAll(selector);
    [].forEach.call(selectors, cb);
};

getElements(".something", function(el){el.innerHTML = "ha"});

getElements("#one", function(el){el.style.background = "red" });

它需要找到的dom列表,将其转换为数组,然后在传递本机代码的地方调用传递的函数

这是一个小提琴

https://jsfiddle.net/y52f4wh8/5/

Jquery的工作方式不同:

window.jquery = function(selector,cb) {
	var selectors = document.querySelectorAll(selector);
    
    function command(cb) {
	   [].forEach.call(selectors, cb);
	};
    // Here we return our own api that uses the command function to act on
    // our selected list.
    return {
     html: function(str){
     	command(function(el){
      	el.innerHTML=str;
      });
      
     },
     bg: function(color){
     	command(function(el){
      	el.style.background = color; 
      });
     }
    }
};
// The jquery way!
jquery(".something").html("ha");