jQuery의 기본 개념
jQuery API에는 몇 가지 개념적 변형(예: $.ajax과 같은 함수)이 있지만 jQuery의 핵심 개념은 "무언가 찾기, 수행"입니다. 더 구체적으로 말하면 HTML 문서에서 DOM 요소를 선택한 다음 jQuery 메서드를 사용하여 해당 요소에 대해 특정 작업을 수행합니다. 이것이 큰 그림 개념이다.
이 개념을 깊이 이해하려면 아래 코드를 고려하세요.
으아악
이 HTML 문서에서는 jQuery를 사용하여 DOM 요소를 선택하고 있습니다(<a></a>)。选择某些内容后，我们然后通过调用 jQuery 方法 text()、attr() 和 appendTo()선택 항목에 대한 일부 작업을 수행합니다.
text 方法在包装的 <a></a> 元素上调用，并将该元素的显示文本设置为“jQuery”。 attr 调用将 href jQuery 웹사이트로 설정된 속성입니다.
jQuery 개발자로서 발전하려면 "뭔가를 찾고, 뭔가를 하라"는 기본 개념을 이해하는 것이 중요합니다.
개념, 개념 뒤에, jQuery 뒤에
무언가를 선택하고 어떤 일을 하는 것이 jQuery의 핵심 개념이지만, 저는 이 개념을 무언가를 만드는 것까지 확장하고 싶었습니다. 따라서 jQuery의 개념은 먼저 새로운 것을 생성하고 선택하고 이를 사용하여 작업하는 것을 포함하도록 확장될 수 있습니다. 우리는 이것을 jQuery의 개념, 개념의 개념이라고 부를 수 있습니다.
제가 강조하고 싶은 점은 이미 DOM에 있는 것을 선택하는 것이 아니라는 것입니다. grok의 또 다른 중요한 점은 jQuery를 사용하여 새로운 DOM 요소를 생성한 다음 해당 요소에 대해 특정 작업을 수행할 수 있다는 것입니다.
아래 코드 예제에서는 DOM에 없는 새로운 <a></a> 요소를 만듭니다. 일단 생성되면 선택되어 실행됩니다.
으아악
여기서 파악해야 할 핵심 개념은 <a></a> 요소를 동적으로 생성한 다음 해당 요소가 이미 DOM에 있는 것처럼 조작한다는 것입니다.
jQuery를 표준 모드 또는 표준 모드 근처에서 실행하려면 HTML이 필요합니다
브라우저가 이상한 모드에서 HTML 페이지를 렌더링할 때 jQuery 메서드가 제대로 작동하지 않는 알려진 문제가 있습니다. jQuery를 사용할 때 브라우저가 유효한 문서 유형을 사용하여 표준 모드 또는 거의 표준 모드에서 HTML을 해석하는지 확인하십시오.
올바른 기능을 보장하기 위해 이 책의 코드 예제에서는 HTML 5 문서 유형을 사용합니다.
으아악
DOM이 준비되기를 기다리는 중
DOM이 로드되어 조작이 가능해지면 jQuery는 ready라는 사용자 정의 이벤트를 실행합니다. DOM을 조작하는 코드는 이 이벤트 핸들러에서 실행될 수 있습니다. 이는 jQuery 사용의 일반적인 패턴입니다.
다음 예는 사용 중인 이 사용자 정의 이벤트의 세 가지 코딩 예를 보여줍니다.
으아악
원하는 만큼 ready()이벤트를 문서에 첨부할 수 있다는 점을 기억하세요. 당신은 하나만으로 제한되지 않습니다. 추가된 순서대로 실행됩니다.
브라우저 창이 완전히 로드되면 jQuery 코드 실행
일반적으로 우리는 window.onload 이벤트를 기다리고 싶지 않습니다. 이것이 창이 로드되기 전과 DOM을 탐색하고 조작할 준비가 된 후에 코드를 실행하는 window.onload 事件。这就是使用像 ready()와 같은 사용자 정의 이벤트를 사용하는 요점입니다.
하지만 때로는 기다리고 싶을 때가 있습니다. 사용자 정의 ready() 이벤트는 DOM을 사용할 수 있게 된 후 코드를 실행하는 데 적합하지만 jQuery를 사용하여 모든 리소스를 포함한 전체 웹페이지가 완전히 로드된 후에 코드를 실행할 수도 있습니다.
이 작업은 이벤트 메소드의 window 对象来完成。 jQuery 提供了 load() 事件方法，可用于在窗口完全加载后调用函数。下面，我提供了 load() 사용 예에 로딩 이벤트 핸들러를 첨부하여 수행할 수 있습니다.
으아악
jQuery를 포함하기 전에 모든 CSS 파일을 포함하세요
jQuery 1.3부터 라이브러리는 사용자 정의 ready() 이벤트가 시작되기 전에 모든 CSS 파일이 로드되는 것을 더 이상 보장하지 않습니다. jQuery 1.3의 이러한 변경으로 인해 항상 jQuery 코드 앞에 모든 CSS 파일을 포함해야 합니다. 이렇게 하면 나중에 HTML 문서에 포함된 JavaScript로 리디렉션되기 전에 브라우저가 CSS를 구문 분석했는지 확인할 수 있습니다. 물론, CSS를 통해 참조된 이미지는 브라우저가 JavaScript를 구문 분석할 때 다운로드될 수도 있고 다운로드되지 않을 수도 있습니다.
호스팅 버전의 jQuery를 사용하세요
jQuery를 웹 페이지에 삽입할 때 대부분의 사람들은 소스 코드를 다운로드하고 개인 도메인/호스트에서 링크하는 것을 선택합니다. 그러나 다른 사람이 jQuery 코드를 호스팅하도록 요구하는 다른 옵션도 있습니다.
Google은 누구나 사용할 수 있도록 고안된 여러 버전의 jQuery 소스 코드를 호스팅합니다. 이것은 실제로 매우 편리합니다. 아래 코드 예제에서는 <script></script> 요소를 사용하여 Google에서 호스팅하는 jQuery의 축소된 버전을 포함합니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Google 还托管了多个以前版本的 jQuery 源代码，并且对于每个版本，都提供了缩小版和非缩小版变体。我建议在开发过程中使用非缩小变体，因为在处理非缩小代码时调试错误总是更容易。
使用 Google 托管版本的 jQuery 的一个好处是它可靠、快速并且可以缓存。
不使用 Ready() 解析 DOM 时执行 jQuery 代码
并不完全需要自定义 ready() 事件。如果您的 JavaScript 代码不影响 DOM，您可以将其包含在 HTML 文档中的任何位置。这意味着如果您的 JavaScript 代码不依赖于完整的 DOM，您可以完全避免 ready() 事件。
现在大多数 JavaScript，尤其是 jQuery 代码，都会涉及到操作 DOM。这意味着 DOM 必须由浏览器完全解析才能进行操作。这就是为什么开发人员几年来一直陷在 window.onload 过山车上的原因。
为了避免对 DOM 操作的代码使用 ready() 事件，您只需将代码放在 HTML 文档中的
위 내용은 jQuery를 간단하게 마스터하기: 핵심 jQuery의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!