jQuery는 div 표시, 숨기기 및 텍스트 채우기를 구현합니다.
- 善始善终원래의
- 2020-08-26 22:25:362166검색
네이티브 JavaScript 프로그래밍을 사용할 때 우리는 많은 단점이 있음을 발견했습니다. 예를 들어 요소를 얻는 것이 불편하고 때로는 순회가 필요할 수 있으며, 이로 인해 코드가 더 번거롭고 열악해질 수 있습니다. 용인. 오늘은 jQuery를 사용하여 첫 번째 웹 페이지를 구현하는 방법을 안내하겠습니다.
(1) HTML 레이아웃 페이지 사용
1) 프로젝트 Pro_01을 만들고 프로젝트 아래에 웹 페이지를 만들고 이름을 index.html로 지정합니다.
2) HTML 페이지에 세 개의 버튼을 추가합니다.
<input type="button" value="显示" id="show" /> <input type="button" value="隐藏" id="hide" /> <input type="button" value="内容填充" id="text"/>
3) HTML에서; 페이지에 세 개의 DIV 태그를 추가합니다.
<div></div> <div></div> <div></div>
(2) CSS를 사용하여 페이지를 아름답게 만듭니다.
1) 프로젝트 아래에 CSS 폴더를 만듭니다.
2) index.html에서 style.css라는 CSS 파일을 만듭니다. 파일을 36cc49f0c466276486e50c850b7e4956
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>3) style.css 파일 아래에 페이지 스타일을 추가합니다.
Global style
*{
margin: 0;
padding: 0;
}div style
div{
width:500px;
height:100px;
border:1px solid #a5b6c8;
background:#eef3f7;
display: none;
}4) F12를 누르면 페이지 효과를 탐색할 수 있습니다.
(3) jQuery 파일 소개
1) 공식 홈페이지(https://jquery.com/download/)에서 jquery-3.5.1.js 파일을 다운로드합니다.
2) 다운로드가 완료된 후 생성합니다. 프로젝트 js 폴더 아래에 다운로드한 jquery-3.5.1js 파일을 js 폴더에 넣습니다.
참고: 이 경우 사용된 jQuery 버전은 3.5.1입니다. 이 경우 js 폴더 아래에 jQuery 라이브러리 파일을 넣습니다. 디버깅을 용이하게 하려면 상대 경로를 사용하십시오.
3) index.html의 36cc49f0c466276486e50c850b7e4956 태그 앞에 파일을 삽입하세요.
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
(4) 효과 구현
1) index.html 페이지의 36cc49f0c466276486e50c850b7e4956 태그 앞에 3f1c4e4b6b16bbbd69b2ee476dc4f83a 430b1772a86b4264bce919843d2f1f21 tag
$(document).ready(function(){
});참고:
jQuery 입력 함수와 JavaScript 입력 함수의 차이점:
- jQuery의 입력 함수는 모든 html 태그(DOM) 다음에 실행됩니다. )이 로드됩니다.
- JavaScript의 window.onload 이벤트는 외부 이미지 등의 파일을 포함한 모든 콘텐츠가 로드될 때까지 기다린 후 실행됩니다.
- (3) 항목 기능에서 이벤트 등록
- Show
-
$('#show').click(function(){ $("div").show(); });
- Hide
-
$('#hide').click(function(){ $("div").hide(); }
- 텍스트 채우기
-
$('#text').click(function(){ $("div").text("内容填充"); });(4) 按F12浏览页面效果。참고: 다운로드하고 싶지 않은 경우 jQuery를 저장하면 CDN(Content Delivery Network)을 통해서도 참조할 수 있습니다. Staticfile CDN, Baidu, Youpaiyun, Sina, Google 및 Microsoft는 모두 서버에 jQuery를 가지고 있습니다. 사이트 이용자가 국내인 경우에는 바이두, 유파이윤, 시나 등 국내 CDN 주소를 사용하는 것이 좋습니다. 해외인 경우에는 구글, 마이크로소프트를 이용할 수 있습니다. 예를 들어 Baidu의 CDN을 사용하려면 다음 방법을 사용할 수 있습니다.
<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head>
위 내용은 jQuery는 div 표시, 숨기기 및 텍스트 채우기를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!