예제에서 jQuery를 참조하기 위해 CDN을 사용할 것입니다. Google 의 호스팅 라이브러리에서 최신 버전의 jQuery를 찾을 수 있습니다. 대신 다운로드하려는 경우 공식 웹 사이트에서 jQuery 사본을 얻을 수 있습니다. 이 메서드는 브라우저의 innerHTML 속성을 사용합니다. 일부 브라우저는 제공된 HTML 소스를 정확하게 복제하는 DOM을 생성하지 않을 수 있습니다. 예를 들어 버전 8 이전의 Internet Explorer는 링크의 모든 href 속성을 절대 URL로 변환하고 버전 9 이전의 Internet Explorer는 별도의 호환성 계층을 추가하지 않고 HTML5 요소를 올바르게 처리하지 않습니다. 인덱스 를 새로 고칩니다.html. 이제 단추를 클릭하여 모달의 가시성을 전환할 수 있습니다. toggle()을 페이드토글() 또는 slideToggle()으로 변경하여 몇 가지 다른 기본 제공 jQuery 효과를 볼 수 있습니다. ID는 CSS의 해시 기호(#)로 표시되므로 선택기 #demo 데모 ID에 액세스합니다.

html()은 요소 내에서 HTML을 변경하는 방법입니다. 이 짧은 예제에서는 jQuery가 간결한 방식으로 일반 JavaScript와 동일한 최종 결과를 얻을 수 있는 방법을 보여 줍니다. 이 섹션에는 실제 동작에서 다양한 jQuery 기능과 효과를 보여 주는 예제가 다수 포함되어 있습니다. 이 메서드는 브라우저의 innerHTML 속성을 사용합니다. 일부 브라우저는 원본 문서의 HTML 원본을 정확하게 복제하는 HTML을 반환하지 않을 수 있습니다. 예를 들어 Internet Explorer는 참문자값에 숫자만 포함된 경우 따옴표를 떼어놓는 경우가 있습니다. 예를 들어 클래스 이름 “AClass”가 동일한 두 div 요소를 포함합니다. “Hello, World!” 예제에서는 페이지가 로드되고 문서가 준비되는 즉시 코드가 실행되므로 사용자 상호 작용이 필요하지 않습니다. 이 경우 jQuery를 귀찮게하지 않고 HTML에 직접 텍스트를 작성할 수 있습니다. 그러나 단추 를 클릭하여 페이지에 텍스트를 표시하려면 jQuery를 활용해야합니다. html() 메서드는 선택한 요소의 콘텐츠(innerHTML)를 설정하거나 반환합니다. scripts.js 파일을 저장하고 브라우저에서 index.html을 새로 고칩니다.

이제 버튼을 클릭하면 “안녕하세요, 세계!” 텍스트가 나타납니다. jQuery는 또한 웹 사이트를 돋보이게 하는 데 도움이 되는 몇 가지 유용한 효과를 제공합니다. 예를 들어: 다음의 클릭 처리기를 만드는 경우 시작하려면 HTML 스켈레톤을 만들고 index.html로 저장합니다. 위의 jQuery 코드를 HTML 파일에 복사하여 코드가 여기에 있다고 표시합니다. 그런 다음 HTML 파일을 저장하고 브라우저에서 테스트 페이지를 다시 로드합니다. 이제 링크를 클릭하면 먼저 경고 팝업이 표시되고 http://jquery.com 탐색하는 기본 동작을 계속합니다. DOM의 가장 바깥쪽 레이어는 전체 노드를 래핑하는 레이어입니다. jQuery를 사용하여 페이지를 조작하려면 문서가 먼저 “준비”되었는지 확인해야 합니다.