문서 객체 메소드 정의 및 사용방법 정리 - 1

문서 객체 메소드정의부터 살펴보고 가겠습니다!!

1
2
3
4
5
6
7
8
9
10
11
addClass()         //문서 객체의 클래스 속성을 추가
removeClass()   //문서 객체의 클래스 속성 제거
attr()             //속성과 관련된 모든 기능을 수행
removeAttr()    //문서 객체의 속성을 제거
css()            //스타일과 관련된 모든 기능을 수행
html()            //문서 객체 내부의 글자와 관련된 모든 기능을 수행(HTML 태그 인식)
text()            //문서 객체 내부의 글자와 관련된 모든 기능을 수행
remove()        //문서 객체 제거
empty()            //문서 객체 내부를 비움
$()                //문서 객체를 생성
clone()            //문서 객체를 복사
cs

아래는 메소드에 대한 설명 및 예시입니다.

몇가지만 설명하고 마치겠습니다.

addClass()

addClass() 영어 뜻 그대로 클래스를 추가한다로 생각하면 안되고 클래스의 "속성"을 추가한다라고 보시면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//변경전
<body>
  <h1>example-1</h1>
  <h1>example-2</h1>
  <h1>example-3</h1>
</body>
 
//addClass jquery method
<script>
  $(function(){
    $('h1').addClass('item');
  });
</script>
 
//변경후 
<body>
  <h1 class='item'>example-1</h1>
  <h1 class='item'>example-2</h1>
  <h1 class='item'>example-3</h1>
</body>
cs
ㅇ

h1 태그마다 class명이 item으로 생성된 것을 볼 수 있습니다.

또, addClass는 매개변수로 index 값을 가지는데, addClass 매개변수 안에 인덱스를 주면 아래와 같이 클래스마다 인덱스를 부여해줄 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//변경전
<body>
  <h1>example-1</h1>
  <h1>example-2</h1>
  <h1>example-3</h1>
</body>
 
<script>
  $(function(){
    $('h1').addClass(function(index){
      return 'item' + index;
    }));
  });
</script>
 
//변경후 
<body>
  <h1 class='item0'>example-1</h1>
  <h1 class='item1'>example-2</h1>
  <h1 class='item2'>example-3</h1>
</body>
cs

removeClass() 메소드도 똑같이 사용하면 됩니다. (속성 제거)

attr()

attr은 attribute 즉, 속성과 관련된 모든 기능을 수행합니다.

속성을 알아낼수도 있고, 속성을 추가할 수도 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
<body>
  <img src="Desert.jpg" />
</body>
 
<script>
  $(function(){
    var attr = $('img').attr('src'));
    console.log(attr);
 
    //결과 => Desert.jpg
  });
</script>
cs

위 예제는 img태그에 src속성을 꺼내온겁니다. 결과는 Desert.jpg가 나오게 되겠죠.

반대로, 속성에 값을 추가해줄 때는 어떻게하면 될까요?

1
2
3
4
5
6
7
8
9
10
11
12
<body>
  <img src="Desert.jpg" />
</body>
 
<script>
  $(function(){
    var attr = $('img').attr('width', 300));
    console.log(attr);
 
    //결과 => 넓이가 300인 Desert.jpg 
  });
</script>
Colored by Color Scripter
cs

width 속성을 지정하고 300이라는 값을 넣었습니다.

attr메소드는 attr안에 속성만 넣을 시에 속성 값을 가져오고 속성 + 값을 넣었을 경우에 기존에 속성값을 변경, 새로 추가할 수 있습니다.

또한, 여러개의 동일 태그가 있을 시, attr메소드 안에 매개변수에서 인덱스를 이용하여 각각 다른 사이즈의 width를 넣어줄 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
  <img src="Desert1.jpg" />            // index = 0
  <img src="Desert2.jpg" />            // index = 1
  <img src="Desert3.jpg" />            // index = 2
</body>
 
<script>
  $(function(){
    var attr = $('img').attr('width', function(index){
        
        return 100 * index;
    });
  });
</script>
 
//변경 후
<body>
  <img src="Desert1.jpg" width = "0"/>
  <img src="Desert2.jpg" width = "100"/>
  <img src="Desert3.jpg" width = "200"/>
</body>
Colored by Color Scripter
cs

여기서 width값 말고 height 값도 넣어주고 싶습니다!!!

그럼 어떻게 할까요?

JSON 방식을 이용하여 아래와 같이 사용하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
  <img src="Desert1.jpg" />            // index = 0
  <img src="Desert2.jpg" />            // index = 1
  <img src="Desert3.jpg" />            // index = 2
</body>
<script>
  $(function(){
    var attr = $('img').attr(
        {width : function(index){ return 100 * index;}, height : 200; }
        //JSON 방식 사용
);
  });
</script>
//변경 후
<body>
  <img src="Desert1.jpg" width = "0" height = "200"/>
  <img src="Desert2.jpg" width = "100" height = "200"/>
  <img src="Desert3.jpg" width = "200" height = "200"/>
</body>
Colored by Color Scripter
cs

removeAttr() 와 removeClass()의 차이

뭔가 비슷해보이지만 비슷하지않은 이 둘의 차이점은 무엇일까요

둘다 사용하여 클래스 속성을 지울 수 있습니다.

하지만, removeAttr()은 모든 클래스 속성을 한번에 지워버리게 되는 수가 있습니다.

그에 반해, removeClass()는 선택적으로 클래스 속성을 지울 수 있다는 장점이 있습니다.

저작자표시 비영리 변경금지

'개발 관련(오류 및 정리) > JSP, JavaScript, JQuery - 개념정리' 카테고리의 다른 글

[Javascript] submit 후 팝업창 닫기 (0)	2019.05.23
[jQuery] 문서 객체 메소드 정의 및 사용방법 정리 - 2(확인 필수) (1)	2019.05.14
[jQuery] jQuery 식별자 충돌 방지 ( jQuery, Prototype $) - 모던웹을 위한 javascript (4)	2019.05.14
[jQuery & JAVA] jQuery.getJSON() 중복체크 기능 만들기 (0)	2019.04.26
[Javascript] 정규식을 이용한 대소문자 구분없이 문자찾기 - 정규식 공부하기 (0)	2019.04.22