图片 1

使用jQuery实现Web页面换肤功能的要点解析_jquery_脚本之家

希望本文所述对大家的javascript程序设计有所帮助。

你只需要把这两个函数复制到 JS 代码区域即可。在 jQuery
点击换肤的功能代码中,最后一句就创建了一个
Cookie,等网页加载完成之后,我们需要使用 JS 读取 Cookie 内容,然后使用
if 判断:

childNodes属性

在一颗节点树上,childNodes属性可以用来获取任何一个元素的所有子元素,它是包含一个元素全部子元素的数组:
element.childNodes
假设需要把某个文档的body元素的全体子元素检索出来。

var body_element=document.getElementsByTagName("body")[0];
body_element.childNodes;//获取到body下所有的元素
body_element.childNodes.length//body中获取多少个元素

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title>Image Gallery</title>
</head>
<script type="text/javascript" src="scripts/showpicture.js"></script>
<script type="text/javascript">
    window.onload=countBodyChildren;
</script>
<body>
<h1>Snapshots</h1>
<ul>
    <li><a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this);">Fireworks</a></li>
    <li><a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this);return false;">Coffee</a></li>
    <li><a href="images/rose.jpg" title="A red,red rose" onclick="showPic(this);return false;">Rose</a></li>
    <li><a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this);return false;">Big Ben</a></li>
</ul>
![](images/placeholder.gif)
</body>

</html>

PS:上面弹出的节点数是7个,除了h1、ul、img,还有哪些元素呢?

文档树的节点类型并非只有元素节点一种。文档中几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释为节点,而他们也全部包含在childNodes属性所返回的数组中。

通过node.nodeType获取节点的nodeType属性。
nodeType属性总共有12种可取值,其中有3中具有实用价值。

  • 元素节点的nodeType属性值是1
  • 属性节点的nodeType属性值是2
  • 文本节点的nodeType属性值是3

实例拓展,在图片下面添加一个文本,文本内容随链接内容的改变,现实对应的title。

...
</ul>
![](images/placeholder.gif)
<p id="description">Choose an image</p>
</body>
...

添加p如上所示。

var text=whichpic.getAttribute("title");
var description=document.getElementById("description");

PS:那description.nodeValue返回什么呢?返回一个null,因为p元素的nodeValue属性是一个空值,实际上我们需要获取元素中包含的文本的值。

description.childNodes[0].nodeValue;

childNodes[0]的等价写法是node.firstChild。与之相对应的还有node.lastChild,其等价写法是node.childNodes[node.childNodes.length-1]。

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

对应的JS代码如下:

function showPic(whichpic) {
    var source=whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text=whichpic.getAttribute("title");
    var description=document.getElementById("description");
    description.firstChild.nodeValue=text;
}

加上css:

body{
    font-family: "Helvetica","Arial",serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}

h1{
    color: #333;
    background-color: transparent;
}

a{
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}
u1{
    padding: 0;
}
li{
    float: left;
    padding: 1em;
    list-style: none;
}
img{
    display: block;
    clear: both;
}

图片 1

屏幕快照 2017-01-15 下午11.48.14.png

本文实例讲述了JS获取网页图片name属性的方法。分享给大家供大家参考。具体如下:

网页换肤事先需要的准备

拓展

document.write;document.write(document.getElementById;

网页换肤的基本原理

利用JavaScript来创建图片库将是最佳的选择:把整个图片库的浏览链接集中安排在图片库主页里,只在用户点击了这个主页里的某个链接时才把相应的图片传送给他。

下面的JS代码可以用来获取网页图片的name属性

网页换肤的闪烁问题和不完美解决方案

标记

  • 创建链接清单
    使用无序清单元素(ul)或者有序清单元素(ol)来列出那些链接。
    例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
    <li><a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a></li>
    <li><a href="images/coffee.jpg" title="A cup of black coffee">Coffee</a></li>
    <li><a href="images/rose.jpg" title="A red,red rose">Rose</a></li>
    <li><a href="images/bigben.jpg" title="The famous clock">Big Ben</a></li>
</ul>
</body>
</html>

改进

  • 点击链接上在原本的网页下方打开图片。
    步骤
  • 增加占位符在主页上为图片预留一个浏览区域。
  • 点击某个链接时,拦截这个网页的默认行为
  • 把“占位符”图片替换为与那个链接相对应的图片

function showPic(whichpic) {
    var source=whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
}

PS:当然也有非DOM的解决方案,通过element.value=”the new
value”修改,这条语句与element.setAttribute(“value”,”the new
value”);等价。不过DOM的好处就是可移植性非常强。

  • 应用JS文件

...
</head>
<script type="text/javascript" src="scripts/showpicture.js"></script>
<body>
...
  • 添加事件处理函数

添加事件的语法: event=”JavaScript
statement(s)”,请注意JavaScript代码包含在一对引号之间。我们可以把任意数量的JavaScript语句放在这对引号之间,只要把各条语句用分号分开即可。

事件处理的工作机制。在给某个元素添加了事件处理函数后,一旦事件发生,相应的JS代码就会得到执行。被调用的JS代码可以返回一个值,这个值将被传递给事件处理函数。例如我们给某个链接添加一个onclick事件处理函数,并让这个处理函数所出发的JS代码返回的值是true或false。当链接呗点击时,如果JS代码返回的是true,onclick事件处理函数就认为这个链接呗点击了。反之,如果返回的值是false,onclick事件处理函数就认为这个链接没有被点击。

在onclick事件处理函数所触发的JS代码中添加一条return
false,这个链接的默认行为就不会被处罚,就可以防止用户被带到目标链接窗口。

下面我们就来看具体功能代码。

不完美解决方案也是有的,点击切换按钮之后的闪烁情况,也是因为要加载图片等,那么我们可以在访问网页的时候,使用预加载技术将其他皮肤图片预加载或者使用
CSS Sprite 技术做成一张大图片。

然后在网页的顶部偏下的位置放上一个空的 link 标签,我们将会使用 jQuery
为这个 link 标签赋予不同的 CSS 文件实现切换效果

这种影响用户体验的现象肯定要彻底消灭,但是一直没有找到完美的解决方法。因为浏览器默认的是优先渲染
CSS 之后再加载 JS,特别是使用 Cookie 记录的皮肤,先渲染现有的 CSS
之后,JS
才能读取然后切换到皮肤。原理是这样的,跟客户协商之后,客户给出了一个“无闪烁”的换肤效果示例,是
MG12 很早的一款主题。同样的 Cookie
记录等,但是他的作品确实没有闪烁情况。

至于 Cookie
记录闪烁的问题,这是浏览器渲染的硬伤,只能尽量减少换肤需要改变的地方,尽量压缩图片减小体积。然后优先加载没有任何皮肤的基础样式,之后使用
JS 加载默认样式或者读取 Cookie
获取的皮肤选项。这样处理,访问网页的时候会先显示白色或者无颜色,之后直接切换成之前选择的皮肤的颜色,而不会从默认的颜色闪烁变成另一种颜色从而提升一定的用户体验。