jQuery 검색 결과

해당 글 10건

jQuery 속성 다루기

jQuery 속성 다루기 속성은 일반 속성과 사용자 정의 속성이 있습니다. 많이 사용하는 id, class, 태그의 href 속성, 태그의 src도 일반 속성이라고 할 수 있습니다. 그리고 data-value와 같이 사용자가 필요에 의해서 만들어 사용하는 속성을 사용자 정의 속성이라고 합니다. 1.속성 값 구하기12$대상.attr("속성이름")$대상.data("data-속성이름") 2.속성 값 설정하기12$대상.attr("속성이름","값")$대상.data("data-속성이름","갑") 예제를 위해 아래와 같이 코드를 준비하였습니다.12ktko 1.속성 값 구하기12$대상.attr("속성이름")$대상.data("data-속성이름") 1234console.log( $("#ktkoAtag").attr("hre..
jQuery 2018. 7. 19. 13:20

jQuery 스타일 다루기

jQuery 스타일 다루기jQuery에서 제공하는 스타일을 제공하는 기능 중에서 알아야 할 내용을 정리하자면 아래와 같습니다. 1. 스타일 값 구하기12$(대상).css("스타일 속성 이름")$(대상).css(["스타일 속성 이름", "스타일 속성 이름"]) 2. 스타일 값 설정하기12345$(대상).css("스타일 속성" ,"값")$(대상).css({ 속성이름:값 속성이름:값); 3. 클래스 추가12$대상.addClass("클래스이름");$대상.addClass("클래스이름1 클래스 이름2") 4. 클래스 삭제123$대상.removeClass() //모든 클래스 삭제$대상.removeClass("클래스 이름")$대상.removeClass("클래스이름1 클래스 이름2") 예제를 위해 아래와 같이 코드를 준..
jQuery 2018. 7. 18. 18:05

jQuery 노드의 내용 읽고 변경하기

jQuery 노드의 내용 읽고 변경하기페이지를 개발하다 보면 특정 이벤트 발생시에 DB에서 입력된 값을 HTML로 그려줄 때가 있습니다. 이럴 때 노드를 대량으로 추가 또는 삭제하여 변경해주어야 합니다.여기서 말하는 노드 내용은 노드 내부에 들어있는 마크업 노드와 텍스트 노드 정보를 문자열로 표현하는 것을 의미합니다. html() text() 차이 아래 예제를 가지고 html()과 text()의 차이를 설명하겠습니다.1234567 menu1 menu2 menu3 menu4 menu5 html()과 text()를 콘솔 로그로 찍어보았습니다.12console.log($("ul").html());console.log($("ul").text());cs html() 메서드를 사용하면 특정 노드의 내부 내용을 마크..
jQuery 2018. 7. 18. 13:13

jQuery 노드를 생성/추가/삭제/이동 하기

jQuery 노드를 생성/추가/이동/삭제 하기설명을 위한 예제로 ul과 li태그를 사용하여 HTML 코드를 작성하였습니다.실제 개발할 때는 ul, li태그뿐만아니라 다른 부분에서도 노드를 추가 생성할 수 있겠지만 간단한 설명을 위해 ul, li로 정리하겠습니다.1234567 menu1 menu2 menu3 menu4 menu5 아래는 오늘 포스팅한 메서드의 간략 설명입니다. 분류 내용 jQuery DOM 핵심 프로퍼티 및 메서드 노드 생성 / 추가 노드 생성 $("DOM 문자열"); 첫 번째 자식 노드로 추가 $부모노드.prepend($추가노드) $추가노드.prependTo($부모노드) 마지막 번째 자식 노드로 추가 $부모노드.append($신규노드) $신규노드.appendTo($부모노드) 특정 노드의 ..
jQuery 2018. 7. 17. 16:31

jQuery 선택자 다루기

jQuery 선택자 다루기찾은 노드의 개수 다루기 : length찾은 노드 중 n번째 노드 접근하기 : eq()순차적으로 찾은 노드 접근하기 : each()찾은 노드 중에서 특정 노드만 찾기 : filter()찾은 노드의 자손(자식포함) 노드 중 특정 노드 찾기 : find()인덱스 값 구하기 : index() 찾은 노드의 개수 다루기 : lengthjQuery의 length 프로퍼티를 이용하여 리턴 된 jQuery객체 내부에 들어 있는 노드 개수를 구할 수 있다.예를 들어 div 태그의 개수를 구하려면 $("div").length를 사용하면 된다.1$("div").length 찾은 노드 중 n번째 노드 접근하기 : eq()jQuery의 eq() 메서드를 이용하면 찾은 노드의 n번째에 해당하는 노드에 접..
jQuery 2018. 7. 17. 10:30

jQuery 선택자(자식, 부모, 형제)

jQuery 선택자(자식, 부모, 형제) jQuery의 자식 노드 선택하기 자식 노드란 특정 노드의 바로 아래에 위치하고 있는 노드를 말합니다. 하위 노드의 하위 노드는 자식 노드가 아닌 자손 노드라고 할 수 있습니다. 아래 예제를 보면 아이디 sample 의 자식 노드는 header, content, footer이 됩니다. header, content, footer 안에 자식 들은 sample의 자식이라고 할 수 없으며, 자손 노드라고 할 수 있습니다. 123456789101112131415161718192021222324252627282930313233343536 $(document).ready(function() { }); header 영역 content 영역 ktko1 ktko2 ktko3 ktk..
jQuery 2018. 7. 17. 08:00

jQuery 선택자(ID, CLASS, TAG, 속성)

jQuery 선택자(ID, CLASS, TAG, 속성) 1. 아이디 이름으로 노드 찾기2. 클래스 이름으로 노드 찾기3. 태그 이름으로 노드 찾기4. 속성으로 노드 찾기 노드 찾기 예제를 위해 아래 HTML코드가 있습니다.12345678910111213141516171819202122232425 샘플 페이지(div, id=samplePage, class=page) 헤더 영역(div, id=header) 노드 찾기(div, id=content, class=sample-content) 일반 노드 찾기(ul, class=menu) id로 찾기(li, data-value=1) tag로 찾기(li, class=select) class로 찾기(li, data-value=2) 속성으로 찾기(li, class=test..
jQuery 2018. 7. 16. 13:00

$(document).ready() VS window.onload()

$(document).ready() VS window.onload()ready()함수는 DOMContentLoaded 함수를 포장한 메서드라고 할 수 있습니다. DOMContentLoaded 이벤트는 웹 브라우저가 웹 페이즈를 읽은 후 태그와 1:1 맵핑되는 DOM 객체를 생성한 후 발생합니다. 여기서 주의할 점은 이 이벤트가 발생한 시점에서는 이미지나 플래시 같은 무거운 콘텐츠는 아직 로드되지 않았다는 점입니다.1234567891011121314151617 DOMContentLoaded $(document).ready(function() { console.log("width : " + $("#target").width()); }); 이해를 돕기 위해 예제를 추가 하였는데, 이미지 파일은 직접 구해서 경..
jQuery 2018. 7. 16. 11:30

jQuery ready() 메서드 사용법

jQuery ready() 메서드 사용법 대부분의 프로그래밍 언어에서 진입점인 main 함수가 있듯이, jQuery 역시 main()과 비슷한 진입점이 있는데 ready() 함수 이다. ready() 메서드는 문서의 노드를 사용할 준비가 되면 Document 객체에서 발생하는 DomContentLoaded 이벤트 처리를 포장한 메서드이다. jQuery에서 ready()를 이용해서 진입점을 설정하는 방법은 아래와 같이 4가지 방법이 있다. 1234567891011121314151617181920//방법1jQuery(document).ready(function() { alert("ktko hello");}); //방법2 방법1을 간소화jQuery(function() { alert("ktko hello");}..
jQuery 2018. 7. 15. 22:02

jQuery $()의 의미

jQuery $()의 의미 $()가 의미하는 것은 무엇이라고 물어보면 처음에 jQuery다 라고 대답하합니다. 어떤 의미에서는 맞는 말일 수도 있지만 정확한 의미는 그냥 이름이 $인 함수 그 자체라고 할 수 있습니다. 해석하자면 $()는 $함수를 호출한 것이라고 할 수 있습니다. jQuery 라이브러리 내부를 살펴보면 아래와 같이 작성돼어 있는 것을 알 수 있습니다.1window.jQuery = window.$ = jQuery; 따라서 위의 코드에 따라 아래 두 코드는 동일한 코드입니다.12$('div').css('border', '4px solid #f00');jQuery('div').css('border', '4px solid #f00'); $('div') 의미는 'div'를 매개변수 값으로 $() ..
jQuery 2018. 7. 15. 19:29