JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

DOM是一种适用于多种环境和多种程序设计语言的通用型API。

如果想要把本书(JS DOM编程艺术)学到的DOM技巧运用在web浏览器以外的应用环境里,严格遵守“第1级DOM”能够让你避免与兼容性有关的任何问题;

tips:setAttribute是第1级DOM;

图片切换初级js:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>gallery</title>

<style>
</style>
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>

<body>
<h1>Snapshots</h1>
<ul>
    <li><a href="img/s1.jpg" onclick="showPic(this); return false" title = "A fireworks display">Fireworks</a></li>
    <li><a href="img/s2.jpg" onclick="showPic(this); return false"title = "A cup of black coffee">Coffee</a></li>
    <li><a href="img/s3.jpg" onclick="showPic(this); return false"title = "A red, red rose">Rose</a></li>
    <li><a href="img/s4.jpg" onclick="showPic(this); return false"title = "The famous clock">Big Ben</a></li>
</ul>
<img id="placeholder" src="img/s1.jpg" alt="my image gallery">

<!-- 这里是为了展示showPic里面的代码,才放进来的
  <script type="text/javascript">
//     function showPic(whichpic){

//     var source = whichpic.getAttribute("href");
//     var placeholder = document.getElementById("placeholder");
//     placeholder.setAttribute(‘src‘, source);

//     }
// </script>-->
</body>
</html>

应用到文档里面的JS, 通过<script>标签的src属性来引入,同时引入的JS文件里面不需要包含<script>标签;

<script src="scripts/showPic.js"></script>

时间: 2024-10-05 05:02:12

JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)的相关文章

JS DOM编程艺术——重回图片库—— JS学习笔记2015-7-14(第84天)

题外话:看教程的时候看到老师可以从一个句首调到句末的快捷键,这个快捷键是Ctrl+左右方向键: 在已有元素之前插入一个新元素: insertBefore()方法 语法:parentElement.insertBefore(newElement, targetElement) Ajax 这个词用来概况异步加载内容的技术: 太困了,未完待续...

JS DOM编程艺术的学习—— JS学习笔记2015-7-5(第76天)

由于看高程3卡住了,所以现在在学习JS DOM编程艺术来巩固基础: 一.在看JS DOM 编程艺术的时候,有个作者提到的方法很实用, 就是在JS中变量和函数的命名方法:  变量的命名方法为使用下划线,比如: var temp_color = ['red','blue']; 函数就使用驼峰法,比如: function current_date(){}; 这样的习惯可以帮助理解,提高可读性,在理解变量和函数名的时候就很方便了: 二.还有个收获就是关于“对象”的理解又加深了 之前对于什么对象的属性,对

JS DOM 编程艺术 随笔

DOM 最大的作用就是将整个文档通过节点树来展现.通过类似方法可以获取特定节点,并绑定js方法实现与人的交互. 1.通过dom方法,获取页面的元素(getElementsByTagName/id,通过class(getAttribute))2.获取元素之后,为他们绑定行为(点击/其他)的处理事件3.最后把所有函数绑定到window.onload()函数上面去 onload = function(){function1function2...} plus 小技巧: <a onclick=>函数

JS DOM编程艺术——显示缩略语列表—— JS学习笔记2015-7-16(第85天)

缩略语列表函数 HTML 结构: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>显示缩略语列表</title> <style> body{ font-family: "Helvetiva", "

&lt;书摘&gt;《JS DOM编程艺术》

2016/03/04 12:00 第一二章:JS的简史以及基本语法 1.P11 2.variable 3.P13 等于 4.P13 5.P14 转义字符 6.关联数组不是一个好习惯 7.P18 对象 8.P31  firefox和chrome的兼容性:+1900,IE好着呢: 第三章:强大的DOM编程 1.DOM:Document Object Model OR MAP(文档,对象,模型OR地图): 2.P40 中间 [请注意] 3.p42 上部分例子 4.案例研究:JavaScript图片库(

JS DOM编程艺术——JS图片库2—— JS学习笔记2015-7-9(第80天)

childNodes属性: element.childNodes 它是包含这个元素的全部子元素的数组: nodeType属性: 每一个节点都有nodeType属性,这个属性可以让我们知道自己正在与哪种节点打交道 node.nodeType 返回 1 是指该节点为元素节点: 返回 2 是指该节点为属性节点: 返回 3 是指该节点为文本节点: nodeValue属性: node.nodeValue 但是这个属性在实际使用的时候需要配合childNodes才行,详情看例子 firstChild和las

JS DOM编程艺术——图片库优化—— JS学习笔记2015-7-11(第82天)

onclick事件,其实不仅仅是鼠标点击事件,其实对于使用键盘的用户来说也可以触发该事件,比如用tab键移动连接后,按下enter键同样可以触发onclick事件 所以在实际的代码编程的过程中,如果你考虑使用onkeypress事件的时候要小心,这意味着用户每按下一个按键都会触发它. 在看代码优化这一章节时,我想到的是,很多时候程序中的bug出现,也许就是思维不严密,不严谨所造成的漏洞. 然而在实际的开发过程中,我们不可能把每个点都想到,因为有时候需求不会给你那么多时间,所以往往时先上线,再打补

JS DOM编程艺术——动态创建标记—— JS学习笔记2015-7-13(第83天)

DOM方法: 1.createElement 语法:document.createElement(nodeName) 比如:document.createElement("p");  // 将创建一个P元素: 2.appendChild 语法:parent.appendChild(child) 3.creatTextNode 语法:document.createTextNode(text) example.js /* window.onload = function (){ var p

JS DOM编程艺术——用JS实现动画效果—— JS学习笔记2015-7-21(第88天)

moveElement函数 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用定时器实现JS动画效果</title> <style> </style> </head> <body> <