📄 prototype.js
字号:
}
}
},
//恢复元素的style.overflow值,于makeClipping方法相反
undoPositioned: function(element) {
element = $(element);
if (element._madePositioned) {
element._madePositioned = undefined;
element.style.position =
element.style.top =
element.style.left =
element.style.bottom =
element.style.right = '';
}
},
//通过设定overflow的值设置内容溢出
makeClipping: function(element) {
element = $(element);
if (element._overflow) return;
element._overflow = element.style.overflow;
if ((Element.getStyle(element, 'overflow') || 'visible') != 'hidden')
element.style.overflow = 'hidden';
},
undoClipping: function(element) {
element = $(element);
if (element._overflow) return;
element.style.overflow = element._overflow;
element._overflow = undefined;
}
});
var Toggle = new Object();
Toggle.display = Element.toggle;
/*--------------------------------------------------------------------------*/
Abstract.Insertion = function(adjacency) {
this.adjacency = adjacency;
}
Abstract.Insertion.prototype = {
initialize: function(element, content) {
this.element = $(element);
this.content = content.stripScripts();
if (this.adjacency && this.element.insertAdjacentHTML) {
try {
this.element.insertAdjacentHTML(this.adjacency, this.content);
} catch (e) {
if (this.element.tagName.toLowerCase() == 'tbody') {
this.insertContent(this.contentFromAnonymousTable());
} else {
throw e;
}
}
} else {
this.range = this.element.ownerDocument.createRange();
if (this.initializeRange) this.initializeRange();
this.insertContent([this.range.createContextualFragment(this.content)]);
}
setTimeout(function() {content.evalScripts()}, 10);
},
contentFromAnonymousTable: function() {
var div = document.createElement('div');
div.innerHTML = '<table><tbody>' + this.content + '</tbody></table>';
return $A(div.childNodes[0].childNodes[0].childNodes);
}
}
/*
该类简化HTML文档的动态修改
*/
var Insertion = new Object();
//在指定元素element前面插入content的html内容,参数element即可以是元素的id属性,也可以是元素本身
Insertion.Before = Class.create();
Insertion.Before.prototype = Object.extend(new Abstract.Insertion('beforeBegin'), {
initializeRange: function() {
this.range.setStartBefore(this.element);
},
insertContent: function(fragments) {
fragments.each((function(fragment) {
this.element.parentNode.insertBefore(fragment, this.element);
}).bind(this));
}
});
//在指定元素element的第一个子元素前插入content的html内容,参数element即可以是元素的id属性,也可以是元素本身
Insertion.Top = Class.create();
Insertion.Top.prototype = Object.extend(new Abstract.Insertion('afterBegin'), {
initializeRange: function() {
this.range.selectNodeContents(this.element);
this.range.collapse(true);
},
insertContent: function(fragments) {
fragments.reverse(false).each((function(fragment) {
this.element.insertBefore(fragment, this.element.firstChild);
}).bind(this));
}
});
//在指定元素element的最后一个子元素之后插入content的html内容,参数element即可以是元素的id属性,也可以是元素本身
Insertion.Bottom = Class.create();
Insertion.Bottom.prototype = Object.extend(new Abstract.Insertion('beforeEnd'), {
initializeRange: function() {
this.range.selectNodeContents(this.element);
this.range.collapse(this.element);
},
insertContent: function(fragments) {
fragments.each((function(fragment) {
this.element.appendChild(fragment);
}).bind(this));
}
});
//在指定元素element后面插入content的html内容,参数element即可以是元素的id属性,也可以是元素本身
Insertion.After = Class.create();
Insertion.After.prototype = Object.extend(new Abstract.Insertion('afterEnd'), {
initializeRange: function() {
this.range.setStartAfter(this.element);
},
insertContent: function(fragments) {
fragments.each((function(fragment) {
this.element.parentNode.insertBefore(fragment,
this.element.nextSibling);
}).bind(this));
}
});
////////////////////////////////////操作HTML元素的CSS样式类/////////////////////////////////
/*
操作HTML元素的CSS样式类
*/
Element.ClassNames = Class.create();
Element.ClassNames.prototype = {
initialize: function(element) {
this.element = $(element);
},
_each: function(iterator) {
this.element.className.split(/\s+/).select(function(name) {
return name.length > 0;
})._each(iterator);
},
//设置样式
set: function(className) {
this.element.className = className;
},
//添加样式
add: function(classNameToAdd) {
if (this.include(classNameToAdd)) return;
this.set(this.toArray().concat(classNameToAdd).join(' '));
},
//删除样式
remove: function(classNameToRemove) {
if (!this.include(classNameToRemove)) return;
this.set(this.select(function(className) {
return className != classNameToRemove;
}).join(' '));
},
//返回样式
toString: function() {
return this.toArray().join(' ');
}
}
/*
操作表单元素,通过该对象的方法,可以很简单地判断某个表单域是否为空,激活某些表单域等
*/
Object.extend(Element.ClassNames.prototype, Enumerable);
var Field = {
//清除传入该方法的所有表单域的值,这些表单域即可以是表单域的id属性也可以是表单域本身
clear: function() {
for (var i = 0; i < arguments.length; i++)
$(arguments[i]).value = '';
},
//将焦点移动到制定表单域,该表单域即可以是表单域的id 属性,也可以是表单域本身
focus: function(element) {
$(element).focus();
},
//判断所有表单域是否都有值,这些表单域即可以是表单域的id属性,也可以是表单域本身
//即使表单域使用了空格输入,也算输入,将返回true。
present: function() {
for (var i = 0; i < arguments.length; i++)
if ($(arguments[i]).value == '') return false;
return true;
},
//对于像文本框、文本域一样的表单元素,该方法将选中表单域内的文本,对于不是这类的元素,该方法没有任何效果
select: function(element) {
$(element).select();
},
//同样可用于选中文本,但该方法比select多一个,如果目标元素不是可选中的元素,则移动焦点到目标元素,此时的作用域focues相同
activate: function(element) {
element = $(element);
element.focus();
if (element.select)
element.select();
}
}
/////////////////////////////////////操作HTML元素的CSS样式类//////////////////////////////////////
/*
FORM对象提供了一些方法用于操作特定表单的元素,包括反问表单例的表单域,让表单域生效,失效,以及获得表单域的值等
*/
var Form = {
//返回制定表单内的所有表单域的名和值组成的字符串,即返回field1=value1&field2=value2形式的字符串
serialize: function(form) {
var elements = Form.getElements($(form));
var queryComponents = new Array();
for (var i = 0; i < elements.length; i++) {
var queryComponent = Form.Element.serialize(elements[i]);
if (queryComponent)
queryComponents.push(queryComponent);
}
return queryComponents.join('&');
},
//返回表单中的所有表单域(返回一个数组)
getElements: function(form) {
form = $(form);
var elements = new Array();
for (tagName in Form.Element.Serializers) {
var tagElements = form.getElementsByTagName(tagName);
for (var j = 0; j < tagElements.length; j++)
elements.push(tagElements[j]);
}
return elements;
},
//返回表单中的所有input元素,并可以通过typeName和name属性对该元素进行过滤。值得注意的是,该方法返回 的并不是一个数组,而是一个集合对象。
getInputs: function(form, typeName, name) {
form = $(form);
var inputs = form.getElementsByTagName('input');
if (!typeName && !name)
return inputs;
var matchingInputs = new Array();
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if ((typeName && input.type != typeName) ||
(name && input.name != name))
continue;
matchingInputs.push(input);
}
return matchingInputs;
},
//使指定表单中的所有表单域失效
disable: function(form) {
var elements = Form.getElements(form);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.blur();
element.disabled = 'true';
}
},
//是指定表单中的所有表单域生效
enable: function(form) {
var elements = Form.getElements(form);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.disabled = '';
}
},
//返回表单中第一个有效的表单域
findFirstElement: function(form) {
return Form.getElements(form).find(function(element) {
return element.type != 'hidden' && !element.disabled &&
['input', 'select', 'textarea'].include(element.tagName.toLowerCase());
});
},
//将焦点移动到指定表单中第一个可视的,有效的表单域
focusFirstElement: function(form) {
Field.activate(Form.findFirstElement(form));
},
//重设表单,与调用表单对象的reset()方法的效果一样
reset: function(form) {
$(form).reset();
}
}
/*
Form.Element主要提供了一些操作表单域的方法,包括了将某个表单域的值转换为查询字符串以及获取指定表单域的值
*/
Form.Element = {
//返回指定表单域的查询字符串,即返回‘名称=值’形式,参数element可以是元素的id属性,或元素本身
serialize: function(element) {
element = $(element);
var method = element.tagName.toLowerCase();
var parameter = Form.Element.Serializers[method](element);
if (parameter) {
var key = encodeURIComponent(parameter[0]);
if (key.length == 0) return;
if (parameter[1].constructor != Array)
parameter[1] = [parameter[1]];
return parameter[1].map(function(value) {
return key + '=' + encodeURIComponent(value);
}).join('&');
}
},
//返回指定表单域的值,参数element可以是元素的id属性,或元素本身
getValue: function(element) {
element = $(element);
var method = element.tagName.toLowerCase();
var parameter = Form.Element.Serializers[method](element);
if (parameter)
return parameter[1];
}
}
Form.Element.Serializers = {
input: function(element) {
switch (element.type.toLowerCase()) {
case 'submit':
case 'hidden':
case 'password':
case 'text':
return Form.Element.Serializers.textarea(element);
case 'checkbox':
case 'radio':
return Form.Element.Serializers.inputSelector(element);
}
return false;
},
inputSelector: function(element) {
if (element.checked)
return [element.name, element.value];
},
textarea: function(element) {
return [element.name, element.value];
},
select: function(element) {
return Form.Element.Serializers[element.type == 'select-one' ?
'selectOne' : 'selectMany'](element);
},
selectOne: function(element) {
var value = '', opt, index = element.selectedIndex;
if (index >= 0) {
opt = element.options[index];
value = opt.value;
if (!value && !('value' in opt))
value = opt.text;
}
return [element.name, value];
},
selectMany: function(element) {
var value = new Array();
for (var i = 0; i < element.length; i++) {
var opt = element.options[i];
if (opt.selected) {
var optValue = opt.value;
if (!optValue && !('value' in opt))
optValue = opt.text;
value.push(optValue);
}
}
return [element.name, value];
}
}
/*
$F()用于获取表单输入控件的值,比如text,textArea和select等元素。
//参数,为元素id或元素本身
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -