티스토리 뷰

Programming/JavaScript, jQuery

[jQuery 5강] 제이쿼리 기본함수 (기본 메서드)

국브 2019. 3. 29. 00:00

 [jQuery 5강] 제이쿼리 기본함수 (기본 메서드)



이번글에서는 제이쿼리 기본함수 (기본 메서드) 에 대해서 알아보겠습니다.

자바스크립트에서 와같이 제이쿼리도 기본함수를 제공합니다.

즉 자주사용하는 함수를 기본함수로 미리 만들어 놓은것이죠.

기본 메서드는 엄청 많이 있습니다.

전체다 확인을하고싶을때는 api 문서를 확인해보면됩니다.

제이쿼리 api 문서 링크입니다.


https://api.jquery.com/


저는 기본함수중에 많이 사용하는 함수만을 설명하도록 하겠습니다.

그럼 글에들어가기전 이전글들을 링크해두겠습니다.



 이전 글 링크 


2019/03/22 - [Programming/JavaScript, jQuery] - [jQuery 1강] 제이쿼리 개요 및 개발환경구축

2019/03/26 - [Programming/JavaScript, jQuery] - [jQuery 2강] 제이쿼리 기본문법

2019/03/27 - [Programming/JavaScript, jQuery] - [jQuery 3강] 선택자

2019/03/28 - [Programming/JavaScript, jQuery] - [jQuery 4강] 제이쿼리 DOM (문서객체)




 each (배열)


자바스크립트의 for 문과 동일한 기능을 갖고 있습니다.

즉 반복문의 기능을 수행합니다.

제이쿼리 반복문인 each 는 2가지의 사용법을 지원합니다.

사용법은 다음과 같습니다.



 사용방법 및 문법 



$.each(object, function(index, item){ }); 


또는


$(selector).each(function(index, item){ })



object : 객체

index : 반복문 횟수

item : 반복문에서 나온 값


 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(function (){
        
        
        
        $("#job > li").each(function(i, item) {
            
            //랜덤 색상 만들어줌
            //자바스크립트 기본함수인 Math, toString 사용
            var colorCode = "#" + Math.round(Math.random() * 0xffffff).toString(16);
            $(item).css("background",colorCode);
            
        })
        
        //아래의 스크립트 소스는 위와 동일한 결과를 얻을수 있습니다.
        /* var liList = $("#job > li");
        $.each(liList,function(i, item) {
            
            //랜덤 색상 만들어줌
            //자바스크립트 기본함수인 Math, toString 사용
            var colorCode = "#" + Math.round(Math.random() * 0xffffff).toString(16);
            $(item).css("background",colorCode);
            
        }) */
        
    })
 
</script>
</head>
<body>
    <ul id="job">
        <li>학생</li>
        <li>회사원</li>
        <li>기타</li>
    </ul>
</body>
</html>
cs


 실행결과 및 설명 



위의 이미지는 실행결과입니다.

(색상은 랜덤이라 다를수 있습니다 ㅎ)


html 영역을살펴보겠습니다.


   <ul id="job">
        <li>학생</li>
        <li>회사원</li>
        <li>기타</li>
    </ul>


ul 태그에 li 요소가 3개가 존제합니다.

그리고 어떠한 스타일도 부여되지 않은것을 확인할수 있습니다.



스크립트 영역을 살펴보겠습니다.


       $("#job > li").each(function(i, item) {
            
            //랜덤 색상 만들어줌
            //자바스크립트 기본함수인 Math, toString 사용
            var colorCode = "#" + Math.round(Math.random() * 0xffffff).toString(16);
            $(item).css("background",colorCode);
            
        })
        
        //아래의 스크립트 소스는 위와 동일한 결과를 얻을수 있습니다.
        /* var liList = $("#job > li");
        $.each(liList,function(i, item) {
            
            //랜덤 색상 만들어줌
            //자바스크립트 기본함수인 Math, toString 사용
            var colorCode = "#" + Math.round(Math.random() * 0xffffff).toString(16);
            $(item).css("background",colorCode);
            
        }) */


$("#job > li").each(function(i, item) {} 

아이디가 job인 요소의 li 태그들을 선택하였습니다.

(총 3 개의 li 태그들이 선택됨)

그리고 each 문을 사용하였습니다. 


반복문 구간에는 


           var colorCode = "#" + Math.round(Math.random() * 0xffffff).toString(16);
            $(item).css("background",colorCode);

colorCode 라는 변수를만들어 주었고..
변수에 랜덤색상표가 담기도록 만들어주었습니다.

그다음 each 문에서 나온 객체(item) 에 css 함수를 사용하여 배경화면을 변경해 주었습니다.

그결과 3개의 li 태그들의 색상이 변경된것을 확인할수 있습니다.

(주석으로 작성된 each 문을 사용해도 동일한 결과를 얻을수 있습니다.)



 html, text, val (내용 읽고/쓰기, 값 추가)


내용을 읽고 쓸수있는 함수로 html, text 가 있으며 값을 추가하기위해서 val 함수가 있습니다.

얼핏보면 똑같은 함수들 아닌가? 하고 많이들 햇갈려 하십니다.

하지만 모두가 다른기능을 지원합니다.


html 함수는 테그들까지 확인이 가능하며.. 내용을 추가할시에 테그를 추가할수있습니다.

text 함수는 오직텍스트만을 확인하며.. 내용또한 오찍 텍스트만을 추가할수있습니다.

(태그 요소를 넣어도 텍스트로 인식합니다)

val 함수는 테그의 값을 추가할수 있습니다

(input, textarea 등의 태그값)


 사용방법 및 문법 


1. 내용/값 확인


html();


text();


val();



2. 내용/값 추가


html("값");


text("값");


val("값");



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(function (){
        
        //내용확인
        console.log($("#box1").html());
        console.log($("#box2").text());
        
        //내용 추가
        $("#box1").html("<a href='#'>처처처첫번째!!<a/>");
        $("#box2").text("<a href='#'>두두두두번째!!<a/>");
        
        $("input[name='id']").val("내아이디는 code");
        
    })
 
</script>
</head>
<body>
    <div id="box1"><div>첫번째 빡스</div></div>
    <div id="box2"><div>두번째 빡스</div></div>
    <input name="id" type="text">
</body>
</html>
cs


 실행결과 및 설명 




 

위의 이미지는 실행결과입니다.

(첫번째 이미지는 웹페이지, 두번째이미지는 콘솔로그영역)


html 영역을살펴보겠습니다.


   <div id="box1"><div>첫번째 빡스</div></div>
    <div id="box2"><div>두번째 빡스</div></div>
    <input name="id" type="text">


div 태그 2개와 input 태그 1개를 미리 만들어주었습니다.


스크립트 영역을 살펴보겠습니다.


   $(function (){
        
        //내용확인
        console.log($("#box1").html());
        console.log($("#box2").text());
        
        //내용 추가
        $("#box1").html("<a href='#'>처처처첫번째!!<a/>");
        $("#box2").text("<a href='#'>두두두두번째!!<a/>");
        
        $("input[name='id']").val("내아이디는 code");
        
    })

내용확인을 하기위해 콘솔로그 스크립트를 사용하였습니다.

       console.log($("#box1").html());
        console.log($("#box2").text());

콘솔로그에 출력될내용으로 $("#box1").html() ,$("#box2").text() 을 출력하였습니다.
그결과 html 함수는 테그를 포함하여 모두 출력이 되었고..
text 함수는 텍스트(내용)만 출력된것을 콘솔창에서 확인할수 있었습니다.

그리고 내용추가 및 값을 추가하기위해 다음과 같이 작성하였습니다.

       $("#box1").html("<a href='#'>처처처첫번째!!<a/>");
        $("#box2").text("<a href='#'>두두두두번째!!<a/>");
        
        $("input[name='id']").val("내아이디는 code");

비교를 위해 태그요소가 담긴 내용들을 각각 html, text 넣어주었습니다.
그리고 마지막으로 input 요소에 값을 "내아이디는 code" 라고 넣어주었습니다.
그결과 위와같은 출력화면을 확인할수 있습니다.



 attr, removeAttr, prop (속성 값확인 및 추가/제거)


제이쿼리에서는 기본함수로 html 태그들의 속성의 값을 확인하고 추가/변경/삭제를 할수있습니다.


속성값을 추가 하기위해선 attr 기본함수를 사용하고

속성값을 제거 하기위해선 removeAttr 기본함수를 사용합니다.


속성 값을 확인하기위한 기본함수는 attr, prop 있습니다.

(제이쿼리 1.6 버전이상에서는 prop 을 사용할수 있습니다)

속성값 확인 하는 기본함수는왜 2개일까요?

그건 취급하는 정보가 다릅니다. 즉 읽는 방식이 다른것입니다.

깊게 들어가면 내용이 어렵기에.. 

추후 별도로 글을작성하도록 하겠습니다.


우선 읽는방식이 다르다고 생각하시면 될것같습니다.

(attr 은 html 속성의 값을 읽는것이고..prop 은 property 를 읽는것 입니다...)


 사용방법 및 문법 


1. 속성 값 확인

attr("속성명");

또는

prop("속성명");

2. 속성 값 변경

attr("속성명","값");

3. 속성제거

removeAttr("속성명");


 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(function (){
        
        //속성변경
        $("#box1").attr("id","change");
        
        //속성값 확인 (attr)
        console.log($("#change").attr("id"));
        //속성값 확인 (prop)
        console.log($("#change").prop("id"));
        
        //속성 삭제
        $("#box2").removeAttr("class");
        console.log($("#box2").attr("class"));
        
        
    })
 
</script>
</head>
<body>
    <div id="box1">첫번째 빡스</div>
    <div class="box2" id="box2">두번째 빡스</div>
</body>
</html>
cs


 실행결과 및 설명 


 


위의 이미지는 실행결과입니다.

(콘솔로그 영역)


html 영역을살펴보겠습니다.


   <div id="box1">첫번째 빡스</div>
    <div class="box2" id="box2">두번째 빡스</div>


div 태그 2개를 넣어주었습니다.


스크립트 영역을 살펴보겠습니다.


   $(function (){
        
        //속성변경
        $("#box1").attr("id","change");
        
        //속성값 확인 (attr)
        console.log($("#change").attr("id"));
        //속성값 확인 (prop)
        console.log($("#change").prop("id"));
        
        //속성 삭제
        $("#box2").removeAttr("class");
        console.log($("#box2").attr("class"));
        
        
    })

속성값인 id 를 변경하기위해 attr 함수를 다음과 같이 사용하였습니다.
$("#box1").attr("id","change");
즉 id가 box1 인 요소를 선택하고 id 를 change 로 변경하였습니다.

그리고 속성값 확인을하기위해 attr, prop 함수를 사용하였습니다.

       //속성값 확인 (attr)
        console.log($("#change").attr("id"));
        //속성값 확인 (prop)
        console.log($("#change").prop("id"));

콘솔로그 출력내용에 $("#change").attr("id") , $("#change").prop("id") 을 출력하였습니다.
즉 id가 change 인 요소를 선택하고 id 을 확인하였습니다.

그다음 속성 삭제를 하기위하여 다음과 같이 작성하였습니다.

       //속성 삭제
        $("#box2").removeAttr("class");
        console.log($("#box2").attr("class"));

속성 class 를 삭제하기위해
 $("#box2").removeAttr("class"); 
id 가 box2 인 요소를 선택하고 class 속성을 삭제하였고

삭제가 잘되었는지 콘솔로그를 사용하여
console.log($("#box2").attr("class"));
id 가 box2 인 요소를 선택하고 class 속성을 출력하였습니다.

그결과 위와같이 내용이 나오는것을 확인할수 있습니다.



 addClass, removeClass (클래스 추가/제거)


제이쿼리를 사용하여 클레스를 추가 해줄수 있으며 또한 제거할수도 있습니다.

제이쿼리에서 클레스를 추가하기위해선 addClass 를 사용하여 쉽게 추가할수있습니다.

반대로 클레스를 제거하기위해서는 removeClass 를 사용하여 클레스를 제거할수도있습니다.


 사용방법 및 문법 


1. 클레스 추가


addClass("클래스명");


2. 클레스 제거


removeClass();



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(function (){
        
        $("#box1").addClass("box1");
        $("#box2").removeClass();
    })
 
</script>
<style type="text/css">
    .box1 {background-color: yellow; width: 300px; height: 30px;}
    .box2 {background-color: gray; width: 300px; height: 30px;}
</style>
</head>
<body>
    <div id="box1">첫번째 빡스</div>
    <div class="box2" id="box2">두번째 빡스</div>
</body>
</html>
cs


 실행결과 및 설명 



위의 이미지는 실행결과입니다.


html 영역을살펴보겠습니다.


<style type="text/css">
    .box1 {background-color: yellow; width: 300px; height: 30px;}
    .box2 {background-color: gray; width: 300px; height: 30px;}
</style>
</head>
<body>
    <div id="box1">첫번째 빡스</div>
    <div class="box2" id="box2">두번째 빡스</div>
</body>


div 태그를 2개 생성하였습니다.

그리고 사전에 box1, box2 클래스의 스타일을 정의해 두었습니다.


스크립트 영역을 살펴보겠습니다.


<script type="text/javascript">
    
    $(function (){
        
        $("#box1").addClass("box1");
        $("#box2").removeClass();
    })
 
</script>


첫번째 div 에 클래스를 생성해주었습니다.

$("#box1").addClass("box1");

즉 id 가 box1 인 요소를 선택하여 class 명이 box1 class 를 추가해주었습니다. 


두번째 div 에 클래스를 제거해주었습니다.

$("#box2").removeClass();

즉 id 가 box2 인 요소를 선택하여 class 를 제거해주었습니다. 


그결과 위와같은 페이지의 결과를 확인할수 있습니다.




 css (스타일 추가 및 검사)


이미 이전강의들에서 css 변경을 위하여 제이쿼리 기본함수인 css 함수를 많이 사용하였습니다.

html 요소의 css 를 추가 및 변경하기 위해 사용하는 기본함수입니다.


 사용방법 및 문법 


css("css 속성","값");



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(function (){
        
        
        
        $("#job > li").each(function(i, item) {
            
            //랜덤 색상 만들어줌
            //자바스크립트 기본함수인 Math, toString 사용
            var colorCode = "#" + Math.round(Math.random() * 0xffffff).toString(16);
            $(item).css("background",colorCode);
            
            colorCode = "#" + Math.round(Math.random() * 0xffffff).toString(16);
            $(item).css("color",colorCode);
            
        })
        
        //아래의 스크립트 소스는 위와 동일한 결과를 얻을수 있습니다.
        /* var liList = $("#job > li");
        $.each(liList,function(i, item) {
            
            //랜덤 색상 만들어줌
            //자바스크립트 기본함수인 Math, toString 사용
            var colorCode = "#" + Math.round(Math.random() * 0xffffff).toString(16);
            $(item).css("background",colorCode);
            
        }) */
        
    })
 
</script>
</head>
<body>
    <ul id="job">
        <li>학생</li>
        <li>회사원</li>
        <li>기타</li>
    </ul>
</body>
</html>
cs


 실행결과 및 설명 



위의 이미지는 실행결과입니다.

(css 함수는 이전 글에서부터 사용을 하였기에 설명을 생략하도록 하겠습니다..)




 remove, empty (객체 제거, 객체 내부 제거)


제이쿼리 기본함수로 객체를 제거하거나 객체의 내부만 제거할수있습니다.

사용방법은 다음과 같습니다.


 사용방법 및 문법 


1. 객체 제거


remove();


2. 객체 내부 제거


empty();



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(function (){
        
        $("#box1").empty();
        $("#box2").remove();
    })
 
</script>
<style type="text/css">
    .box1 {background-color: blue; width: 300px; height: 30px;}
    .box2 {background-color: gray; width: 300px; height: 30px;}
</style>
</head>
<body>
    <div class="box1" id="box1">첫번째 빡스</div>
    <div class="box2" id="box2">두번째 빡스</div>
</body>
</html>
cs


 실행결과 및 설명 


위의 이미지는 실행결과입니다.


html 영역을살펴보겠습니다.


<style type="text/css">
    .box1 {background-color: blue; width: 300px; height: 30px;}
    .box2 {background-color: gray; width: 300px; height: 30px;}
</style>
</head>
<body>
    <div class="box1" id="box1">첫번째 빡스</div>
    <div class="box2" id="box2">두번째 빡스</div>
</body>


div 태그를 2개 생성하였습니다.

그리고 사전에 box1, box2 클래스의 스타일을 정의해 두었습니다.



스크립트 영역을 살펴보겠습니다. 


<script type="text/javascript">
    
    $(function (){
        
        $("#box1").empty();
        $("#box2").remove();
    })
 
</script>

첫번째 div 태그의 내용물을 삭제하기위하여 empty 함수를 사용하였습니다.
$("#box1").empty();
즉 id 값이 box1 인 요소의 내용을 삭제하였습니다.

그다음 객체를 삭제하기위해 remove 함수를 사용하였습니다.
$("#box2").remove();
즉 id 값이 box2 인 요소를 삭제하였습니다.

그결과 위와같은 페이지의 결과를 확인할수 있습니다.



 글을 마치며..


이렇게해서 제이쿼리 기본함수에 대해서 알아보았습니다.

위에서도 말씀드렸다싶이 제이쿼리 기본함수는 많이 있습니다.

그중에서도 많이 사용하는 기본함수만을 자세히 알아보았습니다.

오늘 알아본 기본함수들은 정말 많이 사용되기때문에..

꼭! 숙지하시길 바랍니다 ㅎ

모두 수고하세요! 


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 


구독을 원하시면 PC로 접속하여

좌측 하단의 "국브스토리 구독하기" 버튼을 눌러주세요!



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

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[jQuery 6강] 제이쿼리 이벤트  (0) 2019.03.30
[jQuery 4강] 제이쿼리 DOM (문서객체)  (0) 2019.03.28
[jQuery 3강] 선택자  (0) 2019.03.27
[jQuery 2강] 제이쿼리 기본문법  (0) 2019.03.26
[jQuery 1강] 제이쿼리 개요 및 개발환경구축  (0) 2019.03.22
댓글