DOMSubtreeModified

WEB/jQuery 2019. 7. 11. 22:19
  • html 내용이 변경된것을 감지하려면, onchange를 사용하는 것이 아니라,
    DOM변경을 감지하는 이벤트(DOMSubtreeModified)를 씁니다.

    크로스브라우징을 지원하려면, 아래처럼 두개 이벤트를 같이 사용하면 되구요~
    DOMSubtreeModified : IE9이상, 나머지 브라우저 지원
    propertychange : IE9미만 지원

    $(function(){
        $('.amount.final').on('DOMSubtreeModified propertychange', function() {
            $('#summary_total_price').text( $(this).text() );
        });
    });
  • 알타블루 
    16-12-28 13:53 

    소스보기

  • 네. 답변 감사합니다.  알려 주신 소스로 해보고 있습니다. 아직 되지는 않는데요.. 
    중요한 내용을 알려주셨네요. 감사합니다.
  • 알타블루 
    16-12-30 18:10 

    소스보기

  • 해결되었습니다. 소채님의 힌트로 해결되었고 성공한 소스는 아래를 참조 하세요.

    $('변경을 체크하려는 클래스 또는 ID').on('DOMSubtreeModified', function() {
          $('.입력하려는 클래스 또는 ID').text( $('.입력 값이 있는 클래스 또는 ID').text() );
        });

    잘 안되던 이유는 변경을 체크하려는 클래스가 입력값이 있는 클래스가 아니고 상위 영역이 통째로 변경되던걸 늦게 알았네요.

    참조하세요.

 

참고로 HTML 내용이 변경된 것을 감지하는 것이지, 클래스 등이 변경되는 것을 감지하는 것은 아니다.

'WEB > jQuery' 카테고리의 다른 글

DOMSubtreeModified  (0) 2019.07.11
jQuery for node(elements)  (0) 2019.07.10
jQuery 에서 다룰 수 있는 Element 요소에 대한 고찰  (0) 2019.07.10
jQuery HTML tag change  (0) 2019.07.05
jQuery scroll to element  (0) 2019.05.20
jQuery API 정복 - 자식 요소들 찾기, children()  (0) 2018.05.21
블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

1. 노드 찾기

 - 태그 이름으로 노드 찾기 :  $("태그이름"),   $("선택자")

 - 클래스 이름으로 노드 찾기 : $(".클래스이름")

 - ID로 노드 찾기 : $("선택자")

 - 속성으로 노드 찾기 : $("[속성이름=값]")

 - 찾은 요소 개수 구하기 :  .size()    ,     .length

 - 찾은 요소 n번째 접근하기 : .eq(index)    ,    .each(function(index){});

 - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")

 - 찾은 요소에서 특정 자식요소만 찾기 :  .find("선택자")

 

2. 자식 노드 찾기 

 - 전체 자식 노드 찾기

    -- 텍스트 노드 포함 전체 자식 노드 찾기 :  $("선택자").contents()

    -- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")

 - n번째 자식 노드 접근

    -- $("선택자").children().eq(N)

    -- $("선택자").children(":eq(N)")

 - 첫번째 자식 노드 접근

    -- $("선택자").children().first()

    -- $("선택자").children(":first")

    -- $("선택자").children().eq(0)

    -- $("선택자").children(":eq(0)")

 - 마지막 자식 노드 접근

    -- $("선택자").children().last()

    -- $("선택자").children(":last")

 

3. 부모 노드 찾기

 - 바로 위의 부모 : $("선택자").parent()

 - 모든 부모 찾기

    -- $("선택자").parents()  모든 부모

 - 모든 부모 중 선택자에 해당하는 부모 찾기

    -- $("선택자").parents("선택자")

 

4. 형제 노드 찾기

 - 이전 형제 노드 찾기

    -- $("선택자").prev()

    -- $("선택자").prevAll("선택자");

 - 다음 형제 노드 찾기

    -- $("선택자").next()

    -- $("선택자").nextAll("선택자");

 

5. 노드 생성,추가,이동,삭제

 - 생성

    -- $("노드")

    -- $("선택자").html("<노드>...")

    -- $("노드").clone()

 - 추가

    -- $기준노드.append($추가노드)

    -- $추가노드.appendTo($기준노드)

    -- $기준노드.prepend($추가노드)  

    -- $추가노드.prependTo($기준노드)

    -- $추가노드.insertBefore($기준노드)

    -- $기준노드.before($추가노드)

    -- $추가노드.insertAfter($기준노드)

    -- $기준노드.after($추가노드)

 - 삭제

    -- $("선택자").remove()

 - 이동

    -- $기준노드.append($이동노드)  

    -- $이동노드.appendTo($기준노드)

    -- $이동노드.insertBefore($기준노드)

    -- $기준노드.before($이동노드)

    -- $이동노드.insertAfter($기준노드)   

    -- $기준노드.after($이동노드)

 

6. 텍스트 노드 다루기

 - 텍스트 노드 생성 : $("텍스트")

 - 텍스트 노드 추가 : $기준노드.append("텍스트")

 - 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")

 

기본 CSS 셀렉터 사용하기

 

a - 모든 링크(<a>) 엘리먼트와 일치하는 셀렉터.

#exID - exID를 아이디로 가지는 엘리먼트와 일치하는 셀렉터.

.exClass - exClass를 클래스로 가지는 엘리먼트와 일치하는 셀렉터.

a#exID.exClass - 아이디가 exID 이고, 클래스가 exClass인 링크와 일치하는 셀렉터.

p a.exClass - <p> 엘리먼트 내에 클래스가 exClass인 모든 링크와 일치하는 셀렉터.

아래 코드와 같이 쓰임

$("p a.exClass")

 

자식 셀렉터(child selector) : 부모와 자식 엘리먼트는 오른쪽 부등호(>)로 구분

예제) ul.myList > li > a

설명) myList 클래스를 지닌 <ul> 엘리먼트의 바로 아래 자식 리스트 앨리먼트인 <li>에서

바로 아래 자식 링크만 선택한다.

[ 어트리뷰트 셀렉터 ]

a[href^=http://] - href의 값이 http://로 시작하는 모든 링크를 의미. 캐럿문자(^)는 값의 시작 부분이 일치하는지를 뜻함

form[method] - 명시적으로 method 어트리뷰트를 가지는 <form> 엘리먼트

input[type=text] - type이 text인 모든 input 엘리먼트

div[title^=my] - title 어트리뷰트의 값이 my로 시작하는 모든 <div> 엘리먼트

a[href$=.pdf] - PDF 파일을 참조하는 모든 링크

a[href*=jquery.com] - jQuery 사이트를 참조하는 모든 <a> 엘리먼트. *는 어트리뷰트의 값이 임의의 문자열을 포함하는 엘리먼트를 찾아오라는 셀렉터.

li:has(a) - <a> 엘리먼트를 포함하는 모든 <li> 엘리먼트

li a - <li>엘리먼트 바로 아래 자식의 모든 <a> 엘리먼트

 

 

기본 CSS 셀렉터

 

* - 모든 엘리먼트와 일치

E - 태그명이 E인 모든 엘리먼트와 일치

E F - E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치

E>F - E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치

E+F - E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치

E~F - E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치

E:has(F) - 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치

E.C - 클래스명 C를 가지는 모든 엘리먼트 E와 일치. E의 생략은 *.C와 동일함.

E#I - 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함.

E[A] - 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A=V] - 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A^=V] - 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A$=V] - 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A*=V] - 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

 

 

위치 셀렉터

a:first - 페이지에서 첫 번째 <a> 엘리먼트

p:odd - 모든 홀수 번째 문단 <p> 엘리먼트

p:even - 모든 짝수 번째 문단 <p> 엘리먼트

li:last-child - 부모 엘리먼트의 마지막 자식 엘리먼트

:first - 페이지에서 처음으로 일치하는 엘리먼트

:last - 페이지에서 마지막으로 일치하는 엘리먼트

:first-child - 첫 번째 자식 엘리먼트

:last-child - 마지막 자식 엘리먼트

:only-child - 형제가 없는 모든 엘리먼트를 반환한다

:nth-child(n) - n번째 자식 엘리먼트

:nth-child(even:odd) - 짝수 또는 홀수 자식 엘리먼트

:nth-child(Xn+Y) - 전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인 경우 생략 가능.

 li:nth-child(3n)은 3의 배수 번째 아이템을 반환

 li:nth-child(5n+1)은 5의 배수 + 1 번째 아이템을 반환

:even - 페이지 전체의 짝수 번째 엘리먼트

:odd - 페이지 전체의 홀수 번째 엘리먼트

:eq(n) - n번째로 일치하는 엘리먼트

:gt(n) - n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치.

:lt(n) - n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치.

 

n번째 자식 셀렉터는 CSS와 호환성을 유지하려고 인덱스를 1부터 시작.

jQuery 정의 셀렉터는 범용 프로그래밍 규약에 따라 인덱스를 0부터 시작.

 

 

 

정의 셀렉터

:animated - 현재 애니메이션이 적용되고 있는 엘리먼트를 선택

:button - 모든 버튼을 선택 ( input[type=submit], input[type=reset], input[type=button], button )

:checkbox - 체크박스 엘리먼트만 선택

:checked - 선택된 체크박스나 라디오 버튼만 선택 (CSS에서 지원)

:contains(foo) - 텍스트 foo를 포함하는 엘리먼트만 선택

:disabled - 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택 (CSS에서 지원)

:enabled - 인터페이스에서 활성화 상태인 모든 엘리먼트를 선택 (CSS에서 지원)

:file - 모든 파일 엘리먼트를 선택 ( input[type=file] )

:header - 헤더 엘리먼트만 선택 <h1>부터 <h6>까지 선택

:hidden - 감춰진 엘리먼트만 선택

:image - 폼 이미지를 선택 ( input[type=image] )

:input - 폼 엘리먼트만 선택 ( input, select, textarea, button )

:not(filter) - 필터의 값을 반대로 변경 ( 1.3 버전에서는 변경됨 )

:parent - 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택

:password - 패스워드 엘리먼트만 선택 ( input[type=password] )

:radio - 라디오 버튼 엘리먼트만 선택 ( input[type=radio] )

:reset - 리셋 버튼 선택 ( input[type=reset] 이나 button[type=reset] )

:selected - 선택된 엘리먼트만 선택

:submit - 전송 버튼을 선택 ( button[type=submit] 이나 input[type=submit] )

:text - 텍스트 엘리먼트만 선택 ( input[type=text] )

:visible - 보이는 엘리먼트만 선택

 

:checkbox:checked:enabled - 활성화되고 선택된 체크박스만 선택

 

 

 

:not 필터

- 필터 결과가 반대로 나오게 함.

- CSS 필터에서 지원

- jQuery 정의 셀렉터에서도 동작

- 필터 셀렉터에는 적용할 수 있지만 찾기 셀렉터에는 적용하지 못한다.

- 모두 콜론 문자(:)나 대괄호 문자([)로 시작.

input:not(:checkbox) - 체크박스가 아닌 <input> 엘리먼트 선택

필터 셀렉터 - 기준을 추가해서 일치하는 엘리먼트의 집합을 줄여나간다.

찾기 셀렉터 - 이미 선택된 엘리먼트와 맺은 관계를 통해 다른 엘리먼트를 찾는다. [ 자손 셀렉터(공백문자), 자식 셀렉터(>), 형제 셀렉터(+) ]가 있다.

 

 

커맨드 문법

 

size() - 확장 집합의 엘리먼트 개수를 반환

예제) $('a').size()

설명) 모든 <a> 타입의 엘리먼트의 개수를 반환

get(index) - 확장된 집합에서 하나 또는 모든 일치하는 엘리먼트를 가져온다. 매개변수가 명시되지 않았다면 모든 엘리먼트를 자바스크립트 배열로 반환

예제) $('img[alt]').get(0)

index(element) - 확장 집합에서 전달된 엘리먼트를 찾고, 집합에서 찾은 엘리먼트의 인덱스를 반환. 집합에 해당 엘리먼트가 존재하지 않으면 -1을 반환

예제) var n = $('img').index($('img#findMe')[0]);

add(expression) - expression 매개변수로 명시한 엘리먼트를 확장 집합에 추가한다. 표현식에는 셀렉터, HTML, 코드, DOM 엘리먼트, DOM 엘리먼트 배열이 올 수 있다.

예제1) $('img[alt]').add('img[title]')

예제2) $('img[alt]').addClass('thickBorder').add('img[title]').addClass('seeThrough')

설명2) alt 어트리뷰트를 가진 모든 <img>엘리먼트의 확장 집합을 생성한 뒤 두꺼운 테두리를 만드는 클래스를 적용. title 어트리 뷰트를 가진 <img> 엘리먼트를 추가하고, 마지막으로 투명도를 주는 클래스를 적용.

not(expression) - expression 매개변수의 값에 따라서 일치하는 집합에서 엘리먼트를 제거.

예제) $('img[title]').not('[title*=puppy]')

설명) title 어트리뷰트를 지닌 모든 <img> 엘리먼트를 선택할 때, title 어트리뷰트 값이 puppy를 포함하는 엘리먼트를 제외.

filter(expression) - 전달 받은 셀렉터 표현식이나 필터링 함수를 이용해서 확장 집합에서 엘리먼트를 필터링.

예제) $('td').filter(function(){return this.innerHTML.match(/^\d+$/)})

설명) 모든 <td> 엘리먼트로 구성된 확장 집합을 생성한 다음 엘리먼트 각각에 대해 filter() 메서드에 전달된 함수를 호출.

호출된 함수를 this값으로 현재 순회 중인 엘리먼트를 이용.

전달된 함수는 정규 표현식을 사용하여 숫자로 내용이 구성된 패턴을 만족하는지 검사.

필터 함수를 호출한 결과로 false를 반환하는 엘리먼트가 모두 확장 집합에서 제거

slice(begin, end) - 일치하는 집합에서 연속하는 일부분을 포함하는 새로운 확장 집합을 생성하고 반환

- begin : 반환되는 부분 집합에 포함될 첫 엘리먼트의 위치로, 0부터 시작

- end : 반환되는 부분 집합에 포함될 마지막 엘리먼트의 바로 다음 위치로, 0부터 시작하며, 생략하면 집합의 마지막까지 포함한다.

예제1) $('*').slice(2,3);

설명1) 페이지에 있는 모든 엘리먼트를 선택한 다음 세 번째 엘리먼트를 담은 새로운 집합을 생성

예제2) $('*').slice(0,4);

설명2) 페이지에 있는 모든 엘리먼트를 선택한 다음 처음 네 개의 엘리먼트를 포함한 집합을 생성

예제3) $('*').slice(4);

설명4) 페이지의 모든 엘리먼트와 일치한 다음 처음 네 엘리먼트를 제외한 모든 엘리먼트의 집합을 반환

  < 관계를 통해 새로운 확장 집합을 얻을 수 있는 메서드 >

  children() - 확장 엘리먼트의 고유한 자식으로 구성된 확장 집합을 반환

  contents() - 엘리먼트의 콘텐츠로 구성된 확장 집합을 반환. 텍스트 노드도 포함되며 주로 <iframe> 엘리먼트의 콘텐츠를 얻고자 사용

  next() - 확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 형제로 구성된 확장 집합을 반환

  nextAll() - 확장 집합 내의 각 확장 엘리먼트 다음에 나오는 모든 형제로 구성된 확장 집합을 반환

  parent() - 확장 집합 내에 있는 모든 확장 엘리먼트의 바로 위 부모로 구성된 확장 집합을 반환

  parents() - 모든 확장 엘리먼트의 조상으로 구성된 확장 집합을 반환. 바로 위 부모와 상위의 모든 조상이 포함되지만 문서 루트(document root)는 포함되지 않는다.

  prev() - 확장 집합 내의 각 확장 엘리먼트 바로 이전에 나오는 형제로 구성된 확장 집합을 반환

  prevAll() - 확장 집합 내의 각 확장 엘리먼트 이전에 나오는 모든 형제로 구성된 확장 집합을 반환

  siblings() - 확장 엘리먼트의 모든 형제를 포함하는 확장 집합을 반환

find(selector) - 원본의 모든 엘리먼트 중 전달된 셀렉터 표현식과 일치하는 엘리먼트로 구성된 새로운 확장 집합을 반환

예제) wrappedSet.find('p cite')

설명) 변수 wrappedSet에 할당된 확장 집합에서, 문단 <p>에 포함된 모든 인용문 <cite>로 구성된 확장 집합을 반환

is(selector) - 확장 집합에 전달된 셀렉터 표현식과 일치하는 엘리먼트가 있는지 확인. 엘리먼트가 하나 이상 셀렉터와 일치하면 true를, 그렇지 않으면 false를 반환

예제) var hasImage = $('*').is('img');

설명) 현제 페이지에 이미지 엘리먼트가 있으면 hasImage 변수의 값을 true로 설정

end() - jQuery 커맨드 체인에서 사용하며 이전 확장 집합으로 돌아간다.

예제) $('img').clone().appendTo('#somewhere').end().addClass('beenCloned');

설명) 페이지의 모든 <img> 엘리먼트로 구성된 원본 확장 집합을 close() 메서드를 통해 복사본 확장 집합을 생성한 뒤, 복사본인 두 번째 확장 집합을 반환한다. 복사본 확장 집합에 appendTo() 커맨드를 수행한 뒤, end() 커맨드를 통해 현재 확장 집합(복사본 확장 집합)에서 앞으로 돌아가서 이전 확장 집합(원본 확장 집합)을 반환하고, 원본 확장 집합에 addClass() 커맨드를 수행한다.

andSelf() - 커맨드 체인에서 이전 확장 집합 두 개를 하나로 합친다



출처: https://crosstheline.tistory.com/41 [이거 알아영???ㅎㅎㅎ]

출처: https://crosstheline.tistory.com/41 [이거 알아영???ㅎㅎㅎ]

'WEB > jQuery' 카테고리의 다른 글

DOMSubtreeModified  (0) 2019.07.11
jQuery for node(elements)  (0) 2019.07.10
jQuery 에서 다룰 수 있는 Element 요소에 대한 고찰  (0) 2019.07.10
jQuery HTML tag change  (0) 2019.07.05
jQuery scroll to element  (0) 2019.05.20
jQuery API 정복 - 자식 요소들 찾기, children()  (0) 2018.05.21
블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

element.style.display; // ''

element.hide();

element.style.display; // 'none'

 

jQuery 에서 다룰 수 있는 요소는 jQuery Object로 정의되고 있는데, 

이에 해당하지 않는 경우에, jQuery function을 사용하여 Method Chaining을 사용하거나, 함수를 연계시킬 경우

 

".css is not a function"

".hasClass is not a function" 등의 에러메세지를 볼 수 있다.

 

Stack Overflow 의 질문 중에 하나를 살펴보면

 

<script type='text/javascript'> var myElements = jQuery("#navbar > ul > li"); var count = myElements.length; for (var i = 0; i < myElements.length; i++) { myElements[i].style.width = (100/count)+'%'; } var myElements_array = []; for(var i = myElements.length; i--; myElements_array.unshift(myElements[i])); var j = 0; while (! myElements_array[j].hasClass('current-menu-parent') ) { j++; } document.write(j); </script>

 

에서 .hasClass is not a function 이 발생했다고 뜨는데, 이 부분에 대해서

 

Problem is the index you are pulling from the array is a DOM node when you use bracket notation and it is not a jQuery object. DOM does not have hasClass.

 

You can either store the jQuery version or change it to jQuery

while (! $(myElements_array[j]).hasClass('current-menu-parent') ) {

or use classList contains

while (! myElements_array[j].classList.contains('current-menu-parent') ) {

or use eq() instead of referencing the DOM

while (! myElements_array.eq(j).hasClass('current-menu-parent') ) {

 

그러니까 말인 즉슨, 끌어온놈이 DOM node 객체라는 소리고 jQuery object 가 아니라서 에러가 났다는 소리다.

그래서 classList.contains 를 쓰라고 했던 것인데,

 

이 때문에 추가적으로 코드 짤때도 굉장히 고생했다.

https://stackoverflow.com/questions/30630800/jquery-hasclass-is-not-a-function

 

jQuery의 .css function 등등도 다 안먹는 상태에서 다시 깨달음을 얻고...

.style.display = "none"; 으로 설정해서 코드를 완성했다.

 

 

 

'WEB > jQuery' 카테고리의 다른 글

DOMSubtreeModified  (0) 2019.07.11
jQuery for node(elements)  (0) 2019.07.10
jQuery 에서 다룰 수 있는 Element 요소에 대한 고찰  (0) 2019.07.10
jQuery HTML tag change  (0) 2019.07.05
jQuery scroll to element  (0) 2019.05.20
jQuery API 정복 - 자식 요소들 찾기, children()  (0) 2018.05.21
블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

예를 들어 h2를 p로 바꾸고 싶다면 다음과 같이 합니다.

 

1

$( 'h2' ).contents().unwrap().wrap( '<p></p>' );

  1. h2 요소를 선택하고
  2. 내용으로 들어간 후
  3. h2 태그를 없애고
  4. p 태그로 감싼다.

새로운 태그를 붙이면서 클래스를 넣을 수도 있습니다.

 

1

$( 'h2' ).contents().unwrap().wrap( '<p class="myclass"></p>' );

'WEB > jQuery' 카테고리의 다른 글

jQuery for node(elements)  (0) 2019.07.10
jQuery 에서 다룰 수 있는 Element 요소에 대한 고찰  (0) 2019.07.10
jQuery HTML tag change  (0) 2019.07.05
jQuery scroll to element  (0) 2019.05.20
jQuery API 정복 - 자식 요소들 찾기, children()  (0) 2018.05.21
특정 div 프린트 하기  (0) 2018.05.11
블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

2076

580

I have this input element:

<input type="text" class="textfield" value="" id="subject" name="subject">

Then I have some other elements, like other text inputs, textareas, etc.

When the user clicks on that input with #subject, the page should scroll to the last element of the page with a nice animation. It should be a scroll to bottom and not to top.

The last item of the page is a submit button with #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

The animation should not be too fast and should be fluid.

I am running the latest jQuery version. I prefer to not install any plugin but to use the default jQuery features to achieve this.

javascript jquery

shareimprove this question

edited Sep 26 '17 at 12:18

Maistrenko Vitalii

9441613

asked Jul 13 '11 at 9:49

DiegoP.

18.6k2881100

add a comment

28 Answers

activeoldestvotes

3739

 

Assuming you have a button with the id button, try this example:

$("#button").click(function() { $([document.documentElement, document.body]).animate({ scrollTop: $("#elementtoScrollToID").offset().top }, 2000); });

I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.

<html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script> $(document).ready(function (){ $("#click").click(function (){ $('html, body').animate({ scrollTop: $("#div1").offset().top }, 2000); }); }); </script> <div id="div1" style="height: 1000px; width 100px"> Test </div> <br/> <div id="div2" style="height: 1000px; width 100px"> Test 2 </div> <button id="click">Click me</button> </html>

 Run code snippet

Expand snippet

shareimprove this answer

edited Jul 8 '18 at 14:48

php_nub_qq

7,350144397

answered Jul 13 '11 at 9:52

Steve

42k42637

  • 21

    This will not work in all cases. See stackoverflow.com/questions/2905867/… – Jānis Elmeris Apr 25 '12 at 14:43

  • 6

    @BarryChapman not exactly. After googling I've found this, so both tags are needed if you don't want to have extra logic per browser type. – s3m3n May 10 '13 at 0:01 

  • 69

    If you don't want animation, and instead want to jump instantly to the element, use .scrollTop(…) instead of .animate({scrollTop: …}, …). – Rory O'Kane Sep 20 '13 at 19:53 

  • 9

    In addition to you're solution (which works great), you can add an on complete function that adds the hashtag to the url. In this case it won't scroll, because the scrollTo already scrolled to the right position, and if a user copies the URL it will automatically snap to the right place on the page. – Sander Jan 23 '14 at 8:09

  • 7

    if you use a callback to run when the animation is complete and notice the callback fires twice with this solution, try using "$('html body').animate(..." instead of "$('html, body').animate(..." the comma created two animate events. one for html, one for body. you really just want one for the html body Thanks @T.J. Crowder stackoverflow.com/questions/8790752/… – BoatCode Mar 20 '15 at 16:17 

show 19 more comments

블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

.children( [ selector ] ) 함수는 필터된 선택자와 일치하는 요소들 각각의 자식 요소들을 가져올 수 있습니다.

원문 링크  http://api.jquery.com/children/

.children( [ selector ] )Returns: jQuery

  • .children( [ selector ] )
  • selector 일치하는 요소들 중에서 추가적으로 선택할 수 있는 선택자 문자열

jQuery 객체는 DOM 요소들의 집합으로 표현됩니다. .children()함수는 DOM 트리에서 자식 요소들을 즉시 찾을 수 있도록 해주고 일치되는 요소들을 새로운 jQuery 객체로 만들어 줍니다. .find()와 .children()함수는 아주 유사하지만 DOM 트리에서 레벨 1의 위치- 첫번째 깊이-만 검색을 하는 부분에서 차이점이 있습니다. 이 부분을 부연설명을 하면, find()함수는 선택요소의 내부 요소들을 모두 검색하고 children()함수는 바라 아래 수준의 요소만 자식요소로 인정한다는 겁니다. 할아버지의 자식은 아버지지 손자가 아니잖아요 ^^;;. 또한 대부분의 jQuery 함수들이 그러하듯이 .children()함수도 text나 주석(comment)들은 반환하지 않습니다. 만약 텍스트 노드나 주석 요소도 반환받고 싶으시면 .contains()함수를 사용하셔야 합니다.

이 함수에는 $() 함수에 인자로 올 수 있는 표현들을 인자로 사용할 수 있습니다. 만약 이 함수에 인자를 사용하게 되면, 그 선택자에 맞게 한번 더 필터 효과를 사용할 수 있게 됩니다.

리스트를 구성하는 마크업을 예로 보시죠.

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

위의 마크업 구조에서 우리는 level-2에서 자식요소를 찾는다고 가정해 보겠습니다. 아래와 같은 스크립트가 필요하겠죠?

$('ul.level-2').children().css('background-color', 'red');

이 스크립트의 결과는 A, B, C 아이템의 배경색을 빨간색으로 변하게 합니다.(find 함수는 level-3에 있는 요소까지 다 가져오겠죠.) children 함수에 인자를 사용하지 않아서 자식 요소들이 모두 선택이 되었지만, 일치하는 아이템을 찾기위해 인자를 사용하면 위의 세 아이템 중 조건에 맞는 요소만 찾게 됩니다.

예 제  
클릭한 요소의 자식 요소들을 찾아서 효과를 줍니다. (빨간 테두리를 입히고 자식 요소의 개수를 아래에 표시해 주네요.)

<!DOCTYPE html>
<html>
<head>
  <style>
  body { font-size:16px; font-weight:bolder; }
  div { width:130px; height:82px; margin:10px; float:left;
        border:1px solid blue; padding:4px; }
  #container { width:auto; height:105px; margin:0; float:none;
        border:none; }
  .hilite { border-color:red; }
  #results { display:block; color:red; }
  p { margin:10px; border:1px solid transparent; }
  span { color:blue; border:1px solid transparent; }
  input { width:100px; }
  em { border:1px solid transparent; }
  a { border:1px solid transparent; }
  b { border:1px solid transparent; }
  button { border:1px solid transparent; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <div id="container">

    <div>
      <p>This <span>is the <em>way</em> we</span> 
      write <em>the</em> demo,</p>

    </div>
    <div>
      <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write 
      the</button> demo,
    </div>

    <div>
      This <span>the way we <em>write</em> the <em>demo</em> so</span>

      <input type="text" value="early" /> in
    </div>
    <p>
      <span>t</span>he <span>m</span>orning.
      <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>

    </p>
  </div>
<script>

    $("#container").click(function (e) {
      $("*").removeClass("hilite");
      var $kids = $(e.target).children();
      var len = $kids.addClass("hilite").length;

      $("#results span:first").text(len);
      $("#results span:last").text(e.target.tagName);

      e.preventDefault();
      return false;
    });
</script>

</body>
</html>

미리보기

각 박스 영역을 클릭하시면 자식 요소들에 빨간 테두리가 그려져요. 함 해보세요. 그나저나 스크립트가 무지 복잡해 보이네요. 제가 보기엔 $kids 로 변수를 사용하는게 제일 핵심처럼 보여요. 바로 jQuery 객체 변수인가 보네요. 사실 jQuery 객체를 어떻게 받아야 하나 그동안 고민해었는데요. ^^ 해결됬네요. 그 외는 뭐 복잡하기만 하지 별 다른건 없어보입니다.

 

예 제  
div 요소의 자식 요소들에 빨간 2줄짜리 밑줄을 그려줍니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  body { font-size:16px; font-weight:bolder; }
  span { color:blue; }
  p { margin:5px 0; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <p>Hello (this is a paragraph)</p>

  <div><span>Hello Again (this span is a child of the a div)</span></div>
  <p>And <span>Again</span> (in another paragraph)</p>

  <div>And One Last <span>Time</span> (most text directly in a div)</div>
<script>$("div").children().css("border-bottom", "3px double red");</script>

</body>
</html>

미리보기

설명 그대롭니다.

 

예 제  
함수에 인자를 세팅하여 선택하고 있습니다.

<!DOCTYPE html>
<html>
<head>
  <style>

  body { font-size:16px; font-weight:bolder; }
  p { margin:5px 0; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <div>
    <span>Hello</span>
    <p class="selected">Hello Again</p>
    <div class="selected">And Again</div>

    <p>And One Last Time</p>
  </div>
<script>$("div").children(".selected").css("color", "blue");</script>

</body>
</html>

미리보기

children 함수에 selected 라는 클래스명을 가진 자식 요소를 선택하도록 인자를 집어 넣었네요. 직관적입니다.

 

자식 요소를 찾는 선택자 기억나시나요? 사실 저도 안납니다. ㅎㅎ;; 함 찾아보시구요. 이번같이 함수가 편하실지 선택자가 편하실지;;; 개인의 취향대로 사용하셔요~. 전 함수가 ㅎㅎㅎ

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.



출처: http://findfun.tistory.com/181 [즐거움을 찾자 Find Fun!!]

출처: http://findfun.tistory.com/181 [즐거움을 찾자 Find Fun!!]

출처: http://findfun.tistory.com/181 [즐거움을 찾자 Find Fun!!]

출처: http://findfun.tistory.com/181 [즐거움을 찾자 Find Fun!!]

출처: http://findfun.tistory.com/181 [즐거움을 찾자 Find Fun!!]

블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요


function content_print(){
     
                var initBody = document.body.innerHTML;
                window.onbeforeprint = function(){
                    document.body.innerHTML = document.getElementById('선택될 div id').innerHTML;
                }
                window.onafterprint = function(){
                    document.body.innerHTML = initBody;
                }
                window.print();    
            }           
         
 
===============================================================================================
 
<div id="content">
    내용 content_1
</div>
 
<div id="content_2">
   내용 content_2
</div>
<input type="button" value="print" onclick="javascript:content_print();">
================================================================================================
 
선택될 div id  이부분에 div id 를 삽입하면 된다.
print 버튼을 누르면 지정된 div 안의 내용이 프린트 된다.



출처: http://mkwilson.tistory.com/64 [wilson's story]

출처: http://mkwilson.tistory.com/64 [wilson's story]

출처: http://mkwilson.tistory.com/64 [wilson's story]

출처: http://mkwilson.tistory.com/64 [wilson's story]

블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요


I am trying to return a json encoded string from PHP script.

$.post("order.php", { product: product_id, coupon: coupon },
function(data) {
    $("#price").html("$" + data.price);
    $("#discount").html("$" + data.discount);
    $("#total").html("$" + data.total);
});

I tried to use alert function in callback to see returning value from PHP:

{"price":249,"discount":"0.00","total":249}

but value of #price and rest elements is "$undefined".

Please help.

It seems you just have to parse the JSON data into an object using parseJSON() :

$.post("order.php", { product: product_id, coupon: coupon },
function(data) {
    data = $.parseJSON( data );
    $("#price").html("$" + data.price);
    $("#discount").html("$" + data.discount);
    $("#total").html("$" + data.total);
});


블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요