1. css 제어하기 jQuery는 태그의 css를 제어할 수 있는 함수를 제공함 addClass : css class를 추가함 removeClass : css class 제거함 toggleClass : 지정된 클래스가 없으면 설정하고 있으면 제거함 css : css 속성을 가져오거나 설정함 2. addClass, removeClass, toggleClass h1 태그 CSS 클래스 추가하기 CSS 클래스 제거하기 CSS 클래스 전환하기 위 실행결과는 "CSS 클래스 추가하기" 버튼을 누른 결과입니다. 위 실행결과는 "CSS 클래스 제거하기"버튼을 누른 결과입니다. 위 실행결과는 "CSS 클래스 전환하기"버튼을 누른 결과입니다. 3. css h1 태그 css 읽어오기 css 설정하기 위 실행결과는 "cs..

1. append, prepend append : html 코드나 태그를 태그 내부의 뒤에 추가합니다. prepend : html 코드나 태그를 태그 내부의 앞에 추가합니다. p 태그 HTML 코드를 뒤에 추가 HTML 객체를 뒤에 추가 HTML 코드를 앞에 추가 HTML 객체를 앞에 추가 위 실행결과는 "HTML 코드를 뒤에 추가" 버튼을 누르고 "HTML 객체를 뒤에 추가" 버튼을 누른 결과입니다. 위 실행결과는 "HTML 코드를 앞에 추가" 버튼을 누르고 "HTML 객체를 앞에 추가" 버튼을 누른 결과입니다. 2. after, before after : html 코드나 태그를 태그 다음에 배치합니다. before : html 코드나 태그를 태그 앞에 배치합니다. p 태그 html 코드를 뒤에 추가 ..

1. DOM Document Object Model text : 태그 사이의 문자열을 제어한다 html : 태그 내부의 html을 제어 val : 입력 도구들의 value 속상값을 제어한다 attr : 태그의 속성을 제어한다. 2. text a1 문자열 a1 문자열 가져오기 google a2 문자열 가져오기 a3 문자열 설정하기 a3 html 설정하기 a1 문자열 가져오기 버튼 클릭시 알림에 a1 문자열 가져옴 a2 문자열 가져오기 버튼 클릭시 a 태그의 google 문자열만 가져옴 a3 문자열 설정하기 버튼 클릭시 a3 div태그에 문자열 설정이란 문자열 삽입 a3 html 설정하기 버튼 클릭시 a 태그 html 코드가 들어가지만 문자열 형태로 삽입됨 3. html google html 가져오기 htm..

1. jQuery 이벤트 함수 jQuery는 여러 이벤트에 대해 이벤트 처리를 할 수 있는 함수를 제공합니다. 각 함수는 해당 이벤트가 발생됬을 때 등록된 함수를 자동으로 호출합니다. https://www.w3schools.com/jquery/jquery_events.asp 2. jQuery 이벤트 함수 종류 click : 클릭 dblclick : 더블 클릭 mouseenter : 마우스 커서가 들어왔을 때 mouseleave : 마우스 커서가 나갔을 때 mousedown : 마우스 키를 눌렀을때 mouseup : 마우스 키를 떼었을때 hover : 마우스 커서가 들어왓을때와 나갔을 때 focuse : 포커스가 주어졌을 때 blur : 포커스를 잃었을 때 on : 이벤트를 설정하는 함수 (on은 여러개의..

Form 태그 선택자 Form 태그 부내부의 입력에 관련된 태그들에 대한 선택자 :input : 모든 입력에 관련된 태그들을 선택함 :text : type 속성이 text인 input 태그를 선택함 :password : type 속성이 password인 input 태그를 선택함 :radio : type 속성이 radio인 input 태그를 선택함 :checkbox : type 속성이 checkbox인 input 태그를 선택함 :submit : type 속성이 submit인 input 태그를 선택함 :reset : type 속성이 reset인 input 태그를 선택함 :button : type 속성이 button인 input 태그를 선택함 :image : type 속성이 image인 input 태그가 선택..

1. 상태 선택자 태그의 상태에 따라 선택하는 선택자 :header : h1~h6 태그를 선택한다 :focus : 현재 포커스가 주어진 태그를 선택합니다. :contains(”문자열”) : 지정된 문자열이 포함되어 있는 태그를 선택합니다. :has(선택자) : 지정된 선택자를 포함한 태그를 선택합니다. 2. :header p 태그 h1 태그 h3 태그 3. :focus 4. :contains(문자열) Hello World Hello World Hi World 5. :has(선택자) p 태그를 가지고 있는 div 태그 div 태그를 가지고 있는 div 태그 Reference source code : https://github.com/yonghwankim-dev/jQuery_study/tree/main/St..