jquery html 예제

Compartir

2/08/2019

Por

Categoría: Sin categoría

Comentarios: 0

작은 웹 프로젝트를 만들어 이 연습을 시작합니다. css/디렉토리의 style.css, js/디렉토리의 scripts.js, 프로젝트의 루트에 있는 기본 index.html로 구성됩니다. ID는 CSS의 해시 기호(#)로 표시되므로 선택기 #demo 데모 ID에 액세스합니다. html()은 요소 내에서 HTML을 변경하는 방법입니다. 예제에서 jQuery를 참조하기 위해 CDN을 사용할 것입니다. Google 의 호스팅 라이브러리에서 최신 버전의 jQuery를 찾을 수 있습니다. 대신 다운로드하려는 경우 공식 웹 사이트에서 jQuery 사본을 얻을 수 있습니다. 다음 예제에서는 위에서 설명한 클릭 처리 코드가 HTML 직접 포함되는 것을 보여 줍니다. 실제로 는 일반적으로 코드를 별도의 JS 파일에 배치하고 요소의 src 특성을 사용하여 페이지에 로드하는 것이 좋습니다.

위의 jQuery 코드를 HTML 파일에 복사하여 코드가 여기에 있다고 표시합니다. 그런 다음 HTML 파일을 저장하고 브라우저에서 테스트 페이지를 다시 로드합니다. 이제 링크를 클릭하면 먼저 경고 팝업이 표시되고 http://jquery.com 탐색하는 기본 동작을 계속합니다. jQuery는 또한 웹 사이트를 돋보이게 하는 데 도움이 되는 몇 가지 유용한 효과를 제공합니다. 예를 들어: .html()의 클릭 처리기를 만드는 경우 요소의 콘텐츠를 설정하는 데 사용되면 해당 요소에 있던 모든 콘텐츠가 새 콘텐츠로 완전히 대체됩니다. 또한 jQuery는 해당 요소를 새 콘텐츠로 바꾸기 전에 자식 요소에서 데이터 및 이벤트 처리기와 같은 다른 구문들을 제거합니다. 각 div에 일부 HTML을 추가한 다음 즉시 삽입된 HTML에 대한 추가 조작을 수행합니다. 참고 : jQuery의 로컬 복사본을 다운로드 한 경우 js / 폴더에 저장하고 js / jquery.min.js에 연결하십시오. 인덱스 를 새로 고칩니다.html. 이제 단추를 클릭하여 모달의 가시성을 전환할 수 있습니다. toggle()을 페이드토글() 또는 slideToggle()으로 변경하여 몇 가지 다른 기본 제공 jQuery 효과를 볼 수 있습니다. 시작하려면 HTML 골격을 만들고 index.html로 저장합니다.

jQuery는 달러 기호($)로 호출되고 표시됩니다. 주로 CSS 구문을 사용하여 jQuery를 사용하여 DOM에 액세스하고 메서드를 사용하여 작업을 적용합니다. 기본 jQuery 예제는 이 형식을 따릅니다. 예를 들어 클래스 이름 «AClass»가 동일한 두 div 요소를 포함합니다. 요소의 src 특성은 jQuery의 복사본을 가리붙여야 합니다. 다운로드 jQuery 페이지에서 jQuery 사본을 다운로드하고 html 파일과 동일한 디렉토리에 jquery.js 파일을 저장합니다. «Hello, World!» 예제에서는 페이지가 로드되고 문서가 준비되는 즉시 코드가 실행되므로 사용자 상호 작용이 필요하지 않습니다. 이 경우 jQuery를 귀찮게하지 않고 HTML에 직접 텍스트를 작성할 수 있습니다. 그러나 단추 를 클릭하여 페이지에 텍스트를 표시하려면 jQuery를 활용해야합니다. scripts.js 파일을 저장하고 브라우저에서 index.html을 새로 고칩니다.

이제 버튼을 클릭하면 «안녕하세요, 세계!» 텍스트가 나타납니다. 예를 들어 준비 된 이벤트 내에서 클릭 처리기를 링크에 추가할 수 있습니다. html(`새 HTML 콘텐츠`)은 일치하는 모든 요소의 html 내용을 대체하거나 설정하는 데 사용됩니다.