jQuery는 div 표시, 숨기기 및 텍스트 채우기를 구현합니다.-JS 튜토리얼-php.cn

네이티브 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 파일을 만듭니다. 파일을

<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의 태그 앞에 파일을 삽입하세요.

<script type="text/javascript" src="js/jquery-3.5.1.js"></script>

로그인 후 복사

(4) 효과 구현

1) index.html 페이지의 태그 앞에

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

jQuery는 div 표시, 숨기기 및 텍스트 채우기를 구현합니다.