js复习之-dom编程[常用代码]

刷新
        function red() {
            window.location.reload();
        }

跑马灯,定时器
		var trmid1;
        var trmid2;
        function lf() {
            if (trmid2) {
                clearInterval(trmid2);
            }
            trmid1 = setInterval(function () {
                var title = document.title;
                var first = title.substr(0, 1);
                var last = title.substr(1);
                document.title = last + first;

            }, 500);
        }
        function ri() {
            if (trmid1) {
                clearInterval(trmid1);
            }
            trmid2 = setInterval(function () {
                var title = document.title;
                var first = title.substr(title.length - 1, 1);
                var last = title.substr(0, title.length - 1);
                document.title = first + last;

            }, 500);
        }

如果按下哪个键(这个方法都支持,还有一种IE特有的就不记了)
       <span id="Span1" οnclick="span_ck1(event)">FF下的超链接</span>
       function span_ck1(e) {
            if (e.altKey) {
                alert("456");
            }
        }

鼠标的三种位置
		        document.onmousemove = function () {
                //鼠标在文件档上的位置
                document.title = window.event.clientX + "==" + window.event.clientY;

               //鼠标在屏幕上的位置
               document.title = window.event.screenX + "==" + window.event.screenY;

               //鼠标在容器上的位置
               document.title = window.event.offsetX + "==" + window.event.offsetY;
        }

获得事件的对像
var btn = window.event.srcElement;

复制
        function fz() {
            var t = document.getElementById("txt").value;
            window.clipboardData.setData("text", t);
        }

复制加版权
        function nocopy() {
            var t = clipboardData.getData("text");
            t = "版权所有:http://" + t;
            clipboardData.setData("text", t);
        }
		<body οncοpy="setTimeout('nocopy()',10)"> 注意这里才生效

<input type="text" name="name" id="txt1" value=" " οncοpy="alert('禁址复制');return false" oncut="alert('禁址剪切');return false" οndrag="return false"/>

增加多个方法
document.addEventListener("click", ff);


单选,多选,全选,反选
        //获取radios值
        function f2() {
            var radios = document.getElementsByName("r");
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    alert(radios[i].value);
                    break;
                }
            }
        }
        //获取checkbox值
        function f3() {
            var ches = document.getElementsByName("chb");
            var str="";
            for (var i = 0; i < ches.length; i++) {
                if (ches[i].checked) {
                    str += ches[i].value + ",";
                }
            }
            if (str.length > 0) {
                str = str.substr(0, str.length - 1);
            }

            alert(str);
        }

        //全选反选 按扭
        function f4() {
            var ches = document.getElementsByName("chb");
            for (var i = 0; i < ches.length; i++) {
                ches[i].checked = !document.getElementById("chbck").checked;
            }
            document.getElementById("chbck").checked = !document.getElementById("chbck").checked;

        }

        //全选反选 checkbox
        function f5() {
            var ches = document.getElementsByName("chb");
            for (var i = 0; i < ches.length; i++) {
                ches[i].checked = document.getElementById("chbck").checked;
            }
        }

        //注册当其中有一个没有选中时
        window.onload = function () {
            var ches = document.getElementsByName("chb");
            for (var i = 0; i < ches.length; i++) {
                ches[i].onclick = function () {
                    var flag = true;
                    for (var j = 0; j < ches.length; j++) {
                        if (!ches[j].checked) {
                            flag = false;
                        }
                    }
                    document.getElementById("chbck").checked = flag;
                }
            }
        }


 节点操作

node 节点 包括 元素节点(标签) 文本节点 属性节点
element 元素节点(标签)

nodeName   //标签的名称tag
nodeType   //节点的类型 1是 元素节点   2是 属性节点  3是文本节点  8 注释节点
nodeValue  //只能获取文本节点和注释节点的内容

childNodes[] //标准属性(ie中忽略空白,其它浏览器不忽略)  获取所有直接子节点  包括文本节点和属性节点  注释节点
children[]   //虽然不是标准属性,但是大部分浏览器都支持。只获取元素节点
parentNode //获取父节点
nextSibling //获取下一个兄弟姐妹节点
previousSibling  //获取上一个兄弟姐妹节点

removeChild() 移除节点
appendChild() 添加节点


firstChild
lastChild


一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 

2012-04-25 16:29:04|  分类: 学习 |字号 订阅
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案

百度也应用了这种方案去解决IE的兼容问题

百度源代码如下

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>
<head>
<meta http-equiv=Content-Type content=“text/html;charset=utf-8″>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>
<title>百度一下,你就知道 </title>
<script>var wpo={start:new Date*1,pid:109,page:‘superpage’}</script>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>

可以打开百度,右键查看源码看下!我们可以看下文件头是否存在这样一行代码!

这句话的意思是强制使用IE7模式来解析网页代码!

在这里送上几种IE使用模式!

<meta http-equiv=“X-UA-Compatible” content=“IE=8″>
2. Google Chrome Frame也可以让IE用上Chrome的引擎:

<meta http-equiv=“X-UA-Compatible” content=“chrome=1″ />
3.强制IE8使用IE7模式来解析

<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″><!– IE7 mode –>
//或者
<meta http-equiv=“X-UA-Compatible” content=“IE=7″><!– IE7 mode –>
4.强制IE8使用IE6或IE5模式来解析

<meta http-equiv=“X-UA-Compatible” content=“IE=6″><!– IE6 mode –>  
 
<meta http-equiv=“X-UA-Compatible” content=“IE=5″><!– IE5 mode –>
5.如果一个特定版本的IE支持所要求的兼容性模式多于一种,如:

<meta http-equiv=“X-UA-Compatible” content=“IE=5; IE=8″ />
二.设定网站服务器以指定预设兼容性模式

如果服务器是自己的话,可以在服务器上定义一个自订标头来为它们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。

录入,下列的 web.config文件使Microsoft Internet Information Services (IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。

另外还有一起其他的解决方案,例如google的

ie7 – js中是一个JavaScript库(解决IE与W3C标准的冲突的JS库),使微软的Internet Explorer的行为像一个Web标准兼容的浏览器,支持更多的W3C标准,支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题,并使 得透明PNG在IE5、IE6下正确显示。

使IE5,IE6兼容到IE7模式(推荐)

<!–[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7兼容到IE8模式

<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7,IE8兼容到IE9模式

<!–[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]–>
解决PNG显示问题

只需将透明png图片命名为*-trans.png

需要注意的是:此方法对背景平铺(background-repeat)和背景(background-position)无法起到任何作用,默认会占满整个容器。

转载:http://hi.baidu.com/myplan/blog/item/cdb09dfa1fa748a99f514626.html


三、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
创建html5时发现这么一句话,不知其什么意思,百度如下:
这样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果没安装GCF,则使用最高版本的IE内核进行渲染。Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。
http://blog.csdn.net/abxn2002/article/details/7312459

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值