방금 jQuery의 소스 코드를 살펴보았는데, CSS와 className에 대한 운영 아이디어는 정말 훌륭하고 배울 가치가 있습니다.
jQuery.className.has의 정의 부분은 정규식을 사용하여 구현됩니다. 실제로 Javascript에서 String 객체의 indexOf 메소드를 직접 사용하여 처리하면 정규식을 사용하는 것보다 효율적이므로
jQuery.className.has의 정의는 다음과 같이 개선될 수 있습니다.
포함: function ( t, c ) {
t = t.className || t
t = " " t " "
c = " " c " "; t.indexOf(c) >-1;
}
원본 코드의 CSS 및 className 동작에 대한 발췌 내용은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
className: {
// 내부 전용, addClass("class") 사용
add: function( elem, c ){
jQuery.each( c.split(/s / ), function(i, cur){
if ( !jQuery.className.has( elem.className, cur ) )
elem.className = ( elem.className ? " " : "" ) cur;
});
},
// 내부 전용, removeClass("class") 사용
remove: function( elem, c ){
elem.className = c ?
jQuery.grep( elem.className.split(/s /), function(cur){
return !jQuery.className.has( c, cur );
}).join(" ") : "";
},
// 내부 전용, is(".class") 사용
다음 포함: function( t, c ) {
t = t.className || 티;
// 정규 표현식 문자 이스케이프 처리
c = c.replace(/([.\ *?[^]$(){}=!<>|:])/g, "\$1") ;
return t && new RegExp("(^|\s)" c "(\s|$)").test( t );
}
},
swap: function(e,o,f) {
for ( var i in o ) {
e.style["old" i] = e.style [나];
e.style[i] = o[i];
}
f.apply( e, [] );
for ( var i in o )
e.style[i] = e.style["old" i];
},
css: function(e,p) {
if ( p == "height" || p == "width" ) {
var old = {}, o높이, o너비, d = ["상단","하단","오른쪽","왼쪽"];
jQuery.each( d, function(){
old["padding" this] = 0;
old["border" this "너비"] = 0;
}) ;
jQuery.swap( e, old, function() {
if (jQuery.css(e,"display") != "none") {
oHeight = e.offsetHeight;
oWidth==e.offsetWidth; ("확인됨").end()
.css({
가시성: "숨겨짐", 위치: "절대", 표시: "차단", 오른쪽: "0", 왼쪽: "0"
}).appendTo(e.parentNode)[0];
var parPos = jQuery.css(e.parentNode,"position");
if ( parPos == "" || parPos == "정적")
e.parentNode.style.position = "상대적";
oHeight = e.clientHeight;
oWidth = e.clientWidth;
if ( parPos == "" || parPos == "정적" )
e.parentNode.style.position = "정적";
e.parentNode.removeChild(e);
}
});
return p == "높이" ? o높이: o너비;
}
return jQuery.curCSS( e, p );
},
curCSS: function(elem, prop, force) {
var ret;
if (prop == "opacity" && jQuery.browser.msie)
return jQuery.attr(elem.style, "opacity");
if (prop == "float" || prop == "cssFloat")
prop = jQuery.browser.msie ? "styleFloat" : "cssFloat";
if (!force && elem.style[prop])
ret = elem.style[prop];
else if (document.defaultView && document.defaultView.getCompulatedStyle) {
if (prop =="cssFloat" || prop == "styleFloat")
prop = "float ";
prop = prop.replace(/([A-Z])/g,"-$1").toLowerCase();
var cur = document.defaultView.getCompulatedStyle(elem, null);
if ( cur )
ret = cur.getPropertyValue(prop);
else if ( prop == "표시" )
ret = "없음";
else
jQuery.swap(elem, { display: "block" }, function() {
var c = document.defaultView.getCompulatedStyle(this, "");
ret = c && c.getPropertyValue(prop) || "";
})
} else if (elem.currentStyle) {
var newProp = prop.replace(/-(w)/g,function(m,c){return c.toUpperCase(); });
ret = elem.currentStyle[prop] || elem.currentStyle[newProp];
}
반품 ret;
},
附录:jQuery官方网站:
http://jquery.com/jQuery源码下载:
http://docs.jquery.com/Downloading_jQueryjQuery API 문서:
http://docs.jquery.com/Main_PagejQuery 中國:
http://jquery.org.cn/VisualJQuery.com :
http://visualjquery.com/