html图片绑定一个值点击提交ajax怎么写_读书笔记《DOM编程艺术》JavaScript图片库...

利用JS来创建图片库：把整个图片库的浏览链接集中安排在图片库主页里，只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给他。

（最适合于用浏览器来查看的尺寸：400像素*300像素。我做的色卡不是这个尺寸，勉强用用吧。占位符不是我做的，ps打不开了，不做了，就直接网上下载的，侵删）

步骤一：写静态

静态页面如下：

页面效果：

步骤二： 写函数

步骤三、将静态和函数连接起来，并绑定相应元素的事件处理函数。

tips：若一个站点用到多个JS文件，为了减少对站点的请求次数（提高性能），应该把这个js文件合并到一个文件中。

事件处理函数的作用是：在特定事件发生时调用特定的js代码。

工作机制：在给某个元素添加了事件处理函数之后，一个事件发生，相应的js代码就会得到执行。被调用的js代码可以返回一个值，这个值被传递给那个事件处理函数。

我们的代码中，给a绑定事件函数，如果返回了true，onclick事件梳理函数就会认为这个链接被点击了，就会进行跳转，把用户带到目标链接窗口，我们让塔返回false，不让它进行跳转。

现在我们页面上已经实现了点击哪个图片，占位符就显示哪张图片的效果了。

现在我们增加点功能，我们让每张图片带的title替换掉p标签中的描述语句。

步骤四、拿到每张图片的title，替换掉相应的描述语句。

有几个知识点需要注意一下：

非DOM解决方案

不用setAttribute方法也可以改变图片的src属性。

setAttribute方法是“第1级DOM”的组成部分，它可以设置任意元素节点的任意属性，在“第1级DOM”出现之前，可以通过另一种方法设置大部分元素的属性：

element.value = "the new value"

等价于

element.setAttribute（‘value’，‘the new value’）

这个方法可以对图片、表单及其他一些元素的属性进行设置，但setAttribute可以对任意元素的任意属性进行设置。

“第1级DOM”的另一个优势是：可移植性更好。

老方法只适用于Web文档，DOM则适用于任何一种标记语言。

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

1.childNodes 属性

提取了title的值之后要把它插入到HTML文档中。

childNodes 属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组。

element.childNodes

由childNodes属性返回的数组包含所有类型的节点，而不仅仅是元素节点。

2.每一个节点都有nodeType属性，nodeType的值并不是英文。

node.nodeType

nodeType属性的值总共有12种可取值，但其中仅有三种具有实用价值。

000.元素节点：1

000.属性节点：2

000.文本节点：3

3.nodeValue 属性

如果想改变一个文本节点的值，那就使用DOM提供的nodeValue属性，它用来得到和设置一个节点的值。

node.value

直接去取某个元素的value值，得到的是某个元素本身的nodeValue属性的值，为null。

我们需要的是元素所包含的文本的值。

包含在p元素中的文本是另一种节点，它是p元素的第一个子节点。

4.firstChild 和 lastChild 属性

node.firstChild node.lastChild

nodeValue 属性不仅可以用来检索节点的值，还可以用来设置节点的值。