Javascript 正在选择：document.ready（）上的目标_Javascript_Jquery_Cross Browser

Javascript 正在选择：document.ready（）上的目标

javascript jquery

Javascript 正在选择：document.ready（）上的目标,javascript,jquery,cross-browser,Javascript,Jquery,Cross Browser,下面是一个简单的测试用例，演示我正在尝试做的事情： <html> <head> <title>Test</title> </head> <body> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(fun

下面是一个简单的测试用例，演示我正在尝试做的事情：

<html>
<head>
<title>Test</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $(":target").css('color', 'red');
});
</script>
<ul>
    <li id="one">One</li>
    <li id="two">Two</li>
    <li id="three">Three</li>
</ul>
</body>
</html>

很明显，Chrome、Opera和Safari在document.ready（）期间找不到：target元素，但稍后调用相同的代码（通过控制台或附加到click事件的函数）会找到这些元素

什么时候JS可以访问：target？

您可以使用css3目标选择器进行样式设置工作

:target
{
 color:red;
}

既然您的示例中没有专门的逻辑（

if

语句或诸如此类的语句），为什么不使用CSS进行样式化呢？伪类是一个

请注意，这将适用于所有现代浏览器，甚至一些非常旧的浏览器（例如Chrome1和Firefox1.3），但对于InternetExplorer，它仅从版本9开始受支持

如果您愿意，您也可以在这两个位置（CSS和JavaScript）执行此操作，但是JavaScript似乎是多余的，除非您特别需要IE您应该这样做

$("li:target")

这将选择元素。这是更好的方法

请参考这个

或者您应该删除documentready并将脚本放在html文档的末尾，因为页面没有重新加载。您需要将其绑定到

hashchange

：

$(window).on('hashchange', function(){
    $(":target").css('color', 'red');
});

请注意，您还有很多工作要做，可以将其与

$（文档）结合使用。ready

这是作为注释发布的，但后来被删除，您可以尝试等待窗口加载事件：

$(window).on('load hashchange', function(){
    $(':target').css('color', 'red');
});

对我来说，这在Chrome上产生了好坏参半的结果，它在页面刷新（F5）时有效，但在地址栏中按enter键时无效

我不知道是否有任何方法可以使用

：target

选择器在页面加载时正确处理此问题，但您始终可以获取哈希值并将其用作选择器：

$(window).on('load hashchange', function(){
    var target = window.location.hash;
    $(target).css('color', 'red');
});

更新

我对这个问题进行了一些研究，并进行了一些测试，我有一些见解要分享：

首先，我们需要了解，在内部调用

$（':target'）

时，jQuery使用

querySelectorAll（':target'）

，这意味着它与伪类的CSS规范直接相关，但为什么不在

document.ready（）内部工作呢
我发现将代码包装在setTimeout（fn，0）
中实际上使选择器可用：
$(document).ready(function(){
    setTimeout(function(){
        $(':target').css('color', 'red'); //THIS WORKS
    },0);
});

您可以阅读有关添加零毫秒超时实际上是如何产生差异的解释，但基本上它允许浏览器完成其他与javascript无关的任务（在这方面，我们会发现使实际的CSS伪类可用于查询）。我相信Firefox以不同的方式管理其内部进程，这就是为什么代码在那里工作而不需要超时
现在，我还发现jQuery的内部sizzle选择器引擎为不支持CSS：target
伪类的浏览器提供了一个回退，您可以在document.ready（）中使用它，而不会出现问题：
$(document).ready(function(){
    $(':target()').css('color', 'red');
});

这是因为它不是依赖CSS类，而是一个javascript实现，利用window.location对象的hash属性，内部定义如下：
"target": function( elem ) {
        var hash = window.location && window.location.hash;
        return hash && hash.slice( 1 ) === elem.id;
    }

您应该注意的唯一一点是，如果没有向该函数传递一个选择器，例如：target（div）
，它将遍历页面上的每个元素，因此，我相信使用我之前提供的解决方案仍然是一个更好的选择。
我认为他试图实现的目标可能不仅仅是将其变为红色。@Kabie完全正确-这只是一个虚拟负载来演示问题。我实际上想对：target项执行的操作包括.parent（）和进一步的DOM遍历，直到CSS的下一次迭代给出我们！或者$来选择一个不在搜索列表底部的元素，它需要JS。有趣的是，window.location.hash在document.ready（）期间似乎是可用的，即使：target在那一点上与任何内容都不匹配。这对于解决方法来说已经足够了，但并没有回答这是否是浏览器错误的问题……虽然$（“：target”）
在document.ready（）
期间没有找到任何东西，$（window.location.hash）确实找到了相应的项。好奇者和好奇者…@StephenBaillie我更新了我的答案，对这个问题有了一些见解
$(document).ready(function(){
    $(':target()').css('color', 'red');
});

"target": function( elem ) {
        var hash = window.location && window.location.hash;
        return hash && hash.slice( 1 ) === elem.id;
    }