jQuery
-
jQuery - .offset()jQuery 2020. 6. 23. 17:14
.offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시킨다. 문법1 .offset() 선택한 요소의 좌표를 가져온다. 예를 들어 var jb = $('h1').offset(); 는 h1요소의 좌표를 변수 jb에 저장한다. 문법2 .offset(coordinates) 선택한 요소를 특정 위치로 이동시킨다. 예를 들어 $( 'h1' ).offset( { left: 100, top: 50 } ); 는 h1요소를 왼쪽에서 100px, 위에서 50px 위치로 이동시킨다. 예제1 - h1과 h2 요소의 좌표를 출력한다. Lorem Ipsum 예제2 - h1 요소를 왼쪽에서 100px, 위에서 50px위치로 이동시킨다. Lorem Ipsum
-
jQuery - .load()jQuery 2020. 6. 23. 17:09
.load() - 다른 문서 등에서 내용을 가져와 현재 문서에 나타낸다. 문법 .load( url [, data] [, complete]) 예를 들어 a.html의 p요소를 가져와 div의 요소 안에 넣으려면 다음과 같이 해야 한다. $('div').load('a.html p') 예제 - load-02.html에서 id값이 ab인 요소를 가져와서, 현재 문서의 id 값이 xy인 요소 안에 넣는다. [load-01.html] [load-02.html] Lorem Ipsum Dolor
-
jQuery - jQuery.inArray()jQuery 2020. 6. 23. 17:03
jQuery.inArray() - 배열에 특정 값이 있는지 알아낼 수 있다. 문법 jQuery.inArray(value, array [, fromIndex]) - value : 검색하고자 하는 값을 입력 - array : 배열의 이름을 입력 - fromIndex : 선택사항으로 몇 번째 배열 값부터 검색할지를 정한다. 입력하지 않았을 때의 기본값은 0으로, 첫번째 배열 값부터 검색한다. 예를 들어 jQuery.inArray('as', jbAry) 는 jbAry라는 배열에 as라는 값이 있는지 검색한다. 만약 배열에 as가 없다면 -1을 반환한다. 첫번째 배열 값이 as라면 0을, 두번째 배열 값이 as라면 1을 반환한다. 예제 var jbAry = [ 'a', 'b', 'c', 'd', 'e' ] var..
-
jQuery - .html()jQuery 2020. 6. 23. 16:58
.html() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾼다. .text()와 비슷하지만 태그의 처리가 다르다. 문법1 .html() HTML 태그를 포함하여 선택한 요소 안의 내용을 가져온다. 예를 들어 var jb = $('h1').html(); 문법2 .html(htmlString) 이전 내용을 지우고 새로운 내용을 넣는다 예를 들어 $('div').html('Lorem') 는 div 요소의 내용을 Lorem으로 바꾼다. 예제1 - div 요소 안의 내용을 가져와서 그 내용을 출력한다. div 요소가 여러개 있으면 첫번째 요소의 내용을 가져온다. HTML 태그 까지 함께 저장한다는 것에 주의 Lorem ipsum dolor. Aenean nec mollis. 예제2 - div 요소 ..
-
jQuery - .hover()jQuery 2020. 6. 23. 16:52
.hover() - 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어 났을 때 어떠한 효과를 넣을 수 있다. 문법 .hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject)에는 요소에 마우스 포인터를 올렸을 때의 효과를, handlerOut(eventObject)에는 마우스 포인터가 요소를 벗어날을 때의 효과를 넣는다. 예제 - span 요소에 마우스 포인터를 올리면 글자가 커지고, 포인터가 벗어나면 다시 원래대로 돌아온다. Lorem Ipsum Dolor
-
jQuery - .hide()jQuery 2020. 6. 23. 16:13
.hide() - 선택한 요소를 사라지게 한다. 문법1 .hide() 선택한 요소를 즉시 사라지게 한다. 문법2 .hide(duration [,easing] [, complete]) duration : 사라지는 데 걸리는 시간입니다. slow, fast, 숫자를 넣을 수 있습니다. 숫자의 단위는 1000분의 1초입니다. 기본값은 400입니다. easing : 사라지는 방식입니다. swing과 linear가 가능합니다. 기본값은 swing입니다. complete : 사라진 다음 실행할 함수를 넣을 수 있습니다. 예제 - 첫번째 버튼 : 바로 사라진다. - 두번째 버튼 : 1초 동안 swing 방식으로 사라진다. - 세번째 버튼 : 1초 동안 linear 방식으로 사라진다. - 네번째 버튼 : 사라졌다가 다..