More Related Content
Similar to Web设计 4 锋利的j_query(进入企业级应用阶段)
Similar to Web设计 4 锋利的j_query(进入企业级应用阶段) (20)
Web设计 4 锋利的j_query(进入企业级应用阶段)
- 3. 一个相册的实现
获取 a 元素 href 路径
var source =
whichpic.getAttribute("href");
获取 placeholder 元素
var placeholder =
document.getElementById("placeholder
");
设置 placeholder 的 src 属性
placeholder.setAttribute("src",sourc
e);
- 7. 一个相册的实现
<li>
<a
href="images/fireworks.j
pg"
onclick="showPic(this);
return false;" title="A
fireworks
display">Fireworks</a>
</li>
- 8. 一个相册的实现
<li>
<a
href="images/fireworks.j
pg"
onclick="showPic(this);
return false;" title="A
fireworks
display">Fireworks</a>
</li>
问题:
如果没有“ return false;” 呢?
- 9. 一个相册的实现
增加提示语句
<p id="description">Choose an
image.</p>
怎样让提示语句部分根据图片的变化显示图
片描述??
- 12. 一个相册的实现
• 修改 showPic 函数:
• var text =
whichpic.getAttribute("title");
• var description =
document.getElementById("description
");
• description.firstChild.nodeValue =
text;
- 13. 一个相册的实现
• 美化它!
<link rel="stylesheet" type="text/css"
href="main.css"/>
- 15. 为何选择 jQuery ?
• jQuery 思想: write less, do more
• 封装了大量 DOM 操作
• 封装 Ajax
- 16. DOM 到 jQ
• document.getElementById("placeholder")
• $("#placeholder")
- 17. DOM 到 jQ
• 重写 javascript 的相册
var source = whichpic.getAttribute("href");
转换为 whichpic.href
var placeholder =
document.getElementById("placeholder");
转换为 $("#placeholder")
placeholder.setAttribute("src",source);
转换为 placeholder.attr("src",source);
- 18. DOM 到 jQ
• 新的函数:
function showPic(whichpic) {
var source = whichpic.href;
$
("#placeholder").attr("src",source);
var desc = whichpic.title;
$("#description").text(desc);
}
- 19. DOM 到 jQ
• 再简洁些:
function showPic(whichpic) {
$
("#placeholder").attr("src",whichpic
.href);
$
("#description").text(whichpic.title
);
}
加入到“示例 2” 查看效果