IT스러운 공간

1. Get Content - text(), html(), val() : DOM 조작을 위한 간편하고 효율적인 메서드 : text() - 선택된 요소의 텍스트를 설정하거나 반환, 텍스트 문자열만 가져온다. 예)티스토리 글쓰기 : html() - 선택된 요소의 내용을 설정하거나 반환, html 태그까지 가져온다. 예)티스토리 글쓰기 : val() - form 필드의 값을 설정하거나 반환, form 태그에 value에 지정한 값을 가져온다. 2. Get Attribute - attr() : 속성 값을 가져오는데 사용. 3. Set Content - text(), html(), val() : $("#String").text("문자열") - 선택된 요소의 텍스트를 설정한다. 예) 안녕하세요. : $("#jQeu..

1. .offset() : 선택된 요소의 문서에 대한 상대적인 오프셋 좌표를 반환함 : 오프셋을 반환하는 데 사용되는 경우 - 첫번째 일치하는 요소의 오프셋 좌표(top, left의 속성값)를 반환. : 오프셋을 설정하는데 사용되는 경우 - 모든 일치하는 요소의 오프셋 좌표를 설정 : 문법 1) offset 좌표 리턴 - $(selector).offset() 2) offset 좌표 설정 - $(selector).offset({top: value, left: value}) 3) Function을 사용하여 offset 좌표를 설정할 때 - $(selector).offset(function(index, currentoffset)) : 예) $("button").click(function(){ // offset..

1. .width()와 .height() : .width() - 요소의 폭(padding, border, margin 포함하지 않음)을 설정하거나 반환 : .height() - 요소의 높이(padding, border, margin 포함하지 않음)를 설정하거나 반환 : 예) $("button").click(function() { var txt = ""; txt += "Width : " + $("div1").width() + ""; txt += "Height : " + $("div1").height() + ""; $("#div1").html(txt); }); 2. .innerWidth()와 .innerheight() : .innerWidth() - 요소의 padding을 포함한 너비를 반환 : .inner..

1. .addClass() : 선택된 element에 하나 이상의 클래스 이름을 추가한다. 기존의 클래스 속성을 제거하지 않음. 하나 이상의 클래스 이름을 추가한다. 공백으로 클래스 이름을 구분한다ㅏ. : 문법 - $(selector).addClass(classname, function(index, oldclass)) : 예) $("button").click(function() { $("p:first").addClass("intro"); } 2. .css() : 선택된 elements의 스타일 속성을 설정하거나 반환함. : 속성을 반환할 때 사용한 경우 - 첫번 째 일치하는 요소의 지정된 css 속성 값을 반환. "background"와 "border" 같은 속성은 완벽하게 지원하지 않는 다른 브라우저에..

1. .attr() : attr(attributeName)- 매치되는 집합의 첫번째 요소에서 매개변수로 전달받은 속성의 이름에서 속성의 값을 가져오기 : attr(attributeName, value) - 매치되는 집합의 모든 요소에 속성의 이름에 속성 값을 설정하기 : 예) $("button").click(function(){ $("img").attr("width", "500"); }); : 문법 1) attribute의 값을 return : $(selector).attr(attribute) 2) attribute의 값을 설정 : $(selector).attr(attribute, value) 3) function을 사용하여 값을 설정 : $(selector).attr(attribute, function..

1. :input : form element를 선택하고 button element도 선택한다. : 문법 - $(":input") : 예) $(":input") 2. :text : 인 속성의 태그를 선택한다., 문자열 및 숫자를 입력할 때 사용하는 태그 : 문법 - $(":text") : 예) $(":text") 3. :password : 인 속성의 태그를 선택한다. 패스워드 입력할 때 사용하는 태그 : 문법 - $(":password") : 예) $(":password") 4. :radio : 인 속성의 태그를 선택한다. 여러개 중에 하나만 선택할 때 사용하는 태그 : 문법 - $(":radio") : 예) $(":radio") : wrap() - css 대신 사용하는 것. firefox에서는 css 속..

1. :first-child : 모든 부모 element의 첫번째 child element를 선택한다. : 문법 - $(":first-child") : 예) $("p:first-child") - 태그의 첫번째 자식이라는 뜻이 아님. 부모의 자식 중에서 태그가 첫번째인 것을 지정 : 부모의 첫번째 자식부모의 두번째 자식 - 이때 $("p:first-child")를 입력하면 태그의 가 부모의 두번째 자식이므로 선택되지 않는다. 2. :last-child : 모든 부모 element의 마지막번째 child element를 선택한다. : 문법 - $(":last-child") : 예) $("div:last-child") - 태그의 첫번째 자식이라는 뜻이 아님. 부모의 자식 중에서 태그가 첫번째인 것을 지정 : ..

1. :contains(string) : 특정 문자열을 포함하고 있는 요소를 선택한다. : string은 곧바로 문자열을 포함할 수도 있고, child element안에 포함할 수 도 있다. : 그룹 안에서 특정 텍스트를 포함하는 요소를 선택하고자 하는 다른 요소들과 흔히 같이 사용됨 : String은 대소문자 구별함 : 문법 - $(":contains(text)") : 예) $("p:contains(is)") 2. :empty() : empty element를 선택한다. : child elements 또는 text가 없는 element를 의미한다. : 문법 - $(":empty") : 예) $(":empty") : 스페이스 공백이 있을 경우에는 text가 있는 경우로 의미한다. 3. :has() : 지..

1. :animated : 현재 애니메이션의 모든 요소를 선택한다. : 문법 - $(":animated") : 예) $(":animated"), $("p:eq(1)"),animate({width:"100%"}, "slow") 2. : eq() : 특정 인덱스 번호를 가진 요소를 선택한다. 인덱스 번호는 0부터 시작, 대부분 그룹의 특정 인덱스 요소를 선택하기 위해 다른 selector와 함께 사용됨 : 문법 - $(":eq(index)") : 예제) $("p:eq(1)") 3. :even : 짝수 인덱스 번호를 선택한다. 다른 선택자와 함께 사용되어 짝수 인덱스 번호를 선택하는 역할을 한다. : 문법 - $(":even") : 예제) $("tr:even") 4. :odd : 홀수 인덱스 번호를 선택한다...

1. [attribute] : 각 selector의 특정 속성을 선택한다. 모든 속성을 선택한다. : 문법 - $("[attribute]") : 예) $("[href]"), $("[src]"), $("[size]") 2. [attribute=value] : 특정 속성과 값을 가진(일치하는) 각 element를 선택한다. : 문법 - $("[attribute='value']") : 예) $("[id=id이름]") 3. [attribute!=value] : 특정 속성과 값을 가지지 않는 selector를 선택한다. : 즉, 선택된 값과 다른 값을 가지고 있는 selector가 선택이 된다. : 문법 - $("[attribute!='value']") : 예) $("p[class!='abc']") 4. [att..