jQuery 바보 수준 입문 tutorial_jquery

JS를 알고 계시다면 이 글을 피하세요. HTML과 CSS를 모르신다면 이 글을 피하세요. 다음 내용을 이해하지 못할 수도 있습니다. (영어를 조금 하는 것이 가장 좋으며, 그렇지 않으면 매우 귀찮습니다.)

jQuery가 무엇인가요?
jQuery는 JavaScript 도구 상자라고 설명하는데, 원하는 대로 사용할 수 있습니다. 코드를 직접 다시 작성하는 수고를 덜어주고, 나 같은 JS 바보가 시작하는 것이 훨씬 더 쉽습니다.

jQuery는 무엇을 할 수 있나요?
페이지에 놀라운 동적 효과를 많이 생성할 수 있습니다. 간단히 말해 웹사이트를 더욱 아름답게 만들어줍니다. 여기를 클릭하면 다양한 효과를 볼 수 있습니다. >>>

jQuery를 사용하는 방법은 무엇인가요?
간단히 말하면, 페이지에서 jQuery 라이브러리(js 파일)를 호출하면 그 안에 있는 도구를 쉽게 사용할 수 있습니다(jQuery에서 도구를 호출하려면 다른 js가 필요함). 그러면 원하는 효과를 얻을 수 있습니다.

1단계: 원하는 효과 찾기
이 사이트의 효과는 sonicHTML과 jQuery 도구 두 곳에서 가져옵니다. 인터넷에는 더 많은 효과가 있으며, 시간을 할애할 의향이 있으면 다른 곳을 찾아볼 수 있습니다.

2단계: 코드 스틸링
우선 코드 스틸링 도구인 Firefox Firebug를 권장합니다. 그렇지 않다면 지금 당장 가서 얻으세요! 코드를 스키밍할 때 두 가지에 매우 주의해야 합니다!

1. 정적 페이지의 HTML 및 CSS

firebug를 사용하여 페이지에서 원하는 부분의 HTML 및 CSS 코드를 추출합니다. 이 부분의 ID와 클래스를 이동하지 말고 유지하세요. 그대로!

동시에 원하는 HTML 요소 앞에

이런 효과>>>가 비어 있을 수도 있으니 놓치지 마세요!

2.js in

⑴ 호출된 js 중에는 반드시 파일명에 "jQuery"가 포함된 js가 있을 것입니다. 자신만의 파일로 만드세요.

⑵ 에 또 다른 js가 있어야 합니다. 이 js에는 다음 코드가 있습니다:

$(document).ready(function() {

// 중간에 다른 코드가 있습니다

})
이 js는 외부 파일이라고 할 수도 있고, 헤드에 있을 수도 있습니다(본문에도 가능하지만 가능성은 있습니다) 낮음)
양식이 나타납니다. 이 부분에는 이전 HTML의 ID나 클래스가 반드시 나타날 것입니다. 일관성이 있어야 합니다. 다른 이름을 사용하려면 HTML과 js에서 동기화해야 합니다. 다르면 부족합니다.

3단계: 로컬에서 테스트하고 오류 수정
로컬에서 새 HTML 및 CSS, JS를 만들고 선택한 모든 코드를 넣고 호출해야 하는 모든 파일을 호출합니다. 신나는 시간이 왔습니다! 브라우저를 사용하여 정적 페이지를 열고 작동하는지 확인하세요. 만약 나온다면 축하드려요! 다음 단계를 밟아 나만의 것으로 만들어보세요! 작동하지 않으면 주의 깊게 확인하십시오:

⑴HTML에서 가능한 오류:

①HTML에서 ID 또는 클래스를 수정했습니다. [해결책: 원본으로 다시 변경]

②빈

이 없습니다. [해결책: 제거한 HTML에서 앞뒤에 빈
이 있는지 확인하고 추가한 후 다시 시도하세요.]

⑵JS 가능한 오류:

① 호출 경로 오류 [해결 방법: 유효한 호출 경로로 수정, js와 HTML을 함께 넣는 것이 가장 편리합니다.]

② Ready가 누락되었습니다(상세 코드는 위에 있음). 이 js(아마도 외부 파일일 수도 있고, 헤드에 있는 코드일 수도 있음) [해결책: 원본 정적 페이지에서 준비된 코드를 찾아 복사하여 추가]

③ready의 ID 또는 클래스와 HTML의 불일치 [해결책: 찾기 원본 HTML과 js의 대응 관계를 수정하고 일관성이 있도록 수정]

4단계: HTML과 CSS를 수정하여 자신만의 것으로 만들기
이 단계에서는 그런 것이 없습니다. 메서드를 원하는 대로 수정할 수 있지만 HTML의 ID와 클래스는 js와 일치해야 한다는 점에 유의하세요!

5단계: 자신의 페이지에 추가
기본적으로 이에 대해 할 말이 없지만 WP 사용자에게 한 말씀 드리고 싶습니다. 외부 파일 호출은 모두 테마의 header.php에 있습니다. 폴더 (오랜만에 찾았네요~~~~)
첨부파일 :
1.jQuery 공식 홈페이지에 있는 아주 완벽한 튜토리얼입니다. 배우고 싶다면 잘 읽어보세요)>> >

2.jQuery 도구 소개 매뉴얼(간단하고 간결하며 시작하고 싶다면 적극 권장) 빨리) >>>

3.sonicHTML(Greader에서 구독하는 블로그, 종종 사례와 데모가 포함되어 있어 매우 실용적임) >>><script></script>