몇 가지 클래식하고 일반적으로 사용되는 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></script>

3. 간단한 수직 센터링:

> 여기서는 Height() 함수가 사용되며 선택기의 문서는 다음과 같습니다. 전체 페이지를 나타냅니다.
> 다음은 Class가 Move이고 It_height가 요소의 높이로 정의된 요소를 찾습니다.
> 그런 다음 Global_height 변수를 전체 페이지의 높이, 즉 페이지 상단에서 페이지 하단까지의 거리로 정의합니다.
> 그런 다음 이 요소 상단과의 거리를 전체 페이지 높이의 절반으로 조정합니다.


> 하하, 어린이 신발에 관심이 있으신 분들은 이미 짐작이 되실 거라 믿습니다.
> CSS를 조정하는 jQuery의 기능은 매우 강력합니다. O(∩_∩)O.

코드 복사 코드는 다음과 같습니다. <script> document).ready(function($){ </script>

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 이벤트 결합:

코드 복사


코드는 다음과 같습니다.

var it_height = $('.move').height(); $('.move').css({'position' : 'absolute' , 'top' : global_height/2 - it_height/2}) ;">움직여 !

> 여기에 위의 코드를 넣으면 이 DIV를 마우스로 클릭한 후에 코드가 실행됩니다.

5.ReplaceWith 함수:

> 다음 코드는 Class가 Demo인 요소를 찾아 완전히 바꿉니다.
> 전체적인 의미는 전후의 태그를 포함하므로 교체 기능에 태그를 작성하는 것을 잊지 마세요.

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

<script>jQuery(document).ready(function($){ <BR> $('.demo').replaceWith('<div style="padding-top:30px">교체됨 !</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(∩_∩)오 하하.

로드 중...