자주 사용 하 는 JQuery 코드 세 션

1.탐색 메뉴 배경 전환 효과
프로젝트 의 전단 페이지 에 서 는 다른 네 비게 이 션 메뉴 에 비해 활성 화 된 네 비게 이 션 메뉴 는 서로 다른 배경 을 설정 해 야 합 니 다.이런 효 과 를 실현 하 는 방식 은 여러 가지 가 있 는데 다음은 JQuery 를 사용 하여 실현 하 는 방식 이다.

//  ：        
$('#nav').click(function(e) {
 //    siblings   
$(e.target).addClass('on').siblings('.on').removeClass('on');
 });

2.JQuery 대상 의 요소 에 역순 으로 접근
어떤 장면 에서 우 리 는 JQuery 선택 기 를 통 해 얻 은 페이지 요소 대상 을 역순 으로 방문 해 야 할 수도 있 습 니 다.이것 은 어떻게 실현 합 니까?다음 코드 보기:

//   JQuery   get        reverse    
var arr = $('#nav').find('li').get().reverse();
$.each(arr,function(index,ele){
  .... ...
 });

3.IFrame 의 요소 에 접근
대부분의 경우 IFrame 은 좋 은 해결 방안 이 아니 지만 여러 가지 이유 로 IFrame 에 실 용적 이기 때문에 IFrame 에 있 는 요 소 를 어떻게 방문 하 는 지 알 아야 합 니 다.

var iFrameDOM = $("iframe#someID").contents();
//  ，     find       iFrame     
iFrameDOM.find(".message").slideUp();

4.검색 상자 의 값 관리
현재 각 사이트 에는 검색 상자 가 있 고 검색 상 자 는 기본 값 이 있 습 니 다.입력 상자 가 초점 을 가 져 올 때 기본 값 이 사라 집 니 다.입력 상자 가 초점 을 잃 고 입력 상자 에 새로운 값 을 입력 하지 않 으 면 입력 상자 의 값 은 기본 값 으로 복 원 됩 니 다.입력 상자 에 새 값 을 입력 하면 입력 상자 의 값 은 새로 입력 한 값 입 니 다.이런 효 과 는 JQuery 로 쉽게 이 루어 집 니 다.

$("#searchbox")
　　.focus(function(){
　　　　var $this = $(this);
　　　　($this.val() === '   ...')? $this.val('') : null;
　　})
　　.blur(function(){
　　　　var $this = $(this);
　　　　// '   ...'       
　　　　($this.val() === '')? $this.val('   ...') : null;
　　});

5.부분 페이지 로 딩 업데이트
웹 성능 을 향상 시 키 기 위해 서 는 업데이트 가 있 을 때 전체 페이지 를 불 러 오지 않 고 일부 페이지 내용 만 업데이트 합 니 다.예 를 들 어 그림 의 지연 로드 등 입 니 다.페이지 부분 새로 고침 효 과 는 JQuery 에서 도 쉽게 이 루어 집 니 다.

setInterval(function() { //  5        
  //          id content    
  $("#content").load(url);
 }, 5000);

6.data 방법 으로 데 이 터 를 캐 시 합 니 다.
프로젝트 에 서 는 서버 에 데 이 터 를 여러 번 반복 적 으로 요청 하지 않도록 가 져 온 데 이 터 를 나중에 사용 할 수 있 도록 캐 시 합 니 다.JQuery 를 통 해 이 기능 을 우아 하 게 구현 할 수 있 습 니 다.

var cache = {};
$.data(cache,'key','value'); //    
 //    
$.data(cache,'key');

7.JQuery 와 다른 라 이브 러 리 의 호환성 설정
프로젝트 에서 JQuery 를 사용 하면$는 가장 자주 사용 되 는 변수 이름 이지 만 JQuery 는$를 변수 이름 으로 사용 하 는 유일한 라 이브 러 리 가 아 닙 니 다.이름 충돌 을 피하 기 위해 다음 방식 으로 코드 를 구성 할 수 있 습 니 다.

//   ：  JQuery      $j
var $j = jQuery.noConflict();
$j('#id')....
 
//   ：        
(function($){
 $(document).ready(function(){
  //  ，        JQuery  
 });
})(jQuery);

8.테이블 헤 더 를 표 맨 아래로 복제
table 이 더 좋 은 가 독성 을 가지 도록 표 의 header 정 보 를 표 의 아래쪽 에 복제 할 수 있 습 니 다.이 효 과 는 JQuery 를 통 해 쉽게 이 루어 집 니 다.

var $tfoot = $('');
$($('thead').clone(true, true).children().get().reverse()).each(function(){
 $tfoot.append($(this));
});
$tfoot.insertAfter('table thead');

9.창(viewport)에 따라 전체 화면 너비 와 높이(width/height)의 div 를 만 듭 니 다.
아래 코드 는 viewport 에 따라 전체 화면의 div 를 만 들 수 있 습 니 다.이것 은 창 크기 에 따라 modal 이나 대화 상 자 를 보 여줄 때 매우 효과 적 입 니 다.

$('#content').css({
 'width': $(window).width(),
 'height': $(window).height(),
});
// make sure div stays full width/height on resize
$(window).resize(function(){
 var $w = $(window);
 $('#content').css({
  'width': $w.width(),
  'height': $w.height(),
 });
});

10.비밀번호 의 강 도 를 측정 한다.
일부 사이트 에 등록 할 때 비밀 번 호 를 설정 하 라 고 요구 하고 사이트 도 비밀 번 호 를 입력 하 는 문자 의 특징 에 따라 해당 하 는 힌트 를 준다.예 를 들 어 비밀번호 가 너무 짧 고 강도 가 낮 으 며 강도 가 중간 이 며 강도 가 강하 다 는 등 이다.이 건 또 어떻게 이 루어 진 거 죠?다음 코드 보기:

//               ，          
$('#pass').keyup(function(e) {
  //                       
  var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
 　　//            、  、          ，     
  var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
  var enoughRegex = new RegExp("(?=.{6,}).*", "g");
  if (false == enoughRegex.test($(this).val())) {
    $('#passstrength').html('More Characters');
  } else if (strongRegex.test($(this).val())) {
    $('#passstrength').className = 'ok';
    $('#passstrength').html('Strong!');
  } else if (mediumRegex.test($(this).val())) {
    $('#passstrength').className = 'alert';
    $('#passstrength').html('Medium!');
  } else {
    $('#passstrength').className = 'error';
    $('#passstrength').html('Weak!');
  }
  return true;
});

11.JQuery 를 사용 하여 그림 의 크기 를 다시 그립 니 다.
그림 크기 에 대한 재 설정 은 서버 에서 이 루어 질 수도 있 고 JQuery 를 통 해 클 라 이언 트 에서 이 루어 질 수도 있 습 니 다.

$(window).bind("load", function() {
  // IMAGE RESIZE
  $('#product_cat_list img').each(function() {
   var maxWidth = 120;
   var maxHeight = 120;
   var ratio = 0;
   var width = $(this).width();
   var height = $(this).height();
   if(width > maxWidth){
   ratio = maxWidth / width;
   $(this).css("width", maxWidth);
   $(this).css("height", height * ratio);
   height = height * ratio;
   }
   var width = $(this).width();
   var height = $(this).height();
   if(height > maxHeight){
   ratio = maxHeight / height;
   $(this).css("height", maxHeight);
   $(this).css("width", width * ratio);
   width = width * ratio;
   }
  });
  //$("#contentpage img").show();
  // IMAGE RESIZE
});

12.스크롤 할 때 페이지 내용 을 동적 으로 불 러 옵 니 다.
일부 사이트 의 웹 페이지 내용 은 한꺼번에 불 러 오 는 것 이 아니 라 마우스 가 아래로 굴 러 갈 때 동적 으로 불 러 오 는 것 입 니 다.어떻게 하 는 것 입 니까?다음 코드 보기:

var loading = false;
$(window).scroll(function(){
 if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
  if(loading == false){
   loading = true;
   $('#loadingbar').css("display","block");
   $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
    $('body').append(loaded);
    $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
    $('#loadingbar').css("display","none");
    loading = false;
   });
  }
 }
});
$(document).ready(function() {
 $('#loaded_max').val(50);
});

이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!