无法将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脚本将工作？

编辑：得到它的工作感谢阿夫拉多夫。这是最后的脚本。

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

如果您的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

Answer 2

添加您的jQuery脚本的document.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/

Answer 3

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

$('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);}