일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 반응형
- steak
- Photoshop
- CSS
- IT
- 레이아웃
- 사이드바
- Transform
- jQuery
- position
- 드롭다운메뉴
- 제이쿼리
- flex
- 웹
- 플렉스
- CLIPING MASK
- 판화
- web
- BNX사이트
- 문자열 자르기
- PHP
- JavaScript
- Poster
- 자바스크립트
- 클리핑마스크
- MARGIN
- float
- 메소드
- HTML
- sideproject
- Today
- Total
목록jQuery (6)
코딩 슬라임 공방
See the Pen 관계연산자 == === by Lee Hoyeon (@nixpluvia) on CodePen.
부모요소 선택 메소드 제이쿼리에서 가장 많이 사용되는 부모요소를 반환하는 메소드는 아래의 3가지입니다. .parent() 해당요소의 바로 위의 부모를 반환 .parents() 해당요소의 모든 부모을 반환 .closest('부모요소') 해당요소의 모든 부모 중 특정 대상만 반환 ex) $('요소').parent() ex) $('요소').parents() ex) $('요소').closest('특정 부모요소')
메뉴 따라가는 하단 바 만들기 메뉴가 있을때 메뉴에게서 얻어야하는 요소는 2가지이다 메뉴들의 width값과 left 값을 얻어야한다. 메뉴의 width값을 구하는 방법은 제이쿼리로 .width()를 사용하면 구할 수 있다. 메뉴의 left값을 구하는 방법은 제이쿼리로 .position().left를 사용하면 구할 수 있다. .position()은 top값과 left 값을 모두 구하기 때문에 left만 구해와야 한다. .position은 부모 요소에서의 상대적인 좌표값이다. 문서에서의 절대값을 얻고싶다면 .offset을 사용해야한다. 이제 마우스가 들어갔을 때와 나왔을때 메뉴에 addClass와 removeClass를 해서 active클래스를 조절해야 한다 그리고 active클래스가 부여된 요소의 widt..
형제(sibling)요소의 탐색 .siblings() 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다 .next() 선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다. .nextAll() 선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다. .nextUntil() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다. .prev() 선택한 요소의 바로 이전에 위치한 형제 요소를 선택한다. .prevAll() 선택한 요소의 이전에 위치한 형제 요소를 모두 선택한다. .prevUntil() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택한다. 형제 요소 탐색 ..
기존요소의 내부에 추가 .append() 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다. .prepend() 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다. .appendTo() 선택된 요소를 해당 요소의 마지막에 추가한다. .prependTo() 선택된 요소를 해당 요소의 첫번째에 추가한다. ex) $(target).append(source) 기존요소의 외부에 추가 .before() 선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가한다. .after() 선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가한다. .insertBefore() 선택한 요소를 해당 요소의 앞쪽에 추가한다. .insertAfter() 선택한 요소를 해당 요소의 뒤쪽에 추가한다. ex) $(target)..
toggleClass 요소에 클래스 값의 생성,제거를 반복 할 수 있는 메서드입니다. $( 'p' ).toggleClass( 'xyz' ); p요소에 xyz라는 클래스 값이 없으면 생성, p요소에 xyz라는 클래스 값이 존재하면 제거를 한다. toggle toggle()은 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 합니다. toggle문법 .toggle( [ duration ], [ complete ] ) duration duration은 완전히 나타나기 까지의 시간을 나타냅니다. fast,slow와 400같은 숫자로 정할 수 있습니다. 단위는 1000분의 1초입니다. fast는 200, slow는 600입니다. 기본값은 400입니다. .toggle( 'slow' ) slow와 fast는 ..