Language/JQuery
제이쿼리(jQuery) - 속성
Jessi :D
2021. 3. 23. 02:06
속성
| .addClass() | 지정한 요소에 class 값을 추가 $("p").addClass("name"); ▶ class = "name" 추가 |
| .hasClass() | 지정한 요소에 class 유무를 확인 if($("p").hasClass("name")==true) ▶ class 가 "name"인지 확인 true/false |
| .removeClass() | 지정한 요소에 class 값을 제거 $("p").removeClass("name"); ▶ class = "name"을 제거 |
| .attr() | (1) 지정한 요소의 속성값을 입력 또는 변경 $("a").attr("href","http://www.google.co.kr"); ▶ a 요소의 href 값을 변경 $("#content").attr({id:'content01', class:'style1'}); ▶ id content 요소의 id와 class 값을 변경 |
| (1) 지정한 요소의 속성값을 가져옴 $("a").attr("href"); ▶ a 요소의 href의 값을 가져옴 |
|
| .removeAttr() | 지정한 요소의 속성값을 제거 $("a").removeAttr("href"); ▶ a 요소의 "href" 속성값을 제거 |
| .prop() | .attr()과 동일하나, boolean 값을 사용하는 속성에 사용 - checked, selected, disabled |
| .removeProp() | boolean 값을 사용하는 속성에 사용 - checked, selected, disabled |
레이아웃
| .css() | (1) 지정한 요소의 css 값을 삽입 또는 변경 $("div").css("color", 'red'); ▶ div 요소의 글자색을 red로 설정 $("div").css({color:'red', border:'1px solid blue'}); ▶ 동시에 여러개의 값을 설정할 수 있음 |
| (2) 지정한 요소의 속성값을 가져옴 $("div").css("backgroundColor"); ▶ div 요소의 backgroud-Color 값을 가져옴 ※ 참고 - css의 속성명과 jQuery에서 쓰는 속성명은 형식이 조금 다르다. css : background-color , jQuery : backgroundColor css : padding-left, jQuery : paddingLeft |
|
| .width() | 선택한 요소의 현재의 계산된 넓이를 얻거나 넓이 값을 설정 - 숫자로 반환, - .css('width')는 숫자뒤에 px가 붙어 반환 30px - 30, 30px, 30%, auto $("div").width(); ▶ div 의 현재 넓이 값 |
| .innerWidth() | 선택한 요소의 padding을 포함한 넓이를 반환 - border 제외 $("div").innerWidth(); ▶ div 의 padding을 포함한 현재 넓이 |
| .outerWidth() | 선택한 요소의 padding 과 border를 포함한 넓이를 반환 - 인자값 true 면 margin 포함 $("div").outerWidth(); ▶ div 의 padding과 border 포함한 현재 넓이 $("div").outerWidth(true); ▶ div 의 padding과 border, margin 포함한 현재 넓이 |
| .height() | 선택한 요소의 현재의 계산된 높이를 얻거나 높이 값을 설정 - 숫자로 반환 - .css('height')는 숫자뒤에 px가 붙어 반환 30px - 30, 30px, 30%, auto $("div").height(); ▶ div 의 현재 높이 값 |
| .innerHeight() | 선택한 요소의 padding을 포함한 높이를 반환 - border 제외 $("div").innerHeight(); ▶ div 의 padding을 포함한 현재 높이 |
| .outerHeight() | 선택한 요소의 padding과 border를 포함한 높이를 반환 - 인자값 true면 margin 포함 $("div").outerHeight(); ▶ div 의 padding과 border를 포함한 현재 높이 $("div").outerHeight(true); ▶ div 의 padding과 border, margin을 포함한 현재 높이 |
데이터
| .data() | (1) 지정한 요소에 값을 삽입 또는 변경 $("div").data("foo", '52'); ▶ div 요소에 "foo" 라는 key로 52를 삽입 $("div").data("bar", {color:'red', border:'1px solid blue'}); ▶ "bar" 라는 key로 배열 삽입 $("div").data({baz : [1,2,3]}); ▶ baz 배열 삽입 |
| (2) 지정한 요소의 값을 가져옴 $("div").data("foo"); ▶ div 요소에 "foo"라는 key로 저장된 값을 가져옴 $("div").data(); ▶ div 요소에 전체 값을 가져옴 {foo:52, bar:{color....}, baz:[1,2,3,4]} |
|
| $.data() <jQuery.data()> | 첫번째 인자의 요소에 두번째 인자를 키로 세번째 값을 저장 - data()와 동일 $.data(document.body, "foo",'52'); ▶ 페이지 body 요소에 foo를 키로 52 삽입 |
| .removeData() | 지정한 요소에 데이터를 제거 $("div").data("foo"); ▶ div 요소에 "foo" 라는 key의 데이터를 제거 |
| $.removeData() <jQuery.removeData()> | 지정한 요소에 데이터를 제거 $.data($("div"), "foo"); ▶ div 요소에 "foo" 라는 key의 데이터를 제거 |
| $.hasData() <jQuery.hasData()> | $.data()에 의해 저장된 임의의 값들이 있는지 확인 - true / false if(.$.hasData(document.body)==true) ▶ document.body에 data가 있으면 true |
반응형