无法将 jQuery 转换为用户脚本的纯 Javascript

Question

好的，这就是交易：我正在尝试创建一个用户脚本，以在 Greasemonkey/Chrome/人们用来管理这些事情的任何其他工具中使用。我想做的一部分是为我为这个特定脚本设计的图标创建标签。我至少对如何在 Jquery 中完成此任务有一个粗略的了解。我会使用的代码是这样的：

$('li.tab.iconic').each(function (i) {
    var spanName = $('this').attr(id);
    var toRemove = '_button';
    var spanNameCrop = spanName.replace(toRemove,'');
    $('this').append('<span class="tooltip_label">'+spanNameCrop+'</span>');
});

基本上，我想获取每个li 的id 属性，从中修剪短语“_button”，并将剩余的文本插入将成为标签的跨度中。我的问题是我搜索了高低，但没有找到关于如何在 javascript 中执行这样的循环的明确说明。有可能吗？

另外，我正在设计的网站确实包含 Jquery 库。有没有办法告诉我的脚本在站点加载 jquery 后加载，以便 jquery 脚本可以工作？

编辑：感谢 Avladov。这是最终的脚本。

var jQuery, $ = null;

function addJQuery(callback) {
var p = null;

if(window.opera || window.navigator.vendor.match(/Google/)) {
    var div = document.createElement("div");
    div.setAttribute("onclick", "return window;");
    p = div.onclick();
}
else {
    p = unsafeWindow;
}

jQuery = $ = p.jQuery.noConflict();
callback();
}

var myFunction = function() {
jQuery('#header .tab.iconic[id!="missinge_button"] a').css({"background-image":"url('http://i.imgur.com/2QmZG.png')"});

jQuery('#header .tab.iconic').each(function (i) {
    var tabID = jQuery(this).attr('id');
    var labelName = tabID.replace('_button','');
    if (jQuery(this).find('span[class="tooltip_label"]').length){
    }
    else{
    jQuery(this).append('<span class="tooltip_label">'+labelName+'</span>');
    jQuery('.tooltip_label').css({'text-transform':'capitalize'});
    }
});

};

addJQuery(myFunction);

Answer 1

你不想使用'this' 你想使用this 并且如果 id 不是具有值的变量字符串，你希望它是一个字符串：

$('li.tab.iconic').each(function (i) {
    var spanName = $(this).attr('id');
    var toRemove = '_button';
    var spanNameCrop = spanName.replace(toRemove,'');
    $('this').append('<span class="tooltip_label">'+spanNameCrop+'</span>');
});

如果网站没有使用 jQuery，你可以为他们添加 jQuery，例如：

if(!(window.jQuery && window.jQuery.fn.jquery == '1.8.1')) {var s = document.createElement('script');s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js');s.setAttribute('type', 'text/javascript');document.getElementsByTagName('head')[0].appendChild(s);}

Answer 2

如果您的 Greasemonkey 脚本用于使用 jQuery 的网站，那么您可以在脚本中使用它。使用此代码：

var jQuery, $ = null;

function addJQuery(callback) {
    var p = null;

    if(window.opera || window.navigator.vendor.match(/Google/)) {
        var div = document.createElement("div");
        div.setAttribute("onclick", "return window;");
        p = div.onclick();
    }
    else {
        p = unsafeWindow;
    }

    jQuery = $ = p.jQuery.noConflict();
    callback();
}

Callback 是 Greasemonkey 脚本 中的一个函数。完成此操作后，您可以将 jQuery 与 jQuery 和 $ 一起使用，就像它是普通网页 JavaScript 一样。

这种方法的好处是它不仅适用于 Firefox，也适用于 Chrome 和 Opera。它也不会加载新的 jQuery 脚本，而是重用网页中的脚本。

示例：

var myFunction = function() {
    // Your code here
};

addJQuery(myFunction);

编辑：
有一种方法可以通过在脚本元数据块中使用 @include 和 @match 来限制脚本。
您可以在 GM Wiki 上阅读更多相关信息 - http://wiki.greasespot.net/Metadata_Block

Answer 3

在 document.ready 函数中添加您的 jquery 脚本

$(document).ready(function(){
$('li.tab.iconic').each(function (i) {
    var spanName = $('this').attr('id');
    var toRemove = '_button';
    var spanNameCrop = name.replace(toRemove,'');
    $(this).append('<span class="tooltip_label">'+spanNameCrop+'</span>');
});
})

当页面上的所有资源都被抓取后，代码将执行

您可以在此处阅读更多内容： http://api.jquery.com/ready/