초보개발자 초보개발자

jQuery

• jQuery - .slideToggle()

  jQuery 2020. 6. 23. 19:22

  .slideToggle() - 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 한다. 문법 .slideToggle( [duration ] [, easing ] [, complete ] ) duration - 요소가 나타나거나 사라질때까지 걸리는 시간, 단위는 1/1000초, 기본값은 400 - fast나 slow로 정할 수 있다. fast는 200, slow는 600 easing - 요소가 나타나거나 사라지는 방식을 정한다. - swing 이나 linear가 가능하며, 기본값은 swing이다. complete 요소가 나타나거나 사라진 후 수행할 작업을 정한다. 예제1 - 버튼을 클릭하면 파란색 배경의 div요소가 아래쪽으로 나타나고, 다시 클릭하면 위쪽으로 사..

  Read More
• jQuery - .slideDown()

  jQuery 2020. 6. 23. 19:18

  .slideDown() - 선택한 요소를 아래쪽으로 서서히 나타나게 한다. 문법 .slideDown( [duration ] [, easing ] [, complete ] ) duration - 요소가 나타날 때까지 걸리는 시간. 단위는 1/1000초, 기본값은 400 - fast나 slow로 정할 수 있다. fast 는 200, slow는 600 easing - 요소가 나타나는 방식을 정함 - swing과 linear가 가능하며, 기본값은 swing complete - 요소가 나타난 후 수행할 작업을 정한다. 예제1 - 버튼을 클릭하면 파란색 배경의 div 요소가 아래쪽으로 나타난다. Click 예제2 - 나타나는 속도를 비교하는 예제. 왼쪽 요소의 나타나는 시간은 400, 오른쪽 요소는 1200 Cli..

  Read More
• jQuery - .slice();

  jQuery 2020. 6. 23. 19:13

  .slice() - 일치하는 요소의 일부분만 선택한다. 문법 .slice( start [, end ] ) 예를 들어 $( 'li' ).slice( 2 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 빨간색으로 만든다. $( 'li' ).slice( 2, 5 ).css( 'color', 'red' ); 는 li 요소 중 3번재부터 5번째까지 빨간색으로 만든다. $( 'li' ).slice( -4, -2 ).css( 'color', 'red' ); 는 뒤에서 4번째부터 뒤에서 3번째까지 빨간색으로 만든다. 예제 One Two Three Four Five One Two Three Four Five

  Read More
• jQuery - .scrollTop()

  jQuery 2020. 6. 23. 18:20

  .scrollTop() - 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정한다. 문법1 .scrollTop() 스크롤바 수직 위치를 가져온다. 예를 들어 $( 'div' ).scrollTop(); 문법2 .scrollTop( value ) 스크롤바 수직 위치를 정한다. 예를 들어 $( 'div' ).scrollTop( 300 ); 은 div 요소의 스크롤바 위치를 위에서 300px로 정한다. 예제1 - 버튼을 클릭하면 div 요소의 스크롤바 위치를 알려주는 예제 스크롤바를 움직이고 버튼을 클릭하면 값이 변한다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus laci..

  Read More
• jQuery - .resize()

  jQuery 2020. 6. 23. 18:16

  .resize() - 는 윈도우 크기가 바뀔 때 어떤 작업을 할 수 있게 합니다. 문법 $( window ).resize( function() { // do somthing ​} ); 예제 - 웹 브라우저의 크기를 변경할 때, p 요소의 가로폭을 출력한다. 윈도우 크기를 변경하면 숫자가 바뀐다.

  Read More
• jQuery - replaceWith()

  jQuery 2020. 6. 23. 18:13

  .replaceWith() - 선택한 요소를 다른 것으로 바꿉니다. 문법 .replaceWith( newContent ) 예를 들어 h1 요소를 abc로 바꾸고 싶다면 다음과 같이 합니다. $( 'h1' ).replaceWith( 'abc' ); h1 요소의 내용 뿐 아니라 h1 태그까지 지우고 바꾼다는 것에 주의합니다. newContent에는 특정 요소가 들어갈 수 있습니다. 예를 들어 $( 'h1' ).replaceWith( $( 'p.a' ) ); 는 h1 요소를 클래스 값이 a인 p 요소로 바꿉니다. 예제1 - 버튼을 클릭하면 h1요소를 Ipsum 으로 바꾼다. Lorem Replace 예제2 - 버튼을 클릭하면 h1요소를 abc 클래스 값으로 가지는 요소로 바꾼다. Lorem Ipsum Dolo..

  Read More
• jQuery - .prop()

  jQuery 2020. 6. 23. 17:20

  .prop() - 지정한 선택자를 가진 첫번재 요소의 속성값을 가져오거나 속성값을 추가한다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript입장에서의 속성(property)이다 문법1 .prop(propertyName) 속성값을 가져온다. 문법2 .prop(propertyName, value) 속성값을 추가한다. 예제1 - a 요소의 href 속성값을 .attr()과 .prop()로 가져와서 출력한다. Link 예제2 - 제일 위의 체크박스를 체크하거나 체크 해제를 하면 아래의 모든 체크박스가 체크되거나 체크 해제된다. Check ALL Checkbox 1 Checkbox 2

  Read More
• jQuery - .parent()

  jQuery 2020. 6. 23. 17:16

  .parent() - 어떤 요소의 부모 요소를 선택한다. 문법 .parents( [selector] ) selector에 값이 없으면 부모 요소를 선택하고, 값이 있으면 부모 요소에 그 selector가 있어야 선택한다. 예를 들어 $( 'p' ).parent().css( 'color', 'green' ); 는 p의 부모 요소의 색을 녹색으로 만들고, $( 'p' ).parent( 'div' ).css( 'color', 'green' ); 는 p의 부모 요소가 div일 때만 녹색으로 만든다. 예제 - ef를 클래스 값으로 갖는 p 요소의 부모 요소가 cd를 클래스 값으로 갖는 div일 때, 내용을 빨간색으로 만든다. Hello Lorem Ipsum Dolor

  Read More