Web/JQuery

반응형
반응형
Web/JQuery

[JQ]setInterval()

setInterval() 일정한 시간 간격으로 코드를 반복실행하는 함수 (function, 시간간격(ms)) * appendTo() : 해당 타겟 뒤에 원하는 요소를 붙여준다. setInterval()을 활용하여 반복해서 돌아가는 사진들 랜덤으로 하나를 고를 수 있다. 1. body 이미지를 선택해주세요 start 2. script 아래 스크립트를 보면 setInterval안에서 $(".active").first().appendTo(div); 를 통해 클래스가 active인 요소의 첫번째 부분에 div를 붙여주는데 이를 50 밀리초(0.05초)간격으로 반복실행하게 된다. 그런데 아직 active라는 클래스가 생성되지 않아서 클릭하기 전까지 이는 실행되지 않는다. 아래 click부분을 보면 click했을 ..

Web/JQuery

[JQ]내부삽입

prepend() : target의 자식요소 중 가장 앞에 추가 append() : target의 자식요소 중 뒤에 추가 html() : html 태그 반영하여 문맥 추가 text(): 태그 반영없이 추가 prepend append html text 내부 삽입 1 내부 삽입 2 1) prepend/append 2) html 3) text

Web/JQuery

[JQ]replaceWith/replaceAll

replaceWith target(변환될 엘리먼트)이 앞에 있다. (new Content: htmlString, element, array, jquery) replaceAll target이 뒤에 있다. 다음과 같이 버튼을 눌렀을 때 글자가 바뀐다. 각 태그를 썼을때 target의 위치의 차이를 잘 보자. DOM대체 바꾸기(replaceWith) 바꾸기(replaceAll)

Web/JQuery

[JQ]toggleClass

toggleClass() 새로운 클래스를 추가하거나 제거하여 특정 요소에 스타일을 추가하거나 제거할 수 있다. 이미지 on/ off

Web/JQuery

[JQ]toggleClass

toggleClass() 새로운 클래스를 추가하거나 제거하여 특정 요소에 스타일을 추가하거나 제거할 수 있다. 이미지 on/ off

Web/JQuery

[JQ]effect_03

메뉴 toggle 각 메뉴를 눌렀을 때 해당하는 하위메뉴들만 보이도록 한다. 1. body 메뉴만들기 (1)css 셀렉터 tag로 선택 id로 선택 class로 선택 parent child 선택 parent > child 로 선택 :nth-child(n/even/odd)로 선택 :first-child로 선택 :last-child로 선택 (2)속성 셀렉터 [attr] [attr=value] [attr!=value] ... (3)폼 셀렉터 input:타입 (4)사용자정의셀렉터 :eq(n) :first :last :even :odd :parent 2. script

emojiyeon
'Web/JQuery' 카테고리의 글 목록 (2 Page)