我知道$在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
這裏的幾個版本是頁面
<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怎麼把這個文件是工作在整個的javascript正在被導入到另一個網頁,並要求jQuery參考
這裏我s的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有關的鏈接也將不勝感激。謝謝:)
你絕對已經包含了一個腳本,它使用$來通過它的id來選擇元素。 – jolt
@Zenith在* jQuery *碰巧使用的慣例中......! – deceze
根據jQuery的約定id選擇器應該有#...但在這裏它並沒有,如果我添加一個引用jquery比這個代碼不工作,因爲我在問題中提到... –