js 图片库 改进版

平稳退化

js与html标记分离?

如果有两个函数:firstFunction和secondFunction,如果想让它们俩都在页面加载时得到执行,可以调用函数addLoadEvent,只有一个参数,就是打算在页面加载完毕时执行的函数的名字。

function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!=‘function‘){
        window.onload=func;
    } else{
        window.onload=function(){
            oldonload();
            func();
        }
    }
}

这将把那些在页面加载完毕时执行的函数创建为一个队列。如果想要将各个函数添加到队列去,秩序写出一下代码即可:

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

三元操作符

var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";

紧跟getAttribute后面的?即为三元操作符,这个问号后面是变量text的两种可取值。如果getAttribute("title")的返回值是null,text变量将被赋值为第二个值。

三元操作符是if/else语句的一个变体形式。

link[i].onkeypress=link[i].onclick;//可以将onclick事件的所有功能赋给onkeypress事件

getElementById

getElementsByTagName

getAttribute

setAttribute

这些方法是DOM Core的组成部分,并不是专属于JavaScript,支持DOM的任何一种程序设计语言都可以使用它们。它们也并非仅限于处理网页,它们可以用来处理用任何一种标记语言编写出来的文档。

时间: 2024-08-01 22:45:27

js 图片库 改进版的相关文章

图片库改进版

body{ font-family:"Arial",serif;color:#333; background#ccc; margin:1em 10%;} h1{color:#333; background:transparent;} a{ color:#333; font-weight:bold; text-decoration:none;} ul{padding:0;} li{ float:left; padding:1em; list-style:none; border-righ

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图片库—— 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/

《Javascript DOM编程艺术》--第六章案例研究图片库改进版

DOM脚本编程有关的问题:平稳退化.向后兼容.分离Javascript. 一. 平稳退化 如果禁用了js后,基本功能可以实现吗? 二. 分离Javascript 1. 添加事件处理函数: a. 检查点:普通适用性检测(检测是否支持DOM方法):针对性检测(检测对象是否存在) 这是预防性措施.即使以后决定从网页上删除某个标记,也不用担心js报错.此时,体现了js与html分离的重要性. 原则:想用js给网页添加行为,就不应该让js代码对这个网页的结构有任何依赖. b. 变量名:保留字和关键字不能用

js倒计时改进版

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head> <body><div><input id="time_h" type="text" value="" />点<input id="time_

平稳退化,JS和HTML标记分离,极致性能的JavaScript图片库

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JavaScript图片库</title> 6 <script type="text/javascript"> 7 <!--平稳退化,JS和HTML标记分离,极致性能的JS图片库--> 8 fu

JS DOM---Chapter 1-4

1.JavaScript是一种解释型语言,Web浏览器负责解释&执行: 2.JavaScript是弱类型语言,不需要进行类型声明: JS变量(var)可以直接赋值而无需事先声明: a.数组的声明var cc = Array(); b. 对象的声明var cc = Obiect(); 创建对象 var cc1 = {name="cc", age=22}; //属性键值对 3.DOM 一份文档Document就是一颗节点树,节点分为不同的类型,如元素节点.属性节点以及文本节点: 1

javascript(js)基础 dom基础(js语法)未来会删除此博客

<script> //文档中第三个图像:document.images[2] //文档中名为'aa'的表单:document.form['aa'] //层只有唯一 的id:document.layers[id] //微软的层id:docment.all[id] //如果想找到id的left位置并把它赋值给变量bs,在其他浏览器中是这样操作的:document.layers[id].left; //统一标准的dom是这样的:bs=document.getElementByid(id).style

【干货】JavaScript DOM编程艺术学习笔记4-6

四.案例研究:JavaScript图片库 js: function showPic(whichpic){ //取得链接 var source=whichpic.getAttribute("href"); //取得占位图 var placeholder=document.getElementById("placeholder"); //改变占位图src属性 placeholer.setAttribute("src",source); //取得文字描