jQuery_jquery에서 CSS 작업을 사용하기 위한 지침

WBOY
풀어 주다: 2016-05-16 19:12:41
원래의
997명이 탐색했습니다.

방금 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_jQuery
jQuery API 문서:http://docs.jquery.com/Main_Page
jQuery 中國: http://jquery.org.cn/
VisualJQuery.com : http://visualjquery.com/
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿