Question

目前，我正在尝试学习一些基本的jQuery。但是当我尝试使用jQuery创建一个小东西时，它不起作用。

首先，我认为这是我的标准浏览器Chrome不受支持。当我尝试在IE和Firefox中渲染它时，结果保持不变。

我错了什么？

在这里你可以找到代码（ps我正在使用母版页，但我认为这没有任何影响）

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#orderedlist").addClass("tof");
        $("#orderedlist > li").addClass("groen");
        $("#orderedlist li:last").hover(
        function () {
            $(this).addClass("rood");
        },
        function () {
            $(this).removeClass("rood");
});
    });

</script> </asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<ol id="orderedlist">
    <li>Werken met <a href="http://www.jquery.com">JQuery</a></li>
    <li>Gebruik van selectors en events</li>
    <li>Ajax-functionaliteit</li>
</ol>

这是CSS（Stijl.css）代码：

.tof
{
    font-family:Verdana;
    font-weight:bold;
    font-size:14pt;     
}
.groen 
{
    color:Green;
}

.rood 
{
    color:Red;
}

Answer 1

我发现代码中没有明显的错误。

我认为这可能与任何其他图书馆发生美元符号冲突，例如MooTools或Prototype。

尝试使用这样的匿名函数包装脚本：

(function($){
  $(document).ready(function () {
    $("#orderedlist").addClass("tof");
    $("#orderedlist > li").addClass("groen");
    $("#orderedlist li:last").hover(
    function () {
       $(this).addClass("rood");
    },
    function () {
        $(this).removeClass("rood");
    });
  });
})(jQuery.noConflict());

如果有另一个库导致美元符号冲突，这应该可以解决问题。

Answer 2

母版页确实有所作为，很可能是您发布问题的原因。母版页将使用与您指定的ID不同的ID呈现您的html标记。例如，这将呈现如下内容：

<ol id="Content2_Control1_orderedlist">
    <li>Werken met <a href="http://www.jquery.com">JQuery</a></li>
    <li>Gebruik van selectors en events</li>
    <li>Ajax-functionaliteit</li>
</ol>

因此使用ID的jquery选择器将无法正常工作。

Answer 3

看看here。

您的代码似乎正在按预期工作。所以尝试升级到jQuery 1.4.4。唯一的区别是这不使用标签。

我认为你的问题是你从asp生成的HTML与你的aspx文件不一样。

为了安全起见，您可以使用选择器$("[id$=orderedlist]")，即使.NET在垃圾邮件中添加您的ID，也可以使用。{/ p>

对jQuery没有影响

3 个答案: