JQuery 실용적인 튜토리얼 소스 코드 무료 다운로드

다운로드 주소: http://www.php.cn/xiazai/code/1765

강 1:

이 섹션에서 배운 JQuery 및 기타 개발 지식:

1은 페이지 콘텐츠를 담당하고 CSS는 페이지 스타일을 담당하고 Javascript는 페이지 동작을 담당합니다

2. 브라우저에 렌더링 및 표시 방법을 알리기 위해 HTML에 DOCTYPE이 있어야 합니다

3. 나중에 서버.

4. 테두리 속성은 페이지 요소의 테두리를 제어할 수 있습니다.

5. 배경-*** 배경 이미지, 배경 이미지의 위치, 반복 표시 방식을 제어할 수 있습니다.

6. #idname 또는 .classname 사용자 정의된 HTML 노드 정의 스타일

7 $(document).ready(function(){})을 사용하여 페이지가 로드될 때 실행되어야 하는 메서드를 정의할 수 있습니다.

8. $() 메서드를 통해 페이지의 지정된 노드를 얻을 수 있으며, 매개변수는 특정 CSS 선택기입니다.

9. $() 메서드에서 반환된 jquery 개체에 대해 다양한 Jquery 메서드를 실행할 수 있습니다. 데이터를 획득하고 이벤트를 정의하고 작업을 수행합니다.

10.val() 메소드는 노드의 value 속성 값을 가져올 수 있습니다.

11.html() 메소드는 노드의 html 콘텐츠를 설정할 수 있습니다.

12.click() 메소드는 마우스 클릭 이벤트에 응답할 수 있습니다.

13. keyup() 메서드는 키보드 팝업 이벤트에 응답할 수 있습니다.

14. $.get() 메서드는 get 모드에서 서버와 상호 작용할 수 있습니다. 등록된 콜백 메서드는 데이터가 반환될 때 호출됩니다. 이 메서드는 서버에서 반환된 데이터를 나타내는 일반 텍스트 매개변수를 받습니다. 15. addClass() RemoveClass() 메소드는 노드에 클래스를 추가하거나 삭제할 수 있습니다.

16. 서버로 전송된 데이터는 JavaScript로 두 번 인코딩된 다음 서버 코드에서 UTF-8로 인코딩됩니다. 한자 깨짐 문제.

관련 주제 추천: "

jquery 실전 영상

" 강 2

이 섹션에서 배운 JQuery 및 기타 개발 지식:

1.table에는 thead와 tbody

2가 포함될 수 있습니다.

3.table에 배치됩니다.{} 이 작성 방법을 태그 선택기라고 하며, 이는 전체 페이지의 모든 테이블에 영향을 줄 수 있습니다.

4.table td{}는 테이블에 포함된 모든 td를 나타냅니다.

5. border-collapse:collapse를 사용하여 테이블의 셀 테두리를 병합할 수 있습니다.

6. th에 배경색이 있는 경우 th가 속한 tr에 정의된 배경색은 유효하지 않습니다.

7.$(function(){})은 $(document).ready(function(){})

8.$("tbody tr")을 작성하는 단순화된 방법입니다. tbody

9.$("tbody tr:even")은 tbody

10.css 메소드를 사용하여 노드의 CSS 속성을 설정하거나 가져올 수 있으며, 매개변수 이름은 CSS 속성 이름입니다.

11. JQuery 개체 콘텐츠에는 선택기에 해당하는 DOM 노드가 포함되어 있으며 이는 배열 형식으로 저장됩니다.

12. get 메서드는 JQuery 개체에 포함된 특정 DOM 노드를 가져올 수 있습니다. This in function은 이 함수의 실행을 나타냅니다. Object

14. $() 메소드의 매개변수가 DOM 객체인 경우 이 메소드는 DOM 객체를 JQuery 객체로 변환하는 것과 같습니다.

15. 하위 메소드는 특정 노드의 하위 노드를 얻을 수 있으며 하위 노드의 내용을 제한하기 위해 매개변수를 지정할 수 있습니다.

16. 선택기에서 반환된 JQuery 개체에 여러 DOM 노드가 포함된 경우 이 개체에 클릭과 같은 이벤트가 등록되면 모든 DOM 노드가 해당 이벤트에 사용됩니다.

17.html 메서드는 HTML을 설정하거나 가져올 수 있습니다. 노드 Content

18.val 메소드는 노드

19의 값을 가져오거나 설정할 수 있습니다. $() 메소드의 매개변수가 올바른 HTML 텍스트인 경우 DOM 노드를 생성하고 이를 JQuery 객체

20.JQuery 대부분의 메소드는 이 메소드를 실행하는 JQuery 객체를 반환하므로 체인 메소드를 사용하여 JQuery용 코드를 작성할 수 있습니다.

21. width 메서드는 노드의 너비를 설정하거나 가져올 수 있습니다.

22.appendTo 메서드는 다른 노드의 모든 하위 노드에 노드를 추가할 수 있습니다.

23. 이벤트 전달을 차단하면 현재 노드의 이벤트가 생성될 수 있습니다. return false

24.trigger 메소드는 특정 자바스크립트 이벤트가 발생하도록 트리거할 수 있습니다.

25. JQuery에서 이벤트 매개변수를 정의할 수 있습니다. JQuery는 브라우저의 이벤트 차이를 차단하고 사용 가능한 이벤트 객체를 전달합니다.

26. 키보드 키의 키 값을 가져옵니다.

27.13은 Enter 키를 나타내고, 27은 ESC 키를 나타냅니다.

강의 3

JQuery 및 이 섹션에서 배운 기타 개발 지식:

1 페이지의 메뉴 항목을 전달할 수 있습니다. 중첩된 ul과 li는

2를 나타냅니다. 메뉴의 가장 바깥쪽 레이어는 ul이며, 한 레이어의 각 메인 메뉴는 하위 메뉴가 있는 경우 이 메인의 li에 새 ul을 만듭니다. 메뉴를 선택한 다음 중첩을 사용하면 다단계 메뉴를 만들 수 있습니다.

3. 브라우저에서 ul 및 li 요소는 기본적으로 텍스트 앞에 점 식별자가 있으며 li 요소는 들여쓰기됩니다. Opera 브라우저는 특별하며 li의 식별자는 다른 브라우저와 다릅니다.

4. 목록 스타일 속성 값이 없음인 경우 ul 및 li 앞의 작은 점을 지울 수 있습니다.

5. 하위 메뉴의 들여쓰기 값을 지우려면 패딩과 여백이 모두 0이 되어야 합니다. IE6과 IE7에는 여백만 있습니다. 들여쓰기 값은 0

인 경우에만 지울 수 있습니다.

6. 배경 이미지를 사용하여 요소의 배경 이미지를 지정할 수 있습니다. 배경 이미지가 요소의 실제 크기보다 작은 경우 배경 이미지가 전체 영역을 채울 때까지 자동으로 가로 및 세로로 반복됩니다.

7. 예 배경 이미지의 반복 채우기 방법을 제어하려면 bakcground-repeat를 사용하세요.

8. 요소에 배경 이미지와 배경 색상이 모두 정의된 경우 배경 이미지가 있는 곳에는 배경 색상이 표시되지 않습니다.

9. 텍스트의 밑줄

10.Background-position은 배경 이미지의 위치를 ​​제어할 수 있습니다. 속성 값은 숫자 값이거나 가로 및 세로 위치를 제어하는 ​​가운데, 왼쪽, 위쪽 값일 수 있습니다. 이 속성에는 두 가지 값이 있습니다. 첫 번째는 가로 방향에 해당하고 두 번째는 세로 방향에 해당합니다.

11 background-image 값은 none입니다. 이는 배경 이미지가 없음을 의미합니다

. 12. background-repeat 값이 no-repeat일 경우 해당 영역에 배경 이미지가 반복적으로 표시되지 않습니다.

13. IE6 이외의 브라우저에서는 표시 값을 block으로 설정하여 요소가 영역을 채우도록 할 수 있습니다. IE6의 경우 디스플레이를 인라인 블록으로 설정하고 너비를 설정해야 합니다.

14. 표시 값은 없음이며 요소를 숨기는 데 사용할 수 있습니다.

15 .main a와 .main > a의 차이점은 전자는 .main의 이 클래스 요소 내부에 있는 모든 노드를 선택하는 반면, 후자는 .main

의 하위 노드 중에서 a 노드만 선택한다는 것입니다.

16. show 및 hide 메소드를 사용하여 요소를 표시하거나 숨길 수 있습니다. 매개변수가 없는 효과는 CSS의 표시 속성을 수정하는 것과 같습니다. 매개변수는 밀리초 단위의 숫자이거나 '느림', '보통', '빠름' 세 단어

를 모두 사용하여 표시 또는 숨기기를 완료하는 데 필요한 시간을 제어할 수 있습니다. 애니메이션 효과는 요소의 너비와 높이를 지속적으로 변경하여 얻을 수 있습니다.

17. 토글 방식은 요소의 표시 여부를 판단하는 수고를 덜고 표시된 요소를 직접 숨기고 숨겨진 요소를 표시할 수 있어 더욱 강력합니다. 매개변수 사용 방법은 표시 및 숨기기와 동일합니다.

18. SlideDown과 SlideUp은 아래로 또는 위로 스크롤하는 효과를 얻을 수 있습니다. 실제로 애니메이션 효과는 지정된 시간 내에 요소의 높이를 수정하여 얻을 수 있습니다. 이 두 메소드의 매개변수가 비어 있는 경우는 표시 및 숨기기와 다르다는 점에 유의해야 합니다.

19.slideToggle과 Toggle은 비슷한 효과를 얻습니다.

20.DOCTYPE은 JQuery의 애니메이션에 영향을 미칩니다. DOCTYPE 정의가 없으면 JQuery의 애니메이션은 IE에서 잘못된 깜박임 효과를 갖습니다.

21. float 값은 left로, 원래 한 행에 있던 모든 요소를 ​​한 행에서 왼쪽으로 부동하게 만들 수 있습니다.

22. 여러 선택기에 대해 동일한 스타일을 정의하고 사용하여 선택기를 구분할 수 있습니다. 마찬가지로 JQuery의 $ 메서드의 경우 선택기를 전달할 수도 있습니다.

강 4

이 섹션에서 배운 JQuery 및 기타 개발 지식:

1. 태그 그룹은 ul에 의해 관리되고, 각 태그는 ul의 li입니다. 태그 아래의 콘텐츠는 p에 의해 관리됩니다.

2. 플로팅 요소 뒤에 오는 요소는 플로팅 요소를 둘러싸는 것을 원하지 않으면 플로팅 요소 뒤의 요소에 클리어 속성을 정의할 수 있습니다.

3. 영역 통합은 현재 라벨에 동일한 배경색과 동일한 색상 테두리를 사용하여 달성할 수 있습니다.

4. JQuery의 mouseover 및 mouseout 메서드는 표준 자바스크립트의 onmouseover 및 onmouseout 이벤트에 해당하며 마우스 입력 및 이탈 이벤트를 처리할 수 있습니다.

5. 여러 요소가 포함된 JQuery 개체에 대해 Each 메서드를 실행합니다. 각 메서드에 등록할 수 있는 함수의 내용은 각 요소별로 실행됩니다. 동시에 이

함수는 이 요소의 인덱스 값을 나타내는 매개변수를 받을 수도 있습니다. JQuery의 많은 메소드도 Each

6을 사용합니다. eq 메소드는 인덱스 값을 기반으로 JQuery 객체에 포함된 여러 요소 중 하나만 가져올 수 있으며 여전히 해당 요소에 해당하는 새 JQuery 객체를 반환합니다.

7. $("p:eq(1)")

8과 같은 선택기에서 eq를 사용하면 요소의 클래스 정의를 추가하고 제거할 수 있습니다.

9. Javascript의 setTimeout 메소드는 특정 코드의 실행을 지연시킬 수 있으며, 해당 ClearTimeout은 설정된 지연 작업을 지울 수 있습니다.

10. AJAX 애플리케이션을 만들 때 지금 FireFox에서 디버깅하는 것을 고려한 다음 다른 브라우저에서 확인하고 가능한 호환성 문제를 수정할 수 있습니다.

11. 커서 속성은 요소의 마우스 스타일을 제어할 수 있습니다. 포인터 속성 값은 일반적인 링크 마우스 스타일인 손 스타일을 나타냅니다.

12. 위치 속성은 요소의 위치를 ​​제어할 수 있습니다. 값은 상대적입니다. 즉, 원래 위치를 상대적으로 지정합니다. 위쪽, 왼쪽, 아래쪽 및 오른쪽 값을 설정하여 원래 위치를 기준으로 요소의 이동을 제어할 수 있습니다.

13. z-index는 페이지의 요소 높이를 제어할 수 있습니다. 값이 클수록 페이지에 더 가까워집니다. 이전에는 z-index 값이 낮은 일부 요소도 포함되었습니다. 위치 값이 상대 또는 절대인 요소에 대해서만 Z-인덱스가 적용됩니다.

14. JQuery의 로드 메소드는 지정된 정적 또는 동적 페이지 또는 서버측 프로그램의 데이터 출력을 로드 메소드를 실행하는 JQuery 객체에 의해 래핑된 요소로 로드할 수 있습니다.

15. 로드 방법은 로드된 페이지 주소 뒤에 공백을 추가한 다음 선택기와 일치하는 페이지 부분을 로드하는 것을 지원합니다.

16. 로드된 페이지는 UTF-8로 인코딩되어야 합니다. 그렇지 않으면 로드 후 중국어 문자가 깨집니다.

17.bind는 Javascript 이벤트나 JQuery에 정의된 이벤트를 지정된 노드에 바인딩하는 데 사용할 수 있습니다. JQuery에서 등록 메서드를 직접 제공하지 않는 이벤트의 경우 이 방법으로 등록할 수 있습니다. 메소드의 두 번째 매개변수는 이벤트 실행의 메소드 정의일 수 있습니다.

18.ajaxStart 및 ajaxStop은 ajax 상호 작용 시작 및 종료 전후의 이벤트에 해당합니다. 이 두 이벤트를 노드에 등록하면 현재 페이지에서 ajax 상호 작용이 시작되고 종료되기 전후에 지정된 메서드가 실행됩니다.

5강

1. img 태그의 alt 속성을 작성해야 합니다. 이미지가 로드되지 않았거나 이미지가 존재하지 않는 경우 이 속성의 텍스트 정보가 표시됩니다.

2.select 드롭다운 상자 및 각 드롭다운 상자 각 항목은 옵션의 시작 및 끝 태그에 있는 내용이 페이지에 표시됩니다. 값 속성의 값은 가져오고 보내는 데 사용됩니다. JQuery에서 val 메소드를 사용하는 서버.

selected의 속성 값이 선택되면 현재 옵션이 선택된다는 의미로 정의됩니다

3. p 요소를 중앙에 표시하는 방법: p의 너비를 설정한 다음, margin-left와 margin-right는 모두 자동입니다. 약어 방식은 margin:0 auto;

4입니다. html의 p 태그는 한 줄 이상의 내용을 나타내며, 다음 내용은 다른 줄에 표시됩니다. p 중국어 텍스트를 만들고 이미지를 가운데에 맞추려면 값이 center인 text-align 속성을 사용할 수 있습니다. p 태그에는 기본적으로 margin-top 및 margin-bottom 값이 있습니다. 필요한 경우 CSS

6을 통해 지울 수 있습니다. 가시성 속성 값이 숨겨지면 요소가 숨겨지지만 표시가 없으면, 여전히 페이지를 차지하지만 표시되지 않습니다

7. 여러 선택기가 동일한 속성 값을 갖는 경우 함께 정의할 수 있으며 선택기는 쉼표로 구분됩니다.

8. 표준 Javascript의 onchange 이벤트이며 드롭다운 상자의 내용이 변경되면 이벤트를 처리할 수 있습니다

9. 상위 메소드는 노드의 상위 노드를 가져올 수 있습니다

10. 다음 메소드는 다음 형제 노드를 가져올 수 있습니다. 노드, 해당 이전 메서드는 노드의 이전 형제 노드를 가져올 수 있습니다

11. $.post 메서드는 서버와 비동기 게시 요청을 시작할 수 있습니다. 첫 번째 매개변수는 요청의 서버측 주소, 두 번째 매개변수는 서버로 전송되는 데이터, 매개변수는 이름-값 쌍의 형태로 표현되는 자바스크립트 객체, 세 번째 매개변수는 콜백 메소드, 네 번째 매개변수 매개변수는 서버가 반환하는 데이터 형식을 나타내며 JQuery는 이 매개변수를 기반으로 데이터 형식을 변환하는 데 도움을 줍니다. get 메소드의 두 번째 매개변수만 다르고 다른 매개변수의 사용법은 동일합니다

12. Javascript의 간단한 객체 정의 방법은 {key1: value1, key2: value2}

13 입니다. JSON은 실제로 {key1: value1, key2: [1,2,3]} 또는 [1,2,{key2: value2}]

14와 같은 Javascript 개체 또는 데이터 정의의 텍스트 형식 콘텐츠입니다. $(“ ”) 메서드를 직접 사용하여 드롭다운 상자에 옵션을 만든 다음,appendTo

15.attr 메서드와 같은 메서드를 사용하여 드롭다운 상자에 추가할 수 있습니다. 특정 node

16.ajaxStart의 속성 값을 설정하거나 가져옵니다. JQuery가 발행한 각 ajax 요청 후 JQuery 대기열의 모든 ajax 요청이 완료된 후 ajaxStop이 실행되기 전에 실행됩니다.

17. fadeOut 및 fadeIn은 페이드 아웃 및 페이드 인 효과를 얻을 수 있습니다. 매개 변수 내용은 SlideUp 및 SlideDown 메서드와 유사합니다.

18. 애니메이션 효과를 얻기 위해 특정 CSS 속성을 제어하여 애니메이션 효과를 얻을 수 있습니다. 100은 완전히 표시됨을 의미하고, 0은 완전히 투명함을 의미하고, IE가 아닌 브라우저는 불투명도 속성을 사용함을 의미하며, 1은 완전히 표시됨을 의미하고, 0은 투명함을 의미합니다. JQuery는 애니메이션 방법

에서 브라우저 차이를 차단하며 불투명도를 직접 사용하여 페이드 인 및 페이드 아웃 효과를 얻을 수 있습니다.

20.data 메소드를 사용하여 데이터를 캐시할 수 있습니다. 캐싱은 시스템의 운영 효율성을 향상시키고 서버 측의 부하를 줄일 수 있습니다

21. Javascript의 Image 개체를 사용하여 이미지를 미리 로드하면 이미지가 로드되는 시기를 알 수 있어 프롬프트를 표시할 수 있습니다. 이미지 로딩에 대한 정보입니다.

22. 로드 메소드는 Javascript의 onload 이벤트에 해당할 수 있습니다. 이 예에서는 이미지가 로드될 때 이벤트를 캡처하는 데 사용됩니다.

강의 6

JQuery 및 이 섹션에서 배운 기타 개발 지식:

1. 페이지에서의 시뮬레이션 창의 제목 표시줄과 콘텐츠 영역을 각각 p로 표현할 수 있습니다.

2. 예를 들어 창의 스타일을 설정하여 하나의 배경색을 사용하도록 설정한 다음 콘텐츠 영역을 사용하여 다른 배경색을 사용하고 창에 특정 패딩 값을 설정하거나 창의 테두리를 설정할 수 있습니다. 콘텐츠 영역) 제목 표시줄 뒤의 콘텐츠 영역과 창 외부 사이의 대비를 달성하여 창 모양을 제공합니다.

3. float의 효과를 올바르게 이해하면 실제로 다음 요소와 float 요소 사이의 표시 효과에 영향을 미칩니다. 따라서 이 예에서는 html 코드의 img가 제목 표시줄 끝에 위치하면 float가 됩니다. : 오른쪽으로 이미지가 실행됩니다. 콘텐츠 영역

도메인의 맨 오른쪽에 도달했습니다. img가 HTML의 제목 표시줄 텍스트 앞에 배치된 경우에만 float: right는 제목 표시줄의 가장 오른쪽에 이미지를 만듭니다.

4 오버플로 속성 값이 auto인 경우 콘텐츠 영역이 초과할 때. 정의된 높이 또는 너비에 따라 스크롤 막대가 나타납니다.

이 섹션에서 배운 JQuery 및 기타 개발 지식:

5. position 속성 값이 절대값인 경우 요소는 기본적으로 페이지의 왼쪽 상단을 기준으로 배치됩니다. 조상 노드에 position:relative 정의가 있는 경우 조상 노드의 왼쪽 위 모서리를 기준으로 위치가 지정됩니다

6. 브라우저 표시 영역의 너비와 높이는 $(window).width로 전달될 수 있습니다. () 및 $(window).height()를 얻으려면

7. 브라우저 스크롤 막대의 왼쪽 및 위쪽 테두리는 $(window).scrollLeft() 및 $(window).scrollTop()

을 통해 얻을 수 있습니다. 8. 창이 화면에 위치합니다. 보이는 영역의 중앙에서 창을 사용하여 화면의 보이는 영역의 중앙에 위치시켜야 합니다. 창의 너비를 화면에서 빼야 합니다. 화면의 보이는 영역의 너비를 2로 나누고 스크롤 막대의 왼쪽 경계값을 더하여 구합니다. 동일한 방법으로 필요한 창의 왼쪽 경계값을 얻습니다.

9. 플러그인 작성 방법: $.fn.myplugin = function(){//mycode}, 메소드의 this는 이 메소드를 실행하는 jquery 객체를 나타냅니다. 다른 jquery 메서드를 계단식으로 배열할 수 있는지 확인하세요.

10.instanceof는 객체인지 여부를 확인하는 등 변수가 특정 js 클래스의 인스턴스인지 확인하는 데 사용할 수 있습니다. typeof str == "string"

12과 같은 변수의 height() 및 width() 메서드는 요소 자체의 높이와 너비를 가져오고, innerHeight() 및 innerWidth()는 패딩을 포함한 높이와 너비를 가져옵니다. , externalHeight() 및 externalWidth() 얻은

높이 및 너비(테두리 및 안쪽 여백 포함), 얻은 innerHeight(true) 및 externalWidth(true)는 여백, 테두리 및 안쪽 여백을 포함한 높이 및 너비입니다.

13.scroll을 사용하여 브라우저 또는 특정 노드를 등록합니다. 스크롤 막대를 스크롤하는 데 필요한 작업입니다.

14.resize는 브라우저 크기가 변경될 때 수행해야 하는 작업을 등록하는 데 사용할 수 있습니다.

15. jquery에서 제공하는 이벤트 작업은 등록 중에 증분됩니다. 예를 들어 $(window).scroll(function(){}) 코드가 두 개 있는 경우 두 번째 부분의 함수 내용은 다음과 같습니다. 첫 번째 단락의 경우 스크롤을 하면 두 코드가 모두 실행됩니다

16. animate 메소드는 일정 시간 내에 왼쪽 값과 위쪽 값을 변경하여 애니메이션 효과를 얻을 수 있습니다.

17. Dequeue 메서드는 애니메이션 대기열의 시작 부분에서 애니메이션 효과를 제거하고 즉시 실행할 수 있습니다. 이렇게 하면 대기열 뒤에 있는 애니메이션이 시작 부분의 애니메이션을 기다리지 않고 실행될 수 있습니다.

18. is 메소드를 사용하면 객체가 is 메소드 매개변수의 jquery 선택기를 충족하는지 확인할 수 있습니다.

19 :visible 선택기를 사용하면 페이지에 표시되는 요소를 얻을 수 있습니다.

20. document.ready의 코드는 브라우저의 가시 영역의 너비와 높이, 스크롤 막대의 왼쪽 및 위쪽 값을 가져오는데, 이는 반드시 정확하지는 않으므로 이 값이 이후에 얻어지는지 확인해야 합니다. 방법이 완료되었습니다.

21.$.browser를 사용하여 브라우저 유형을 확인할 수 있습니다. 확인 방법은 $.browser.msie == true일 수도 있으며, 사용할 수 있는 값에는 $.browser.opera$.browser.safari가 포함됩니다. $.browser.mozilla

22.$.browser.version은 $.browser.version.indexOf(“8”)

과 같은 브라우저 버전 번호를 확인할 수 있습니다.

위 내용은 JQuery 실용적인 튜토리얼 소스 코드 무료 다운로드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!