jquery 상용 기교

17161 단어 jquery
  • jQuery 기본 인코딩 수정(예를 들어 기본 UTF-8을 GB2312로 변경)
    $.ajaxSetup({
    	ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"} 
    });
  • jQuery,prototype 공존, $전역 변수 충돌 문제 해결
    <script src="prototype.js"></script>
    <script src="http://blogbeta.blueidea.com/jquery.js"></script>
    <script type="text/javascript">
          jQuery.noConflict();
    </script> 
    주의:prototype을 먼저 도입해야 합니다.js가 jquery를 다시 도입합니다.js, 선후 순서 틀릴 수 없습니다.
  • jQuery 요소에 이벤트가 귀속되었는지 판단
    //jQuery event                ,       jQuery     
    var $events = $("#foo").data("events");
    if( $events && $events["click"] ){
      //your code
    }
  • 스타일시트를 전환하려면 jQuery를 사용하십시오
    //            (media-type),   href        。
    $('link[media='screen']').attr('href', 'alternative.css');
  • 선택 범위를 어떻게 제한하는가(최적화 목적 기반):
    //                ,
    //  jQuery              
    //      。        ,
    //                  ,
    //             。
    var in_stock = $('#shopping_cart_items input.is_in_stock');
    
    <ul id="shopping_cart_items">
      <li><input type="radio" value="Item-X" name="item" class="is_in_stock" /> Item X</li>
      <li><input type="radio" value="Item-Y" name="item" class="3-5_days" /> Item Y</li>
      <li><input type="radio" value="Item-Z" name="item" class="unknown" /> Item Z</li>
    </ul>
  • toggleClass를 어떻게 정확하게 사용하는가:
    //  (toggle)          
    //             。
    //            :
    a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
    //toggleClass                    
    a.toggleClass('blueButton');
  • IE 고유의 기능을 설정하는 방법:
    if ($.browser.msie) {
    // Internet Explorer      
    }
  • 원소 대신 jQuery를 어떻게 사용합니까?
    $('#thatdiv').replaceWith('fnuh');
  • 어떤 요소가 비어 있는지 어떻게 검증합니까?
    //    
    if (! $('#keks').html()) {
    //       ;
    }
    
    //    
    if ($('#keks').is(":empty")) {
    //       ;
    }
  • 정렬되지 않은 집합에서 어떤 요소의 인덱스 번호를 어떻게 찾아내는가
    $("ul > li").click(function () {
      var index = $(this).prevAll().length; //prevAll([expr]):                
    });
  • 어떻게 함수를 이벤트에 연결합니까?
    //   
    $('#foo').click(function(event) { 
      alert('User clicked on "foo."'); 
    }); 
    
    //   ,       
    $('#foo').bind('click', {test1:"abc", test2:"123"}, function(event) { 
      alert('User clicked on "foo."' + event.data.test1 + event.data.test2 ); 
    }); 
    
  • 원소를 만들 때 대상의 글자량(literal)을 사용하여 속성을 정의하는 방법
    var e = $("", { href: "#", class: "a-class another-class", title: "..." }); 
    
  • 여러 속성을 어떻게 사용하여 필터를 하는지
    //                input   , 
    //              
    var elements = $('#someid input[type=sometype][value=somevalue]').get();
  • 이미지를 미리 로드하기 위해 jQuery를 사용하는 방법:
    jQuery.preloadImages = function() { 
      for(var i = 0; i < arguments.length; i++) { 
        $("<img />").attr('src', arguments[i]); 
      }
    }; 
    //   
    $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg'); 
    
  • 선택기와 일치하는 모든 요소에 이벤트 처리 프로그램을 설정하는 방법:
    $('button.someClass').live('click', someFunction); 
    //  , jQuery 1.4.2 ,delegate undelegate   
    //     live,                
    //  , table  ,     
    $("table").each(function(){ 
      $("td", this).live("hover", function(){ 
        $(this).toggleClass("hover"); 
      }); 
    }); 
    //    
    $("table").delegate("td", "hover", function(){ 
      $(this).toggleClass("hover"); 
    }); 
    
  • 선택된 옵션 요소를 어떻게 찾습니까?
    $('#someElement').find('option:selected'); 
    
  • 어떤 값 텍스트를 포함하는 요소를 숨기는 방법:
    $("p.value:contains('thetextvalue')").hide(); 
    
  • 끼워 넣은 필터를 만드는 방법:
    //                 ,
    //                 。      ,
    //        (:not) (:has)
    //  class “selected”(.selected)    。
    .filter(":not(:has(.selected))")
  • 다양한 브라우저를 어떻게 감지하는지:
      Safari (if( $.browser.safari)),  
      IE6      (if ($.browser.msie && $.browser.version > 6 )),  
      IE6      (if ($.browser.msie && $.browser.version <= 6 )),  
      FireFox 2      (if ($.browser.mozilla && $.browser.version >= '1.8' ))
  • 어떤 원소가has()를 사용하여 어떤 종류나 원소를 포함하는지 검사한다.
    //jQuery 1.4.*      has     。
    //                                               。
    $("input").has(".email").addClass("email_icon");
  • 상하문 메뉴를 오른쪽 단추로 누르는 것을 비활성화하는 방법:
    $(document).bind('contextmenu',function(e){ 
      return false; 
    }); 
    
  • 맞춤형 선택기를 어떻게 정의하는가
    $.expr[':'].mycustomselector = function(element, index, meta, stack){ 
    // element-   DOM   
    // index –           
    // meta –           
    // stack –            
    //             true 
    //             false }; 
    //         : 
    $('.someClasses:test').doSomething(); 
    
  • 어떤 원소가 존재하는지 어떻게 검사하는가
    if ($('#someDiv').length) { 
    //  !!!   …… 
    } 
    
  • 오른쪽 키와 왼쪽 키의 마우스 클릭 두 가지 상황을 어떻게 jQuery로 측정하는가:
    $("#someelement").live('click', function(e) { 
        if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) { 
            alert("Left Mouse Button Clicked"); 
        } else if(e.button == 2) { 
            alert("Right Mouse Button Clicked"); 
        }
    }); 
  • 열의 단어를 어떻게 바꾸는가
    var el = $('#id'); 
    el.html(el.html().replace(/word/ig, '')); 
    
  • 일정 시간 후에 요소를 자동으로 숨기거나 닫는 방법(1.4버전 지원):
    //  1.3.2     setTimeout       
    setTimeout(function() { 
    $('.mydiv').hide('blind', {}, 500) 
    }, 5000); 
    //    1.4     delay()          (      ) 
    $(".mydiv").delay(5000).hide('blind', {}, 500); 
    
  • Text-Area 도메인의 문자 수를 제한하는 방법:
    jQuery.fn.maxLength = function(max){ 
        return this.each(function(){
            var type = this.tagName.toLowerCase(); 
            var inputType = this.type? this.type.toLowerCase() : null; 
            if(type == "input" && inputType == "text" || inputType == "password"){ 
                //Apply the standard maxLength 
     this.maxLength = max; 
            } else if(type == "textarea"){
                this.onkeypress = function(e){ 
                    var ob = e || event; 
                    var keyCode = ob.keyCode; 
                    var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd; 
                    return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection); 
                }; 
                this.onkeyup = function(){ 
                    if(this.value.length > max){ 
                        this.value = this.value.substring(0,max); 
                    } 
                };
            }
        });
    };
    //   
    $('#mytextarea').maxLength(500); 
    
  • jQuery 글로벌 이벤트를 등록하고 비활성화하는 방법
    //jQuery  ajax    ajaxStart,ajaxStop:
    $(document).ajaxStart(function(){
        $("#background,#progressBar").show();
    }).ajaxStop(function(){
        $("#background,#progressBar").hide();
    });
    //ajax        :$.ajax()     global (  : true)       
    //AJAX   .    false         AJAX   
    //  ajaxStart   ajaxStop          Ajax   。
  • jQuery에서 원소를 복제하는 방법:
    var cloned = $('#somediv').clone(); 
    
  • jQuery에서 어떤 요소가 보이는지 테스트하는 방법
    if($(element).is(':visible')) { 
      //        
    }
  • 어떻게 원소를 화면의 중심 위치에 놓습니까?
    jQuery.fn.center = function () { 
      return this.each(function(){
        $(this).css({
          position:'absolute',
          top, ( $(window).height() - this.height() ) / 2 + $(window).scrollTop() + 'px', 
          left, ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft() + 'px'
        });
      });
    }
    //          :  
    $(element).center(); 
    
  • 특정한 명칭을 가진 모든 원소의 값을 하나의 그룹에 넣는 방법:
    var arrInputValues = new Array(); 
    $("input[name='xxx']").each(function(){ 
      arrInputValues.push($(this).val());
    }); 
    
  • 요소에서 HTML
    (function($) { 
    $.fn.stripHtml = function() { 
      var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi; 
      this.each(function() { 
        $(this).html( $(this).html().replace(regexp,'') ); 
      });
      return $(this); 
    } 
    })(jQuery); 
    //  : 
    $('p').stripHtml(); 
    
    을 제거하는 방법
  • closest를 어떻게 사용하여 부원소를 얻는가:
    $('#searchBox').closest('div'); 
    
  • Firebug와 Firefox를 사용하여 jQuery 이벤트 로그를 기록하는 방법:
    //         
    jQuery.log = jQuery.fn.log = function (msg) { 
      if (console){ 
        console.log("%s: %o", msg, this); 
      }
      return this; 
    };
    //   : 
    $('#someDiv').hide().log('div hidden').addClass('someClass'); 
    
  • 팝업 창에서 링크를 강제로 여는 방법:
    $('a.popup').live('click', function(){ 
      var newwindow = window.open($(this).attr('href'),'','height=200,width=150'); 
      if (window.focus) { 
        newwindow.focus(); 
      } 
      return false;
    }); 
    
  • 새 탭에서 링크를 강제로 여는 방법:
    $('a.newTab').live('click', function(){ 
      var newwindow=window.open(this.href); 
      $(this).target = "_blank"; 
      return false; 
    }); 
    
  • jQuery에서 어떻게 사용하는지.siblings ()로 동년배 원소 선택
    //      
    $('#nav li').click(function(){ 
      $('#nav li').removeClass('active'); 
      $(this).addClass('active'); 
    });
    //      
    $('#nav li').click(function(){ 
      $(this).addClass('active').siblings().removeClass('active'); 
    });
  • 페이지의 모든 확인란을 전환하는 방법:
    var tog = false; 
    //    true,                 
    $('a').click(function() { 
      $("input[type=checkbox]").attr("checked",!tog); 
      tog = !tog;
    });
  • 일부 입력 텍스트를 바탕으로 요소 목록을 필터하는 방법:
    //                 ,        
    $('.someClass').filter(function() { 
      return $(this).attr('value') == $('input#someId').val(); 
    }) 
    
  • 마우스 패드 커서 위치 x 및 y
    $(document).ready(function() { 
      $(document).mousemove(function(e){ 
        $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY); 
      });
    });
  • String 객체를 확장하는 방법
    $.extend(String.prototype, {
            isPositiveInteger:function(){
                return (new RegExp(/^[1-9]\d*$/).test(this));
            },
            isInteger:function(){
                return (new RegExp(/^\d+$/).test(this));
            },
            isNumber: function(value, element) {
                return (new RegExp(/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/).test(this));
            },
            trim:function(){
                return this.replace(/(^\s*)|(\s*$)|\r|
    /g, ""); }, trans:function() { return this.replace(/&lt;/g, '<').replace(/&gt;/g,'>').replace(/&quot;/g, '"'); }, replaceAll:function(os, ns) { return this.replace(new RegExp(os,"gm"),ns); }, skipChar:function(ch) { if (!this || this.length===0) {return '';} if (this.charAt(0)===ch) {return this.substring(1).skipChar(ch);} return this; }, isValidPwd:function() { return (new RegExp(/^([_]|[a-zA-Z0-9]){6,32}$/).test(this)); }, isValidMail:function(){ return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(this.trim())); }, isSpaces:function() { for(var i=0; i<this.length; i+=1) { var ch = this.charAt(i); if (ch!=' '&& ch!="
    " && ch!="\t" && ch!="\r") {return false;} } return true; }, isPhone:function() { return (new RegExp(/(^([0-9]{3,4}[-])?\d{3,8}(-\d{1,6})?$)|(^\([0-9]{3,4}\)\d{3,8}(\(\d{1,6}\))?$)|(^\d{3,8}$)/).test(this)); }, isUrl:function(){ return (new RegExp(/^[a-zA-z]+:\/\/([a-zA-Z0-9\-\.]+)([-\w .\/?%&=:]*)$/).test(this)); }, isExternalUrl:function(){ return this.isUrl() && this.indexOf("://"+document.domain) == -1; } });
  • jQuery 플러그인을 어떻게 규범화하는지:
    (function($){
        $.fn.extend({
            pluginOne: function(){
                return this.each(function(){
                    // my code
                });
            },
            pluginTwo: function(){
                return this.each(function(){
                    // my code
                });
            }
        });
    })(jQuery);
  • 이미지가 완전히 불러왔는지 확인하는 방법
    $('#theImage').attr('src', 'image.jpg').load(function() { 
      alert('This Image Has Been Loaded'); 
    }); 
    
  • 이벤트의 이름 공간을 지정하기 위해 jQuery를 사용하는 방법:
    //             
    $('input').bind('blur.validation', function(e){ 
      // ... 
    }); 
    //data          
    $('input').data('validation.isValid', true); 
    
  • 쿠키가 활성화되었는지 확인하는 방법
    var dt = new Date(); 
    dt.setSeconds(dt.getSeconds() + 60); 
    document.cookie = "cookietest=1; expires=" + dt.toGMTString(); 
    var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; 
    if(!cookiesEnabled) { 
      //    cookie 
    } 
    
  • 쿠키를 만료하는 방법:
    var date = new Date(); 
    date.setTime(date.getTime() + (x * 60 * 1000)); 
    $.cookie('example', 'foo', { expires: date }); 
    
  • 페이지의 모든 URL을 클릭 가능한 링크로 바꾸는 방법
    $.fn.replaceUrl = function() { 
      var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi; 
      return this.each(function() { 
        $(this).html( 
          $(this).html().replace(regexp,'<a href="$1">$1</a>')
        ); 
      });
    } 
    //    
    $('p').replaceUrl(); 
  • 좋은 웹페이지 즐겨찾기