본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

 (158)
[jQuery] data data 요소의 데이터 값을 알아내고 변경하는 메서드입니다. data 메서드 설명 .data() 선택한 요소의 데이터를 설정하거나 반환합니다. .removeData() 선택한 요소의 데이터를 삭제합니다.
[jQuery] .scrollTop() .scrollTop() 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다. .scrollTop() 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다. 문법(Syntax) $("선택자").scrollTop(); $("선택자").scrollTop("속성값"); 정의(Definition) .scrollTop() 메서드는 선택한 요소에 세로 스크롤 값을 가져옵니다. .scrollTop("속성값") 메서드는 선택한 요소에 세로 스크롤 값을 변경합니다. Sample1 .scrollTop() : Div 박스의 스크롤 값과 브라우저의 스크롤 값을 구하는 예제입니다. Sample1 속성(ATTRIBUTES) square "square" scrollLeft() = 0 "square" scrollTop() = 0 "..
[jQuery] .scrollLeft() .scrollLeft() 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다. .scrollLeft() 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다. 문법(Syntax) $("선택자").scrollLeft(); $("선택자").scrollLeft("속성값"); 정의(Definition) .scrollLeft() 메서드는 선택한 요소에 가로 스크롤 값을 가져옵니다. .scrollLeft("속성값") 메서드는 선택한 요소에 가로 스크롤 값을 변경합니다. Sample1 .scrollLeft() : Div 박스의 스크롤 값과 브라우저의 스크롤 값을 구하는 예제입니다. Sample1 속성(ATTRIBUTES) square "square" scrollLeft() = 0 "square" scrollTop(..
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; //..
[jQuery] offset offset 요소의 위치 값을 알아내는 메서드입니다. offset 메서드 설명 .offset() 선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다. .offsetParent() 선택한 요소의 부모 위치 좌표 값(문서 기준)을 설정하거나 반환합니다. .position() 선택한 요소의 위치 좌표 값(기준점 기준)을 설정하거나 반환합니다. .scrollLeft() 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다. .scrollTop() 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.
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) : 세로 값을 구할 요소 ..
[jQuery] Dimensions Dimensions 위치와 크기를 읽고 설정하는 메서드입니다. Dimensions 메서드 설명 .height() 선택한 요소의 높이(패딩/마진/보더 불포함)를 설정하거나 반환합니다. .innerHeight() 선택한 요소의 높이(패딩 포함, 보더/마진 불포함)를 설정하거나 반환합니다. .innerWidth() 선택한 요소의 가로(패딩 포함, 보더/마진 불포함)를 설정하거나 반환합니다. .outerHeight() 선택한 요소의 높이(패딩/보더 포함, 마진 불포함)를 설정하거나 반환합니다. .outerWidth() 선택한 요소의 가로(패딩/보더 포함, 마진 불포함)를 설정하거나 반환합니다. .width() 선택한 요소의 가로(패딩/마진/보더 불포함)를 설정하거나 반환합니다.
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) : ..
[jQuery] CSS CSS CSS의 속성과 관련된 기능을 설정합니다. CSS Style 메서드 설명 .addClass() 선택한 요소에 클래스를 추가합니다. .css() 선택한 요소에 CSS 속성 값을 설정하거나 변경합니다. .hasClass() 선택한 요소에 클래스가 있는지를 찾습니다. .removeClass() 선택한 요소에 클래스를 삭제합니다. .toggleClass() 선택한 요소에 클래스의 추가/제거를 연속하여 사용 할 수 있습니다.
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"..
[jQuery] Attributes Attributes 속성은 요소의 속성과 관련된 기능을 처리합니다. 속성(Attributes) 메서드 설명 .attr() 선택한 HTML 요소의 속성 값을 설정하거나 반환합니다. .prop() 선택한 JavaScript 요소의 속성 값을 설정하거나 반환합니다. .removeAttr() 선택한 HTML 요소에서 하나 이상의 속성을 제거합니다. .removeProp() 선택한 JavaScript 요소에서 하나 이상의 속성을 제거합니다. .val() 선택한 폼 요소의 속성 값을 설정하거나 반환합니다.
[jQuery] 튜토리얼 제이쿼리 튜토리얼 제이쿼리 튜토리얼입니다. 제이쿼리 구분 강의 섹션 페이지 유튜브 제이쿼리 자바스크립트 제이쿼리 기본 제이쿼리 기본 선택자 기본 선택자 계층 선택자 속성 선택자 기본 필터 선택자 내용 필터 선택자 보임 필터 선택자 자식 요소 필터 선택자 폼 요소 필터 선택자 탐색 트리구조 .children() .closest() .find() .next() .nextAll() .nextUntil() .parent() .parents() .parents() .prev() .prevAll() .prevUntil() .siblings() 필터링 .eq() .filter() .first() .has() .is() .last() .map() .not() .slice() 기타 .add() .addBack() .co..
[jQuery] .end() .end() 선택한 요소가 선택되기 이전의 요소를 선택합니다. .end() .end() 메서드는 현재 선택된 요소의 이전 요소를 선택하는 메서드입니다. 문법(Syntax) $("선택자").end(); 정의(Definition) .end() 메서드는 재 선택된 요소의 이전 요소를 선택하는 메서드입니다. 예제를 확인하면 end() 메서드를 이용하면 스크립트를 좀 더 효율적으로 작성할 수 있습니다. Sample1 .end() : .end() 메서드를 사용하면 예제처럼 한 줄로 작업이 가능합니다. 결과 탐색(Traversing) .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다. .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다. .first() 메서드는 선..
[jQuery] .each() .each() 선택한 여러 요소들을 순차적으로 실행합니다. .each() .each() 메서드는 선택한 요소에 각각 함수를 실행합니다. 문법(Syntax) $("선택자").each("함수"); $("선택자").each("함수(index)"); $("선택자").each("함수(index,element)"); 정의(Definition) .each() 메서드는 함수를 이용하여 각각의 요소에게 효과를 줍니다. .each() 메서드는 함수의 index를 이용하여 순서를 정할 수 있습니다. .each() 메서드는 함수의 index와 element를 이용하여 원하는 요소에 효과를 줍니다. Sample1 .each(function) : 각각의 li 태그한테 class 효과를 주는 예제입니다. 결과 탐색(Traversi..
[jQuery] .contents() .contents() 선택한 요소와 일치하는 콘텐츠 요소를 선택합니다. .contents() .addBack() 메서드는 현재 선택된 요소의 이전 요소를 한번 더 찾아주는 필터링 역할의 메서드입니다. 문법(Syntax) $("선택자").contents(); 정의(Definition) .contents() 메서드는 현재 선택한 요소와 이전 요소에게 동시에 효과를 나타내는 메서드입니다. Sample1 .contents(selector) : span 태그와 그 이전 요소 li에게 효과를 주는 예제입니다. Sample1 탐색(Traversing) .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다. .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다. .firs..
1 2 3 4 5 6
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바