将jQuery转换为用户脚本的普通Javascript时遇到问题

Having trouble converting jQuery to plain Javascript for userscripts

本文关键字：Javascript 遇到 问题 转换 jQuery 用户 脚本      更新时间：2023-09-26

好吧，事情是这样的：我正试图创建一个用户脚本，用于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脚本就可以工作了？

编辑：多亏了阿夫拉多夫，它才得以运行。这是最后的剧本。

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);

如果您不想使用'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);}

如果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();
}

回调是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

在文档中添加jquery脚本。ready函数

$(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/

相关文章：