전체 글
-
jQuery - .children()jQuery 2020. 6. 23. 15:28
.children() - 어떤 요소의 자식 요소를 선택한다. 문법 .children( [selector] ) 예를 들어 $('div').children().css('color', 'blue'); 는 div요소의 자식 요소의 색을 파란색으로 만든다. $('div').children('p.b1').css('color', 'blue') 는 div 요소의 자식 요소 중 클래스 값으로 b1을 가진 p요소의 색을 파란색으로 만든다. 예제 - ul 요소의 자식 요소 중 ip를 클래스 값으로 가지는 요소의 색을 빨간색으로 만든다. p 요소도 ip를 클래스 값으로 갖고 있지만, ul요소의 자식 요솩 아니여서 선택되지 않는다. Amet Lorem Ipsum Dolor * 부모 요소를 선택할 때는 .parent()를 사용한다.
-
jQuery - before()jQuery 2020. 6. 23. 15:15
.before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있다. 문법 .before( content [, content]) 예를 들어 $('h1').before('hello') 는 h1 요소 앞에 hello를 내용으로 갖는 p요소를 추가한다. $('h1.a').before($('p.b')); 는 클래스 값으로 a를 갖는 h1 요소 앞에 클래스 값으로 b를 갖는 p 요소를 이동시킨다. 예제1 - p요소 앞에 오오오를 내용으로 갖는 h1 요소를 추가 Hello World! 예제2 - h1 요소 뒤에 있던 p요소를 h1 요소 앞으로 이동시킨다. Lorem ipsum dolor. Goodbye World! * 선택한 요소 앞에 요소를 추가하거나 이동시킨는 것은 .afte..
-
jQuery - .attr()jQuery 2020. 6. 23. 15:06
.attr() - 요소(element)의 속성(atrribute)의 값을 가져오거나 속성을 추가한다. 문법1 .attr('atrributeName') 선택한 요소의 속성을 가져온다 예를 들어 $('div').attr('class') 는 div요소의 class 속성의 값을 가져온다. 문법2 .attr('attributeName', 'value') 선택한 요소에 값을 추가한다. 예를 들어 $('h1').attr('title', 'Hello') 는 h1요소에 title 속성을 추가하고 속성의 값은 Hello로 한다. 예제1 - h1 요소의 class 속성의 값을 가져와서 출력한다. Lorem ipsum dolor. h1 class value is : 예제2 - input 요소에 input your addres..
-
jQuery - .append()jQuery 2020. 6. 23. 14:57
.append() - 선택한 요소의 내용의 끝에 컨텐츠를 추가. 문법 .append(content [, content]) 예제1 예를 들어 안녕하세요 가 있을 때, $('p').append(' 123'); 를 하면 안녕하세요 123 가 출력 예제2 - 순서 없는 목록 마지막에 안녕하세요 추가 Lorem Ipsum 예제2 - strong 요소를 p 요소의 내용의 끝으로 이동시킨다. abc XYZ * 선택한 요소의 내용의 앞에 내용을 추가할 때는 .prepend() 사용 * .appendTo() 와 기능이 거의 동일하나 a.append('b') -> a에 b컨텐츠 삽입 , a.appendTo('b') -> b에 a 컨텐츠 삽입
-
JQuery - .animate()jQuery 2020. 6. 23. 14:51
.animate() - 애니메이션 효과를 만든다. 문법 .animate( properties [, duration] [, easing] [, complete]) properties backgroundPositionX backgroundPositionY borderBottomWidth borderLeftWidth borderRightWidth borderSpacing borderTopWidth borderWidth bottom fontSize height left letterSpacing lineHeight margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth opacity outlineWidth ..
-