为GM创建JQueryscript - 通过重写JS代码来解决问题

Question

试图在没有帮助的情况下解决问题之后我仍然陷入困境。 我的目标是用JS编写GM脚本。有人告诉我使用jQuery因为它简单。 好吧，我上周开始学习JS，脑子里充满了信息。 我需要的是提示/开始/开始/告诉我如何将脚本重写为精细的jQuery脚本。 好吧，我读了一些手册，但不知怎的，我只是想不出来。可能是我误解了jQuery的语法，这对于unserstand来说并不难。至少我重温了手册......

这是脚本的工作方式： 我创造了3个功能。一个用于检查输入字段是否包含数字并且仅允许数字，逗号，点和一些控件。第二个替换字符和警告，如果......是非常错误的。第三个是总结四个字段并将结果放在第五个字段中。 2.我为每个领域创建了两个函数。一个功能隐藏文本，一个功能通过单击“a”显示文本。 3.至少我创建了一个包含所有输入字段和应包含的文本的表。 4.通过单击一个特殊按钮，会出现一个注释（我仍然要写那个......）

对我来说，将所有信息放在一起并写出一个好的和好看的（我知道它还不是）脚本对我来说是一件大事。

我真的希望你能帮助我。我只需要一个开始...

以下是我写的代码。 由于使用了document.write函数，因为沙盒等，它在GM中不起作用： - （

检查输入字段是否包含数字，仅允许数字，逗号，点和某些控件

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

用'。'替换任何字符，不允许在开头和结尾添加字符

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

中

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 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";
}

创建一个包含所有需要和希望结构的表

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

Answer 1

好的，这是一些半随机指针。

<强> 1） Greasemonkey目前与jQuery 1.4不兼容，所以使用jQuery 1.3.2。 将此行添加到标题中，将其合并到GM脚本中：

// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

。
。
的 2） 像这样的东西：

document.getElementById("huhu").style.display = "none";
document.getElementById("field1_show").style.display = "inline";
document.getElementById("field1_hide").style.display = "none";

。
用jQuery成为了这个：

$("#huhu").css          ('display', 'none');
$("#field1_show").css   ('display', 'inline');
$("#field1_hide").css   ('display', 'none');

jQuery版本在不同浏览器中的效果也会更好。

。
。
的 3） 一个非常方便的jQuery引用位于：http://www.jqapi.com/

。
。
的 4） 这是一个带有table-create的Greasemonkey脚本示例，重构了jQuery方式。它可以在Google主页上使用。调整标题和TargetNode以匹配您的目标网站。 ： （警告：此示例脚本将创建您的表，但您不能以这种方式在Greasemonkey脚本中绑定onClick等。请参阅：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>"
    );
}