📄 v2.4.js
字号:
/*
此项目由cssrain发起，群里的朋友完善。
收集了项目中常用的js函数和封装代码。
为项目提供方便。希望能在项目中发挥作用。
v2.3 2008.07.09
如果你也有好的函数和封装代码,可以给我联系.
email : cssrain@gmail.com
一起完善这个js。
*/
/**************
简化document.getElementById
用法：
$id("d").innerHTML;
(HTMLcode:<div id="d">cssrain</div>)
**************/
function $id(id) {
return document.getElementById(id);
}
/**************
函数：getElementsByClassName
使用方法：
获取document内的超链接class是“info-links”的。
getElementsByClassName(document, "a", "info-links");
获取container内的div的class是col的.
getElementsByClassName(document.getElementById("container"), "div", "col");
获取document内的所有class是“click-me”的。
getElementsByClassName(document, "*", "click-me");
例子：
HTML code:
<a class="a">ccc</a>
<a class="info-links">aaa</a>
<a class="info-links">bbb</a>
<br/><br/>
<div class="co">dddd</div>
<div class="col">dddd</div>
<div id="container">
<div class="co">dddd</div>
<div class="col">dddd</div>
<div class="co">dddd</div>
<div class="col">dddd</div>
<a class="a">ccc</a>
</div>
JS code:
test 1 :
var a = getElementsByClassName(document,"a","info-links");
alert(a[0].innerHTML +" "+a[1].innerHTML);
for(var i=0;i<a.length;i++){
a[i].style.color="red";
}
//test 2 :
var b = getElementsByClassName(document.getElementById("container"), "div", "col");
for(var m=0;m<b.length;m++){
b[m].style.color="red";
}
**************/
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "\-");
var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
/**************
replaceAll：
替换字符串中的字符。
用法：
yourstring.replaceAll("要替换的字符", "替换成什么");
例子:
"cssrain".replaceAll("s", "a");
" cs sr ai n".replaceAll(" ", "");
**************/
String.prototype.replaceAll = function (AFindText,ARepText){
raRegExp = new RegExp(AFindText,"g");
return this.replace(raRegExp,ARepText);
}
/**************
* 字符串前后空格处理。
* 如果想替换中间的空格，请用replaceAll方法。
* 用法：
* " cssrain ".trim();
**************/
String.prototype.trim=function()
{
return this.replace(/(^\s*)|(\s*$)/g,"");//将字符串前后空格,用空字符串替代。
}
/**************
* 计算字符串的真正长度
//String有个属性length，但是它不能区分英文字符，
//计算中文字符和全角字符。但是在数据存储的时候中文和全角都是用两个字节来存储的，
//所有需要额外处理一下。自己写了个函数，返回String正真的长度.
用法：
<input type="text" name="rain" id="rain" />
<input type="button" id="test" value="test" onclick="alert( document.getElementById('rain').value.codeLength() )"/>
**************/
String.prototype.codeLength=function(){
var len=0;
if(this==null||this.length==0)
return 0;
var str=this.replace(/(^\s*)|(\s*$)/g,"");//去掉空格
for(i=0;i<str.length;i++)
if(str.charCodeAt(i)>0&&str.charCodeAt(i)<128)
len++;
else
len+=2;
return len;
}
//JS获取字符串的实际长度，用来代替 String的length属性
String.prototype.length = function(){
return this.replace.(/[\u4e00-\u9fa5]+/g,"**").length;
}
/**************
//编码HTML 和 解码Html。
//在评论的时候为了防止用户提交带有恶意的脚本，可以先过滤HTML标签，过滤掉双引号，单引号，符号&，符号<，符号
用法：
<input type="text" name="rain" id="rain" />
<input type="button" value="test" onclick=" document.getElementById('rain2').value= document.getElementById('rain').value.htmlEncode() "/>
<input type="text" name="rain2" id="rain2" />
<input type="button" value="test" onclick=" document.getElementById('rain').value= document.getElementById('rain2').value.htmlDecode() "/>
**************/
String.prototype.htmlEncode=function(){
return this.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/\"/g,""").replace(/\'/g,"'");
}
String.prototype.htmlDecode=function(){
return this.replace(/\&\;/g, '\&').replace(/\>\;/g, '\>').replace(/\<\;/g, '\<').replace(/\"\;/g, '\'').replace(/\&\#39\;/g, '\'');
}
/*
当我们想在页面加载之后执行某个函数，肯定会想到onload了
但onload在浏览器看来，就是页面上的东西全部都加载完毕后才能发生，但那就为时已晚了。
如果只需要对DOM进行操作，那么这时就没必要等到页面全部加载了。我们需要更快的方法。
Firefox有DOMContentLoaded事件可以轻松解决，可惜的就是IE没有。
MSDN关于JSCRIPT的一个方法有段不起眼的话，当页面DOM未加载完成时，
调用doScroll方法时，会产生异常。那么我们反过来用，如果不异常，那么就是页面DOM加载完毕了！
跟jquery中的ready功能类似。
用法：
function a(){
alert(1);
}
IEContentLoaded( document.getElementById("test") , a );
*/
function IEContentLoaded (w, fn) {
var d = w.document, done = false,
// only fire once
init = function () {
if (!done) {
done = true;
fn();
}
};
// polling for no errors
(function () {
try {
// throws errors until after ondocumentready
d.documentElement.doScroll('left');
} catch (e) {
setTimeout(arguments.callee, 50);
return;
}
// no errors, fire
init();
})();
// trying to always fire before onload
d.onreadystatechange = function() {
if (d.readyState == 'complete') {
d.onreadystatechange = null;
init();
}
};
}
/**************
用来window.load 多个函数。
window.onload是不能同时加载多个函数的；
比如：
function t(){
alert("t")
}
function b(){
alert("b")
}
window.onload =t ;
window.onload =b ;
这样做 ，只会输出 b ；
addLoadEvent()这个函数 就是解决这个问题的。
用法：
addLoadEvent(t);
addLoadEvent(b);
**************/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
//支持 FF的 onmouseenter 和 onmouseleave。
/*
由于ff 不支持 onmouseenter 和 onmouseleave。
下面这个方法 就是为了解决 ff 下的这个问题。
用法：
function init()
{
var theList = document.getElementById('theList');
xb.addEvent(theList, 'mouseenter', enter, false);
xb.addEvent(theList, 'mouseleave', leave, false);
}
function enter(e)
{
alert('mouseenter: ' + this.id);
}
function leave(e)
{
alert('mouseleave: ' + this.id);
}
*/
var xb =
{
evtHash: [],
ieGetUniqueID: function(_elem)
{
if (_elem === window) { return 'theWindow'; }
else if (_elem === document) { return 'theDocument'; }
else { return _elem.uniqueID; }
},
addEvent: function(_elem, _evtName, _fn, _useCapture)
{
if (typeof _elem.addEventListener != 'undefined')
{
if (_evtName == 'mouseenter')
{ _elem.addEventListener('mouseover', xb.mouseEnter(_fn), _useCapture); }
else if (_evtName == 'mouseleave')
{ _elem.addEventListener('mouseout', xb.mouseEnter(_fn), _useCapture); }
else
{ _elem.addEventListener(_evtName, _fn, _useCapture); }
}
else if (typeof _elem.attachEvent != 'undefined')
{
var key = '{FNKEY::obj_' + xb.ieGetUniqueID(_elem) + '::evt_' + _evtName + '::fn_' + _fn + '}';
var f = xb.evtHash[key];
if (typeof f != 'undefined')
{ return; }
f = function()
{
_fn.call(_elem);
};
xb.evtHash[key] = f;
_elem.attachEvent('on' + _evtName, f);
// attach unload event to the window to clean up possibly IE memory leaks
window.attachEvent('onunload', function()
{
_elem.detachEvent('on' + _evtName, f);
});
key = null;
//f = null; /* DON'T null this out, or we won't be able to detach it */
}
else
{ _elem['on' + _evtName] = _fn; }
},
removeEvent: function(_elem, _evtName, _fn, _useCapture)
{
if (typeof _elem.removeEventListener != 'undefined')
{ _elem.removeEventListener(_evtName, _fn, _useCapture); }
else if (typeof _elem.detachEvent != 'undefined')
{
var key = '{FNKEY::obj_' + xb.ieGetUniqueID(_elem) + '::evt' + _evtName + '::fn_' + _fn + '}';
var f = xb.evtHash[key];
if (typeof f != 'undefined')
{
_elem.detachEvent('on' + _evtName, f);
delete xb.evtHash[key];
}
key = null;
//f = null; /* DON'T null this out, or we won't be able to detach it */
}
},
mouseEnter: function(_pFn)
{
return function(_evt)
{
var relTarget = _evt.relatedTarget;
if (this == relTarget || xb.isAChildOf(this, relTarget))
{ return; }
_pFn.call(this, _evt);
}
},
isAChildOf: function(_parent, _child)
{
if (_parent == _child) { return false };
while (_child && _child != _parent)
{ _child = _child.parentNode; }
return _child == _parent;
}
};
/* end */
//DOM没有提供insertAfter(),只提供了一个insertBefore()方法。
//在这里，我们自己编写一个 insertAfter().
/**************
用法：
//插入到 div b 的后面
window.onload=function(){
var a =document.createElement("span");
var b =document.createTextNode("cssrain");
a.appendChild(b);
var mubiao = document.getElementById("b");
insertAfter(a,mubiao);
}
<div id="b">bbbbbbbbb</div>
<div>dddddd</div>
**************/
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {// 如果最后的节点是目标元素，则直接添加。因为默认是最后
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);//如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
}
}
/**************
解决 style 外嵌样式 用js 获取不到 的问题。
用法：
window.onload = function(){
var e1 = document.getElementById("exep1");
alert(getStyle(e1,"fontSize"));
alert(getStyle(e1,"backgroundColor"));
}
<!--
currentStyle 对象返回了元素上的样式表，但是 style 对象只返回通过 STYLE 标签属性应用到元素的内嵌样式。
因此，通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。
例如，如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red )，
而不是内嵌的话，对象.currentStyle.color 将返回正确的颜色，
而对象 style.color 不能返回值。
但是，如果用户指定了 <P STYLE="color:'red'">，currentStyle 和 STYLE 对象都将返回值 red。
-->
</head>
<body>
<div id="exep1">c</div>
</body>
**************/
function getStyle(elem, name){
if(elem.style[name])
return elem.style[name];
else if(elem.currentStyle)//ie
return elem.currentStyle[name];
else if(document.defaultView && document.defaultView.getComputedStyle){//w3c
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
} else
return null
}
/**************
//获取当前元素的 元素节点
如果想获取当前元素的下一个节点。
那么可以扩展下：
比如:
var elem = getNextElement( node.nextSibling );
用法;
var elem = getNextElement( node );
**************/
function getNextElement(node) {//获取当前元素的元素节点
if(node.nodeType == 1) {
return node;
}
if (node.nextSibling) {
return getNextElement(node.nextSibling);//如果不是，继续查询下一个，直到 if(node.nodeType == 1) .
}
return null;
}
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -