精通javascript 代码总结

在看了《精通javascript 》一书中,里面讲了很多工具函数,先整理一部分。

主要在javascript和css交互的代码:

 function text(e) {
        //获取元素文本内容  
        var t = "";
        e = e.childNodes || e;
        for (var i = 0, count = e.length; i < count; i++) {
            t += e[i].nodeType != 1 ? e[i].nodeValue : text(e[i].childNodes);
        }
        return t;
    }
    function attr(elem, name, value) {
        //获取或设置元素属性值  
        if (!name || name.constructor != String) return "";
        name = { "for": "htmlFor", "class": "className"}[name] || name;
        if (typeof value != "undefined") {
            elem[name] = value;
            if (elem.setAttribute) {
                elem.setAttribute(value);
            }
        }
        return elem[name] || elem.getAttribute(name) || "";
    }
    function stopDefault(e) {
        //防止默认浏览器行为  
        if (e && e.preventDefault) {
            e.preventDefault();
        }
        else {
            window.event.returnValue = false;
        }
        return false;
    }
    function stopBubble(e) {
        //阻止事件冒泡  
        if (e && e.stopPropagation) {
            e.stopPropagation();
        }
        else {
            window.event.cancelBubble = true;
        }
    }
    //调用示例<a href="#"  οnclick=" alert('ok'); stopBubble(event);">demo</a>   
    function pageX(elem) {
        //获取元素的水平位置
        return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
    }
    function pageY(elem) {
        //获取元素的垂直位置
        return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
    }
    function parentX(elem) {
        //获取元素相对于父亲的水平位置
        return elem.parentNode == elem.offsetParent ? elem.offsetLeft : pageX(elem) - pageX(elem.parentNode);
    }
    function parentY(elem) {
        //获取元素相对于父亲的垂直位置
        return elem.parentNode == elem.offsetParent ? elem.offsetTop : pageY(elem) - pageY(elem.parentNode);
    }
    function resetCss(elem, prop) {
        //设置css一组属性,它可以恢复到原有的设置
        var old = {};
        for (var i in prop) {
            old[i] = elem.style[i];
            elem.style[i] = prop[i];
        }
        return old;
    }
    function restoreCss(elem, prop) {
        for (var i in prop) {
            elem.style[i] = prop[i];
        }
    }
    function getStyle(elem, styleName) {
        if (elem.style[styleName]) {//内联样式
            return elem.style[styleName];
        }
        else if (elem.currentStyle) {//IE
            return elem.currentStyle[styleName];
        }
        else if (document.defaultView && document.defaultView.getComputedStyle) {//DOM
            styleName = styleName.replace(/([A-Z])/g, '-$1').toLowerCase();
            var s = document.defaultView.getComputedStyle(elem, '');
            return s && s.getPropertyValue(styleName);
        }
        else {//other,for example, Safari
            return null;
        }
    }
    function fullHeight(elem) {
        //查找元素可能的高度
        //如果元素显示那么使用offsetHeight就可以得到高度,如果没有offsetHeight,则使用getHeight()
        if (getStyle(elem, "display") != "none") {
            return elem.offsetHeight ;
        }
        var oldcss = resetCss(elem, { display: "", visibility: "hidden", position: "absolute" });
        var height = elem.clientHeight ;
        restoreCss(elem, oldcss);
        return height;
    }
    function fullWidth(elem) {
        //查找元素可能的高度
        //如果元素显示那么使用offsetWidth就可以得到高度,如果没有offsetWidth,则使用getWidth()
        if (getStyle(elem, "display") != "none") {
            return elem.offsetWidth ;
        }
        var oldcss = resetCss(elem, { display: "", visibility: "hidden", position: "absolute" });
        var width = elem.clientWidth ;
        restoreCss(elem, oldcss);
        return width;
    }
    function setOpacity(elem, level) {
        //这是元素透明度
        if (elem.filiters) {
            elem.style.filters = "alpha(opacity='" + level + "')";
        }
        else {
            elem.style.opacity = level / 100;
        }
    }
    function cursorX(e) {
    //获取光标水平位置
        e = e || window.event;
        //先检查非IE浏览器位置再检查IE位置
        return e.pageX || e.clientX + document.body.scrollLeft;
    }
    function cursorY(e) {
        //获取光标垂直位置
        e = e || window.event;
        return e.pageY || e.clientY+ document.body.scrollTop;
    }
    function scrollX() {
        //确定浏览器水平滚动条位置
        var de = document.documentElement;
        return self.pageXOffset || (de && de.scrollLeft) || document.body. scrollLeft;
    }
    function scrollY() {
        //确定浏览器垂直滚动条位置
        var de = document.documentElement;
        return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
    }
    function windowHeight() {
    //获取视窗的高度
        var de = document.documentElement;
        return self.innerHeight || (de || de.clientHeight) || document.body.clientHeight;
    }
    function windowWidth() {
        //获取视窗的高度
        var de = document.documentElement;
        return self.innerWidth || (de || de.clientWidth) || document.body.clientWidth;
    }

有关类的继承请参照http://blog.csdn.net/dz45693/article/details/7683195

有关事件添加和移除请参照http://blog.csdn.net/dz45693/article/details/7622262


第1章(\1) 示例描述:变量。 1_1.htm 变量声明。 1_2.htm 局部变量和全局变量。 1_3.htm JavaScript中的强制类型转换。 1_4.htm 在HTML中为JavaScript传递变量。 1_5.htm 在HTML中引用JavaScript的变量。 1_6.htm 比较undefined和"undefined"。 第2章(\2) 示例描述:客户端的流程控制。 2_1.htm 条件判断语句if…else 2_2.htm 多条件判断语句switch。 2_3.htm 嵌套循环语句for。 2_4.htm 循环语句while。 2_5.htm 控制循环过程break和continue。 2_6.htm 利用流程控制语句实现冒泡排序。 第3章(\3) 示例描述:字符串操作。 3_1.htm 连接字符串。 3_2.htm 在字符串中查找指定字符。 3_3.htm 提取字符串中的字串。 3_4.htm 替换字符串中的指定字符。 3_5.htm 将字符串分解为数组。 3_6.htm 字符串大小写的书写和判断。 第4章(\4) 示例描述:数组技术。 4_1.htm 创建空数组。 4_2.htm 创建带初始值的数组。 4_3.htm 将数组转换为字符串。 4_4.htm 遍历数组中的元素。 4_5.htm 合并两个数组。 4_6.htm 创建多维数组。 4_7.htm 数组排序。 第5章(\5) 示例描述:JavaScript快速处理日期时间的操作。 5_1.htm 获取当前日期并显示在HTML页中。 5_2.htm 分别获取当前时间的年月日时分秒。 5_3.htm 时间的水中倒影。 5_4.htm 简单的日历。 5_5.htm 标题栏显示日期。 5_6.htm 标题栏显示时间。 5_7.htm 不同时间的不同问候。 第6章(\6) 示例描述:JavaScript页面处理技巧。 6_1.htm 用JavaScript实现一个页面两份样式表。 6_2.htm 用JavaScript动态更换图像元素中的图像。 6_3.htm 利用搜索引擎引用来高亮页面关键字。 6_4.htm 使用匿名函数为定时器传递参数。 6_5.htm Web页面中的tooltip提示。 6_6.htm 在Web页面中控制其元素的选择状态。 第7章(\7) 示例描述:JavaScript的鼠标事件和键盘事件。 7_1.htm 按钮的鼠标单击事件。 7_2.htm 用鼠标点亮文本。 7_3.htm 渐显图片。 7_4.htm 跟随鼠标的图片。 7_5.htm 跟随鼠标的*。 7_6.htm 跟随鼠标的文字。 7_7.htm 判断Ctrl键是否被按下。 7_8.htm 设置页面中某按钮的热键。 第8章(\8) 示例描述:窗口大小自动化管理。 8_1.htm 按指定要求打开的窗口。 8_2.htm 控制窗口的打开和关闭。 8_3.htm 从天而降的窗口。 8_4.htm 打开慢慢变大的窗口。 8_5.htm 打开一个四面变大的窗口。 8_6.htm 页面左右分开。 8_7.htm 定时打开网页。 8_8.htm 自动打开新的窗口。 第9章(\9) 示例描述:JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 9_6.htm 打字效果的文字特效。 9_7.htm 淡入淡出的文字效果。 9_8.htm 炽热文字的特殊效果。 第10章(\10) 示例描述:页面中的链接地址个性化。 10_1.htm 按时消失的链接。 10_2.htm 带滚动提示的链接。 10_3.htm 动态变换的链接。 10_4.htm 滚动链接。 10_5.htm 不断闪动的链接。 10_6.htm 在按钮上显示不同的链接。 10_7.htm 带链接的滚动字幕。 第11章(\11) 示例描述:在HTML中用JavaScript控制图像页面。 11_1.htm 不停闪烁的图片。 11_2.htm 图片展示选项。 11_3.htm 图片的渐显播放。 11_4.htm 将图片固定在页面左上角。 11_5.htm 左右移动的图片。 11_6.htm 图像滚动公告版。 11_7.
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值