jquery

◆ 바닐라 js & 제이쿼리 비교\-바닐라 js : dom html 태그선택 document.querySelector("- 제이쿼리 : js 라이브러리 / 함수들을 묶음 패키지\->코딩라인이 대폭 짧아지며 활용성이 좋아짐\-CDN :인터넷 주소로 다른 라이브러리1)

$("css 선택자").함수 ( ) .... 함수 2( )... ;css 선택자 중복 사용하지 않아도 함수를 이어서 사용가능 사용법 : $(선택자, 선택자2,...).함수("속성", "값");\-예제) $("부모 선택자 > 자식 선택자")\-예제)

사용법 : $("css선택자") .children() .함수()선택한 태그의 자식 태그들을 선택하는 함수\-예제 ) < 본문내용 >jq)

예제) a 태그 글자 색상 변경하기\-html 내용\-jq)\-결과)

innerHTML(바닐라 js) 과 동일한 효과를 나타내며 html 태그 효과를 적용해서 문자열을 가져오거나 변경하는 함수 \-> 태그의 사이에 문자열 가져오기 : $("태그") . html( ); \-> 태그의 사이에 문자열을 지정하기 : $("태그")

선택자의 value 속성값 가져오기 : $("css선택자").val() ;input 태그의 value 값을 가져오거나 변경하는 함수 \-html 내용 예제 1) input 양식에 value 값 가져와서 alert 출력하기예제 2) input 양식에 value 값 수정

예제) 버튼에 클릭이 되면 p태그에 color:red 적용하세요\*참고! : jquery 는 기본적으로 이름이 같은 모든 태그가 선택되고 모두 디자인이 적용됨\-- 결과)

html 의 속성을 가져오는 함수사용법 : let 변수 = $("태그").attr("속성");태그에 해당하는 속성을 가져와서 변수에 저장함\-예제1) html태그의 속성의 값 가져오기\-결과)html 의 속성을 저장하는 함수속성에 값 저장\-예제2)\-결과)

css선택자에 클래스명을 추가사용법 : $("css선택자").addClass("클래스명");css선택자에 클래스명을 삭제사용법 : $("css선택자").removeClass("클래스명"); \-결과)

사용법 : $(css선택자).fadeToggle(상태);상태 : slow, fast 등css선택자가 있다면 천천히 사라지고, 없으면 천천히 나타남

$(css선택자).show(); : 선택 태그가 나타남 $(css선택자).hide(); : 선택 태그가 사라짐

사용법 : $("부모선택자").find("자식선택자").함수()부모선택자 안에 자식 태그들중에 자식선택자를 찾아서 함수를 적용함 \-예제) 부모 태그 밑에 특정 자식태그 찾아서 디자인하기\-결과)