禁止选择
unselectable="on"(off): IE/Opera
style="-moz-user-select:none": FireFox(JS:element.style.MozUserSelect = "none";)
style="-khtml-user-select:none": Safari(JS:element.style.KhtmlUserSelect)
onselectstart="return false": IE
取消选择
if(document.selection && document.selection.clear) document.selection.clear(); // IE
else
if(window.getSelection &&
window.getSelection().removeAllRanges)
window.getSelection().removeAllRanges(); // FireFox/Opera/Safari
当前焦点是哪个控件
document.activeElement // IE, FF3.0+
获取样式的实际属性值
IE: 对象.currentStyle.需要访问的属性
W3C: window.getComputedStyle("对象",null).需要访问的属性(第2个参数为伪元素,如:hover,:first-letter,:before等,是必须的)
function getStyle(element, style){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(element, "").getPropertyValue(strCssRule);
}
else if(element.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = element.currentStyle[strCssRule];
}
return strValue;
}
// 假设someElement是DOM中某对象的引用,那么通过以下方法可以获得该对象下的字体大小:
// var fontSize = getStyle(someElement, "font-size");
// 注意, 对于缩略式表达式, FF无法获取! 例如“padding:4px”, 在FF下面, 只能按照标准返回"padding-left"
Array对象
var array = new Array(); // new Array(20); // 声明一个Array对象,并对数组进行初始化,设置数组的大小为20
var array = new Array("red","yellow","blue"); // 或 ["red","yellow","blue"]; // 声明一个数组,并通过参数给数组设置初始值
array.length; // 3
array.toString(); // 以,串连数组各项: red,yellow,blue
array.join("-"); // 以参数串连数组各项: red-yellow-blue
array.push("black"); // 在数组的尾部添加一个新项: ["red","yellow","blue","black"]
array.pop(); // 将数组尾部的一个项删除掉: ["red","yellow","blue"]
array.shift(); // 将数组头部的一个项删除掉: ["yellow","blue"]
array.splice(start, num); // 将数组中从start开始num项从数组中删除掉
array.splice(start, num, "xx"); // 将数组中从start开始的num项删除掉,第三个参数开始是要插入到数组中去的新项,将会从start位置开始插入。如果num为0则不删除任何数组项
array.reverse(); // 将数组顺序反过来
array.sort(); // 数组排序
IE不支持动态修改单选框的名称的解决方法
document.createInput = function(name) {
// IE doesn’t allow the name attribute to be changed after the element is created
// http://www.iteye.com/topic/26917 | http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/
var element = null;
try {
element = document.createElement("<input type=\""+type+"\" name=\""+name+"\">"); // IE下的创建方式
} catch (e) { // 标准浏览器下会报错, 应采用以下的创建方式
element = document.createElement("input");
element.type = type;
element.name = name;
}
return element;
}
Form提交到新开窗口
// IE8下似乎有些问题, 会打开一个空窗口, 提交时再打开一个新窗口
form.action="...";
form.target="xxx";
window.open("about:blank","xxx","width=100,height=100,top=100,left=100");
form.submit();
区分中英文判断长度
function calculateCount(str) {
var count=0;
for (var i = 0; i < str.length; i++) {
var c = str.charAt(i);
if ((c >= "!") && (c <= "\u20AC")||(c==" ") )
count += 1;
else
count += 2;
}
return count;
}
遍历输出属性
<div id="message" style="position:absolute;border:1px solid #CCCCCC;z-index:1;background-color:#FFFFE1;" />
<script language="JavaScript">
var message = document.getElementById("message");
var text = "";
for (var property in document)
text += property + " = " + document[property] + "<br/>";
message.innerHTML = text;
</script>
判断对象是否存在某个方法
"methodName" in object
如: alert("value" in document.getElementById("userName"));
值变化时触发事件
IE: onpropertychange
Firefox|Opera: oninput
另一种访问属性的方式
var myString = new String("Hello world");
alert(myString.length);
alert(myString["length"]);
alert(myString["toUpperCase"]());
随机数
function randomBetween(min, max) {
return min + Math.floor(Math.random() * (max - min + 1));
}
取input元素的原始值
defaultValue
JSON
JSON对象是一个无序的“‘名称/值’对”集合。一个对象以“{”开始,“}”结束。每个“名称”后跟一个“:”;“‘名称/值’ 对”之间使用“,”分隔
function showJSON() {
var user =
{
"username": "andy",
"age": 20,
"info": {"tel": "123456", "cellphone": "98765"},
"address":
[
{"city": "beijing", "postcode": "222333"},
{"city": "newyork", "postcode": "555666"}
]
};
alert(user.username);
alert(user.age);
alert(user.info.cellphone);
alert(user.address[0].city);
alert(user.address[0].postcode);
user.username = "Tom";
alert(user.username);
alert(user.gender==undefined); // 没有的节点为undefined
}
预载图片
<script language="javascript">
var tmpImage = new Image(10, 10); // 宽度, 高度
tmpImage.src = "image.gif"; // 图片路径
</script>
增删<select>的<option>
var item = document.createElement("option");
var sex = document.getElementById("sex")
sex.options.add(item); //增加一项
// sex.insertBefore(item, sex.options[0]); //插入一项(应先判断length是否大于0)
item.value = "1"; //为项设置属性必须在该项已增加到options中之后
item.text = "女";
sex.value = "1"; //选中此项
sex.remove(0); //删除第一项(此方法是<select>的,而不是options的)
var len = sex.options.length; //必须提前获取options.length,因为此值在删除的过程中会被改变
for(var i=0; i<len; i++) //删除所有项
sex.remove(0);
跨浏览器处理事件
function(e) {
var evt = e || window.event;
var src = evt.target ? evt.target : evt.srcElement; // 事件源(哪个对象触发的事件)
var to = (evt.relatedTarget) ? evt.relatedTarget : evt.toElement; // 目标(仅部分事件有效,如mouseout鼠标滑向了哪个对象)
}
对话框
alert("...");
var rtn=confirm("..."); if(rtn!="0") {...}
var rtn=prompt("提示文本", "默认值");
跳转
window.location.href="../index.jsp";
加入收藏夹
window.external.addFavorite('http://www.google.com/','Google');
window.external.addFavorite(location.href, document.title);
设为首页
this.setHomePage('http://www.google.com');
Dom操作
属性:
1. Attributes 存储节点的属性列表(只读)
2. childNodes 存储节点的子节点列表(只读)
3. dataType 返回此节点的数据类型
4. Definition 以DTD或XML模式给出的节点的定义(只读)
5. Doctype 指定文档类型节点(只读)
6. documentElement 返回文档的根元素(可读写)
7. firstChild 返回当前节点的第一个子节点(只读)
8. Implementation 返回XMLDOMImplementation对象
9. lastChild 返回当前节点最后一个子节点(只读)
10. nextSibling 返回当前节点的下一个兄弟节点(只读)
11. nodeName 返回节点的名字(只读)
12. nodeType 返回节点的类型(只读)
13. nodeTypedValue 存储节点值(可读写)
14. nodeValue 返回节点的文本(可读写)
15. ownerDocument 返回包含此节点的根文档(只读)
16. parentNode 返回父节点(只读)
17. Parsed 返回此节点及其子节点是否已经被解析(只读)
18. Prefix 返回名称空间前缀(只读)
19. preserveWhiteSpace 指定是否保留空白(可读写)
20. previousSibling 返回此节点的前一个兄弟节点(只读)
21. Text 返回此节点及其后代的文本内容(可读写)
22. url 返回最近载入的XML文档的URL(只读)
23. Xml 返回节点及其后代的XML表示(只读)
方法:
1. appendChild 为当前节点添加一个新的子节点,放在最后的子节点后
2. cloneNode 返回当前节点的拷贝
3. createAttribute 创建新的属性
4. createCDATASection 创建包括给定数据的CDATA段
5. createComment 创建一个注释节点
6. createDocumentFragment 创建DocumentFragment对象
7. createElement 创建一个元素节点
8. createEntityReference 创建EntityReference对象
9. createNode 创建给定类型,名字和命名空间的节点
10. createPorcessingInstruction 创建操作指令节点
11. createTextNode 创建包括给定数据的文本节点
12. getElementsByTagName 返回指定名字的元素集合
13. hasChildNodes 返回当前节点是否有子节点
14. insertBefore 在指定节点前插入子节点
15. Load 导入指定位置的XML文档
16. loadXML 导入指定字符串的XML文档
17. removeChild 从子结点列表中删除指定的子节点
18. replaceChild 从子节点列表中替换指定的子节点
19. Save 把XML文件存到指定节点
20. selectNodes 对节点进行指定的匹配,并返回匹配节点列表
21. selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
22. transformNode 使用指定的样式表对节点及其后代进行转换
23. transformNodeToObject 使用指定的样式表将节点及其后代转换为对象
其他:
1. document.documentElement 返回文档的根节点
2. document.activeElement 返回当前文档中被击活的标签节点
3. event.fromElement 返回鼠标移出的源节点
4. event.toElement 返回鼠标移入的源节点
5. event.srcElement 返回激活事件的源节点
搜索节点
function searchNode(item, tagName) {
while(item != null) {
if(item.tagName == tagName) return item;
var result = searchNode(item.firstChild, tagName); // 深度优先
if(result != null) return result;
item = item.nextSibling;
}
return null;
}
分享到:
相关推荐
javascript的IE和Firefox兼容性汇编 1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行 (2)解决方法: 改用 document.formName....
本文总结分析了Javascript在IE和Firefox浏览器常见兼容性问题。分享给大家供大家参考,具体如下: 表单 document.formName.item("itemName") IE:可以使用document.formName.item(“itemName”)或document.formName...
一个用于日期选择的js控件,兼容IE,firefox。 使用方法: 1)引用js文件:WebCalendar.js 2)在需要的地方调用方法:SelectDate(obj,'yyyy-MM-dd'),其中obj为日期输入目标的引用(好像说复杂了,其实很多时候我们只用...
IE和Firefox下都好使 使用方法: 1、传入对象:SelectDate(this,'yyyy 年') 2、传入 ID:SelectDateById('Txt_CreateDateST01','yyyy 年') 3、参数 SelectDate(this,'yyyy 年',0,-150) 格式(注意大小写):yyyy→年...
介绍如何使用JS开发和键盘事件要关的功能应用,此方法兼容FireFox和IE
请不要下载其他版本,这个才是最新的。 先解压,运行index.html,这个主页,可以看到 Gsvalidator的使用方法,以及一些说明。 如果有问题,请联系我QQ
1.兼容firefox的 outerHTML,FF中没有outerHtml的方法。 代码如下: if (window.HTMLElement) { HTMLElement.prototype.__defineSetter__(“outerHTML”,function(sHTML) { var r=this.ownerDocument.createRange(); ...
IE中的获取文本方法innerText在...并且此方法解决了firefox中空白字符的问题 使用方法: 将下面的脚本放在页面内 不管ie还是firefox都可以使用obj.innerText提取文本了 代码如下: [removed] function isIE(){ //ie? i
Firefox下,只能使用document.formName.elements[“elementName”]. 解决方法:统一使用document.formName.elements[“elementName”]. 2.集合类对象问题 说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用...
然而,在不同的浏览器中,实现缩略图的方法却有所不同,本文将介绍如何在IE(6、7、8)和FireFox(FF)浏览器中实现缩略图的使用方法。 缩略图的使用方法 在实现缩略图功能时,需要使用HTML、CSS和JavaScript技术...
Firefox下,只能使用[]获取集合类对象. 解决方法:统一使用[]获取集合类对象. 3.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取...
利用clipboard.js,复制文本或者隐藏域到剪切板,没有flash限制,兼容ie.chrome.firefox
Firefox下,只能使用document.formName.elements[“elementName”]. 解决方法:统一使用document.formName.elements[“elementName”]. 2.集合类对象问题 说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用...
1.firefox和IE的自定义标签可以通过以下样式进行统一 <html XMLNS=”http://www.w3.org/1999/xhtml” XMLNS:TEST=”//www.jb51.net”> 2.自定义标签的的定义也可以进行统一 ”mylabel”/> ”mylabel2″>...
Firefox下,只能使用document.formName.elements[“elementName”].解决方法:统一使用document.formName.elements[“elementName”].2.集合类对象问题说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]...
以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila Firefox 1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document.formName.item(“itemName”) 这样的语句,不能在 MF 下运行 (2)解决...
Firefox下,只能使用document.formName.elements[“elementName”]. 解决方法:统一使用document.formName.elements[“elementName”]. 2.集合类对象问题 说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用...
Firefox 是一个快速、安全且灵活的网页浏览器,这是我们的使命。 网站优化必备的9个Firefox插件 在网页设计制作中经常使用到的火狐浏览器插件工具: 1. Firebug Firebug是开发人员们钟爱火狐浏览器的一个重要...
主要介绍了JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法的相关资料,需要的朋友可以参考下
英文字符自动换行,通过js脚本截断字符串,此方法通用ie6,ie7,firefox,使用CSS控制强制换行实现不了的朋友可以尝试下