通过重写JS代码为GM-Trouble创建JQueryscript

在没有帮助和有帮助的情况下试图解决这个问题后，我仍然陷入困境。 我的目标是用JS编写一个GM脚本。有人告诉我使用jQuery是因为它很简单。 我上周开始学习JS，脑子里充满了信息。 我需要的是提示/开始/开始/告诉我如何将脚本重写为良好工作的jQuery脚本。 嗯，我读过一些手册，但不知怎么的，我就是搞不懂。可能是我误解了jQuery的语法，这不难理解。至少我重温了手册

以下是脚本的工作方式： 1.我创建了3个函数。一个用于检查输入字段是否包含数字，并且只允许数字、逗号、点和一些控件。第二次替换字符，并在出现严重错误时发出警告。第三步总结四个字段，并将结果放入第五步。 2.我为每个字段创建了两个函数。一个函数隐藏文本，一个函数通过单击“a”显示文本。 3.至少我创建了一个包含所有输入字段和它应该包含的文本的表。 4.点击一个特殊的按钮，便笺就会出现（我还是要写…）

这对我来说是一件大事，把所有的信息放在一起，写一个好看的（我知道现在还不是）脚本

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

下面是我编写的代码。 由于使用了文档，它在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;
}

汇总字段1到字段4，结果显示在字段5中

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

document.write（“”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
document.write（“Text好的，这里有一些半随机指针

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参考位于：

.

.

4）
下面是一个示例Greasemonkey脚本，它与您的表创建、jQuery重构方式相同。它的工作原理与Google主页上的一样。调整标题和
TargetNode
以匹配您的目标站点：
（警告：此示例脚本将创建您的表，但您不能在Greasemonkey脚本中以这种方式绑定
onClick
s等。请参阅：）

/==UserScript==
//@name jQuery测试/演示
//@namespace谷歌
//@include*.google.tld/
//@需要http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
//==/UserScript==
/*可选：
window.addEventListener（“加载”，Greasemonkey_main，false）；
*/
$（文件）.ready（Greasemonkey_main）；
功能Greasemonkey\u main（）
{
/*---获取id=“main”span（Google.com）中的第一个节点
如果没有，则获取html正文的第一个节点。
*/
var TargetNode=$（“#main*：first”）；
如果（！TargetNode）
TargetNode=$（“body*：first”）；
$（TargetNode）。之后
(
""
+ ""
+ ""
+ ""
+ ""
+ ""
+ ""
+“TextBrock Adams，你救了我一天。我只需要开始，现在我可以建立它。非常感谢你。希望我不会想到一千个问题；-）再次感谢。@Faili，很高兴能为您提供帮助！如果您在一段时间后陷入困境，请随意提问。只要提问者参与并做出诚实的尝试，StackOverflow的员工不会介意提问。
$("#huhu").css          ('display', 'none');
$("#field1_show").css   ('display', 'inline');
$("#field1_hide").css   ('display', 'none');

// ==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>"
    );
}