javascript 如何在 Magento 1.9.0.1 rwd 主题上使用 jQuery？

How can I use jQuery on Magento 1.9.0.1 rwd theme?

提问by KaMZaTa

I noticed Magento 1.9.0.1 rwd theme now include jQuery library and use "jQuery.noConflict();" associated on "$j" token on default.

我注意到 Magento 1.9.0.1 rwd 主题现在包含 jQuery 库并使用“jQuery.noConflict();” 默认情况下与“$j”令牌相关联。

First, I'ld like to use google CDN jQuery library instead of local jQuery library.

首先，我想使用 google CDN jQuery 库而不是本地 jQuery 库。

As second, how can run my jQuery code?

其次，如何运行我的 jQuery 代码？

For example, I tried to insert in minicart.phtml:

例如，我尝试在 minicart.phtml 中插入：

    .....
       $_cartQty = 0;
    }
?>


<script type="text/javascript">
    $j(document).ready(function() {
        $('#header-cart').hide();
    });
</script>


<a href="#header-cart" class="skip-link skip-cart <?php if($_cartQty <= 0): ?> no-count<?php endif; ?>">
    <span class="icon"></span>
    ........

Also, I tried to use add my code at the end of app.js:

另外，我尝试在 app.js 末尾添加我的代码：

.....
};

$j(document).ready(function() {
    ProductMediaManager.init();
});

$j(document).ready(function() {
    $('#header-cart').hide();
});

but no effect. Where I wrong? How can I run my code in a separate file in app/js folder?

但没有效果。我哪里错了？如何在 app/js 文件夹中的单独文件中运行我的代码？

回答by clockworkgeek

“First, I'ld like to use google CDN jQuery library instead of local jQuery library.”

“首先，我想使用 google CDN jQuery 库而不是本地 jQuery 库。”

You should research more before asking easy questions, the following is taken from this postand this post. Overall I think it's not worth the extra effort just to rely on a 3rd party.

在提出简单的问题之前，您应该进行更多研究，以下内容摘自这篇文章和这篇文章。总的来说，我认为仅仅依靠第三者不值得付出额外的努力。

In your theme's local.xmllayout file add this.

在你的主题local.xml布局文件中添加这个。

<default>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/lib/jquery-1.10.2.min.js</name></action>
        <block type="core/text" name="google.cdn.jquery">
            <action method="setText">
                <text><![CDATA[<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="/skin/frontend/rwd/default/js/lib/jquery-1.10.2.min.js">\x3c/script>');</script>
<script>jQuery.noConflict();</script>]]></text>
            </action>
        </block>
    </reference>
</default>

---

---

“As second, how can run my jQuery code?”

$j(document).ready(function() {
    $('#header-cart').hide();
});

“第二，如何运行我的 jQuery 代码？”

$j(document).ready(function() {
    $('#header-cart').hide();
});

Here you know you must use $jinstead of $but you have forgotten that on the 2nd line! There are many ways to change it,

在这里你知道你必须使用$j而不是，$但你忘记了在第二行！有很多方法可以改变它，

1. Use $jeverywhere:

   $j(document).ready(function() {
       $j('#header-cart').hide();
   });
   

2. Rename $jusing the function argument:

   $j(document).ready(function($) {
       // $ is different inside this function only
       $('#header-cart').hide();
   });
   

3. Use Prototype instead:

   // $j is alias for jQuery
   $j(document).ready(function() {
       // $ is Prototype alias for document.getElementById
       $('header-cart').hide();
   });
   

1. 随处使用$j：

   $j(document).ready(function() {
       $j('#header-cart').hide();
   });
   

2. $j使用函数参数重命名：

   $j(document).ready(function($) {
       // $ is different inside this function only
       $('#header-cart').hide();
   });
   

3. 改用原型：

   // $j is alias for jQuery
   $j(document).ready(function() {
       // $ is Prototype alias for document.getElementById
       $('header-cart').hide();
   });
   

回答by Pixelomo

To avoid conflicts with prototype.js you'll need to use jQueryinstead of $

为了避免与prototype.js发生冲突，你需要使用jQuery而不是$

For example instead of:

例如，而不是：

$(document).ready(function(){
    // do something
});

Write:

写：

jQuery(document).ready(function(){
    // do something
});