javascript 基础 图片库和表单处理

//图片库

function showpic(whichpic) {
    var source = whichpic.getAttribute("href");
    if(!document.getElementById("placeholder")) return false;
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var sourcetitle = whichpic.getAttribute("title");
    placeholder.setAttribute("title",sourcetitle);
    if(document.getElementById("changetxt")){
        var txt = document.getElementById("changetxt");
        txt.firstChild.nodeValue = sourcetitle;
    }
    return true;
}

function creat() {
    if(!document.getElementById("imagegallery")) return false;
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id","placeholder");
    placeholder.setAttribute("src","images/placeholder.gif");
    placeholder.setAttribute("alt","my set img");
    var changetxt = document.createElement("p");
    changetxt.setAttribute("id","changetxt");
    var changetxtoftxt = document.createTextNode("");
    changetxt.appendChild(changetxtoftxt);
    var gallery = document.getElementById("imagegallery");
    insertAfter(placeholder,gallery);
    insertAfter(changetxt,gallery);
}

function prepareGallery() {
    if(!document.getElementsByClassName){
        return false;
    }
    if(!document.getElementById){
        return false;
    }
    if(!document.getElementById("imagegallery")){
        return false;
    }
    var ul = document.getElementById("imagegallery");
    var link = ul.getElementsByTagName("a");
    for(var i=0;i<link.length;i++){
        link[i].onclick = function () {
            return !showpic(this);
        }
    }
}

//表格className

function scriptLi() {
    var ullist = document.getElementsByTagName("table");

    for (var i = 0; i < ullist.length; i++) {
        var rows = ullist[i].getElementsByTagName("tr");
        var openClose = true;
        for (var j = 0; j < rows.length; j++) {

            if (openClose == false) {
                addClass(rows[j],"odd")
                openClose = true;
            } else {
                openClose = false;
            }
        }

    }
} //通过添加classname来修改样式

function highlightRows() {
    if(!document.getElementsByTagName) return false;
    var rows = document.getElementsByTagName("tr");
    for(var i=0 ; i<rows.length ; i++){
        rows[i].oldClassName = rows[i].className; //先把目前的classname提取到这个rows的属性中
        rows[i].onmouseover = function () {
            addClass(this,"highLight")
        }
        rows[i].onmouseout = function () {
            this.className = this.oldClassName; //千万要记住 在事件方法内 全部得用this 不然作用域问题很大
        }
    }
}

function displayAbbreviations() {

    if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    //简单的兼容性测试 要是不兼容 则退出这个函数

    var abbreviations = document.getElementsByTagName("abbr");
    if (abbreviations.length < 1) return false;
    var defs = new Array();
    // 取得所有的词数组 并且创建一个准备存储的数组

    for(var i=0;i<abbreviations.length;i++){
        var definitions = abbreviations[i].getAttribute("title");
        var key = abbreviations[i].lastChild.nodeValue;
        defs[key] = definitions;
    }
    //开始遍历数组 里面的文本为key titile为value

    var dllist = document.createElement("ul"); //创建一个ul列表

    for(key in defs){
        var definition = defs[key];
        var dt = document.createElement("dl");
        var dt_title = document.createTextNode(key);
        dt.appendChild(dt_title);
        var dd = document.createElement("dt");
        var dd_text = document.createTextNode(definition);
        var lilist = document.createElement("dd");
        dd.appendChild(dd_text);
        lilist.appendChild(dt);
        lilist.appendChild(dd);
        dllist.appendChild(lilist);
    }

    // 进行循环 把 defs数组里的 每个key挨个拿出来存储到key变量里  然后重复创建 链接 获取 最后把
    // tr td 都存放到 li里 再把 li 存放到 最大的ul里

    var h2 = document.createElement("h2");
    var h2_text = document.createTextNode("abbrevition");
    h2.appendChild(h2_text);
    document.body.appendChild(h2);
    document.body.appendChild(dllist);

    // 结尾 把 h2节点与ul节点放入到 body的末尾中
}

通过对于多页面编写js并且页面都加载js 发现了一个重要问题 以前一直不知道为什么一定要添加if(没找到某个元素) return false;
如果不写相关语句 那么及时在不需要这个代码的页面 他仍然进行js操作 比如创建元素 那么非常有可能报错 所以写if检测语句 是个十分必要的习惯 而且最好写在某个方法的开头