为GM创建JQueryscript-通过重写JS代码进行麻烦 [英] Creating a JQueryscript for GM - Trouble by rewriting the JS code
问题描述
尝试在没有帮助的情况下解决问题后，我仍然受困. 我的目标是用JS编写GM脚本.有人告诉我要使用jQuery，因为它很简单. 好吧，我上周开始学习JS，我的头上充满了信息. 我需要的是hint/start/beginning/无论如何告诉我如何将脚本重写为可以正常工作的jQuery脚本. 好吧，我读了一些手册，但是以某种方式我无法弄清楚.可能是我误解了jQuery的语法，这很难理解.至少我重温了手册...
after trying to solve the problem without and with help I'm still stuck. My aim was writing a GM-script with JS. Someone told me to use jQuery because of its simplicity. Well, I started learning JS last week and my head is full of information. What I need is hint/start/beginning/whatever telling me how to rewrite the script into a fine working jQuery-script. Well, I read some manuals, but somehow I just cannot figure it out. It might be that I misunderstood the syntax of jQuery which can't be hard to unserstand. At least I relived the manuals...
这是脚本的工作方式: 1.我创建了3个函数.一种用于检查输入字段是否包含数字并且仅允许数字，逗号，点和某些控件的控件.一秒钟替换字符并发出警告.严重错误.第三项将四个字段相加并将结果放在第五个中. 2.我为每个领域创建了两个函数.一个功能隐藏文本，一个功能通过单击"a"显示文本. 3.至少我创建了一个表，其中包含所有应包含的输入字段和文本. 4.单击一个特殊按钮，便笺出现(我仍然要写那个...)
This is how the script should work: 1. I created 3 functions. One for checking whether the inputfields contain numbers and only allow digits, commas, points and some controls. A second to replace characters and alert if sth. is badly wrong. The third to sum up four fields and put the result in the fifth. 2.I created two functions for each field. One function hides the text, one function shows the text by clicking 'a'. 3. At least I created a table with all inputfields and text it should contain. 4. By clicking a special button the note appears(I still have to write that...)
对我来说，把所有信息放在一起并写出好看的脚本(我知道还不是，但是)很重要.
It's a big deal for me putting all the information together and writing a good and goodlooking(and I know it is not - yet) script.
我真的希望我能帮助我.我只需要开始...
I really hope I you can help me. I just need a beginning...
以下是我编写的代码. 由于使用了沙箱等原因，由于使用了document.write函数，因此无法在GM中使用.:-(
The following is the code I wrote. It won't work in GM because of the used document.write function because of the sandbox, etc. :-(
检查输入字段是否包含数字，仅允许数字，逗号，点和某些控件
checks whether the inputfields contain numbers, only allows digits, commas, points and some controls
function check(event) {
var keycode;
if (window.event) {
keycode = window.event.keycode;
} else if (event) {
keycode = event.which;
} else {
return true;
}
if (47 < keycode) {
if (keycode < 58) {
return true;
}
}
var keycodeascii = new Array(0,8,44,46);
while (keycodeascii.length > 0) {
if (keycode == keycodeascii.pop()) {
return true;
}
}
return false;
}
用'.'替换任何字符，不允许在开头和结尾使用字符
replaces any character by '.',doesn't allow characters at the beginning and end
function replace(id) {
with(id) {
var oldValue = value;
var newValue = oldValue.replace(/\W+/g, ".");
newValue = newValue.replace(/\W+$/g, "");
newValue = newValue.replace(/^\W/g, "");
value = newValue;
//alerts if digits are split by more than character
var digits = newValue.split(".");
if (digits.length >= 3) {
alert("Sie haben " + (digits.length -1) + " Sonderzeichen verwendet. Bitte korrigieren Sie Ihre Eingabe.");
field.focus();
}
}
}
总结field1-field4，结果出现在field5
sums up field1-field4, result appears in field5
function calculate() {
var summe = (1*window.document.getElementById('field1').value) + (1*window.document.getElementById('field2').value) + (1*window.document.getElementById('field3').value) + (1*window.document.getElementById('field4').value);
window.document.getElementById('field5').value = summe;
}
用于扩展和拍手信息的功能
function to expand and clap information
function show() {
document.getElementById("huhu").style.display = "inline";
document.getElementById("field1_show").style.display = "none";
document.getElementById("field1_hide").style.display = "inline";
}
function hide() {
document.getElementById("huhu").style.display = "none";
document.getElementById("field1_show").style.display = "inline";
document.getElementById("field1_hide").style.display = "none";
}
function expandCom() {
document.getElementById("huhu1").style.display = "inline";
document.getElementById("field2_show").style.display = "none";
document.getElementById("field2_hide").style.display = "inline";
}
function clapCom() {
document.getElementById("huhu1").style.display = "none";
document.getElementById("field2_show").style.display = "inline";
document.getElementById("field2_hide").style.display = "none";
}
function expandOut() {
document.getElementById("field3div").style.display = "inline";
document.getElementById("field3_show").style.display = "none";
document.getElementById("field3_hide").style.display = "inline";
}
function clapOut() {
document.getElementById("field3div").style.display = "none";
document.getElementById("field3_show").style.display = "inline";
document.getElementById("field3_hide").style.display = "none";
}
function expandTest() {
document.getElementById("field4div").style.display = "inline";
document.getElementById("field4_show").style.display = "none";
document.getElementById("field4_hide").style.display = "inline";
}
function clapTest() {
document.getElementById("field4div").style.display = "none";
document.getElementById("field4_show").style.display = "inline";
document.getElementById("field4_hide").style.display = "none";
}
function expandEff() {
document.getElementById("field5div").style.display = "inline";
document.getElementById("field5_show").style.display = "none";
document.getElementById("field5_hide").style.display = "inline";
}
function clapEff() {
document.getElementById("field5div").style.display = "none";
document.getElementById("field5_show").style.display = "inline";
document.getElementById("field5_hide").style.display = "none";
}
创建具有所有需要和希望的结构的表
creates a table with all needed and wished structures
document.write("<table border='1' cellpadding='10' cellspacing='0'><tbody>");
document.write("<tr>");
document.write("<td bgColor='#FFFFDD'>");
document.write("<table border='0' cellpadding='0' cellspacing='2'><tbody>");
document.write("<tr>");
document.write("<td>");
document.write("<input type='text' id='field1' name='field_analysis' size='5' value='' onkeypress='return check(event)' onChange='replace(field1)'>");
document.write("<a onClick='show()' id='field1_show'>Text</a><a 'onClick='hide()' id='field1_hide' style='display: none'>Text</a><br><div id='huhu' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");
document.write("<tr>");
document.write("<td>");
document.write("<input type='text' id='field2' name='field_communication' size='5' value='' onkeypress='return check(event)' onChange='replace(field2)'>");
document.write("<a onClick='expandCom()' id='field2_show'>Text</a><a onClick='clapCom()' id='field2_hide' style='display:none'>Text</a><br><div id='huhu1' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");
document.write("<tr>");
document.write("<td>");
document.write("<input type='text' id='field3' name='field_outworking' size='5' value='' onkeypress='return check(event)' onChange='replace(field3)'>");
document.write("<a onClick='expandOut()' id='field3_show'>Text</a><a onClick='clapOut()' id='field3_hide' style='display:none'>Text</a><br><div id='field3div' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");
document.write("<tr>");
document.write("<td>");
document.write("<input type='text' id='field4' name='field_testing' size='5' value='' onkeypress='return check(event)' onChange='replace(field4)'>");
document.write("<a onClick='expandTest()' id='field4_show'>Text</a><a onClick='clapTest()' id='field4_hide' style='display:none'>Text</a><br><div id='field4div' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");
document.write("<tr>");
document.write("<td>");
document.write("<hr>");
document.write("<input type='text' id='field5' name='field_effort'size='5' value='' OnFocus='calculate()' onkeypress='return check(event)' onChange='replace(field5)'> ");
document.write("<a onClick='expandEff()' id='field5_show'>Text</a><a onClick='clapEff()' id='field5_hide' style='display:none'>Text</a><br><div id='field5div' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");
document.write("</tbody></table>");
document.write("</td>");
document.write("</tr>");
document.write("</tbody></table>");
非常感谢大家帮助我找到解决方案. Faili
A big thank you to all helping me find a solution. Faili
推荐答案
好，这是一些半随机指针.
Ok, here's some semi-random pointers.
1) Greasemonkey当前在jQuery 1.4上不能很好地使用，因此请使用jQuery 1.3.2. 通过将以下行添加到标题中，将其合并到您的GM脚本中:
1) Greasemonkey currently does not play nice with jQuery 1.4, so use jQuery 1.3.2. Incorporate it into your GM script by adding this line to the header:
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
.
.
2)
像这样的东西:
.
.
2)
Stuff like this:
document.getElementById("huhu").style.display = "none";
document.getElementById("field1_show").style.display = "inline";
document.getElementById("field1_hide").style.display = "none";
.
用jQuery变成这样:
.
Becomes this with jQuery:
$("#huhu").css ('display', 'none');
$("#field1_show").css ('display', 'inline');
$("#field1_hide").css ('display', 'none');
jQuery版本也将在不同的浏览器中更好地工作.
The jQuery version will work much better across different browsers, too.
.
.
3)
一个非常方便的jQuery参考位于: http://www.jqapi.com/
.
.
3)
A very handy jQuery reference is at: http://www.jqapi.com/
.
.
4)
这是一个带有表创建的示例Greasemonkey脚本，它重构了jQuery方式.它可以按原样在Google主页上运行.调整标题和TargetNode以匹配您的目标站点. :
(警告:此示例脚本将创建您的表，但您无法通过Greasemonkey脚本以这种方式绑定onClick等.请参见:
.
.
4)
Here is a sample Greasemonkey script with your table-create, refactored the jQuery way. It works, as-is on the Google homepage. Adjust the header and TargetNode to match your target site. :
(Warning: This sample script will create your table, but you can't bind the onClicks, etc., this way in a Greasemonkey script. See: GM pitfalls.)
// ==UserScript==
// @name jQuery Test/Demo
// @namespace Google
// @include *.google.tld/
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==
/* Optional:
window.addEventListener ("load", Greasemonkey_main, false);
*/
$(document).ready (Greasemonkey_main);
function Greasemonkey_main ()
{
/*--- Get the first node inside the id="main" span (Google.com)
If that's not there, then get the first node of the html body.
*/
var TargetNode = $("#main *:first");
if (!TargetNode)
TargetNode = $("body *:first");
$(TargetNode).after
(
"<table border='1' cellpadding='10' cellspacing='0'><tbody>"
+ "<tr>"
+ "<td bgColor='#FFFFDD'>"
+ "<table border='0' cellpadding='0' cellspacing='2'><tbody>"
+ "<tr>"
+ "<td>"
+ "<input type='text' id='field1' name='field_analysis' size='5' value='' onkeypress='return check(event)' onChange='replace(field1)'>"
+ "<a onClick='show()' id='field1_show'>Text</a><a 'onClick='hide()' id='field1_hide' style='display: none'>Text</a><br><div id='huhu' style='display:none'>HUHU</div>"
+ "</td>"
+ "</tr>"
+ "<tr>"
+ "<td>"
+ "<input type='text' id='field2' name='field_communication' size='5' value='' onkeypress='return check(event)' onChange='replace(field2)'>"
+ "<a onClick='expandCom()' id='field2_show'>Text</a><a onClick='clapCom()' id='field2_hide' style='display:none'>Text</a><br><div id='huhu1' style='display:none'>HUHU</div>"
+ "</td>"
+ "</tr>"
+ "<tr>"
+ "<td>"
+ "<input type='text' id='field3' name='field_outworking' size='5' value='' onkeypress='return check(event)' onChange='replace(field3)'>"
+ "<a onClick='expandOut()' id='field3_show'>Text</a><a onClick='clapOut()' id='field3_hide' style='display:none'>Text</a><br><div id='field3div' style='display:none'>HUHU</div>"
+ "</td>"
+ "</tr>"
+ "<tr>"
+ "<td>"
+ "<input type='text' id='field4' name='field_testing' size='5' value='' onkeypress='return check(event)' onChange='replace(field4)'>"
+ "<a onClick='expandTest()' id='field4_show'>Text</a><a onClick='clapTest()' id='field4_hide' style='display:none'>Text</a><br><div id='field4div' style='display:none'>HUHU</div>"
+ "</td>"
+ "</tr>"
+ "<tr>"
+ "<td>"
+ "<hr>"
+ "<input type='text' id='field5' name='field_effort'size='5' value='' OnFocus='calculate()' onkeypress='return check(event)' onChange='replace(field5)'> "
+ "<a onClick='expandEff()' id='field5_show'>Text</a><a onClick='clapEff()' id='field5_hide' style='display:none'>Text</a><br><div id='field5div' style='display:none'>HUHU</div>"
+ "</td>"
+ "</tr>"
+ "</tbody></table>"
+ "</td>"
+ "</tr>"
+ "</tbody></table>"
);
}
这篇关于为GM创建JQueryscript-通过重写JS代码进行麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
