jquery - jQuery构造函数有什么用？另外，我对DOM树感到困惑。而且，看起来我不知道jQuery对象是什么

Question

假设这是正确的术语，对他们有什么处理？

jQuery("#removeUser", jQuery(myform)).click(
    function()
    {
        jQuery(this).parent().parent().remove(); 
    }); 

因此，在上面的代码中，构造函数中似乎需要2个参数。第一个参数采用称为“ removeUser”的HTML元素的ID，而另一个实际上是var，它是HTML元素及其嵌套子元素的整个集合的字符串。

基本上，上面的代码所做的是当某人单击“ removeUser”按钮时删除一个表单。我复制了原始代码并对其进行了修改，尽管（在某种程度上）它可以工作，但我并不完全了解这里发生的事情。

当我尝试仅使用“ #removeUser”元素创建新的jQuery实例时，没有得到想要的结果。而不是仅删除一个“用户”，而是删除了所有这些用户。因此，这里发生了一些我完全不了解的事情。

那么，在函数内部，谁是“ this”？是removeUser元素还是字符串？我很困惑！

============

更新：

因此，基于Cory和Torsten Walter的评论，我可以给jQuery“构造函数”类似以下内容：

    jQuery("#removeUser", "<tr name=parent1><td>User: </td><td name=parent2><button id=\"removeUser\">remove</button></td></tr>").click(
    function()
    {
        jQuery(this).parent().parent().remove(); 
    }
);

或者，以下内容供不喜欢使用“ jQuery”的用户使用：

    $("#removeUser", "<tr name=parent1><td>User: </td><td name=parent2><button id=\"removeUser\">remove</button></td></tr>").click(
    function()
    {
        $(this).parent().parent().remove(); 
    }
);

另外，我注意到有些人不喜欢我使用非唯一ID，因此我可能会遇到以下情况：

    $("button", "<tr name=parent1><td>User: </td><td name=parent2><button>remove</button></td></tr>").click(
    function()
    {
        $(this).parent().parent().remove(); 
    }
);

因为，每个“用户”始终只有一个按钮。

另外，有人建议我改用一门课。连同不使用第二个参数的建议，它不会给我想要的结果。

    $(".removeUser", "<tr name=parent1><td>User: </td><td name=parent2><button class=\"removeUser\">remove</button></td></tr>").click(
    function()
    {
        $(this).parent().parent().remove(); 
    }
);

以上将删除所有“用户”，这不是我想要的。

============

更新：

另外，我对“ parent1”和“ parent2”的理解是错误的，对吗？它实际上根本不是在访问parent1吗？

我为myform实际拥有的是以下内容：

var myform = "<table>"+ //<---parent 1, right?
                    "  <tr>" + //<--parent 2?
                    "     <td>User " + jQuerycountForms + ":</td>" + 
                    "     <td>UserID:&nbsp;</td>" + 
                    "     <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" + 
                    "     <td>Roles:&nbsp;</td>" + 
                    "     <td><textarea name='Roles["+jQuerycountForms+"]'></textarea></td>" + 
                    "     <td><button id=\"removeUser\" onclick=\"jQuerycountForms--;\">remove</button></td>" + //Or, is that "td" parent2?
                    "  </tr><br/>"+
                    "</table>";

在我的HTML中，我有如下内容：

<div id="container">
            <table>
                <tr>
        <td><button id="addUser" type="button">add</button></td>
                </tr>
            </table>
        </div>

“ addUser”按钮的作用是添加另一个用户。有一些jQuery javascript，它执行添加到此元素的新用户的添加。

当我尝试摆脱table变量的外部myform元素时，每当我单击已删除的用户时，我都会遇到问题。最终发生的事情是我最终删除了整个第一个表。

因此，myform的以下值：

    var myform = "  <tr>" + //Now the "table" element shown earlier in the HTML is parent1!
                    "     <td>User " + jQuerycountForms + ":</td>" + 
                    "     <td>UserID:&nbsp;</td>" + 
                    "     <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" + 
                    "     <td>Roles:&nbsp;</td>" + 
                    "     <td><textarea name='Roles["+jQuerycountForms+"]'></textarea></td>" + 
                    "     <td><button id=\"removeUser\" onclick=\"jQuerycountForms--;\">remove</button></td>" + 
                    "  </tr><br/>";

会导致不再有add按钮了。

那么，removeUser按钮的父母是谁？哪一位是最接近的父母，谁是该父母的父母？

既然是Javascript，我实际上看不到对HTML所做的更改。如果这是Java渲染，则更改将反映在HTML源代码中。但是，有了这，就像我有我的想象力来解决问题。而且，如果您对Javascript不太熟悉，那么很难看清正在发生的事情。

============

更新：

因此，我对单击一位用户后HTML的外观的猜测是：

        <div id="container">
            <table>
        <tr>
        <td><button id="addUser" type="button">add</button></td>
        <table> <!-- Well, I'm definitely the grand parent. -->
            <tr> <!-- But, am I anyone's parent? -->
                <td>User 0:</td>
                <td>UserID:&nbsp;</td>
                <td><input type='text' name='UserID[0]'></td>
                <td>Roles:&nbsp;</td>
                <td><textarea name='Roles[0]'></textarea></td>
                <td> <!-- Or, am I the daddy? -->
                    <button id=removeUser onclick="jQuerycountForms--;">remove</button>
                </td>
            </tr><br/>
                    </table>
                </tr>
            </table>
        </div>

因此，基本上，我的问题的第二部分是：“谁是第一个访问的父母（parent2）？”是td还是tr元素？为什么不认为tr是td的父级？看起来肯定是这样。

============

更新：

这是对Cory的jsFiddle链接的回应（感谢btw，这似乎是一个有用的工具）。以下代码显示了结构

var button = $('.removeUser');
alert("Me = " + button[0].tagName); //button
alert("Parent = " + button.parent()[0].tagName); // td
alert("Grand-Parent = " + button.parent().parent()[0].tagName); // tr
alert("Great Grand-Parent = " + button.parent().parent().parent()[0].tagName); // tbody
alert("Great, Great Grand-Parent = " + button.parent().parent().parent().parent()[0].tagName); // table

所以，让我明白这一点。如果这是一种真正的OOP语言，那么我们将具有以下内容：

Jquery button = new Jquery('.removeUser');

这个jQuery“类”确实是某种类型的集合，但是显然只有一个成员吗？单个成员具有“ tagName”之类的属性以及其他属性。

但是，jQuery类本身具有允许用户浏览DOM树（相对于该树的根）的方法。

我发现，如果我有两个“ removeUser”按钮，那么我也可以对按钮[1]使用数组表示法。但是，当然，您不能有一个以上的父母，因此使用parent()[1]进行的任何操作都不起作用。

通常，我会假设jQuery拥有“ tagName”属性，但事实并非如此。而是，该属性属于此数组的成员。无论如何，我如何查找这些数组成员拥有的属性？

Answer 1

$(foo, bar)或多或少只是$(bar).find(foo)的合成糖。 $(bar)本身具有三种完全不同的含义，具体取决于bar的类型：


如果bar是函数，则在文档加载后立即运行；
如果它是其中带有HTML标签的字符串，则从其中创建一个DOM片段（基本上是一段网页，但未附加到当前页面，只是浮在空中）
否则将其视为选择器，并尝试在当前页面上找到匹配的元素。


因此，$("#removeUser", "<tr>...</tr>").click(...)要做的是用给定的内容创建一个新的tr元素，从内部选择具有正确ID的元素，然后在其上附加一个点击处理程序。除非您稍后将该元素添加到当前页面，否则这将毫无效果，因为您正在对不属于该页面的分离元素进行工作人员。