>  기사  >  웹 프론트엔드  >  jquery의 요소에 클래스 이름을 추가하는 방법

jquery의 요소에 클래스 이름을 추가하는 방법

WBOY
WBOY원래의
2021-11-23 09:34:003635검색

jquery의 요소에 클래스 이름을 추가하는 방법: 1. "$(element)" 문을 사용하여 요소 개체를 일치시킵니다. 2. addClass() 메서드를 사용하여 요소에 클래스 이름을 추가합니다. 요소 object.addClass(" 클래스 이름")".

jquery의 요소에 클래스 이름을 추가하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 1.10.0, Dell G3 컴퓨터.

jquery를 사용하여 요소에 클래스 이름을 추가하는 방법

1. 새 HTML 페이지를 만든 다음 텍스트

가 포함된 버튼과 클릭 이벤트를 추가한 다음 클릭을 추가합니다. 버튼에 이벤트가 발생합니다.

html 코드:

<div id="add">点击按钮添加class</div>
<input type="button" value="添加class" onclick="addBtn()" />

수업 스타일을 추가하세요.

태그 뒤에 <style> 태그를 만든 다음 태그에 대한 글꼴 크기 스타일 클래스를 설정합니다. <p>css 코드: <pre class="brush:css;toolbar:false"><style> .fs40{ font-size: 40px; } </style></pre><p>2 jquery 라이브러리를 소개합니다. <style> 태그 뒤에 jquery 라이브러리를 추가하세요. <scritp> 태그를 만들고 태그의 addClass() 메소드를 사용하여 <div> 태그에 클래스를 추가합니다. <p>js 코드: <pre class="brush:js;toolbar:false"><script type="text/javascript"> function addBtn(){ $("#add").addClass("fs40") } </script></pre><p>html 코드 페이지를 저장한 다음 브라우저로 열고 버튼 아이콘을 클릭하면 <div> 태그의 글꼴이 커지는 것을 볼 수 있으며 이는 클래스 클래스가 성공적으로 추가되었음을 나타냅니다. . <p>페이지의 모든 코드. 모든 코드를 직접 복사하여 새 HTML 페이지에 붙여넣고 jquery 라이브러리 도입 경로를 수정한 후 HTML 코드를 저장하고 브라우저에서 열고 버튼을 클릭하면 효과를 확인할 수 있습니다. <p>모든 코드: <pre class="brush:js;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> <style> .fs40{ font-size: 40px; } </style> <script type="text/javascript"> function addBtn(){ $("#add").addClass("fs40") } </script> <div id="add">点击按钮添加class</div> <input type="button" value="添加class" onclick="addBtn()" />

출력 결과:

jquery의 요소에 클래스 이름을 추가하는 방법

관련 비디오 튜토리얼 권장 사항: jQuery 비디오 튜토리얼

위 내용은 jquery의 요소에 클래스 이름을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!