-5

我知道 jQuery 中 $ 的用途是什么。但我想知道 $ 在下面的上下文中的行为是什么。

        var Page = {
       
        init: function () {

            **Page.element = $("content");**
         }
        }

我知道您可能会说此引用是对元素名称内容的引用。但不是！我实际上在这里有一个 DIV 标签

id="内容"

这非常适合它..

有趣的是，如果我在下面添加对 jquery 的引用，它就不起作用。

<script type="text/javascript" charset="utf-8" src="js/jquery-1.4.2.js"></script>

我尝试了几个版本的 jquery

这是页面上的整个 javascript

  <script type="text/javascript" charset="utf-8">

  
    var Page = {

        init: function () {

            Page.element = $("content");
           
            Page.photo = $("body-photo");
            Page.points = $("body-points");
            Page.panel = $("content-2");
            
            Page.content = $("content-1");
            Page.contentCloseBtn = $$("#content-1 .close-btn")[0];

            Page.zoomOutBtn = $$("#content-2 .zoom-out-btn")[0];

                      
            Page.contentCloseBtn.addEventListener("click", bind(function () {
                var state = hasClass(Page.content, "open");
                if (state) removeClass(Page.content, "open")
                else addClass(Page.content, "open")
            }, Page), false);


            Page.attach();
            
        },

        attach: function () {
            Page.points.addEventListener("click", function () { Page.zoomIn.call(); alert('ccc'); }, false);
        },

        zoomIn: function () {
            Page.points.removeEventListener("click", Page.boundZoomIn, false);
            Page.photo.addEventListener("webkitTransitionEnd", Page.zoomInEnd, false);

            addClass(Page.element, "zoom-in");

        },

        zoomInEnd: function () {
            Page.photo.removeEventListener("webkitTransitionEnd", Page.zoomInEnd, false);
            Page.zoomOutBtn.addEventListener("click", Page.zoomOut, false);

            addClass(Page.element, "zoom-in-end");
            addClass(Page.panel, "expanded");
        },

        zoomOut: function () {
            Page.zoomOutBtn.removeEventListener("click", Page.zoomOut, false);

            removeClass(Page.panel, "expanded")
            removeClass(Page.element, "zoom-in-end");
            removeClass(Page.element, "zoom-in");
        }
    };
    
    window.addEventListener("DOMContentLoaded", bind(Page.init, Page), false);
    function startAnimation() {
        Page.init.call(Page);
    }
   
     startAnimation();

    
</script>

我希望它与对 jquery 的引用一起工作，因为这个文件正在被导入另一个网页，该网页具有并需要 jquery 参考

这是HTML

<body class="slide-7">
<div id="content" >
    <header>
        <h1>xxxx</h1>
        <h2>xxxx.</h2>
    </header>
    
    <div id="body-photo">
        <img src="xxxx.jpg" style="height: 100%; width: 100%;" />
        <ul id="body-points" class="hotspot-list">
            <li class="hotspot-1"></li>
            <li class="hotspot-2">
                <div class="tooltip">
                   xxxx
                    <div class="tooltip-corner"></div>
                </div>                
            </li>
            <li class="hotspot-3"></li>
            <li class="hotspot-4"></li>
        </ul>        
    </div>


    <section id="content-1">
        <article>
            <header>xxxx.</header>       
            <p>xxxx.</p>
            <p>xxxx.</p>
        </article>
        <div class="close-btn"></div>
    </section>


    <section id="content-2">
        <article>
            <figure><img src="xxxx.jpg" alt="" /></figure>                
            <hgroup>
                <h1>xxxx</h1>
                <h2>xxxx.</h2>
            </hgroup>
            <div class="copy">
                xxxx            
            </div>

        </article>
        <div class="article-icons">
            <img class="active zoom-out-btn" src="xxxx.png" alt="" />
            <img src="xxxx.png" alt="" />
        </div>
        <!-- <div class="maximize-btn"></div> -->
    </section>


    


</div>
</body>

与此 senario 相关的任何链接也将不胜感激。谢谢 ：）

4

2 回答 2

5

最有可能的是，该片段是基于Prototype构建的。它是另一个类似于 jQuery 的 JavaScript 库，它也$用作速记，但它的工作方式不同。

在 Prototype 中，$使用 ID 进行选择，而$$使用 CSS 选择器进行选择。另一方面，jQuery 仅导出$简写以使用 CSS 选择器进行选择，这与 Prototype 中的用法不同。通过包含 jQuery（不带noConflict模式），$调用中断，因为它们现在由 jQuery 处理。

于 2013-06-19T12:35:39.250 回答
1

该$符号在纯 Javascript 中没有任何特殊含义。事实上，这就是 jQuery 能够使用它并创建别名为符号的jQuery 函数的原因。$

所以你的脚本做同样的事情。好消息是 jQuery 允许您在他们所谓的“无冲突模式”下进行操作。请参阅另一个问题：什么是 jquery noconflict，我们为什么需要它？

也就是说，您最好重写较小的脚本以改用 jQuery。看起来这是一个非常简单的脚本，不会有太多改变。你可以从锻炼中受益..

于 2013-06-19T12:35:43.180 回答