본문 바로가기

Webstoryboy

Category

Explanation

JQUERY/Alphabet

(19)
position() position() position() 메서드는 선택한 요소의 위치 좌표 값(기준점 기준)을 설정하거나 반환합니다. position() position() 메서드는 선택한 요소의 위치 좌표 값(기준점 기준)을 설정하거나 반환합니다. 특징 설명 버전(version) 1.x 결과값(return) 문자열(string) 사용성 ★★☆☆☆ 문법(Syntax) $("선택자").position(); $("선택자").position().left; $("선택자").position().top; //속성 값을 가져오는 경우 $("div").position(); //속성 값을 가져오는 경우 $("div").position().top; //속성 값을 가져오는 경우 $("div").position().left; 선택자(selec..
offsetParent() offsetParent() offsetParent() 메서드는 선택한 요소의 부모 요소를 선택합니다. offsetParent() offsetParent() 메서드는 선택한 요소의 부모 요소를 선택합니다. 특징 설명 버전(version) 1.x 결과값(return) 문자열(string) 사용성 ★☆☆☆☆ 문법(Syntax) $("선택자").offsetParent(); //부모 요소를 선택하는 경우 $("div").offsetParent(); 선택자(selector) : 선택자를 설정합니다. 정의(Definition) offsetParent() 메서드는 선택한 요소의 부모 요소를 선택합니다. 호환성(Compatibility) 6 7 8 9 10 11 offsetParent() jQeury 1.x 버전 ○ ○..
offset() offset() offset() 메서드는 선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다. offset() offset() 메서드는 선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다. 특징 설명 버전(version) 1.x 결과값(return) 문자열(string) 사용성 ★★★★★ 문법(Syntax) $("선택자").offset(); $("선택자").offset().top; $("선택자").offset().left; $("선택자").offset({ top: "속성값", left: "속성값" }); $("선택자").offset("함수"); //속성 값을 가져오는 경우 $("div").offset(); //속성 값을 가져오는 경우 $("div").offset().top; //..
width() width() width() 메서드는 선택한 요소의 가로 값을 가져오거나 설정합니다. width() width() 메서드는 선택한 요소의 가로 값을 가져오거나 설정합니다. 특징 설명 버전(version) 1.x 결과값(return) 숫자(number) 사용성 ★★★★★ 문법(Syntax) "선택자".width() "선택자".width(속성값) "선택자".width(함수) //가로 값을 가져오는 경우 $("div").width(); //가로 속성 값을 변경하는 경우 $("div").width("100"); //콜백 함수를 사용하는 경우 $("div").width(function(){}); 선택자(selector) : 가로 값을 구할 요소 선택자를 설정합니다. 속성값(value) : 변경할 속성 값을 설정합..
outerWidth() outerWidth() outerWidth() 메서드는 선택한 요소의 가로 값(패딩/보더 포함)을 가져오거나 설정합니다. outerWidth() outerWidth() 메서드는 선택한 요소의 가로 값(패딩/보더 포함)을 가져오거나 설정합니다. 특징 설명 버전(version) 1.x 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) "선택자".outerWidth() "선택자".outerWidth(true) "선택자".outerWidth(속성값) "선택자".outerWidth(함수) //가로 값을 가져오는 경우 $("div").outerWidth(); //가로 값(마진 포함)을 가져오는 경우 $("div").outerWidth(true); //가로 속성 값을 변경하는 경우 $("..
outerHeight() outerHeight() innerHeight() 메서드는 선택한 요소의 세로 값(패딩 포함)을 가져오거나 설정합니다. outerHeight() innerHeight() 메서드는 선택한 요소의 세로 값(패딩 포함)을 가져오거나 설정합니다. 특징 설명 버전(version) 1.x 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) "선택자".outerHeight() "선택자".outerHeight(true) "선택자".outerHeight(속성값) "선택자".outerHeight(함수) //세로 값을 가져오는 경우 $("div").outerHeight(); //세로 속성 값(마진값 포함)을 가져오는 경우 $("div").outerHeight(true); //세로 속성 값을 변경하..
innerWidth() innerWidth() innerWidth() 메서드는 선택한 요소의 가로 값(패딩 포함)을 가져오거나 설정합니다. innerWidth() innerWidth() 메서드는 선택한 요소의 가로 값(패딩 포함)을 가져오거나 설정합니다. 특징 설명 버전(version) 1.x 결과값(return) 숫자(number) 사용성 ★★★★☆ 문법(Syntax) "선택자".innerWidth() "선택자".innerWidth(속성값) "선택자".innerWidth(함수) //가로 값을 가져오는 경우 $("div").innerWidth(); //가로 속성 값을 변경하는 경우 $("div").innerWidth("100"); //콜백 함수를 사용하는 경우 $("div").innerWidth(function(){}); 선택..
innerHeight() innerHeight() innerHeight() 메서드는 선택한 요소의 세로 값(패딩 포함)을 가져오거나 설정합니다. innerHeight() innerHeight() 메서드는 선택한 요소의 세로 값(패딩 포함)을 가져오거나 설정합니다. 특징 설명 버전(version) 1.x 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) "선택자".innerHeight() "선택자".innerHeight(속성값) "선택자".innerHeight(함수) //세로 값을 가져오는 경우 $("div").innerHeight(); //세로 속성 값을 변경하는 경우 $("div").innerHeight("100"); //콜백 함수를 사용하는 경우 $("div").innerHeight(functio..
height() height() height() 메서드는 선택한 요소의 세로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다. height() height() 메서드는 선택한 요소의 세로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다. 특징 설명 버전(version) 1.x 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) "선택자".height() "선택자".height(속성값) "선택자".height(함수) //세로 값을 가져오는 경우 $("div").height(); //세로 속성 값을 변경하는 경우 $("div").height("100"); //콜백 함수를 사용하는 경우 $("div").height(function(){}); 선택자(selector) : 세로 값을 구할 요소 ..
toggleClass() toggleClass() toggleClass() 메서드는 선택한 요소한테 클래스를 추기/삭제합니다. addClass() 메서드와 removeClass() 메서드를 결합한 형태라고 보시면 됩니다. 한번 클릭하면 추가, 한번 클릭하면 삭제되는 형태입니다. toggleClass() toggleClass() 메서드는 선택한 요소한테 클래스를 추기/삭제합니다. 특징 설명 버전(version) 1.x 결과값(return) 불린(true or false) 사용성 ★★★★★ 문법(Syntax) "선택자".toggleClass(클래스 이름) "선택자".toggleClass(함수) //클래스 여부를 확인하는 경우 $("div").toggleClass("className"); //함수를 사용하는 경우 $("div").to..
removeClass() removeClass() removeClass() 메서드는 선택한 요소한테 클래스 이름을 삭제합니다. removeClass() removeClass() 메서드는 선택한 요소한테 클래스 이름을 삭제합니다. 특징 설명 버전(version) 1.x 결과값(return) 클래스 삭제 사용성 ★★★★★ 문법(Syntax) "선택자".removeClass(클래스 이름) "선택자".removeClass(함수) //클래스 이름을 삭제하는 경우 $("div").removeClass("className"); //함수를 사용하는 경우 $("div").removeClass(function(){}); 선택자(selector) : 클래스 이름을 삭제할 선택자를 설정합니다. 클래스 이름(class name) : 삭제할 클래스 이름..
hasClass() hasClass() hasClass() 메서드는 선택한 요소한테 클래스가 있는지 확인하고 불린을 반환합니다. hasClass() hasClass() 메서드는 선택한 요소한테 클래스가 있는지 확인하고 불린을 반환합니다. 특징 설명 버전(version) 1.x 결과값(return) 불린(true or false) 사용성 ★★★★★ 문법(Syntax) "선택자".hasClass(클래스 이름) //클래스 여부를 확인하는 경우 $("div").hasClass("className"); 선택자(selector) : 클래스 이름을 추가할 선택자를 설정합니다. 클래스 이름(class name) : 추가할 클래스 이름을 설정합니다. 정의(Definition) hasClass() 메서드는 선택한 요소한테 클래스가 있는지 확..
css() css() css() 메서드는 선택한 요소에 CSS 속성 값을 설정합니다. css() css() 메서드는 선택한 요소에 CSS 속성 값을 설정합니다. 특징 설명 버전(version) 1.x 결과값(return) 문자열(string) 사용성 ★★★★★ 문법(Syntax) "선택자".css("속성 이름") "선택자".css("속성 이름", "속성 값") "선택자".css({"속성 이름":"속성 값", "속성 이름":"속성 값", .... }); "선택자".css("속성 이름", "함수") //속성 값을 가져오는 경우 $("div").css("background-color"); //속성 값을 변경하는 경우 $("div").css("background-color", "red"); //여러 개의 속성 값을 변경하..
addClass() addClass() addClass() 메서드는 선택한 요소한테 클래스 이름을 추가합니다. addClass() addClass() 메서드는 선택한 요소한테 클래스 이름을 추가합니다. 특징 설명 버전(version) 1.x 결과값(return) 클래스 추가 사용성 ★★★★★ 문법(Syntax) "선택자".addClass(클래스 이름) "선택자".addClass(함수) //클래스 이름을 추가하는 경우 $("div").addClass("className"); //함수를 사용하는 경우 $("div").addClass(function(){}); 선택자(selector) : 클래스 이름을 추가할 선택자를 설정합니다. 클래스 이름(class name) : 추가할 클래스 이름을 설정합니다. 함수(function) : ..
val() val() val() 메서드는 요소의 속성 값을 가져오거나 변경합니다. val() val() 메서드는 요소의 속성 값을 가져오거나 변경합니다. 특징 설명 버전(version) 1.x 결과값(return) 문자열(string) or 숫자(number) or 배열(array) 사용성 ★★★★☆ 문법(Syntax) "선택자".val() "선택자".val("속성") "선택자".val("함수") //select 메뉴의 속성 값을 가져오는 경우 $("select option:checked").val(); //input의 속성 값을 가져오는 경우 $("input[type=checkbox]:checked").val(); //콜백함수를 사용하는 경우 $("input[type=checkbox]").val(function(..
removeProp() removeProp() removeProp() 메서드는 요소의 속성 값을 삭제합니다. removeProp() removeProp() 메서드는 요소의 속성 값을 삭제합니다. 특징 설명 버전(version) 1.x 결과값(return) 속성 삭제 사용성 ★★★☆☆ 문법(Syntax) "선택자".removeProp("속성 이름") //속성 이름을 삭제하는 경우 $("div").removeProp("title"); 선택자(selector) : 클래스 이름을 추가할 선택자를 설정합니다. 속성 이름(properties name) : 속성 이름을 설정합니다. 정의(Definition) removeProp() 메서드는 요소의 속성 값을 삭제합니다. 속성 관련된 메서드(Attribute Related method) at..
removeAttr() removeAttr() removeAttr() 메서드는 요소의 속성 값을 삭제합니다. removeAttr() removeAttr() 메서드는 요소의 속성 값을 삭제합니다. 특징 설명 버전(version) 1.x 결과값(return) 속성 삭제 사용성 ★★★☆☆ 문법(Syntax) "선택자".removeAttr("속성 이름") //속성 이름을 삭제하는 경우 $("div").removeAttr("title"); 선택자(selector) : 클래스 이름을 추가할 선택자를 설정합니다. 속성 이름(attribute name) : 속성 이름을 설정합니다. 정의(Definition) removeAttr() 메서드는 요소의 속성 값을 삭제합니다. 속성 관련된 메서드(Attribute Related method) att..
prop() prop() prop() 메서드는 요소의 속성 값을 가져오거나 변경합니다. prop() prop() 메서드는 요소의 속성 값을 가져오거나 변경합니다. 특징 설명 버전(version) 1.x 결과값(return) 클래스 추가 사용성 ★★★★☆ 문법(Syntax) "선택자".prop("속성 이름") "선택자".prop("속성 이름", "속성 값") "선택자".prop("속성 이름", "함수") //속성 이름을 가져오는 경우 $("div").prop("checked"); //속성 이름의 속성 값을 변경하는 경우 경우 $("div").prop("checked", true); //콜백함수를 사용하는 경우 $("div").prop("checked", function(){}); 선택자(selector) : 클래스 이..
attr() attr() attr() 메서드는 요소의 속성 값을 가져오거나 변경합니다. 여러개의 속성 값을 적용 할 수 있으며, 콜백 함수도 설정이 가능합니다. attr() attr() 메서드는 요소의 속성 값을 가져오거나 변경합니다. 특징 설명 버전(version) 1.x 결과값(return) 속성 추가 사용성 ★★★★☆ 문법(Syntax) "선택자".attr("속성 이름") "선택자".attr("속성 이름", "속성 값") "선택자".attr({"속성 이름":"속성 값", "속성 이름":"속성 값", .... }); "선택자".attr("속성 이름", "함수") //속성 이름을 가져오는 경우 $("div").attr("title"); //속성 이름의 속성 값을 변경하는 경우 $("div").attr("title"..
1