您的位置：首页 > Web前端 > JavaScript

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

2012-08-23 17:40 309 查看

刷新
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" onclick="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 oncopy="setTimeout('nocopy()',10)"> 注意这里才生效

<input type="text" name="name" id="txt1" value=" " oncopy="alert('禁址复制');return false" oncut="alert('禁址剪切');return false" ondrag="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浏览器。

/article/11685749.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航