Question

我对jQuery很新，所以这可能是一个非常愚蠢的问题。 :-)我想尝试以下工作：

<html>
<head>
    <title>JQuery test</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1"); // Load jQuery

      function DoSomething(link)
      {
        $(link).after('<div>hello world!</div>');
      }
    </script>
</head>
<body>
    <a href="javascript: DoSomething(this);">Click!</a>
</body>
</html>

现在似乎没有做任何事情。但是，如果我将该行更改为：

$('a').after('<div>hello world!</div>');

然后插入DIV。但是，我想使用传递给函数的元素来控制元素的插入位置。基本上，我无法弄清楚如何基于通过“this”指针传递给函数的元素来启动jQuery查询。

感谢您的帮助，

~Justin

Answer 1

使用jQuery，您通常可以避免在HTML中插入任何javascript，例如：href="javascript: ..."或href="#" onclick="..."。一种更简洁的方法是编写一个查询来定位该元素并从那里应用行为。定位元素的最简单方法是给它一个ID，但你可以使用任何你喜欢的方法。

<a href="#" id="myLink">Click!</a>

和你的jQuery：

$('#myLink').click(function() {
    $(this).after("<div>hello world!</div>");
});

在event handling functions内，this指的是事件定位的DOM元素。

如果你想从一个元素中获取一个jQuery对象 - 只需将它传递给构造函数：

$(domElement)

由于您调用处理程序的方式，您可能遇到问题。尝试将链接更改为此样式：

<a href="#" onclick="doSomething(this)">

请记住让doSomething()返回false

Answer 2

从<a href="javascript: DoSomething(this);">Click!</a>更改为<a href="#" onclick="doSomething(this)">确实有效。

this仅在JavaScript函数中有意义。像onclick这样的事件处理程序是一种功能。

javascript：伪URL不是函数。它们不在页面上任何对象的上下文中执行。它们只是一个字符串。单击该链接与在Web浏览器的地址栏中键入该字符串相同。因此this将提供默认值window，即全局对象，当没有特定的this对象时，它始终会被传递。

javascript：伪URL是完全的灾难，绝不应该用于任何事情（好吧，除了bookmarklet）。 onclick表单更好，但您应该记得添加return false;，以便它不会跟随#链接并跳转到页面顶部。

（带有onclick的非链接元素，或者样式按钮可能比链接更合适，具体取决于DoSomething正在做什么。）

jquery - 从元素开始通过this指针传递给函数

2 个答案: