몇 가지 클래식하고 일반적으로 사용되는 jQuery Tips_jquery

> 자, 이 테마는 오랫동안 걸려 있었는데 이제 바꿔야 할 때가 되었네요. 그러면 내 취향에 맞는 테마를 찾아보겠습니다.
> 그런데 요즘 PHP쪽으로 기울고 있는데 씹을 수 있는 것보다 더 많이 물어뜯을 수 있다는 걸 깨닫고 다시 주제로 돌아왔습니다(*^__^*) ㅎㅎ.

1. Jquery 라이브러리 호출하기:

> ㅎㅎ 이미 많은 아이들이 알고 있을 거라 생각하지만, 그래도 잊어버리면 곤란합니다.
> 첫 번째는 일반적으로 사용되는 Google 호스팅의 jQuery 라이브러리 주소입니다.
> 두 번째는 jQuery 공식 홈페이지 라이브러리 주소입니다. 언제든지 최신 버전을 받아보실 수 있습니다.

코드 복사 코드는 다음과 같습니다.

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

2. Load() 함수:

> 이것도 아주 좋고 여러 곳에 쓸 수 있어요.
> 예를 들어 일부 사진이 로드되지 않기 전에 프롬프트를 추가하려고 합니다.
> 또는 페이지 로딩 프로세스의 마지막 요소에 사용하여 전체 페이지에 대한 로딩 프롬프트를 제공합니다.
> 다음은 간단한 예일 뿐이며 선택기는 Img 태그를 선택합니다.
> 그런 다음 속성을 검색하는데 속성 유형은 이미지 주소인 Src이고 그 뒤에 이미지 주소의 내용이 옵니다.
> 이미지가 로드되면 이미지가 로드되었음을 알리는 프롬프트 상자가 나타납니다.
> 주목! ! 대상 요소에 채워진 Src와 정확히 동일한 Src를 입력해야 합니다. 그렇지 않으면 실패합니다.

코드 복사 코드는 다음과 같습니다.

<script> document).ready(function($){ <br>$('img').attr('src', '/global/tool/picroom/save/beauty/00001.jpg') <br> .load(함수 () { <br>alert('이미지 로드됨'); <br>}) <br><br> <br>> :// /www.evlos.org/global/demo/jquery_load <br> </div>3. 간단한 수직 센터링: <br><br>> 여기서는 Height() 함수가 사용되며 선택기의 문서는 다음과 같습니다. 전체 페이지를 나타냅니다. <br>> 다음은 Class가 Move이고 It_height가 요소의 높이로 정의된 요소를 찾습니다. <br>> 그런 다음 Global_height 변수를 전체 페이지의 높이, 즉 페이지 상단에서 페이지 하단까지의 거리로 정의합니다. <br>> 그런 다음 이 요소 상단과의 거리를 전체 페이지 높이의 절반으로 조정합니다. <br><br><br>> 하하, 어린이 신발에 관심이 있으신 분들은 이미 짐작이 되실 거라 믿습니다. <br>> CSS를 조정하는 jQuery의 기능은 매우 강력합니다. O(∩_∩)O. <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/2010-3/20100301221108218.gif" class="lazy" border="0" alt="몇 가지 클래식하고 일반적으로 사용되는 jQuery Tips_jquery" ><br><br><br><div class="codetitle">코드 복사<span><a style="max-width:90%" data="72174" class="copybut" id="copybut72174" onclick="doCopy('code72174')"><u> 코드는 다음과 같습니다. </u></a> </span><script> document).ready(function($){ </div> var global_height = $(document).height(); <div class="codebody" id="code72174"> var it_height = $('.move').height(); <br> $('. move') .css({'position' : 'absolute' , 'top' : <br> global_height/2 - it_height/2}) <br>}); > 데모 페이지 포털: http://www.evlos.org/global/demo/jquery_height <br><br>4. jQuery와 Onclick 이벤트 결합: <br><br><br><br> </div> 코드 복사 <br><br><br> 코드는 다음과 같습니다. <br><div class="codetitle"> <span><div onclick="var global_height = $(document).height(); <a style="CURSOR: pointer" data="11695" class="copybut" id="copybut11695" onclick="doCopy('code11695')"> var it_height = $('.move').height(); <U> $('.move').css({'position' : 'absolute' , 'top' : </U> global_height/2 - it_height/2}) ;">움직여 !</div> </span><br>> 여기에 위의 코드를 넣으면 이 DIV를 마우스로 클릭한 후에 코드가 실행됩니다. <br><br>5.ReplaceWith 함수: <br><br>> 다음 코드는 Class가 Demo인 요소를 찾아 완전히 바꿉니다. <br>> 전체적인 의미는 전후의 태그를 포함하므로 교체 기능에 태그를 작성하는 것을 잊지 마세요. <br><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/2010-3/20100301221315903.gif" class="lazy" border="0" alt="몇 가지 클래식하고 일반적으로 사용되는 jQuery Tips_jquery" ><br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="93132" class="copybut" id="copybut93132" onclick="doCopy('code93132')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code93132"> <br><script&gt ; <BR>jQuery(document).ready(function($){ <BR> $('.demo').replaceWith('<div style="padding-top:30px">교체됨 !</div&gt ;') ; <br>}) <br></script>

> >
6. Load() 함수 적용(페이지 로딩 프롬프트):

> 먼저 CSS를 작성하고 페이지 오른쪽 상단에 위치시킵니다.

코드 복사 코드는 다음과 같습니다.

#loading {
위치:절대값:900;텍스트 정렬:중심;
배경색:#eef2fa;테두리:1px 솔리드 #d8e3e8; 색상:#000;글꼴 크기:12px;패딩:3px ;width: 80px;
right:0;top:0;
}


> 그런 다음 모든 이미지가 로드된 후 jQuery를 사용하여 Loading DIV를 숨깁니다.

> 방금 코드를 테스트할 때 주소를 잘못 써서 미칠 뻔했습니다.

코드 복사 코드는 다음과 같습니다.

<script> 문서).ready(function($){ <div class="codebody" id="code2082">$('img').load(function(){ <br>               $('#loading').css("display","none"); <br>}) ; <br>}); <br></script>


> 아무 곳에나 DIV를 삽입하세요. O(∩_∩)오 하하.

로드 중...