第一个jQuery脚本,简单的Form Focus,有什么问题吗?

First jQuery script, simple Form Focus, any problems?

提问人:Jeff 提问时间:11/17/2009 最后编辑:Jeff 更新时间:11/17/2009 访问量:174

问:

在研究了一段时间的文档后,我想出了我的第一个jQuery脚本。这是一个简单的表单焦点脚本。只是想确保我做对了。

我找不到任何关于jQuery的“条件语句”的内容,所以我假设你只使用标准的JavaScript /语句。ifelse if

为了测试是否存在,jQuery文档解释说我应该使用。#id.length

$(document).ready( function() {
    if ($('#one').length) {
        $('#one').focus();
    }
    else if ($('#two').length ) {
        $('#two').focus();
    }
    else {
        return false; // is this even necessary?
    }
});

编辑:

有可能并且将存在于同一页面上,所以我想先定位。#one#two#one

jQuery查询

评论


答:

1赞 David Hedlund 11/17/2009 #1

你的脚本是准确的,尽管正如你所预期的那样,没有必要在你的 else 子句中返回任何内容(甚至不需要一个)

1赞 Langdon 11/17/2009 #2

根据界面的显示方式...例如,元素 1 和 2 是否会同时存在,如果没有,您可以执行以下操作:

$(document).ready( function() {
  $('#one').focus();
  $('#two').focus();
}

如果它们将一起存在于同一页面上,那么这很好:

$(document).ready( function() {
  if ($('#one').length) {
    $('#one').focus();
  }
  else {
    $('#two').focus();
  }
}

如果没有返回任何元素,.focus() 实际上不会失败或任何东西,所以你可以自由地在一行中完成它,而没有条件。

此外,返回 false 位不是必需的。

评论

0赞 Jeff 11/17/2009
是的,并且将同时存在。#one#two
3赞 Scott Evernden 11/17/2009 #3

您无需测试长度。如果包装集为空,则不调用 Focus 函数。如果仅存在 #one 或 #two,则以下操作正常:

$(function() {  // shorthand for $(document).ready()
       $('#one, #two').focus();
});

评论

0赞 Doug Neiner 11/17/2009
伟大的解决方案斯科特。我想有更好的方法可以做到这一点。显然,如果它们都存在,这将导致问题。
0赞 Hooray Im Helping 11/17/2009
$(document).ready(function() {}) 不是首选的 jQuery 方式,因为 $(function()) 只是调用了文档就绪处理程序?它当然更能传达剧本的意图。
0赞 scunliffe 11/17/2009
@Hooray 我正在帮助 - 我想一旦你习惯了 $(function(){...});为就绪处理程序设置代码的语法 它有助于清除混乱。
0赞 Doug Neiner 11/17/2009
您的代码几乎与@duckyflip相同,但您需要添加,因为 jeff 希望选择 if 和 exists together:.filter(:first)#one#one#two$('#one, #two').filter(':first').focus();
0赞 Doug Neiner 11/17/2009 #4

你所做的在功能上是正确的。但是,随着jQuery的推进,您将不想进行多次查找。这将是更好的编写方式:

$(document).ready( function() {
    var $one = $("#one"), $two = $("#two");
    if ( $one.length ) $one.focus();
    else if ( $two.length ) $two.focus();
});

每次使用 $(“#id”) 时,它都会执行查找。如果第一次可以将其缓存在变量中,则可以节省以后查找的时间。我的变量名称中的符号完全是任意的,但它可以帮助您记住哪些变量具有 jQuery 包装的对象。var $one = $("#one")$

评论

0赞 David Hedlund 11/17/2009
不过,jQuery在内部使用选择器缓存
0赞 Jeff 11/17/2009
@d:这是否意味着在这种情况下设置并不重要?实际上,我只是以这种方式设置了我的脚本,但我想听到更多关于“选择器缓存”的信息。vars
0赞 Doug Neiner 11/17/2009
我会@d回答,但无论如何这可能是一个好主意。如果你不这样做,那么你更有可能在以后执行$(“#one .some_child”),而不是仅仅使用$one.find('.some_child')。我也有兴趣听到更多关于内部缓存的信息。
1赞 Doug Neiner 11/18/2009
我刚刚和jQuery核心团队的Codey Lindey聊了聊。jQuery中没有内部选择器缓存。每次使用 or 函数时,都会创建一个新的 jQuery 对象并执行新的查找。通过将 jQuery 对象缓存在变量中,您可以真正加快代码速度。jQuery()$()
1赞 duckyflip 11/17/2009 #5

你的逻辑总体上是正确的,尽管在使用jQuery时,你确实可以减少使用标准Javascript所需的cheks和检测的数量

  • 在jQuery对象上调用方法或属性不会返回错误,即使找不到该对象(例如 )$("#one")

  • 您可以一次获取多个 DOM 元素(例如 ),也可以一次对所有这些对象调用方法 `$("#one,#two")

  • 无需在结束时返回任何东西$(document).load(function(){...})

因此,在ming中拥有所有这些要点,您可以像这样更新脚本:

$(document).ready(function() {
  $('#one,#two').focus();
});

编辑

既然你表示要首先选择,那么在两者和都存在于同一页面上的情况下,你所要做的就是将引用放在列表的末尾,如果它存在,它将是始终被选中的引用。#one#one#two#one

$('#two,#one').focus();

评论

0赞 Jeff 11/17/2009
即使和将同时存在,这是否有效?#one#two
0赞 Doug Neiner 11/17/2009
Jeff,从最新版本的jQuery开始,情况并非如此。选择器始终按文档顺序返回,因此将选择 DOM 中的最后一个。
0赞 Jeff 11/17/2009
@duckyflip:当我第一次写剧本时,我就注意到了这一点。我决定使用 /,因为我认为,“jQuery 将首先关注它是否存在,然后它会看到存在并关注它,依此类推......ifelse if#one#two
2赞 Doug Neiner 11/17/2009
只需在选择器中添加一点点:它就会起作用。$('#one, #two').filter(':first').focus();
0赞 David Hedlund 11/17/2009
$('#one, #two').filter(':first') 和 $('#two, #one') 方法都依赖于手头 DOM 的属性。如果 #one 是 DOM 中的最后一个元素,则 :first 解决方案将失败,如果 #one 是 DOM 中的第一个元素,则“#two, #one”解决方案将失败