H_Develop

$ 기호의 ()안에 문자열 형태로 들어가는데, $("제이쿼리_선택자")로 사용한다. 기본 선택자, 자식/후손 선택자, 필터 선택자로 나뉜다. 기본 선택자 전체 선택자 $("*") 전체 요소 선택 요소 선택자 $("p") 모든 요소 선택 아이디 선택자 $("name") id="name" 인 요소 선택 클래스 선택자 $(".red") class="red"인 요소 선택 그룹 선택자 $("p, div, h2") 모든 , , 요소 선택 자식 선택자 자식 선택자 $("div > span") 요소의 자식 중, 요소 선택 후손 선택자 $("div span") 요소의 후손, 하위에 있는 요소 선택 필터 선택자 :eq(index) $("li:eq(0)") 요소에서 인덱스 0(첫 번째) 요소 선택 :first $("p:fi..

FrontEnd/JQuery 2022. 7. 12. 18:27

addClass() HTML 요소에 class 속성을 더함 removeClass() HTML 요소로부터 class 속성을 삭제 css() HTML 요소에 CSS속성을 설정하거나 속성 값을 가져옴 addClass() 제목 1 단락 1 제목 2 단락 2 red 클레스 더하기 blue 클레스 더하기 btn1 버튼을 통해 h2 태그에 red를 적용시키는데, style로 red를 css 설정해주어 작동하게 해준다. $(finction() { $("#title1").addClass("red"); $("#title2").css("color","blue"); $("#para").addClass("yellow"); }); 제목1 제목2 단락이다. removeClass() 제목 1 단락 1 제목 2 단락 2 pink 클레..

FrontEnd/JQuery 2022. 7. 12. 17:07

요소 추가/삽입/삭제 Method를 이용해서 HTML 요소에 추가/삽입/삭제 할 수 있다. append() 선택된 HTML 요소의 제일 끝에 새로운 요소 추가 prepend() 선택된 HTML 요소의 제일 앞에 새로운 요소 삽입 befor() 선택된 HTML 요소의 바로 앞에 새로운 요소 삽입 after() 선택된 HTML 요소의 바로 뒤에 새로운 요소 삽입 remove() 선택된 HTML 요소를 삭제 append() 눌러 버튼을 계속 누르면 안뇽이 계속 뜨게 됨. (먼저 나온 안뇽 뒤에 나오게 됨) 사진에 마우스 오버하면 밑에 사진이 오버한 사진에 맞춰서 나옴 클릭하면 단독으로 그 사진만 뜨게 됨 preventDefault() a 태그나 submit 태그는 누르면 href 로 이동하거나, 창이 새로고침..

FrontEnd/JQuery 2022. 7. 11. 17:27

Method 역할 text() 선택된 HTML 요소의 텍스트 내용을 가져오거나 설정한다. html() 선택된 HTML 요소에서 HTML 태그를 포함한 내용을 가져오거나 설정한다. val() 선택된 HTML 폼 요소의 속성 값을 가져오거나 설정한다. attr() 선택된 HTML 요소의 속성 값을 가져오거나 설정한다. ( attr("href") attr("src","cat.jpg")-이미지교체 등 ) 요소 내용 가져오기 text()는 요소의 텍스트만 가져오고, html()은 html 태그도 같이 가져온다 텍스트 가져오기 html 가져오기 결과 출력 요소 내용 가져오기 text()는 요소의 텍스트만 가져오고, html()은 html 태그도 같이 가져온다 요소 내용 가져오기 text()는 요소의 텍스트만 가져오..

FrontEnd/JQuery 2022. 7. 11. 17:08

자바스크립트에서 함수나 객체를 모아 놓은, 라이브러리 파일(함수나, 객체를 하나의 파일로 생성해두고 변경없이 불러 사용할 수 있는 코드블럭)이다. JQuery처럼 많이 사용되는 라이브러리로 React 와 D3가 있다. Node.js와 같은 수십종의 자바스크립트 라이브러리가 용도에 따라 이용되고 있다. React (Front end)와 D3 React는 통합 개발 환경을 제공하는 자바스크립트 프레임 워크이고, D3는 동적이고 인터액티브(Interactive)하게 데이터 시각화(Data Visualization)를 지원하는 자바스크립트 라이브러리이다. JQuery 기능 자바스크립트의 코드를 JQuery를 사용하여 몇 줄로 줄일 수 있다. 코드가 간결해지고, 프로그래밍을 쉽고 편리하게 처리해준다. JQuery..

FrontEnd/JQuery 2022. 7. 11. 16:25