몇 가지 비교적 고전적 인 jQuery 팁

>음,이 주제 도 오래 걸 렸 으 니 바 꿔 야 겠 다.그때 입맛 에 맞 는 주 제 를 찾 아 보 자.>그 나 저 나 요즘 은 PHP 에 치 우 쳐 서 잘 씹 지 못 하 는 것 을 발견 하고 다시 주제 로 돌 아 왔 습 니 다.(*^ ^*)히히.1.Jquery 라 이브 러 리 호출:>하하,많은 어린이 신발 들 이 이미 할 수 있 을 거 라 고 믿 습 니 다.그래도 말씀 드 려 야 겠 습 니 다.잊 어 버 리 면 컵 도 있 습 니 다.>첫 번 째 는 Google 위탁 관리 소의 jQuery 라 이브 러 리 주소 입 니 다.>두 번 째 는 jQuery 공식 사이트 의 라 이브 러 리 주소 로 수시로 최신 판 을 얻 을 수 있 습 니 다.헤헤.

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 
type="text/javascript"></script> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 

2.Load()함수:>이것 도 괜 찮 네요.여러 곳 에서 사용 할 수 있어 요.>예 를 들 어 어떤 그림 이 불 러 오기 전에 힌트 를 추가 하고 싶 습 니 다.>또는 페이지 불 러 오 는 과정의 마지막 요 소 를 사용 하면 전체 페이지 의 불 러 오 는 알림 을 제공 할 수 있 습 니 다>다음은 간단 한 예 일 뿐 선택 기 는 Img 라벨 을 선택 합 니 다.>그리고 속성 을 검색 합 니 다.속성 유형 은 Src 즉 그림 주소 이 고 그 다음은 그림 주소 의 내용 입 니 다.>그림 불 러 오기 가 완료 되면 그림 이 불 러 왔 음 을 표시 하 는 알림 상자 가 팝 업 됩 니 다.>조심 하 세 요!!목표 요소 와 똑 같이 채 워 진 Src 를 꼭 채 워 주세요.그렇지 않 으 면 컵 이 됩 니 다

 
<script> 
jQuery(document).ready(function($){ 
$('img').attr('src', '/global/tool/picroom/save/beauty/00001.jpg') 
        .load(function() { 
alert('Image Loaded'); 
}); 
}); 
</script> 

>프레젠테이션 페이지 전송 문:http://www.evlos.org/global/demo/jquery_load 3.간단 한 수직 가운데:>여 기 는 Height()함 수 를 사용 합 니 다.선택 기 에 있 는 document 은 전체 페이지 를 표시 합 니 다.>아래 에서 찾 은 것 은 Class 가 Move 인 요소 입 니 다.itheight 는 요소 높이 로 정의 합 니 다.>그리고 변 수 를 Globalheight 는 전체 페이지 의 높이,즉 페이지 상단 에서 페이지 밑 까지 의 거리 로 정의 합 니 다.>그리고 이 요소 의 상단 거 리 를 전체 페이지 높이 의 절반 으로 조정 하면 됩 니 다>하하,관심 있 는 동 화 는 하 나 를 들 어도 열 을 안다 고 믿 습 니 다.>jQuery 가 CSS 를 조정 하 는 능력 은 회색 이 항상 강 한 O(∩∩)O。

 
<script> 
jQuery(document).ready(function($){ 
    var global_height = $(document).height(); 
    var it_height = $('.move').height(); 
    $('.move').css({'position' : 'absolute' , 'top' : 
        global_height/2 - it_height/2}); 
}); 

>프레젠테이션 페이지 전송 문:http://www.evlos.org/global/demo/jquery_height 4.jQuery 와 Onclick 이벤트 결합:

 
<div onclick="var global_height = $(document).height(); 
    var it_height = $('.move').height(); 
    $('.move').css({'position' : 'absolute' , 'top' : 
    global_height/2 - it_height/2});">Move It !</div> 

>위의 코드 를 여기에 놓 으 면 이 DIV 를 클릭 하여 코드 를 실행 합 니 다.5.ReplaceWith 함수:>아래 코드 는 Class 를 Demo 로 하 는 요 소 를 찾 은 다음 전체 로 교체 합 니 다.>전체 뜻 은 앞 뒤 라벨 이 포함 되 어 있 으 니 교체 함수 에 라벨 쓰 는 것 을 잊 지 마 세 요  

 
<script> 
jQuery(document).ready(function($){ 
    $('.demo').replaceWith('<div style="padding-top:30px">Replaced !</div>'); 
}); 
</script> 

>프레젠테이션 페이지 전송 문:http://www.evlos.org/global/demo/jquery_replace 6.Load()함수 의 활용(페이지 불 러 오기 알림):>먼저 CSS 를 쓰 고 페이지 오른쪽 상단 에 위치 합 니 다

 
#loading { 
    position:absolute;    z-index:900;text-align:center; 
    background-color:#eef2fa;border:1px solid #d8e3e8; 
    color:#000;font-size:12px;padding:3px;width:80px; 
    right:0;top:0; 
} 

>그리고 jQuery 로 모든 그림 을 불 러 온 후 Loading DIV 를 숨 깁 니 다.>jQuery 라 이브 러 리 에 불 러 오 는 것 을 잊 지 마 세 요.방금 테스트 코드 를 잘못 썼 습 니 다.미 칠 뻔 했 습 니 다

 
<script> 
jQuery(document).ready(function($){ 
$('img').load(function(){ 
        $('#loading').css("display","none"); 
}); 
}); 
</script> 

>아무 데 나 DIV 를 삽입 하면 됩 니 다.O(∩∩)O 하하.